前端基础（3）：选择符的权重和CSS核心属性

选择符的权重及CSS核心属性

一、CSS选择符的权重

css中用四位数字表示权重，权重的表达方式如：0，0，0，0
类型选择符的权重为0001
class选择符的权重为0010
id选择符的权重为0100
子选择符的权重为0000
属性选择符的权重为0010
伪类选择符的权重为0000
伪元素选择符的权重为0010
包含选择符的权重：为包含选择符的权中之和
内联样式的权重为1000
继承样式的权重为0000

二、CSS层叠概念

作用于同一个元素上的多个样式会出现冲突，当多个样式发生重叠，优先级高的样式会生效*

三、CSS属性及属性值概念

属性：指定选择符所具有的属性 属性值：法定属性值和常见的数值加单位

选择符{属性：属性值 属性：属性值}

A、css文本属性

1）文本大小：`

{font-size:value;}`

16px/ppi为标准字体大小默认值，即1em，默认情况下1em=16px；
2）文本颜色：`

{color：颜色值;}`

用颜色单词或16进制值表示颜色，当用十六进制表示颜色值时，需要在颜色值前加“#”，例：#fa 00 00;
3)文本字体：

`{font-family:字体1,字体2,字体3;}`

当字体是中文字体时，需加双引号；
当英文字体中有空格时，需加双引号如（“Times New Roman”）
当英文字体只有一个单词组成是不加双引号；如：（Arial）；
4)文字加粗

font-weight:bold(加粗)；

用数值表示：100-400 一般；500 常规字体；600-900 加粗字体；
5）文字倾斜

font-style:italic/oblique/normal(取消倾斜)；

italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.
6）水平对齐方式

text-align:left/right/center/justify(两端对齐);

7）垂直对齐方式

vertical-align:top/bottom/middle/baseline;

8)文字行高

line-height:normal/value;

9)文本修饰

text-decoration:none/underline/overline/line-through;

无/下划线/上划线/删除线
10）首行缩进

{text-indent:value;}

11)大小写字母切换

text-transform:none/capitalize/uppercase/lowercase;

无/首字母大写/全大写/全小写
12）字间距与词间距

letter-spacing文本汉字或英文字母间距

word-spacing控制英文单词词间距
13）小型大写字母

font-variant:normal/small-caps

浏览器上显示小型大写字母字体

B、css列表属性

1）列表符号样式

list-style-type:disc/circle/square/none;

实心圆，空心圆，实心方块，无
2）用图片做列表符号

list-style-image:url()

3)列表符号位置

list-style-position:outside/inside;

`list-style:none;`无列表符号

C、css背景属性

1）背景颜色

选择符：{background-color:颜色值;}

2)背景图片设置

`background-image:url()`

3)背景图片平铺属性

选择符{background-repeat:no-repeat/repeat/repeat-x/repeat-y;}

不平铺/平铺/横向平铺/纵向平铺
4）背景图固定

选择符{background-attachment:scroll/fixed;}

滚动/固定
5）背景图片位置

选择符{background-position:left/center/right/数值/top/center/bottom/数值;}

水平：left/right/center/值
垂直：top/bottom/center/值
background-position:值1（水平） 值2（垂直）
当两个值都是center的时候写一个值就可以代表的是水平位置和垂直位置
背景属性缩写：

background:属性值1 属性值2 属性值3；
例：background:url() no-repeat center top #fff1f1;

四、css浮动属性详解

语法：

float:none/left/right;

left 往左边浮动
right 往右边浮动
none 不浮动
作用：浮动对象会向左或者右移动直到遇到边缘或者另一个块元素元素为止。

清除浮动：

clear:none/left/right/both;

可以理解为打破横向排列。
语法：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象