一、选择符的权重
选择符的权重:id>class>标签。
如果用数字代表权重:
内联样式表 1000;
id 100;
class 10;
标签 1;
伪类选择符 10;
通配符 0;
其中,包含选择符的权重为权重之和,例
box div{} 权重为100+1=101;
.warp .con p{} 权重为10+10+1=21
群组选择符的权重是不会变化的,保持原来的权重值。
注:!important的权重是最高的。
二、CSS的层叠性
CSS的层叠性是因为产生了权重关系。
1.!important是最重要的样式,权重级别最大。
2.内联样式表>内部/外部。
其中,内部和外部样式表的权重一样,但是后面写的会把前面写的覆盖掉。
3.选择符的权重:id>class/伪类>标签。
- 开发者样式权重 > 读者(用户)样式 > 浏览器样式。
- 当权重相同的时候,后写的样式会被前写的样式覆盖掉。
三、CSS的语法
1.CSS的语法为 选择符{属性:属性值;}
CSS常用的属性有:width\height\background\color\border…
2.CSS的属性值分为常规属性值和法定属性值。常规属性值即100px\200px\300px…;法定属性值即官方指定的单词,具有某种意义。
四、CSS的文本属性
1.font-size:; 控制文本大小
a.为了消除系统之间显示差异,规定:16px 为标准字体大小;
b.文本大小设置,设置为偶数;
c.PC端项目,设置最小尽量别低于12px ;
d.从ps中获取文本大小,汉字量取文本高度。
e.文本单位:px \ em \ pt(磅)【常用在印刷领域】
12px == 9pt
em
( 相对大小单位,相对于父元素的font-size值而定 )
(默认情况下, 1em == 16px)
f.以下内容作为了解:
xx-small =9px
x-small =11px
small =13px
medium =16px
large =19px
x-large =23px
xx-large =27px
2.color:; 控制文本中的颜色
颜色值:
a:十六进制表示颜色值:
16进制数字:0 - 9 ,a - f
颜色值: #ff0000
6个数字:
前两位 红色
中间两位 绿色
最后两位 蓝色
b: RGB(255,0,0) 模式
拓展: rgba(255,0,0,0.5);,其中最后一位是透明度,0为全透明,1为不透明。 - font-family:;控制的是网页中字体类型。
默认的字体类型:“微软雅黑”
系统能支持的字体:web安全字体:微软雅黑、宋体、楷体…
英文默认的字体:Arial
语法:
font-family:字体1,字体2,字体3,…
注:
a:中文字体必须放在引号里面
b:如果一个字体多个单词组成 也要放在引号里面
c:如果字体是一个单词 不需要引号。
d:先写英文字体,后写中文字体。
4.font-weight:;控制文本是否加粗
属性值:
bold 加粗
bolder 加粗
normal 清除加粗,恢复常规文本
100 - 900
100 - 500:不加粗
600 - 900:加粗的状态
一般如果使用常规属性值,常用的是100. - font-style:;控制文本的倾斜
属性值:
italic 倾斜
oblique 倾斜(倾斜幅度更大,但是一般不会有明显变化)
normal 恢复常规文本
6:line-height:; 控制文本的行高。
a: 从ps设计图上:怎么获取行高?
从第一行开始量到第二行开始。
b:单行文本:
如果让单行文本在容器里面上下居中,line-height设置容器高度即可
显示状态:
小于容器高度的时候:文本往上移动
大于容器高度的时候:文本往下移动
7.text-align:; 控制文本的水平对齐方式
属性值:
center 居中对齐
left 左对齐
right 右对齐
justify 两端对齐
8.text-decoration:; 文本修饰(下划线、上划线、删除线)
属性值:
None 清除下划线
Underline 添加下划线
overline 添加上划线
line-through 添加删除线 - text-indent:; 缩进
text-indent:2em;首行缩进:
text-indent能设置负值:文字往左走。(悬挂式缩进)
10.字间距、词间距
letter-spacing:; 字间距
word-spacing:; 词间距
11:.text-transform:; 控制文本大小写。
属性值:
uppercase 大写
lowercase 小写
capitalize 每个单词的首字母大写
五、浮动
属性:float
属性值:left
right
none
特点:
a.添加浮动之后,元素是不占据空间。
b.如果让多个元素横向进行排列,所有的排列的元素,都必须添加浮动。
c.如果子元素添加浮动,宽度大于父元素的时候,后面的元素被挤到下一行