CSS2基础笔记（4）---- CSS常用属性_letter-spacing是css2的属性吗-CSDN博客

本文链接：https://blog.csdn.net/m0_61332945/article/details/130375685

一、CSS常用属性

1.像素 CSS2基础笔记（3）-- CSS常用属性之像素

2.颜色的四种表示方式 CSS2基础笔记（3）-- CSS常用属性之颜色的表示方式

3.CSS字体属性

3.1字体大小

属性名：font-size
作用：控制字体的大小。
语法：
```
	div {
		font-size: 40px;
 	 }
```
注意事项：

1.Chrome浏览器支持的最小文字为12px，默认的文字大小为16px，并且 0px 会自动消失。
2.不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。
根据开发者工具看样式：

3.2字体族

属性名：font-family
作用：控制字体类型。

语法：

	div {
		font-family: "STCaiyun","Microsoft YaHei",sans-serif
	}

注意事项：

1.使用字体的英文名字兼容性会更好。
2.如果字体名包含空格，必须使用引号包裹起来。

3.3字体风格

属性名：font-style
作用：控制字体是否为斜体。

语法：

	/* 使用字体自带的斜体效果，推荐使用 */
	div {
		font-style: italic;
	}

常用值：

1.normal：正常（默认值）
2.italic：斜体（使用字体自带的斜体效果）
3.oblique：斜体（强制倾斜产生的斜体效果）

3.4字体粗细

属性名：font-weight
作用：控制字体的粗细。

语法：

 	/* 粗体 */
	div {
		font-weight: bold;
	}
	/* 数值为600等同于bold */
	div {
		font-weight: 600;
	}

常用值：

 1.lighter：细，等同于数值100~300
 2.nomal：正常，等同于数值400~500
 3.bold：粗，等同于数值600以上
 4.bolder：很粗（多数字体不支持）

3.5字体复合写法

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

编写规则：

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

4.CSS文本属性

4.1文本颜色

属性名：color
作用：控制文字的颜色。
举例：
```
	div {
		color: rgb(110,60,43);
	}
```

可选值：

 1.颜色名
 2 rgb 或 rgba
 3.HEX 或 HEXA （十六进制）
 4.HSL 或 HSLA

4.2文本间距

letter-spacing：字母间距
word-spacing：单词间距，通过空格识别单词
属性值为像素(px)，正值让间距增大，负值让间距缩小。

4.3文本修饰

属性名：text-decoration
作用：控制文本的各种装饰线。

举例：

	/* 无装饰线 */
	a {
		text-decoration: none;
	}

可选值：

 1.none： 无装饰线（常用）
 2.underline：下划线（常用）
 3.overline： 上划线
 4.line-through： 删除线

可搭配以下值使用：

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

4.4文本缩进

属性名：text-indent
作用：控制文本首字母的缩进。
属性值：css中的长度单位。例如：像素(px)。
举例：
```
	div {
		text-indent:40px;
	}
```

4.5文本对齐 ---- 水平

属性名：text-align
作用：控制文本的水平对齐方式。
举例：
```
div {
		text-align:center;
	}
```

常用值：

1.left：左对齐（默认值）
2.right：右对齐
3.center：居中对齐

4.6细说font-size

1.由于字体设计原因，文字最终呈现的大小，并不一定与font-size的值一致，可能大，可能小。
2.通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些。

4.7行高

属性名：line-height
作用：控制一行文字的高度。

举例：

	div {
		/* 第一种写法，值为像素px */
		line-height: 60px;
		/* 第二种写法，值为数值 */
		line-height: 1.5;
		/* 第三种写法，值为百分比 */
		line-height: 150%;
		/* 第四种写法，值为normal，由浏览器根据文字大小决定的一个默认值 */
		line-height: normal;
	}

注意事项：

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

4.8文本对齐 ---- 垂直

1.顶部：无需任何属性，在垂直方向上，默认就是顶部对齐。
2.居中：对于单行文字，让height = line-height。
3.底部：对于单行文字，目前一个临时设置line-height = ( height × 2 ) - font-size - x 。

4.9vertical-align

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

常用值：

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

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

5.CSS列表属性

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

属性名	作用	属性值
list-style-type	设置列表符号	none：不显示前面的标识（常用） square：实心方块 disc：圆形 decimal：数字 lower-roman：小写罗马字 upper-roman：大写罗马字 lower-alpha：小写字母 upper-alpha：大写字母
list-style-position	设置列表符号的位置	inside：在li里面 outside在li外面
list-style-image	自定义列表符号	url（图片地址）
list-style-	复合属性	没有数量、顺序的要求

6.CSS表格属性

边框相关属性，其他元素也可以用：

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

表格独有属性，只有table标签才能使用

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

7.CSS背景属性

属性名	作用	属性值
background-color	设置背景颜色	符合CSS中颜色规范的值，默认背景颜色为transparent
background-image	设置背景图片	url（图片的地址）
background-repeat	设置背景重复方式	repeat：重复，铺满整个元素，默认值 repeat-x：只在水平方向重复 repeat-y：只在垂直方向重复 no-repeat：不重复
background-position	设置背景图位置	通过关键字设置位置：写两个值，用空格隔开水平：left、center、right 垂直：top、center、bottom 如果只写一个值，另一个方向的值为center 通过长度指定坐标位置：以元素左上角，为坐标原点，设置图片左上角的位置两个值，分别为 x坐标和 y坐标只写一个值，会被当做 x坐标， y坐标取 center
background	复合属性	没有数量和顺序要求

8.CSS鼠标属性

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