带你学习css是什么和css中的选择器

深碍√TFBOYSˉ_ 2022-12-27 01:54 113阅读 0赞

## 前言 ##

### 欢迎观看~![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70][] ###

--------------------

# #

# 一、css是什么？ #

*  **CSS 指层叠样式表 (Cascading Style Sheets)**
 *  **样式定义如何显示 HTML 元素**
 *  **样式通常存储在样式表中**
 *  **把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题**
 *  **外部样式表可以极大提高工作效率**
 *  **外部样式表通常存储在 CSS 文件中**
 *  **多个样式定义可层叠为一个**

--------------------

# 二、css创建 #

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。

## 1.如何插入样式表 ##

**插入样式表的方法有三种:**

*  外部样式表(External style sheet)
 *  内部样式表(Internal style sheet)
 *  内联样式(Inline style)

--------------------

## 2.外部样式表 ##

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;}
    p {margin-left:20px; }
    body {background-image: url("./../img/timg.jpg");}

> ![Remark][] 不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是 "margin-left: 20px" 。
> 
> 浏览器运行结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 1][]

--------------------

## 3.内部样式表 ##

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 3][]

--------------------

## 4.内联样式 ##

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

![20201207185847819.png][]

--------------------

## 5.多重样式 ##

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

而内部样式表拥有针对 h3 选择器的两个属性：

h3 { color:red; text-align:left; font-size: 8pt;
          }

h3 { text-align:right; font-size:20pt; }

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color:red; text-align:right; font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（**text-alignment**）和字体尺寸（**font-size**）会被内部样式表中的规则取代。

--------------------

## 6.多重样式优先级 ##

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：

**内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式**

<head> 
    
     <link rel="stylesheet" type="text/css" href="style.css"/> 
     
    <style type="text/css"> 
    /* 内部样式 */ h3{color:green;} 
    </style> </head> <body> 
    <h3>测试！</h3> 
    </body>

--------------------

## 7.元素选择器 ##

**元素选择器：**

**1、通配符选择器**

**2、标签选择器**

**3、class类选择器**

**4、id选择器**

--------------------

### 7.1**、通配符选择器** ###

### 语法： ###

**\*** \{ sRules \}

### 说明： ###

**选定所有对象。**

*  通配选择符(Universal Selector)
 *  通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用
 *  实例如下：

![20201207190858503.png][]![2020120719091198.png][]

--------------------

### 7.**2、标签选择器** ###

## 语法： ##

**E** \{ sRules \}

**说明：**

**以文档语言对象类型作为选择符。**

### **例如：![20201207191437521.png][]** ###

![20201207191618663.png][]

--------------------

### 7.3**、class类选择器** ###

## 语法： ##

**E.myclass** \{ sRules \}

## 说明： ##

**以class属性包含myclass的E对象作为选择符。**

*  类选择符(Class Selector)
 *  不同于ID选择符的唯一性，类选择符可以同时定义多个，如：
    
    **定义多个类：**
    
    > .a \{ color: \#f00; \} .b \{ font-weight: 700; \}
    > 
    > 给某个div元素定义.a和.b两个类
    
    注意，id选择符不能在同个元素上定义多个，比如id="a b"就是错误的写法
    
    **类选择符高级用法：多类选择符**
    
    > .a.b \{ color: \#f00; \}
    > 
    > 多类选择符使用方法
    
    此例命中同时拥有.a和.b两个类的元素。需要注意的是IE6并不支持多类选择符，如：.a.b\{\}将会被视为：.b\{\}

**class 选择器有别于id选择器，class可以在多个元素中使用。**

**实例:让带有类名“ctnter”的div标签和p标签中文字居中，字体颜色为红色**

<head>
        <style>
            .center {
                text-align: center;
                color: red;
            }
        </style>
    </head>
    
    <body>
        <div class="center">第一个div</div>
        <p>这是一个段落。</p>
        <div>第二个div</div>
        <p class="center">我是段落二</p>
    
    </body>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 4][]

--------------------

## 7.**4、id选择器** ##

## 语法： ##

**E\#myid** \{ sRules \}

### 说明： ###

**以唯一标识符id属性等于myid的E对象作为选择符。**

### id 选择器 ###

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "\#" 来定义。

以下的样式规则应用于元素属性 id="para1" id="font\_color":

### 实例 ###

<head>
    <style>
            #para1 {
                font-size: 25px;
                color: green;
            }
            
            #font_color {
                color: pink;
            }
        </style>
    </head>
    
    <body>
        <div id="para1">第一个div</div>
        <p id="font_color">这是一个段落。</p>
        <div>第二个div</div>
        <p>我是段落二</p>

浏览器显示：

![20201207194424665.png][]

--------------------

## 8.关系选择器 ##

**1、包含选择器**

**2、子代选择器**

**3、相邻选择器**

**4、兄弟选择器**

### 8.**1、包含选择器** ###

### 语法： ###

**E F** \{ sRules \}

### 说明： ###

**选择所有被E元素包含的F元素。**

