摘要:第一章宋体的介绍宋体层叠样式表,它是宋体的缩写,作用就是给宋体标签加表现形式样式宋体显示,如字体,图片,列表,位置等。宋体在制作网页时必须是背景图宋体宋体案例
1.CSS:“层叠样式表”,它是cascading style sheets的缩写,作用就是给HTML标签加表现形式(样式-显示),如:字体,图片,列表,位置等。
在浏览器中可以看到部分:
HTML:“超文本标记语言”,主要作用把内容(文字、图片、视频等)放入网页中--结构
CSS:“层叠样式表”,主要作用给HTML进行样式的显示,如何的布局--样式
Javascript:“浏览器的脚本语言”,主要作用给HTML加动态效果(特效)--行为
CSS特点:
可以非常精准的定位,定位某个或某些标记,给这些标记加样式
HTML和CSS代码分离,减少后期工作量
2.1 CSS 的基本语法
CSS样式表由语法规则组成,由多个语法规则组成样式表
一个CSS语法规则由“选择器”和“声明语句”组成
选择器:如何的精准定位选择到某一个或某些HTML标记的方法,选择器有很多方式
声明语句:就是如何去给HTML标记加样式的属性和值,每个声明语句用分号结束,多个声明语句用花括号扩起来,这个时候就是给某个或某些标记加这个里面的所有样式(属性和值)
案例:
2.2CSS的引入方式
1. 内嵌方式:把CSS样式表通过一对标签写在HTML文件的head标签中,当成HTML的标记来使用,一般情况都是写到head中,不推荐写到别的地方:
语法:
语法规则 |
案例:
2.行内方式:把CSS样式成html的一个属性来写,如:
语法:
KKK |
案例
3.外链方式:把CSS样式表写到一个以css(indx.css)为结尾的文件中,把这个文件引入到某个html文件中,当前文件就会有CSS的效果实现,好处:一个css文件可以给多个HTML文件使用。
语法:
css文件路径”/> |
案例:
4. @import:可以在一个CSS文件中再次引用CSS
@import url(“要引入的文件”) |
2.3选择器
标准选择器:通配符选择器,标记选择器,类选择器,id选择器
1. 通配符选择器
语法:*{color:red}
注意:通配符是选择上所有的标记,但是少用,ie6不兼容
案例
2. 标记选择器:
说明:直接写标记名来当成选择器来使用,选择器那个标记当前这个页面所有的都会发生改变
语法:标记名{color:red}
案例
3. 类选择器:又称“class”选择器
说明:每个HTML标记都有一个公共属性,class属性配合使用的就,这个CSS属性就是给某些某个标记加一类样式
语法:.class属性的值{color}
注意:类名可以给不同的标记加上,这时候这些标记统称为一类
再写css选择器是必须加(.)
建议不管是某个或某些标记都是用类的方式
案例:
4. id选择器
说明:每个HTML标记都有一个公共的属性id,每个id必须是唯一的
语法:#id的值{color:red;}
注意:id选择器只是给一个标记加样式,一般用于js的动态效果使用。
Id和class是分开使用的,id是js使用的,class是给css使用的
案例:
复杂选择器:多元素选择器,后代选择器,子类选择器,伪类选择器
5. 多元素选择器:
说明:把CSS多个基本选择器进行组合,组合成多种的选择方式
语法:div,p,ul,li,class,my{color:red}
注意:大型的网站一般都是用多元素来替代通配符
每个选择器都用(,)隔开
6. 后代选择器
说明:在制作网站时会出现“嵌套”的形式,有可能是多级,而且每个多级标记相同,这个时候就可以选择某个标记中的某个内容
语法:第一代 第二代 第三代{color:red;}
注意:如果某一代有相同的标记,需要每代都写清楚
p标签中不能嵌套一些块元素
案例:
1. 子类选择器
说明:就是选择一代(或者子孙)
语法:父类 (选择器)>子类 (选择器)
案例:
7.伪类选择器
Link::默认状态
Hover:放上状态
Active:当点击时的状态(不放手)
Visited:访问过的状态
语法: 选择器:状态{color :red;}
注意:一般是默认状态和访问过的状态设置成一样的效果
所有的标记都可以加伪类选择器
案例:
第三章:CSS常用的属性
一:文字属性
属性名 |
描述 |
属性值 |
Font-size |
文字大小 |
像素(px)em(倍数)百分比(%) |
Font-family |
字体类型 |
宋体,微软雅黑,黑体等 值可以是一个或多个,用逗号隔开 |
font-style |
斜体
|
Italic(斜体) |
Font-weight |
加粗 |
Bold(加粗)100-900 |
案例:
二:文本属性
属性名 |
描述 |
属性值 |
Color |
文本颜色 |
3种 rgb(255,255,255) 十六进制(#cccccc) 单词(yellow) |
Text-align |
文本水平对齐方式 |
Left|center|right |
Text-decoration |
文本修饰线 |
Underline(下划线)overline(上划线)line-through(删除线) none(无 ) |
line-height |
行高 |
设置当前行的高度,目的的就是让网文本上下居中,高度和行高一致 |
Text-indent |
首行缩进 |
数值(px)如果是12号字,基本是翻倍 |
Letter-spacing |
字符间距 |
数值(px) |
Word-spacing |
单词间距 |
数值:(px) |
案例:
三:尺寸使用
说明:其实就是元素的宽和高,任何标记元素都有宽和高
属性名 |
描述 |
属性值 |
width |
宽 |
像素(px)百分比(%) |
Height |
高 |
像素(px)百分比(%) |
Px |
像素 |
浏览器都是由像素点(显示贞) |
注意:块元素可以设置宽和高,行内元素设置宽和高是不起作用的,高不设内容自动撑出来 |
案例:
、
四:列表属性
说明:对ul,ol,li,dl,dt,dd进行样式的设置
属性名 |
描述 |
属性值 |
last-style-type |
列表的符号样式类型 |
None |
|
||
List-style-type |
列表图片 |
Url 如 list-style-type:url(../01.jpg) |
List-style-position |
列表符号的位置只对li |
Inside outside |
list-style |
把三个属性的值都放到一个属性中 |
None url inside 如果三个属性都有按照上面的顺序 没有的可以不写
|
案例
TIP:边框
Border 粗细 样式 颜色 如:border:1px dashed red
Border-bottom: 下边框
五:背景属性
属性名 |
描述 |
属性值 |
|||||||||
Background-color |
背景颜色 |
16进制 |
|||||||||
Background-image |
背景图片 |
Url |
|||||||||
Backtround-repeat |
背景平铺方式 |
no-repeat repeat-x repeat-y |
|||||||||
Background-position |
内景定位 |
x轴和Y轴定位 如position:left top 设置左右和上下 |
|||||||||
定位方式: 1. 单词定位方式:left|center|right top|center|bottom 单词定位可以理解为九宫格
2. 像素定位方式:background-position:50px 100px; 离左边50 离上面100 3. 百分比方式:background-position:10% 20% 离左边 离右边 4. 混合方式: background-position:center 100px
|
|||||||||||
Background-attachment |
背景固定 |
Scroll(滚动 默认)fixed(固定) |
|||||||||
Background |
简写形式 |
颜色 图片 平铺 定位固定 其中的选项可以不写 |
案例:
精灵图:
说明:就是把很多的小图片放入到一个大的背景图中,这个图称为“精灵图”。
在制作网页时必须是背景图
案例:
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/1598.html
摘要:前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。它能够为我们提供类似于预处理器命名空间等多方面的辅助。 前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID:f...
摘要:介绍背景最近和部门老大,一起在研究团队前端新手村的建设,目的在于帮助新人快速了解和融入公司团队,帮助零基础新人学习和入门前端开发并且达到公司业务开发水平。 showImg(https://segmentfault.com/img/remote/1460000020063710?w=1300&h=646); 介绍 1. 背景 最近和部门老大,一起在研究团队【EFT - 前端新手村】的建设...
CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 p标签 在head中加入style标签 p { color: #FFF000;} 链接方式 总结CSS 选择器名称 { 属性名:属性值; ……. } 属性与属性之间用 分号...
摘要:前端技术前文了解了什么是前端,那么前端技术到底有哪些呢最核心的就这三个什么是,超文本标记语言,标准通用标记语言下的一个应用那么超文本标记语言又是什么呢哈哈,没完没了是吧,学习就是要这种没完没了的劲。前端技术 前文了解了什么是前端,那么前端技术到底有哪些呢?最核心的就这三个: html/html5 css/css3 javascript 什么是HTML HyperText Mark...
阅读 2781·2021-11-22 14:44
阅读 524·2021-11-22 12:00
阅读 3660·2019-08-30 15:54
阅读 1537·2019-08-29 17:15
阅读 1873·2019-08-29 13:50
阅读 1086·2019-08-29 13:17
阅读 3491·2019-08-29 13:05
阅读 1167·2019-08-29 11:31