CSS层叠样式表

一 css简介

什么是css？

层叠样式表
命名规则：

使用字母、数字或下划线和减号构成，不要以数字开头
格式：

选择器{属性:值 ;属性:值; 属性:值; ....}

其中选择器也叫选择符
CSS中注释
```
/* ... */
```

二如何使用css样式

即html中嵌入css的方式

1. 内联方式（行内样式）

就是在HTML的标签中，使用style属性，来设置css样式

<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p>

特点： 仅作用于本标签

2. 内部方式（内嵌样式）

就是在head标签中，使用<style type="text/css">....</style>标签来，设置css样式

 <style type="text/css">
 	...css样式代码
 </style>

特点： 作用于当前整个页面

3. 外部导入（外部链入）推荐

就是在head标签中使用<link/>标签,导入一个css文件，在作用于本页面，实现css样式设置

<link href="文件名.css" type="text/css" rel="stylesheet"/>

还可以使用import，在style标签中导入css文件

特点： 作用于整个网站

三 css2的选择符 ***

优先级: 行内 -> css3选择器 -> id -> class -> html标签

1. html选择符（标签选择器）

就是把html标签，作为选择符使用

 eg: p {....}  网页中所有p标签，采用此样式

2. class类选择符（类选择器P）

使用 点.将自定义名（类名，来定义的选择符

# 定义：
  .类名 {样式....}           # 匿名类
    
  其他选择符名.类名{样式....}  # 指定某个选择器 后的类 
    
# 使用：
<html标签 class="类名"> ... </html标签>

# eg:
 .mc   {color:blue;}     # 凡是class属性值为mc的都采用此样式 

 p .ps {color:green;}  # 只有p标签中class属性值为ps的才采用此样式 


# 注意：类选择符可以在网页中重复使用

3. Id选择符（ID选择器）

# 定义： 
  #id名 {样式...}
    
# 使用：
<html标签 id="id名"> ... </html标签>

# 注意：id选择符只在网页中使用一次

4. 关联选择符（包含选择器）

# 格式： 
  选择符1 选择符2 选择符3 ...{样式....}

# eg：
table a{....}    # table标签里的a标签，才采用此样式

h1 p{color:red}  # 只有h1标签中的p标签，才采用此样式

5. 组合选择符（选择器组）

# 格式：
选择符1, 选择符2, 选择符3 ...{样式....}

# eg：
h3,h4,h5 {color:green;}  # h3、h4和h5，都采用此样式

6. *通配符（全局选择器）

# 说明
  通配符的写法是  '*'，其含义就是所有元素

# 用法
  常用来重置样式   

# eg: 
* {padding:0; margin:0;}  # 让所有标签边距都为0

7. 伪类(伪元素)选择符

# 伪类(Pseudo classes)
  通过冒号来定义，它定义了元素的状态，如点击按下、点击完成等
  通过伪类可以为元素的状态修改样式


# 格式
  标签名:伪类名{样式....}

# eg:
a:link    {color: #FF0000; text-decoration: none} 	    # 未访问的链接

a:visited {color: #00FF00; text-decoration: none}       # 已访问的链接
           
a:hover   {color: #FF00FF; text-decoration: underline}  # 鼠标在链接上

a:active  {color: #0000FF; text-decoration: underline}  # 激活链接

input:focus {background-color: red; }  # input框获取焦点 (鼠标点了input框)


# 注：
为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
           
# eg：表示超链接的三种状态都相同，只有鼠标划过变颜色
a {color:red;}     
a:hover {color:green;}

四 CSS3中的选择器

1.关系选择器

div p 选择 div元素中的所有层级的元素p
div>p 选择 div元素中的所有下一级的元素p
div+p 选择 div元素后面的第一个p元素 # 同级别紧挨着的下面的第一个
div~p 选择 div元素后面的所有兄弟元素p

2.属性选择器

[attribute] 选择具有attribute属性的元素
[attribute=value] 选择具有attribute属性且属性值等于value的元素

3.结构性伪类选择器

# 伪类选择器（简称：伪类）
 :before  设置在对象前（依据对象树的逻辑结构）发生的内容
 :after   设置在对象后（依据对象树的逻辑结构）发生的内容

    
# eg:
span:before{
    content: '必须存在的属性';
    display: block;
    border:1px solid red;
}
    
span:after{
    content: '必须存在的属性';
    display: block;
    border:1px solid red;
}