*  与 子选择符(E>F) 不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...
    
    **E F VS. E>F：**
    
        <style>
                /* 包含选择符(E F) */
                
                .demo div {
                    border: 1px solid #f00;
                }
                /* 子选择符(E>F) */
                
                .demo>div {
                    border: 1px solid #f00;
                }
            </style>
        </head>
        
        <body>
        
            <div class="demo">
                <div>0
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                </div>
            </div>
        
        </body>
    
    此例，如果是包含选择符，那么 0, 1, 2, 3 都有边框；如果是子选择符，那么只有 0 有边框，即只有子元素会被命中；

![20201207200453110.png][]

--------------------

### **8.2、子代选择器** ###

### 语法： ###

**E>F** \{ sRules \}

### 说明： ###

**选择所有作为E元素的子元素F。**

*  与 包含选择符(E F) 不同的是，子选择符只能命中子元素，而不能命中孙辈。

*  此例只有 .a 会被命中，因为它是 .demo 的子元素；

## 8.3**、相邻选择器** ##

### 语法： ###

**E+F** \{ sRules \}

### 说明： ###

**选择紧贴在E元素之后F元素，元素E与F必须同属一个父级。**

*  与 兄弟选择符(E~F) 相同的是，相邻选择符也是选择同级的元素F；不同的是，相邻选择符只会命中符合条件的那个毗邻的兄弟元素（即紧挨着E元素之后的第一个F元素）。
    
        <head>
        <style>
                h3 + p{
                    color: slateblue;
                }
            </style>
        </head>
        <body>
            <p>去年今日此门中</p>
            <h3>题都城南庄</h3>
            <p>去年今日此门中</p>
            <p>人面桃花相映红</p>
        
        </body>
        
        [点击并拖拽以移动]
        
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 5][]
 *

### 8.**4、兄弟选择器** ###

## 语法： ##

**E~F** \{ sRules \}

## 说明： ##

**选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级。**

需要注意的是，选择的只是同级的元素F，后代中的元素F不会被选择。

**只作用于同级元素**

<head>
    <style>
    
            h3 ~ p { color: #f00; }
    
        </style>
    
    </head>
    
    <body>
    
        <h3>这是一个标题</h3>
    
        <p>p1</p>
    
        <div>
    
            <p>p2</p>
    
            <p>p3</p>
    
        </div>
    
    </body>

![20201207202909723.png][]

--------------------

这个例子中，只有 p1 会被选中；p2/p3 由于与 h3 并不是同级，所以不会被选中；

只选择E元素之后的元素F，出现在E元素之前的元素F，不会被选择到。

**只作用于同级元素**

<head>
    <style>
    
           h3 ~ p { color: #f00; }
    
       </style>>
    
    </head>
    
    <body>
    
        <p>p0</p>
    
        <h3>这是一个标题</h3>
    
        <p>p1</p>
    
        <p>p2</p>
    
        <p>p3</p>
    
    </body>

![2020120720311425.png][]

这个例子中，p1/p2/p3 都会被选中；而 p0 因为在 h3 之前，所以不会被选中；

*  与 相邻选择符(E+F) 不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。
    
    **E~F VS. E+F：**

<head>
            <style>
                /* 相邻选择符(E+F) */
                
                h3+p {
                    color: #f00;
                }
                /* 兄弟选择符(E~F) */
                
                h3~p {
                    color: #f00;
                }
            </style>
        </head>
    
        <body>
    
            <h3>这是一个标题</h3>
            <p>p1</p>
            <p>p2</p>
            <p>p3</p>
    
        </body>

这个例子中，如果是相邻选择符，那么只有 p1 会变成红色；如果是兄弟选择符，那么 p1/p2/p3 都会变成红色；

![20201207203145275.png][]

--------------------

### 感谢观看~ ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 6][]

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70]: /images/20221120/d5cf1db26896423488831004d832ee3f.png
[Remark]: https://img-blog.csdnimg.cn/img_convert/3f4018203e0d34434aae3e81fe6f9014.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201207183827691.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201207185717990.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201207185744829.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk=,size_16,color_FFFFFF,t_70
[20201207185847819.png]: https://img-blog.csdnimg.cn/20201207185847819.png
[20201207190858503.png]: https://img-blog.csdnimg.cn/20201207190858503.png
[2020120719091198.png]: https://img-blog.csdnimg.cn/2020120719091198.png
[20201207191437521.png]: https://img-blog.csdnimg.cn/20201207191437521.png
[20201207191618663.png]: https://img-blog.csdnimg.cn/20201207191618663.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201207193606451.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk=,size_16,color_FFFFFF,t_70
[20201207194424665.png]: https://img-blog.csdnimg.cn/20201207194424665.png
[20201207200453110.png]: https://img-blog.csdnimg.cn/20201207200453110.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201208112209844.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk=,size_16,color_FFFFFF,t_70
[20201207202909723.png]: https://img-blog.csdnimg.cn/20201207202909723.png
[2020120720311425.png]: https://img-blog.csdnimg.cn/2020120720311425.png
[20201207203145275.png]: https://img-blog.csdnimg.cn/20201207203145275.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201207194511857.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk=,size_16,color_FFFFFF,t_70