二、CSS部分
（一）CSS样式
1.基础选择器
| 选择器 | 写法 |
|---|---|
| 标签选择器 | 标签名{...} |
| 类选择器 | class="类名" .类名{...} |
| id 选择器 | id="id名" #id 名{...} （一次选一个，只能调用一次） |
| 通配符选择器 | *{...} （选全部） |
备注：
1.可直接body{...}。
2.可把共同部分放到一个类里，方便调用。
3.可以多类名：.box{...} .red{...} class="box red"
2.字体
| 样式 | 含义 |
|---|---|
| font-style:normal/italic | 是否倾斜 |
| font-weight：400(normal) / 700(bold) | 是否加粗 |
| font-size:100px | 字体大小 |
| font-family："Microsoft Yahei" | 字体 |
备注：
1.可复合为 font：font-style font-weight font-size font-family （要按顺序写，字体大小和字体必须有）
2.font:16px/28px 指的是大小16px，行高28px。
3.文本
| 样式 | 含义 |
|---|---|
| text-align：center/left/right | 对齐方式 |
| text-decoration：none/underline(下划线) / overline (上划线) / line-through(删除线) | 修饰 |
| text-indent：2em | 首行缩进 |
| line-heigh：20px | 行间距、行高 |
备注：行间距包括字的上间距和下间距。
4.快写
div*3 ul>li div+p .类名 #id名 w200 .类名&*5（自增，按顺序排列） div{...}*5 div{$}*5
备注：按住鼠标中间滑轮往下拖可以连续选中。
5.复合选择器
| 选择器 | 含义 |
|---|---|
| 后代选择器 (所有后代都可以) | ul li{...} (ul 的所有 li) ul li a{...} |
| 子元素选择器（只能最近一级子元素） | .nav>a{...} (父>子{...}) |
| 并集选择器（多组） | ul , .pig li{...} |
| 伪类选择器（特殊效果） | a:hover{...} a:first-child{...} |
| 链接伪类选择器 | a:link（未访问链接） a:visited（已访问链接） a:hover(鼠标经过) a:active（按住不放） |
| :focus 伪类选择器（针对表单） | input:focus{...}（获取光标） |
备注：
1.后代选择器的后代可以是任意基础选择器。
2.链接伪类选择器必须按照LVHA的顺序。
3.想要链接a改变样式，必须单独指定，不能直接body{...}。
4.一般为a:{...} 然后a:hover{...}。
6.元素显示模式
| 模式 | 特点 |
|---|---|
块元素：<h1>-<h6>,<p>,<div>,<ul>,<ol>,<li>,<hr>,<dl>,<form>,<table> | 独占一行，高度、宽度（默认 100%）、外或内边距都可以控制，是容器，可放行内或块级元素。（文字类元素例如<p>、<h>内不可放块元素） |
行内元素：<a>,<strong>,<h>,<em>,<i>,<del>,<s>,<ins>,<u>,<span> | 一行可放多个，无法设置高和宽（默认本身内容宽度），只能容纳文本或其他行内元素。 |
行内块元素：<img/>,<input/>,<td> | 一行可放多个，高度、宽度（默认内容宽度）、外或内边距、高度宽度都可以控制。 |
| 转换为 | 代码 |
|---|---|
| 转换为块元素 | display:block; |
| 转换为行内元素 | display:inline; |
| 转换为行内块元素 | display:inline-block; |
备注：1.<a>里面可以放块级元素。
文字在盒子内垂直居中：line-height=height，一般和水平居中：text-align:center一起用。若行高偏小，则偏上。
