CSS常用属性

1. CSS字体属性

1.1 字体大小

属性名：font-size

作用：控制字体的大小

语法：

p {  
	font-size: 20px; 
}

1. 谷歌浏览器支持的最小文字为 12px，默认的文字大小为 16px，并且 0px 会自动消失
2. 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
3. 可以给 body 指定整个页面文字的大小
4. 由于字体设计原因，文字最终呈现的大小，并不一定与 font-size 的值一致，可能大，也可能小
5. 通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些

1.2 字体族

属性名：font-family

作用：控制字体类型

语法：

p{
	font-family："微软雅黑"；
}

1. 各种字体之间必须使用英文状态下的逗号隔开
2. 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
3. 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
4. 使用字体的英文名字兼容性会更好
5. 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上 serif （衬线字体）或 sans-serif （非衬线字体）

1.3 字体风格

属性名：font-style

作用：控制字体是否为斜体

语法：

p {  
	font-style: normal;
}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式
italic	浏览器会显示斜体的字体样式（推荐使用）
oblique	斜体（强制倾斜产生的斜体效果）

1.4 字体粗细

属性名：font-weight

作用：控制字体的粗细

语法：

p {  
    font-weight: bold; 
}
p {  
    font-weight: 600; 
}

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
lighter	细
bolder	很粗
100~1000	100~300 等同于 lighter，400~500 等同于 normal，而 600 及以上 等同于 bold，注意这个数字后面不跟单位

1.5 字体的复合写法

属性名：font，可以把上述字体样式合并成一个属性

作用：将上述所有字体相关的属性复合在一起编写

编写规则：

1. 字体大小、字体族必须都写上
2. 字体族必须是最后一位、字体大小必须是倒数第二位
3. 各个属性间用空格隔开

body {   
font: font-style  font-weight  font-size/line-height  font-family;
}

2. CSS文本属性

2.1 文本颜色

属性名：color

作用：控制文字的颜色

可选值：

1. 颜色名
2. rgb 或 rgba
3. HEX 或 HEXA （十六进制）（开发中最常用）
4. HSL 或 HSLA

语法：

div { 
    color: red;
}

2.2 文本间距

字母间距： letter-spacing

单词间距： word-spacing （通过空格识别词）

属性值为像素（ px ），正值让间距增大，负值让间距缩小

2.3 文本修饰

属性名：text-decoration

作用：控制文本的各种装饰线

语法：

div { 
	text-decoration：underline;
}

属性值	描述
none	默认，没有装饰线
underline	下划线，链接自带下划线
overline	上划线
line-through	删除线

可搭配如下值使用：

1. dotted ：虚线
2. wavy ：波浪线
3. 也可以指定颜色

2.4 文本缩进

属性名： text-indent

作用：控制文本首字母的缩进

语法：

div { 
    text-indent：20px；
}
div { 
    text-indent：2em；
}

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小

2.5 文本对齐_水平

属性名：text-align

作用：控制文本的水平对齐方式

语法：

div { 
    text-align: center;
}

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

2.6 行高

属性名：line-height

作用：控制一行文字的高度

可选值：

1. normal ：由浏览器根据文字大小决定的一个默认值
2. 像素 ( px )
3. 数字：参考自身 font-size 的倍数（很常用）
4. 百分比：参考自身 font-size 的百分比

语法：

p { 
    line-height: 26px;
    line-height: 1.5; 
    line-height: 150%;
}

行高注意事项：

1. line-height 过小会怎样？—— 文字产生重叠，且最小值是 0 ，不能为负数
2. line-height 是可以继承的，且为了能更好的呈现文字，最好写数值
3. line-height 和 height 是什么关系？
   1. 设置了 height ，那么高度就是 height 的值
   2. 不设置 height 的时候，会根据 line-height 计算高度

应用场景：

1. 对于多行文字：控制行与行之间的距离
2. 对于单行文字：让 height 等于 line-height ，可以实现文字垂直居中（由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感）

2.7 文本对齐_垂直

顶部：无需任何属性，在垂直方向上，默认就是顶部对齐

居中：对于单行文字，让 height = line-height 即可

底部：对于单行文字，目前一个临时的方式： 让 line-height = ( height × 2 ) - font-size - x ，备注： x 是根据字体族，动态决定的一个值

2.8 vertical-align

属性名： vertical-align

作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式

常用值：

1. baseline （默认值）：使元素的基线与父元素的基线对齐
2. top ：使元素的顶部与其所在行的顶部对齐
3. middle ：使元素的中部与父元素的基线加上父元素字母 x 的一半对齐
4. bottom ：使元素的底部与其所在行的底部对齐

