一、CSS简介
1.1 HTML的局限性
HTML只关注内容的语义，呈现网页的结构。
1.2 CSS语法规范
CSS主要由两个主要部分构成：选择器以及一条或多条声明。
给谁改样式 {改什么样式}
1.3 CSS代码风格
①紧凑格式：一行写完；
②展开格式：分行写；
③样式大小写：用小写；
④空格规范：属性前冒号后以及选择器和大括号中间保留一个空格。
二、CSS选择器
选择器分为基础选择器和复合选择器两大类。
2.1 作用
根据不同的需求选择不同的标签。
2.2 基础选择器
①标签选择器：用HTML标签名作为选择器。
标签名 {
属性1： 属性值1;
属性2： 属性值2;
属性3： 属性值3;
}优点：能快速为页面中的同一类型统一设计样式；
缺点：不能进行差异化设置，只能全部选择。
②类选择器：单独选一个或几个标签。
.类名 {
属性1： 属性值1；
...
}
/*在需要设置样式的标签里面添加class=‘类名’即可调用*/注：1、类名自定义，但不能用标签名作为类名，也不能用纯数字、纯中文。
2、 多类名：在标签class属性中写多个类名，类名之间用空格隔开。
口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用。
③id选择器：一次只能选择一个标签。
#id名 {
属性1: 属性值1;
...
}
/*在标签里面添加id='id名'即可调用*/口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。
④通配符选择器：选取页面中的所有元素（标签）。
* {
属性1: 属性值1;
...
}
/*不需要调用，自动给所有元素使用样式*/2.3 基础选择器总结
三、 CSS字体属性
3.1 字体系列
标签名 {
font-family: "字体";
}
注：1、字体可以指定多个，谁在前且系统有就使用谁。
2、各种字体之间必须使用英文逗号隔开，如果单词有多个空格要加引号。
3.2 字体大小
标签名 {
font-size: 20px;
}
/*px像素（大小）单位*/注：标题标签比较特殊，需要单独指定大小。可以给body指定整个页面的大小。
3.3 字体粗细
标签名 {
font-weight: 700/bold;
}
/*英文和数字都可实现加粗的效果，更提倡使用数字*/注：100-900来定义粗细，normal/400表示正常粗细，后面不跟单位。
3.4 字体样式
标签名 {
font-style: normal/italic;
}
/*normal正常 italic斜体*/3.5 字体复合属性
标签名 {
font: font-style font-weight font-size/line-height font-family;
}注：1、不能随意更改顺序，各个属性之间用空格隔开；
2、font-size和font-family属性不可省略，其他可省略（为默认值），否则将不起作用。
四、CSS文本属性
CSS Text（文本）属性定义文本外观，比如颜色、对齐、装饰、缩进、行间距等。
4.1 文本颜色
color 属性用于定义文本颜色。
标签名 {
color: red;
}十六进制表示形式 #ff0000 红色；RGB代码 rgb(255,0,0)；预定义的颜色值：red、green等。
4.2 对齐文本
text-align 属性用于设置文本内容的水平对齐方式。
标签名 {
text-align: center;
}
/*left左对齐（默认） center居中对齐 right右对齐*/4.3 装饰文本
text-decortion 属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等。
标签名 {
text-decoration: none;
}
/*none无装饰（默认） underline下划线 line-through删除线 overline上划线*/
4.4 文本缩进
text-indent 属性指定文本第一行的缩进，通常是将段落的首行缩进。
标签名 {
text-indent: 10px/2em;
}
/*2em 表示两个文字的距离*/注：em表示当前文字大小，是一个相对单位。
4.5 行间距
line-height 属性可以控制文字行与行之间的距离。
标签名 {
line-height: 26px;
}注：行间距=上间距+文本高度+下间距。
五、CSS引入方式
5.1 内部样式表（嵌入式）
将 CSS 代码写在 HTML 页面内部，单独放到一个<style>标签中。
注：<style>理论上可以放到任何位置，一般放在<head>标签中。
5.2 行内样式表（行内式）
又称作内联样式表，在元素标签内部的 style 属性中设定 CSS 样式，适合修改简单样式。
<p style="color: red">行内样式表</p>5.3 外部样式表（链接式）
样式单独写到 CSS 文件中，再将 CSS 文件引入到 HTML 页面中，适用于很多样式。
/*引入格式*/
<link rel="stylesheet" href="css文件路径" />
36
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
