一、CSS基础属性
举列:h1{ color:red; text-align: center; } 选择器:h1 声明块:{color:red; text-align: center;}
二、CSS选择器
CSS选择器,决定了将规则应用到哪些元素上
三种基本选择器:元素选择器、类选择器、ID选择器
除此之外,CSS还提供了大量的选择器
三、声明冲突
四、层叠概述
什么是层叠:层叠是一种机制,用于解决CSS声明冲突
多个相同的CSS声明(属性),应用到同一个元素上
五、层叠过程:
比较优先级:每一个声明都有一个优先级
当发生冲突时,优先级高的会保留,优先级低的会被淘汰
一个声明的优先级,与它的来源和重要性有关
1.浏览器默认样式表中的声明
2.用户样式表中的普通声明
3.作者样式表中的普通声明
4.作者样式表中的重要声明
5.用户样式表中的重要声明
优先级由低到高排序
比较特殊性:每一个声明都有一个特殊性(Specificity)
当发生冲突时,特殊性高的会保留,特殊性低的会被淘汰
一个声明的特殊性,取决于规则适用范围的大小
规则适用范围越大,特殊性越低,适用范围越小,特殊性越高
具体规则:
示列:
每一个声明都有一个特殊性(Specificity)
当发生冲突时,特殊性高的会保留,特殊性低的会被淘汰
一个声明的特殊性,取决于规则适用范围的大小
规则适用范围越大,特殊性越低,适用范围越小,特殊性越高
比较源次序:
最后出现的声明胜出,其他的全部淘汰
该规则的实际应用:
CSS Reset代码前置
a元素的伪类书写顺序
六、继承
继承:继承(inherit),指子元素会自动拥有父元素的某些CSS属性
CSS代码:body{color:red}
HTML代码:
<body> body中的内容 <p>p元素中的内容</p> </body>
p元素自动拥有了父元素body的color属性
总结
美化文本:
第一部分
字体大小【font-size】
含义:字符框的高度
可继承
默认值:medium
取值
预设值【了解】
medium:中等字号
larger:大字号
smaller:小字号
数值:
px【常用】:绝对字体大小
em【常用】:相对于父元素的字体大小,若没有父元素,则使用基准字号
基准字号:浏览器设置的默认字体大小,通常为16px,可更改
%:原理同em,例如200%,相当于2em,50%,相当于.5em
rem:相对于基准字号
加粗字体【font-weight】
将【font-weight】设置为【bold】,以加粗文字,该属性可继承
倾斜字体【font-style】
将【font-style】设置为【italic】,以倾斜文字,该属性可继承
字间距【letter-spacing】
设置【letter-spacing】的值为px或em,可控制文字间的间隙,该属性可继承
首行缩进【text-indent】
可实现第一个文字向后缩进
给文字划线【text-decoration】
设置【text-decoration】属性,可以给文字划线
第二部分
修饰首字母【伪元素选择器 ::first-letter】
【::first-letter】可选中元素中的第一个文字
修饰首行【伪元素选择器 ::first-line】
【::first-line】可选中元素中的第一行文字
修饰选中文字【伪元素选择器 ::selection】
【::selection】可选中被用户框选的文字
字体类型
概念:衬线字体和非衬线字体
修改字体类型【font-family】
使用【@font-face指令】加载web字体
使用图标字体
美化边框
圆角边框【border-radius】
圆角边框原理图
使用圆角边框的常见场景
普通的圆角边框
圆形边框
圆形图片
美化背景
背景图
使用【background-image】设置背景图片
使用【background-repeat】设置图片重复方式
repeat:【默认值】从左到右从上到下重复
no-repeat:不重复
repeat-x:仅在x轴方向上重复
repeat-y:仅在y轴方向上重复
使用【background-position】设置图片在边框盒中的位置
预设值
left、right、top、bottom、center
数值
使用数值可实现从雪碧图(Sprite)中取得部分图像
示例
使用【background-size】设置背景图尺寸
预设值
数值
使用【background-attachment】固定背景图
scroll:【默认值】背景图跟随元素移动
fixed:背景图固定
使用速写属性【background】统一设置
background:背景图 位置 / 尺寸 重复方式 固定方式 背景颜色
使用多背景图
背景图练习
背景渐变
线性渐变:【background-image:linear-gradient(...)】
径向渐变(圆形渐变):【background-image:radial-gradient(...)】
透明度和鼠标样式
透明度【opacity】和alpha通道
鼠标样式
阴影
文字阴影【text-shadow】
盒子阴影【box-shadow】
示列:
继承发生的场景:
该属性是可继承的属性,该属性在样式表中没有声明