CSS的基本操作

1. 设置网站的favicon图标

(1) 准备ico图标
(2) 使用 link标签 引入图标
(3) 示例
	<link rel="icon" href="xx.ico">

2. 元素类型的转化

详情点击块级元素、行内元素、行内块元素

(1) 三种元素

    元素类型      元素排列    设置样式            默认宽度      包含
    块级元素      一行一个    可以设置宽、高      容器的100%     任何标签
    行内元素      一行多个    不可以设置宽、高    内容的宽度     文本、行内元素
    行内块元素    一行多个    可以位置宽、高      内容的宽度     任何标签
    
    
(2) 元素之间的转换

    转换为块级：display: block;
    转换为行内：display: inline;
    转换为行内块：display: inline-block;

3. 去掉列表 li 的圆点

li {
	list-style: none;
}

4. 鼠标样式更改

cursor: xxx;

    default     默认
    pointer     小手
    move        移动
    text        文本
    not-allowed 禁止

5. 取消表单控件的轮廓线

input,
textarea {
    outline: none;
}

6. 文本域的拖拽的设置

textarea {
    resize: none;
}

    none        不可以调节宽度和高度
    both        可以调节宽度和高度
    horizontal  可以调节宽度
    vertical    可以调节高度

7. 设置表格的边框是否合并

• 表格有双边框，这是因为表格的th、td元素有独立的边界
• border-collapse 属性设置表格的边框 被折叠成一个单一的边框 或 隔开

table {
	border-collapse: collapse;
}



table {
    width: 500px;
    height: 500px;
    background-color: aliceblue;
   
    border: 2px solid red;
    border-collapse: collapse;
}

8. link标签

• 引入css文件
• 引入js文件
• 设置网站图标

9. css的三大特性

(1) 层叠性

(2) 继承性

• 子元素会继承父级元素的某些样式
• 主要是：text、font、color

(3) 优先级（权重）

• 权重相加：永不进位
• 我们修改元素的样式时，一定要看该标签有没有被选中
  • 如果被选中了，以上面的公式来计权重，权重高的优先级高
  • 如果没有选中，那么权重是0，因为继承的权重为0

important	行内css	id	类、伪类	标签	*、继承
无穷大	1,0,0,0	0,1,0,0	0,0,1,0	0,0,0,1	0,0,0,0

10. 字体属性

(1) 字体样式

font-style: XXX;

    normal： 指定文本字体样式为正常的字体 (默认)
    italic： 指定文本字体样式为斜体

(2) 字体粗细

font-weight: 100;

    normal：    正常的字体。相当于数字值400 (默认)
    bold：      粗体。相当于数字值700。 
    数字： 		用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

(3) 字体大小

font-size: 16px;

	绝对大小		使用'px'
	相对大小		使用'em'
	百分比大小	使用'%'

(4) 文本行高

line-height