一、css 基础语法

CSS 语法由两部分组成：选择符、声明。

声明包括：属性和属性值
选择符 {属性: 属性值 ;属性:属性值}
例如：div{ width:200px; height:200px; background:red; }

选择符说明：CSS 选择符（选择器）
选择符表示要定义样式的对象(标签名字)，可以是元素本身，也可以是一类元素或者制定名称的元素.
简单来说就是给对应的元素起个名称。

语法说明：
1）每个 CSS 样式由两部分组成，即选择符和声明，声明又分为属性和属性值；
2）属性必须放在花括号中，属性与属性值用冒号连接。
3）每条声明用分号结束。
4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序,用空格隔开。
5）在书写样式过程中，空格、换行等操作不影响属性显示。

1. css 新建格式

内部样式表（嵌套到页面中）

  1. <style type="text/css">
  2.      css语句 
  3. </style>

注：使用 style 标记创建样式时，最好将该标记写在;

引用外部样式表文件

<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />

使用 link 元素导入外部样式表时，需将该元素写在文档头部，即与之间。
rel：用于定义文档关联，表示关联样式表；
type：定义文档类型；

导入外部样式表

<style type="text/css">
import url("目标文件的路径及文件名全称");
</style>

说明：@ 和 import 之间没有空格 url 和小括号之间也没有空格；括号内部加引号，必须结尾以分号结束；

内联样式（行间样式，行内样式，嵌入式样式）
语法：<标签 style = “属性1:值1;属性2:值2; ……”></标签>

2. link 和 import 导入外部样式的区别(面试题)

  • 差别1：老祖宗的差别：link 属于 XHTML 标签，而 @import 完全是 CSS 提供的一种方式。 link 标签除了可以加载 CSS 外，还可以做很多其它的事情，比如定义 RSS，定义 rel 连接属性等，@import 就只能加载 CSS。
  • 差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link 引用的 CSS 会同时被加载，而 @import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式。
  • 差别3：兼容性的差别。：@import 是 CSS2.1 提出的，所以老的浏览器不支持，@import 只在 IE5 以上的才能识别，而 link 标签无此问题。
  • 差别4：使用 dom 控制样式时的差别：当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为 @import 不是 dom 可以控制的

二、css 选择器

css 样式表的优先级
1）内联样式表的优先级别最高
2）内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。
3）同在一个样式表中的优先级和书写的顺序也有关，后书写的优先级别高。(被覆盖的只是相同属性的样式)

CSS选择符包括4大类：类型选择符、id 选择符、class 选择符(类选择符)、特殊选择符

  1. 类型选择符（标记选择器）
  2. 类选择符 （class选择符）一个元素可以有多个类
  3. ID选择符 （id选择器）id是唯一的 不能用中文和选择器
  4. 伪类选择器: 四个单词顺序不能变 link visited hover active 按顺序

a:link {color: red;} / 未访问的链接状态 /
a:visited {color: green;} / 已访问的链接状态 /
a:hover {color: blue;} / 鼠标滑过链接状态 /
a:active {color: yellow;} / 鼠标按下去时的状态 /

#ul li:nth-child(2n) {
                background: 颜色;
}        
#ul li:nth-child(2n+1){
                background: 颜色;
}
  1. 群组选择器

多个选择器之间用逗号隔开，这种叫群组选择器
语法：选择符1，选择符2，选择符3…..{ }

  1. 后代选择器

语法：祖先选择器 后代选择器{ }
不一定是父子关系

  1. 子集选择器

以 > 链接 选择子集元素

  1. 相邻选择器 + 只能选择下面的 且两者有相同父元素
  2. 兄弟选择器 ~ 除了第一个不被选中 其他的都被选中

  3. 伪类选择器 ：hover ：active ：before ：after ：checked

    说明：祖先选择器和后代选择器 用空格隔开，含义就是祖先选择器种包涵的所有有后代选择器
    1）当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为：a，a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；
    2）为了简化代码，可以把伪类选择符中相同的声明提出来放在 a 选择符中；
    例如：a{color:red;} a:hover{color:green;} 表示超链接的三种状态都相同，只有鼠标划过变化颜色.
    通配符（）设置全局属性 语法： + { } 星号代表网页中所有的标签
    群组选择符（集合选择器）
    包含选择符（后代选择器）
    选择符的权重
    文字受到法律手段和法律

三、权重

权重的表达方式如：0，0，0，0；
权重规则：HTML 标签(类型选择符)的权重是1，class 的权重是10，id 的权重是100。

  1. 类型选择符的权重为0001
  2. class 选择符的权重为0010
  3. id 选择符的权重为0100
  4. 属性选择符的权重为0010
  5. 伪类选择符的权重为0010
  6. 伪元素（对象）选择符的权重为0001
  7. 包含选择符的权重：为包含选择符的权重之和
  8. 内联样式的权重为1000
  9. 继承样式的权重为0000
  10. 群组集合选择符权重为他本身
    注：如果权重相同时，则执行后写的样式；
    当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式。
    例如：b .demo{ }的权重是1+10=11
    .demo{ } 的权重是10
    所以经常会发生 .demo 的样式失效

相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。
（注意：是 css 样式中定义该选择符的先后，而不是 html 中使用先后）

四、字体属性

文本大小: 选择符{font-size: 数值;}
说明：必须给属性值加单位，属性值为0时除外。单位 pt（磅），在印刷领域广泛使用，9pt = 12px;
为了减小系统间的字体显示差异，确定16px 为标准字体大小默认值,即 1em. 默认情况下，1em = 16px, 说明: * em: 表示元素字体高度，em 值是根据父元素值来确定；
如：font-size:12px;line-height:2em(行高为字号的两倍); 则行高为24px；

使用绝对大小关键字

xx - small = 9px large = 19px
x - small = 11px x-large = 23px
small = 13px xx-large = 27px
medium = 16px

常见的单位 ：px pt em (相对父亲的字体大小)
设置字体：
宋体，微软雅黑中文字体加引号
一个单词的英文字体不需要加引号
多个单词组成的英文字体要加引号；
多个字体之间要用逗号隔开,浏览器先去解读第一个字体，如果解读不了，紧接着解读第二个字体

设置字体颜色 ：
#0-9a-f 组成的十六进制的数
rgb(255,255,255)
如果想设置透明度
rgba(255,255,255,0.5)
前三个值范围 ： 0-255
最后值代表着透明度，范围0-1之间
0是完全透明的，1完全不透明，0.5就是半透明

text-decoration:
underline 文字下面有下划线
overline 文字上面有下划线
line-through 删除线
none 一般用于去掉 a,u 标签默认的下划线
text-indent : 设置首行缩进的
letter-spacing: 控制每个文字或者每个字母之间的距离
word-spacing: 控制词与词之间的距离