文档插入样式表的三种办法
- 外部样式表(引入）css样式表，必须放置在head文档中。
-语法格式<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
- 内部样式表：在head中使用<style></style>标签。
<head><style>hr {color:sienna;}p {margin-left:20px;}body {background-color:pink;}</style></head>
- 行内样式（在行内使用style属性，针对当前元素进行样式定义）
-语法格式：<p style="color:pink;font-size:20>value</p>
CSS模块化编程
- 尽可能的将头部、尾部等复用率较高的进行剥离
-语法格式：@import url(value)
- 将公共样式进行分离，并创建一些独立的样式保存
- 使用@import指定引入到指定的css标签中
选择器
简单选择器
- 标签选择器，返回一组
li{background-color:red;}
- 类选择器，返回一组,
可简化为li[class="name"]{background-color:pink;}
.name{backgorund-color:pink}
- id选择器（理论上返回一个）
可简化为：li[id="name"]｛background-color:pink;｝
#name{background-color:pink;}
上下文选择器
因为html是一个结构化文档：每一个元素，在文档中有准确的位置，可以根据元素的上下文进行选择。 - 后代选择器，选中所有层级 [空格]
ul li{color:pink;}
- 子元素选择器：仅选择父子层元素 [>]
body>ul>li{margin-top:5px;}
- 同级相邻选择器（仅选中与之相邻的第一个兄弟元素）[+]
.name + li {color:pink;}
- 同级所有选择器（选择相邻后面的所有的兄弟元素）[~]
.name ~ li {background-color:white;}
伪类选择器
状态伪类|结构伪类 - 结构伪类-匹配任意伪类的元素，使用方法
语法结构:nth-of-type(an+b)（an为起点，b为偏移量，n从0开始取值）
常规写法：
ul li:nth-of-type(0n+5){color:red;}
简化写法：
ul li:nth-of-type(5){color:red;}
选择所有元素的写法（使用伪类选择器,如果带上偏移量，效果大有不同）
ul li:nth-of-type(1n){color:red;}
带有偏移量的用法
ul li:nth-of-type(1n+3){color:red;}
带有偏移量的简化写法
ul li:nth-of-type(n+3){color:red;}
9.结构伪类-反向匹配任意伪类的元素，使用方法
语法结构:nth-last-of-type(an+b)（an为起点，b为偏移量，n从0开始取值）
ul li:nth-last-of-type(-n+3){color:red;}
10.结构伪类，选择所有索引为偶|奇数的子元素
偶数行：even;奇数行，odd
ul li:nth-of-type(even){color:red;}
ul li:nth-of-type(odd){color:red;}
11.结构伪类，选择第一个元素 :frist-of-type
选择最后一个 :last-of-type
$.ajax() 后期学习
12.如果只想匹配父元素里唯一子元素，使用 only-of-type实现