目录
一、CSS语法规范
CSS规则由两个主要的部分构成：选择器以及一条或多条声明
1.选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值用英文“:”分开。
二、CSS基础选择器
1.标签选择器
语法
标签名 {属性1：属性值…}
2.类选择器
语法
.类名（自己命名的，但最好有意义）{属性1：值 属性2：值}
•各个类名中间用空格隔开。
•类选择器可以同时给多个相同类修改属性。
3.id选择器
语法
#id {属性1：属性值…}
•id选择器只能是唯一的，只能给一个id修改属性。
4.通配符选择器
语法
* {属性1：属性值1 …}
•通配符选择器不需要调用，自动就给所有的元素使用样式。
5.总结
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p {color: red} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav {color: red} |
| id选择器 | 一次只能选择1个标签 | ID属性只能在每个HTML稳定中出现一次 | 一般和js搭配 | #nav {color: red} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 特殊情况使用 | *{color: red} |
三、CSS字体属性
1.字体系列
CSS用font-famil属性定义文本的字体系列。
•各种字体之间必须使用英文状态下的逗号隔开；
•一般情况下，如果有空格隔开的多个单词组成的字体，加引号；
•尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示；
•最常见的几个字体：body{font-family: ‘Microsoft YaHei’,Tahoma,arial,’Hiragino Sans GB’;}
2.字体大小
CSS使用font-size属性定义字体大小。
•px（像素）大小是我们网页的最常用的单位；
•谷歌浏览器默认的文字大小为16px；
•可以给body指定整个页面文字的大小。
3.字体总结
| 属性 | 表示 | 注意点 |
| font-size | 字号 | 我们通常用的单位是px像素，一定要跟上单位 |
| font-family | 字体 | 实际工作中按照团队约定来写字体 |
| font-weight | 字体粗细 | 记住加粗是700或者bold 不加粗是normal或者400记住数字不要跟单位 |
| font-style | 字体样式 | 记住倾斜是italic 不倾斜是normal，工作中我们最常用normal |
| font | 字体连写 | 1.字体连写是有顺序的，不能随意换位置；2.其中字号和字体必须同时出现。 |
四、CSS文本属性
1.文本颜色
Color属性用于定义文本的颜色。
| 表示 | 属性值 |
| 预定义的颜色值 | red,green,blue… |
| 十六进制 | #FF0000, #FF6600, #29D794 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
2.对齐文本
text-align属性用于设置元素内文本内容的对平对齐方式。
| 属性值 | 解释 |
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
3.装饰文本
text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等。
| 属性值 | 描述 |
| none | 默认。没有装饰线（最常用） |
| underline | 下划线。链接a自带下划线（常用） |
| overline | 上划线（几乎不用） |
| line-through | 删除线（不常用） |
4.总结
| 属性 | 表示 | 注意点 |
| color | 文本颜色 | 我们通常用十六进制而且是简写形式，比如#fff |
| text-align | 文本对齐 | 可以设定文字水平的对齐方式 |
| text-indent | 文本缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent：2em |
| text-decoration | 文本修饰 | 记住添加下划线underline 取消下划线none |
| line-height | 行高 | 控制行与行之间的距离 |
五、CSS引入方式
1.内部样式表
内部样式表是写到html页面内部，是将所有的CSS代码抽取出来，单独放放到一个<style>标签中。
•<style>标签理论上可以放在html文档的任何地方，但一般会放在文档的<head>标签中。
•通过此种方式，可以方便控制当前整个页面中的元素样式设置。
•代码结构清晰，但是没有实现结构与样式完全分离。
•使用内部样式表设定CSS，通常也被称为嵌入式引入。
2.外部样式表
引入外部样式表分为两步：
⑴新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
⑵在html页面中，<link>标签引入这个文件。
<link rel=”stylesheet” href=”css文件路径”>
| 属性 | 作用 |
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档时一个样式表文件。 |
| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 |
六、Emmet语法
1.生成标签直接输入标签名按tab键即可，比如div，然后按tab键，就可以生成<div></div>
2.如果想要生成多个相同标签，加上*就可以了。比如div*3就可以快速生成3个div
3.如果有父子级关系的标签，可以用>。比如ul>li就可以了
4.如果有兄弟关系的标签，用+就可以了。比如div+p
5.如果生成带有类名或者id名字的，直接写.demo或者#two按tab键就可以了
6.如果生成的div类名是有顺序的，可以用自增符号$
7.如果想要在生成的标签内部写内容可以用{}表示
七、CSS的复合选择器
1.后代选择器
语法
元素1 元素2{样式声明}
•元素1和元素2中间用空格隔开
•元素1 是父级，元素2是子集，最终选择的是元素2
•元素2可以是儿子，也可以是孙子，只要是元素1的后代即可
•元素1和元素2可以是任意基础选择器
2.子选择器
语法
元素1>元素2{样式声明}
•元素1和元素2中间用大于号隔开
•元素1是父级，元素2是子级，最终选择的是元素
•子元素选择器只能选择作为某元素的最近一级子元素
3.并集选择器
语法
元素1,元素2{样式声明}
•元素1和元素2中间用英文逗号隔开
•逗号可以理解为和的意思
•并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明
4.伪类选择器
⑴链接伪类选择器
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
•为了确保生效，一定要按照LVHA的循顺序声明：link-visited-hover-active
•因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式
⑵focus伪类选择器
Input:focus{
Background-color:yellow;
}
•focus伪类选择器用于获取获得焦点的表单元素。焦点就是光标，一般情况<input>类表单元素才能获取。
8019
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
