前端DAY3

学习CSS的属性。

CSS三大特性

1.层叠性。用于解决样式冲突。

2.继承性。元素会自动拥有其父元素、或其祖上元素上所设置的某些样式。

优先继承离得近的。继承过来的样式优先级是最低的。

常见可继承的属性包括：text-，font-，line-，color（字体属性、文本属性、文字属性等）

不能继承属性：border、background-color、padding、margin、宽高、溢出方式（改变布局的）

3.优先级（选择器那章已讲过）

CSS中的属性

页面查看某个元素属性方法：

开发者工具——elements——style。

1.字体属性（font-）

字体大小：font-size

字体族（即字体的样式）：font-family

字体风格：font-style。normal字体正常，italic字体倾斜。

字体粗细：font-weight

lighter细（100-300），normal正常（400-500），bold粗（600+）。

2.文本属性（大多数text-）

文本颜色：color（一般单位用rgb/rgba）

文本间距：letter-spacing字母间距，word-spacing单词间距

用px表示，正值距离增大，负值距离减小。

文本修饰：text-decoration

overline上划线，underline下划线，line-through删除线，none没有各种线（配合着超链接a可以使得超链接的下划线去掉）

文本缩进：text-indent控制首行缩进。

文本对齐-水平：text-align

left左对齐（默认），center居中，right右对齐

文本行高：line-height 

推荐用line-height:1.5;

应用：

1.调整多行文字的行间距。

2.调整单行文字的垂直居中。（使得行高等于盒子高度即可实现)

注意：

1.行高不能过小，太小字体会重叠。

2.行高是可以继承的。

3.div中，写了height，div高度就是height；没写height，div高度就是line-height*行数。

ps：同一行元素或表格单元格内文字的垂直对齐方式：vertical-align:middle

属性：top元素顶部与所在行顶部对齐bottom元素底部与所在行底部对齐

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

3.列表属性

/* 列表符号,一般写none,将默认的列表符号删去 */
            list-style-type: none;

/* 修改列表符号的样式 */
list-style-position: inside;

/* 自定义列表符号 */
list-style-image: url("./path_test/video.gif");

4.表格属性

4.1表格边框相关的属性

table{
            border-color: black;
            border-width: 2px;
            border-style: solid;
        }
th,td{
            border-color: black;
            border-width: 2px;
            border-style: solid;
        }

 这些属性其他元素也能用。

4.2表格独有的属性

/* 控制表格列宽 */
table-layout: fixed;
/* 控制单元格间距 (有效果前提:不能合并边框)*/
border-spacing: 0px;
/* 合并相邻单元格的边框 */
border-collapse: collapse;
/* 隐藏没有内容的单元格 (有效果前提:不能合并边框)*/
empty-cells: hide;

注意：要使得表格跨行和跨列，只能用HTML中讲的colspan属性和rowspan属性。

6.背景属性

/* 控制背景颜色(默认是透明) */
background-color: aqua;
/* 设置背景图片 */
background-image: url("./path_test/悟空.jpg");
/* 控制背景图片的重复方式 */
background-repeat: no-repeat;
/* 控制背景图片的位置(也可以用具体像素值表示) */
background-position: center;

7.鼠标属性

属性名：cursor，用于修改鼠标样式

常用属性值：pointer小手，move移动图标，text文字选择器，wait等待，crosshair等待，help帮助