html&css(02)---CSS

Unit One: html&css(02)—CSS

1.CSS简介

HTML:结构
CSS: 表现
JavaScript:行为

层叠样式表：网页实际上是一个多层结构，通过CSS可以分别为网页的每一个层来设置样式。而我们只能看到整体。

2. CSS样式设置方法

内联样式
```
 <p style= "color:blue; font-size: 50px;">少小离家老大回</p>
```
- 不推荐使用。
  - 当样式发送变化时，必须一个一个修改，非常不方便。
内部样式表
```
<head>
    <style>
     p{
         color:green;
        font-size: 100px;
     }
    </style>
```
- 将样式编写到head的style标签中。
- 通过CSS选择器来选中元素，并为其设置各种样式。
- 可以同时为多个标签设置样式。
- 方便复用。
外部样式表

可以将CSS样式编写到一个外部CSS文件中，然后通过link标签引入外部CSS文件。
```
<head>
    <link rel="stylesheet" href="01. 外部样式表.css">
</head>
```
- 外部样式表需要通过link标签进行引入，可以不同网页之间进行复用。
- 将样式编写到外部CSS文件中，可以使用浏览器缓存机制，从而加快网页的加载速度，提高用户体验。

3. CSS基本语法

注释/**/
选择器+声明块
- 选择器：选中网页中的指定元素。
- 声明块：指定元素的样式。
  - 一个样式名对应一个样式值，以:连接，以;结尾。

4.简单选择器

元素选择器
- 作用：根据标签名来选中指定的元素。
- 语法：标签名{}
- 例子：p{} h1{} div{}
```
<head>
    <style>
        p{
            color: hotpink;
        }
    </style>
</head>
```
- 问题：只能选择全部元素标签。

ID选择器

作用：根据元素ID属性选择一个元素。
语法：#id 属性值{}

例子： #box{} #red{}

<head>
    <style>
        p{
            color: hotpink;
        }
        #father{
            font-size: 100px;
        }
    </style>
</head>

Class(类)选择器
- 作用：class标签与id类似，但可以重复使用。可以通过class属性为元素分组。
  - class可以为一个元素指定多个class值，用空格隔开。
- 语法：.class属性值
- 例子：.title{}
```
<head>
        .male {
            background-color: brown;
            color: aqua;
        }
    </style>
</head>
```
通配选择器
- *:选择页面所有元素。

5.复合选择器

交集选择器
- 选中同时符合多个条件的一个元素。
- 语法：选择器1选择器2选择器3选择器4{}
- 注意点：
  - 交集选择器中如果有元素选择器，必须使用元素选择器开头。
  - 选择器直接无空格，否则为所属关系。
- 例子：
```
        .male#action{
            color: blueviolet;
        }
```
并集选择器
- 选择多个选择器对应的元素
- 语法：选择器1，选择器2，选择器3，选择器4{}
- 例子
```
        #father, #action{
            font-size: 100px;
        }
```

6.关系选择器

关系
- 父元素：直接包含子元素的元素。
- 子元素：直接被父元素包含的元素。
- 祖先元素：
  - 父元素是祖先元素。
  - 祖先元素直接或间接包含后代元素。
- 后代元素：
  - 子元素是后代元素。
  - 直接或间接被祖先元素包含
- 兄弟元素：
  - 拥有相同父元素的元素是兄弟元素。

子元素选择器

作用：选中指定父元素的指定子元素。
语法：父元素>子元素

例子：

        /*选中div元素下直接子元素span*/
        div.box>span{
            color:yellowgreen;
        }

后代元素选择器

选中指定元素内的指定后代元素。
语法：祖先后代

例子:

        /*选中div元素下所有后代元素span*/
        div span{
            color:yellowgreen;
        }

兄弟元素选择器

选中下一个兄弟元素
语法：前一个元素+下一个元素

例子：

/*选中p元素下一个兄弟元素span*/
        p+span{
            color:yellowgreen;
        }

选择下方所有兄弟元素
语法：前一个元素~下一个元素

例子：

        /*选中div元素下所有兄弟元素span*/
        p~span{
            color:yellowgreen;
        }

7.属性选择器

选择属性名
- 语法：
  - 元素标签[属性名]
  - [属性名=属性值]
  - [属性名 ^=属性值] 以属性值开头的元素。
  - [属性名 $= 属性值] 以属性值结尾的元素。
  - [属性名 *= 属性值] 属性值中含有某值得元素。
- 例子
```
    <style>
        [title*=b]{
            color: blue;
        }
        [translate=yes]{
            background-color: aquamarine;
        }
    </style>
```

8.伪类选择器

伪类:不存在的类，用来描述一个元素的特殊状态。
- 比如：第一个子元素、被点击的元素、鼠标移入的元素。
伪类一般以:开头。
子元素排序(:-child)
- :fisrt-child第一个子元素。
- :last-child最后一个子元素。
- :nth-child(1,2,3)选中第n个子元素。
  - 特殊值：
    - n: 第n个，全选。
    - 2n或even：所有偶数位。
    - 2n+1或odd: 所有奇数位。
- 伪类以所有元素来排序。
同类型元素排序(:-type)
- :first-of-type
- :last-of-type
- :nth-of-type

否定伪类（:not）

将符合条件的元素从选择器中去掉。

    <style>
        li:not(:nth-of-type(3)){
            color: aqua;
        }
    </style>

9. 超链接伪类

超链接状态
- 没访问过的链接
  
  :link用来表示没访问过的链接（正常链接）。
- 访问过的链接
  
  :visited 用来表示访问过的链接。
  - 由于隐私原因，visited只能修改链接的颜色。
:hover

鼠标移入的状态。
:active

鼠标点击状态。

    <style>
        a:link {
            color: black;
            font-size: 100px;
        }

        a:visited {
            color: bisque;
        }

        a:hover {
            font-size: 50px;
        }

        a:active {
            color: blueviolet;
        }
    </style>

10. 伪元素

表示页面中一些特殊的并不真实存在的元素，比如特殊位置。

语法
- 以::开头

举例

::fisrt-letter 表示第一个字母。
::first-line表示第一行。
::selection表示鼠标选中文字。
::before表示元素开始。
::after表示元素最后。
- before和after必须结合content属性来使用。

    <style>
        p {
            font-size: 20px;
        }
  
        p::first-letter {
            font-size: 60px;
        }
  
        p::first-line {
            background-color: aqua;
        }
  
        p::selection {
            color: blue;
        }
  
        p::before {
            content: "abc";
        }
  
        p::after {
            content: ">";
        }
    </style>

PREVIOUSBasic Statistics - (11) R[5] Confidence Interval

NEXTBasic Statistics(10)-Confidence Interval

Unit One: html&css(02)—CSS

1.CSS简介

2. CSS样式设置方法

内联样式

内部样式表

外部样式表

3. CSS基本语法

选择器+声明块

4.简单选择器

元素选择器

ID选择器

Class(类)选择器

通配选择器

5.复合选择器

交集选择器

并集选择器

6.关系选择器

关系

子元素选择器

后代元素选择器

兄弟元素选择器

7.属性选择器

选择属性名

8.伪类选择器

子元素排序(:-child)

同类型元素排序(:-type)

否定伪类（:not）

9. 超链接伪类

10. 伪元素