特别注意： vertical-align 不能控制块元素

3. CSS列表属性

列表相关的属性，可以作用在 ul 、 ol 、 li 元素上

3.1 list-style-type

功能：设置列表符号

属性值：

• none：不显示前面的标识
• square：实心方块
• disc：圆形
• decimal：数字
• lower-roman：小写罗马字
• upper-roman：大写罗马字
• lower-alpha：小写字母
• upper-alpha：大写字母

3.2 list-style-position

功能：设置列表符号的位置

属性值：

• inside ：在 li 的里面
• outside ：在 li 的外边

3.3 list-style-image

功能：自定义列表符号

属性值：url(图片地址)

3.4 list-style

功能：复合属性

属性值：没有数量、顺序的要求

4. CSS表格属性

4.1 边框相关属性

CSS 属性名	功能	属性值
border-width	边框宽度	CSS 中可用的长度值
border-color	边框颜色	CSS 中可用的颜色值
border-style	边框风格	none 默认值 solid 实线 dashed 虚线 dotted 点线 double 双实线
border	边框复合属性	没有数量、顺序的要求

注意：以上 4 个边框相关的属性，其他元素也可以用

4.2 表格独有属性

CSS 属性名	功能	属性值
table-layout	设置列宽度	auto 自动，列宽度根据内容计算（默认值） fixed 固定列宽，平均分
border-spacing	单元格间距	CSS 中可用的长度值 （生效的前提是单元格边框不能合并）
border-collapse	合并单元格边框	collapse 合并 separate 不合并
empty-cells	隐藏没有内容的单元格	show 显示，默认值 hide 隐藏 （生效的前提是单元格不能合并）
caption-side	设置表格标题位置	top 上面，默认值 bottom 在表格下面

注意：以上 5 个属性，只有表格才能使用，即 <table> 标签

5. CSS的背景

通过 CSS 背景属性，可以给页面元素添加背景样式

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

5.1 背景颜色

样式名称：background-color 定义元素的背景颜色

使用方式：

background-color：颜色值；

其他说明：元素背景颜色默认值是 transparent（透明）

background-color:transparent；

5.2 背景图片

样式名称：background-image 定义元素的背景图片

使用方式：

background-image:none | url(url);

参数值	作用
none	无背景图（默认的）
url	使用绝对或相对地址指定背景图像

其他说明：实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置 (精灵图也是一种运用场景)

注意：背景图片后面的地址，千万不要忘记加 url，同时里面的路径不要加引号

5.3 背景平铺

样式名称：background-repeat 设置元素背景图像的平铺

使用方式：

background-repeat:repeat | no-repeat | repeat-x | repeat-y;

参数值	作用
repeat	背景图像在纵向和横向上平铺（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

注意：背景图片会压住背景颜色

5.4 背景图片位置

样式名称：background-position 属性可以改变图片在背景中的位置

使用方式：

background-position:x y;

参数含义：x 坐标和 y 坐标。可以使用方位名词或者精确单位

参数值	说明
length	百分数、由浮点数或单位标识符组成的长度值
position	top、center、bottom、left、center、right 等方位名词

其他说明：

1. 参数是方位名词, 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致, 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2. 参数是精确单位, 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标, 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
3. 参数是混合单位, 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

5.5 背景图片固定

样式名称：background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动

使用方式：

background-attachment:scroll | fixed;

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定

其他说明：background-attachment 可以制作视差滚动的效果

5.6 背景样式复合写法

背景合写样式：background: 背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置;

使用方式：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

5.7 背景色半透明

CSS3 提供了背景颜色半透明的效果

使用方式：

background：rgba(0,0,0,0.3);

• 最后一个参数是 alpha 透明度，取值范围在 0~1 之间
• 我们习惯把 0.3 的 0 省略掉，写为 background:rgba(0,0,0,.3);

注意：

• 背景半透明是指盒子背景半透明，盒子里面的内容不受影响

5.8 背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB 代码
background-image	背景图片	url (图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是 x 和 y 坐标
background-attachment	背景附着	scroll（背景滚动）/fixed（背景固定）
背景简写	书写更简单	背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置
背景色半透明	背景颜色半透明	background: rgba ()

6. CSS鼠标属性

CSS 属性名	功能	属性值
cursor	设置鼠标光标的样式	pointer 小手 move 移动图标 text 文字选择器 crosshair 十字架 wait 等待 help 帮助

扩展：自定义鼠标图标

/* 自定义鼠标光标 */ 
cursor: url("./arrow.png"),pointer;