CSS初学自用1

标签：段落 color 元素样式初学自用选择器 CSS 属性

一、CSS的简介

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

CSS具有的特点：

丰富的样式定义
易于使用和修改
多页面应用
层叠
页面压缩

二、样式分类和语法

1.内联样式

内联样式，也叫行内样式。将样式定义在元素的style属性中。

内联样式，就是将样式写在元素的开始标签里的style属性中

语法如下：

style = " 属性 : 值 ; 属性 : 值 ; ……"

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式写法分类第一种-内联样式</title>
</head>
<!--内联样式：就是将样式写在元素的开始标签里的style属性中 

    div：
        宽度：默认是撑满父元素的内容区宽度
        高度：自己的内容区的文字撑起来的高度。
        当然，可以自定义div的宽与高：width ，height


    扩展：插件live server的使用，一个简易的服务器插件，端口号默认是5500
            该插件可以使用浏览器打开HTML等文件，并且自动的实时刷新。
-->
<body>
    <div style="border: 5px dotted red;width: 500px; height: 300px;">我是div12</div>
</body>
</html>

结果演示：

对上面代码分析，border:5px dotted red；css写法，含义是：边框是5字节宽，球虚线（dotted）红色。

关于live server，在拓展按钮那里搜索，选第一个就好，安装完毕重启。默认端口号为5500，可能会存在被占用问题。

上面代码注释还提到了div相关知识，div宽度会直接占满他父亲的宽度，高度由它自己的内容决定，也可以自己设置。自己测试记得写出背景颜色（bgc）或者边框(border)。忘记说重点了，内联样式就是将css代码写在标签里面，记得加上style，不过这种方法不常用，css代码写起来太长了，不好看。

2.内部样式表

内部样式表，是将样式定义到HTML的<head>元素的子元素<style>里，使用选择器来定位要设置样式的元素。

在head里面写出css代码，记得是用style标签。具体例子如下图

具体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部样式</title>
    <style>
        #d1{
            background-color: pink;
            width: 50%;
            height: 400px;
        }
        #d2{
            border: 2px double orange;
            background-color: palegreen;
        }
    </style>
</head>
<!-- 内部样式表：将样式写在head的子元素style里面。
                此时需要使用选择器来定位你要设置样式的元素。 -->
    <!--语法
        选择器{
            属性：值；
            ...        
        }
    -->
<body>
    <div id="d1">我是div1</div>
    <div id="d2">我是div2</div>
    
</body>
</html>

结果展示：

这种方式的缺点就是写的css文件只适用于本文档，再写一份的话相同的css还需要重新写一遍。很麻烦，所以，这种方式也不常用，当然适合讲课用。下面讲的是常用的。

3.外部样式表

外部样式表（最常用的方法），是将css代码编写到CSS文件中，文件的扩展名为.css，然后通过link标签将css文件引入到HTML文档中。link是链接标签，作用就是导入文件的。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表</title>

    <!-- rel制定文件类型，href指定文件的位置 -->
    <link rel="stylesheet" href="./css/my.css">
</head>
<!-- 
    外部样式表：将样式单独分装到一个文件中，文件的扩展名是.css,
                然后使用link标签，将样式文件引入到该HTML页面中。
-->
<body>
    <div id="d1">div1</div>
    <div id="d2">div2</div>
    <div id="d3">div3</div>
</body>
</html>

结果：

这个的重点就是记得是link导入，还有书写css文件时，不需要加style了。这也是最常用的方法。

<link rel="stylesheet" href="./css/my.css">

rel的意思是指定的文件类型，href指定的是文件的位置。

三、选择器

1.基本选择器

1.1标签选择器

标签选择器也叫元素选择器。基本结构如下

标签名{

css属性名：属性值；

}

注意每句后面都要加' ; '。

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
        /* 标签选择器：也称元素选择 */
        p{
            font-size: 20px;
            color: blue;
        }

        div{
            /*  border-inline-xxx: xxx可以是width，color，style。设置左右边框的大小，颜色，线条形状
                border-block-xxx：xxx可以是width，color，style。设置上下边框的大小，颜色，线条形状
                border-left  border-right top
                常用的线条：
                    solid：实线
                    dotted： 点虚线
                    double： 双线条
                    
            */
            border-bottom-color: red;
            border-bottom-width: 2px;
            border-bottom-style: solid;
            border-left-color: rgb(128, 34, 34);
            border-left-width: 10px;
            border-left-style: double;
            width: 300px;
            height: 200px;
            
        }
    </style>
</head>
<body>
    <p>段落1</p>
    <div>div1</div>
    <p>段落2</p>
    <div>div2</div>
</body>
</html>

上述代码主要介绍了标签选择器的用法，其中详细介绍了border在css中主要写法，常用的线条，solid实线，double双实线，dotted点虚线，dashed直虚线。border的写法在后续也进行了优化，可以写成

border: 5px solid red;

1.2类选择器

类选择器主要是在标签里面定义好类，比如<div class="c1"> </div>，定义的类名就叫c1。

css写法结构：

.c1{

css属性名：属性值；

}

作用：通过类名，找到页面中所有的带有这个类名的标签，设置样式

注意

所有的标签上都有class属性，class属性的属性值成为类名（类似于起了一个名）
类名可以由数字，字母，下划线，中划线组成，但是不能以数字开头或者中划线开头
一个标签中可以同时有多个类名，类名之间用空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        /* 类选择器是以小圆点开头的样式选择器，小圆点后面是具体的class名称 */
        .c1{
            font-size: 20px;
            color: cyan;
        }

        .c2{
            font-size: 30px;
            color: rgb(213, 45, 182) ;
        }

        .c3{
            font-style: italic;
        }

        .c4{
            font-size: 20px;
            color: darkorchid;
            font-family:'Courier New', Courier, monospace;      
        }
    </style>
</head>
<body>
    <!-- 每个元素都有class属性。不同的元素的class的值可以相同，表示同一类的元素
    class的值可以有多个，使用空格隔开。 
    
    -->
    <div class="c1">div1</div>
    <p class="c2 c3">段落1</p>
    <h1 class="c2">标题1</h1>
    <p class="c4">仨大的艾丝妲仨啊</p>
</body>
</html>

注意事项就是，每个元素都可以有class属性，不同标签的class的值可以相同，表示同一类的元素class的值可以有多个，使用空格隔开。

结果展示：

1.3id选择器

id选择器跟class有很多相似的地方，但是有着根本性区别。

结构：

#id值{

css属性名：属性值；

}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意：

所有的标签上都有id属性
id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
一个标签上只能有一个id属性值
一个id选择器只能选中一个标签（一对一）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
       /*id选择器：必须使用#作为开始符号，紧跟着id的具体值  
       id:相当于身份证号，因此id的值是不可以重复的，具有唯一性

       与class的区别：
            1.在属性上的区别：class的值可以重复，id的值不能重复
            2.在选择器上的区别：class选择器以.开头，id选择器以#开头
       
       */
    #d1{
        border: 1px dotted red;
        width: 200px;
        height: 200px;
    }
    
    
    
    </style>

</head>
<body>
    <div id="d1">div1</div>
    <div id="d2">div2</div>
    <p id="d3">段落1</p>
</body>
</html>

结果：

要分清类与id选择器的区别，主要是css的写法不同，类用' . '，id用' # '开头。id不可重复，一对一关系，class类名可以重复。

class类名和id属性值之间的区别

class类名相当于姓名，可以重复，
一个标签中可以有多个class类名
id属性值相当于身份证号码，不可重复，一个标签里面只能有一个ID属性值

类选择器和id选择器之间的区别

类选择器以.开头；id选择器以#开头
实际开发中的情况类选择器用的最多 id一般配合js来使用，除非情况特殊，一般不要给id设置样式 实际开发中会遇到冗余代码的抽取

1.4. 通配符选择器

通配符选择器，也叫*选择器，表示所有的标签都被选中。（实际开发使用很少。）

结构： *{css属性名：属性值}

作用：找到页面中所有的标签，然后设置样式

注意：

开发中应用极少，只有在特殊的情况下才会使用
在小页面中可能会用于去除页面中默认的margin和padding

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 通配符选择器，就是*选择器，表示所有的元素都被选中 */
        #d1{
            width: 300px;
            height: 300px;
            background-color: aquamarine;

        } 

        .c1{
            color:chartreuse;
        }
        
        *{
            font-size: 50px;
        }
   
    </style>


</head>
<body>
    <div id="d1" class="c1">div1</div>
    <p class="c1">段落</p>
    <h1 class="c1">标题1</h1>
</body>
</html>

结果就不展示了，总之就是用处不大，知到有它就行。

2.复合选择器

复合选择器包含两类，一个交集选择器，一个并集选择器。交集写法直接挨着写，并集要用' , '隔开。好像就这些，下面是上课代码~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 交集选择器：
                选择器1选择器2选择器3{......}
                上述多个选择器中共同选中的标签进行设置样式 
        */
        .c1#p1{
            color: cadetblue;
        }
        p.c1{
            font-size: 50px;
        }

        /* 并集选择器：多个选择器的名字使用逗号隔开 */
        #s1,
        .c4,
        #d3{
            color: chartreuse,;

        }
    </style>


</head>
<body>
    <h1>交集选择器的测试</h1>
    <div class="c1">div1</div>
    <div class="c1">div</div>
    <p class="c1" id="p1">段落1</p>
    <p class="c2">段落2</p>
    <hr>
    <h1>并集选择器的测试</h1>
    <span id="s1"> 
        用户名已经存在
    </span>
    <br>
    <span class="c3">密码不正确</span>
    <p class="c4">段落3</p>
    <div id="d3">div3</div>
</body>
</html>

结果展示：

注意

交集选择器中如果有标签选择器，标签选择器必须放在前面。
选择器与选择器之间用逗号隔开可以是基础选择器或者复合选择器每组选择器通常一行写一个，提高代码的可读性

3.关系选择器

四种关系选择器，通过父亲选中个别后代，父亲>儿子；

通过父亲选中所有后代，父亲儿子；

通过哥哥选弟弟，兄+弟（必须是相邻的兄弟）

通过哥哥选择所有的弟弟，兄~弟。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
    父子选择器：通过父亲，选中儿子。
        语法：父>子{}
    后代选择器：通过祖先，选中后代。
        语法：祖先 后代{}
    兄+弟选择器：通过兄长选中紧邻的弟弟
        语法：兄+弟{}
    兄~弟选择器：通过兄长选中复合条件的所有弟弟
        语法：兄~弟{}
    
    -->
    <style>
    /* 父子选择器的演示 */


    div>span{
        font-size: 50px;
        color: rgb(2, 255, 255);
    }
    /* 后代选择器 */
    /* div span{
        color: orange;
    } */
    
    
    div p span{
        color: red;
    }
    /* 兄+弟 选择器 */
    div+span{
        background-color    : yellow;
    }
    /* 兄~弟选择器 */
    div~span{
        color: pink;
    }



   </style>




</head>
<body>
    <div>
        我是div
        <p>
            我是div中的p
            <span>我是p中的span</span>
        </p>
        <div>我是div中的div</div>
        <span>我是div中的span1</span>
        <span>我是div中的span2</span>
    </div>
    <span>我是div之外的span1</span>
    <span>我是div之外的span2</span>

</body>
</html>

截图展示：

4.属性选择器

属性选择器有五种：

[属性名]：选择含有指定属性的元素。

[属性名=属性值]：选择含有指定属性及指定属性值的元素。

[属性名^=指定值]：选中指定属性名的属性值是以指定值开头的元素。

[属性名$=指定值]:选中指定属性名的属性值是以指定值结尾的元素。

[属性名*=指定值]:选中指定属性名的属性值包含指定值的元素

注意。^=选开头，$=选结尾，*=是包含。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器的学习</title>
    <style>
        /* 属性选择器有五种：
            [属性名]：选择含有指定属性的元素。
            [属性名=属性值]：选择含有指定属性及指定属性值的元素。
            [属性名^=指定值]：选中指定属性名的属性值是以指定值开头的元素。
            [属性名$=指定值]:选中指定属性名的属性值是以指定值结尾的元素。
            [属性名*=指定值]:选中指定属性名的属性值包含指定值的元素
        */
    [title]{
        color: blue;
    }
    [title=a]{
        color: orangered;
    }
    [title^=a]{
        color: pink;

    }

    [title$=c]{
        color: aqua;
    }
    [title*=b]{
        color:orange;
    }


    </style>


</head>
<body>
    <h1 title="a">《出塞》</h1>
    <h2 title="ab">唐·王昌龄</h2>
    <p title="abc">秦时明月汉时关，</p>
    <p title="abab">万里长征人未还。</p>
    <p title="c">但使龙城飞将在，</p>
    <p>不教胡马度阴山。</p>
</body>
</html>

结果展示：

5.伪类选择器

伪类：不存在的类，特殊的类

伪类用来描述一个元素的特殊状态 比如：第一个子元素、被点击的元素、鼠标移入的元素...
伪类一般情况下都是使用:开头

5.1元素选择伪类

注意，:前有空格代表从子类开始数，无空格代表从所在级数开始。

常用的伪类选择器：

:first-child 第一个子元素被选中

:last-child 最后一个子元素被选中

:nth-child(n) 第n个子元素被选中。n的值可以从1到正无穷。

2n表示偶数位的元素被选中，也可以使用单词even。

2n+1表示奇数位的元素被选中，也可以使用单词odd。

注意：使用伪类选择器时，注意空格问题，优先选择带空格的。

:first-of-type: 同类型中的第一个元素

:last-of-type: 同类型中的最后一个元素

:nth-of-type(n): 同类型中的第n个元素，

2n表示偶数位的元素被选中，也可以使用单词even。

2n+1表示奇数位的元素被选中，也可以使用单词odd。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div p:first-child{
            color: aqua;
        } */

        /* div :last-child{
            color: chartreuse;
        } */
        /* body :last-child{
            color: pink;
            background-color: green;
        } */
        /* div:nth-child(2n){
            background-color: red;
        } */

        /* 选中同一类型的第一个元素，注意，是不同层级的第一个 */
        /* div:first-of-type{
            color: red;
        } */
         /* 选中同一类型的最后一个元素，注意，是不同层级的最后一个 */
        /* div:last-of-type{
            color: orange;
        } */
         /* 选中同一类型的第偶数个，注意，是不同层级的偶数个 */
        div:nth-of-type(2n){
        color: red;
        }

    </style>


</head>
<!-- 
    常用的伪类选择器：
        :first-child  第一个子元素被选中
        :last-child   最后一个子元素被选中
        :nth-child(n)   第n个子元素被选中。n的值可以从1到正无穷。
                        2n表示偶数位的元素被选中，也可以使用单词even。
                        2n+1表示奇数位的元素被选中，也可以使用单词odd。
    注意：使用伪类选择器时，注意空格问题，优先选择带空格的。

        :first-of-type: 同类型中的第一个元素
        :last-of-type: 同类型中的最后一个元素
        :nth-of-type(n): 同类型中的第n个元素，
                        2n表示偶数位的元素被选中，也可以使用单词even。
                        2n+1表示奇数位的元素被选中，也可以使用单词odd。


-->

<body>
 
    <div>    
        <p>段落1</p>
        <div>div1</div>
        <div>div6</div>
        <p>段落2</p>
        <p>段落3</p>
        <div>div6</div>
        <p>段落4</p>
    </div>
    <div>div2
        <div>div666</div>
        <p>段落5</p>
        <p>段落6</p>
        <div>div666</div>
        <div>div667</div>
        <div>div668</div>
    </div>
    
    <div>
        asasdasdas
        <div>div1</div>
        <p>段落2</p>
        <p>段落3</p>
        <div>div1</div>
        <div>div1</div>
        <div>div3</div>
        <div>div3</div>
        <div>div3</div>
    </div>
    <div>
        <p>段落2</p>
        <p>段落3</p>
        <div>div3</div>
        <div>div3</div>
        <div>div3</div>
        <div>div3</div>
    </div>
    <div>
        <p>段落2</p>
        <p>段落3</p>
        <div>div3</div>
        <div>div3</div>
        <div>div3</div>
        <div>div3</div>
    </div>
    <div>    
        <p>段落1</p>
        <div>div1</div>
        <div>div6</div>
        <p>段落2</p>
        <p>段落3</p>
        <div>div6</div>
        <p>段落4</p>
    </div>
    <div>    
        <p>段落1</p>
        <div>div1</div>
        <div>div6</div>
        <p>段落2</p>
        <p>段落3</p>
        <div>div6</div>
        <p>段落4</p>
    </div>
</body>
</html>

结果展示：（无）这个老师讲的好像很乱，我自己写了一堆测试了。看上面知识点说的吧，图就不展示了。QAQ。

注意，要分冒号前带空格和不带空格的两种情况去看。：first-child 跟：first-of-type是有区别的。type是同类型！

5.2否定选择器

结构：

:not(其他选择器)：注意，括号里不能传入复合选择器。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>否定伪类选择器</title>

    <style>
        /* 将所有的p里的文字都红，出了第一个和最后一个
        
        注意，如果带child关键字的伪类选择器，与其他的伪类选择器共同使用，冒号前面的空格不要使用。
        */
        /* p:not(p:first-child):not(p:last-child){
            color: red;
        } */

        p:not(p:first-of-type):not(p:last-of-type){
            color: green;
        }
    </style>


</head>

<!-- 
    :not(其他选择器)： 注意，括号里不能传入复合选择器。
    作用：将其他选择器选中的元素排除。

-->

<body>
    <div>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落三</p>
        <p>段落四</p>
    </div>
</body>
</html>

结果展示：

5.3 a链接伪类（我喜欢这个）

以下两个伪类是超链接所独有的

:link 表示未访问过的a标签
:visited 表示访问过的a标签

由于隐私的问题，所以visited这个伪类只能修改链接的颜色
以下两个伪类是所有标签都可以使用
:hover 鼠标移入后元素的状态
:active 鼠标点击后，元素的状态

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接伪类选择器的学习</title>
    <style>
        a:link{
            color: red;
            font-size: small;
        }
        /* 超链接访问后的状态，必须是存在的网址 */
        a:visited{
            color: rgb(66, 59, 72);
        }
        /* 鼠标移进的状态 */
        a:hover{
            background-color: yellow;
            font-size: larger;
        }
        /* 鼠标点击时的状态 */
        a:active{
            color: aqua;
            font-size: 50px;
        }

    </style>
</head>

<!-- 
    :link 超链接独有的选择器，表示未访问前的状态。
    :visited  超链接独有的选择器，表示访问过状态。
    :hover  所有元素都可以使用的选择器，表示鼠标进入该元素时的状态
    :active  所有元素都可以使用的选择器，表示鼠标左键点击该元素时的状态

-->

<body>
    <div>
        <a href="http://www.baidu.com">网站1</a><br>
        <a href="www.yc.com">网站2</a>
        <p>段落1</p>
    </div>
    
</body>
</html>

结果展示：

6.伪元素选择器

介绍：虚假的元素，实际上是没有的，但是css为了设置一些样式，默认提供的，一般都用在段落标记中。

伪元素：就是虚假的元素，并不存在。只是CSS为了对段落标记进行设置

p::first-letter 对段落的首字符设置样式

p::first-line 对段落的首行设置样式

p::selection 对段落中的被鼠标选中的文字设置样式

p::before 对段落中的第一个字符的前面设置样式,可以理解为向段落的开头添加

p::after 对段落中的最后一个字符的后面设置样式，可以理解为向段落的最后添加

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪元素选择器的学习</title>



    <style>
        /* 伪元素：就是虚假的元素，并不存在。只是CSS为了对段落标记进行设置 */
        /* 
        p::first-letter     对段落的首字符设置样式
        p::first-line       对段落的首行设置样式
        p::selection        对段落中的被鼠标选中的文字设置样式
        p::before           对段落中的第一个字符的前面设置样式,可以理解为向段落的开头添加
        p::after            对段落中的最后一个字符的后面设置样式，可以理解为想段落的最后添加
       
        */

        p::first-letter{
            font-size: 30px;
            color: blue;
        }
        /* p的紧邻着的弟弟p的首行 */
        p+p::first-line{
            background-color: pink;
        }
        p::selection{
            color: deeppink;
            background-color:cadetblue;
        }
        p::before{
            content: "你好";
            color: red;
        }
        p::after{
            content: "$";
            background-color: #ec4343;
        }


    </style>
</head>
<body>

    <p>hello</p>
    <p>world,我们要相信明天会更好。</p>

</body>
</html>

结果展示：

7. 选择器的优先级

内联样式 >id选择器>类和伪类选择器>标签选择器>默认状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级的演示</title>


    <style>
        /* 内联样式>id选择器>类和伪类选择器>默认样式*/
        #d1{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        /* 类选择器中的颜色不会覆盖id选择器中的颜色，优先级低，权重小。 */
        .c1{
            width: 2300px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>



<body>
    <div id="d1" class="c1" ></div>
    
</body>
</html>

结果：

8.样式的继承

CSS样式继承是指子元素会继承父元素的某些样式属性。常见的可以继承的CSS属性包括 font-family 、 color 、 font-size、line-height。但是不是所有的属性都可以继承，比如背景相关的和布局相关的就不会被继承。

演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            font-style: italic;
            font-size: 30px;
            color: blue;
            /* 子元素也会用到上述字体样式 */
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .inner{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            /* 可以看出背景颜色没有继承 */
        }

    </style>



</head>

<!-- 
    CSS针对于样式继承的设计，是为了减少开发过程中的代码量，使子元素具有副元素的一些样式
    父元素设计好的样式，子元素不需要再重复设置。
    比如字体风格、大小颜色等      但是某些样式继承不了，比如背景，布局相关的样式



-->


<body>
    <div class="outer">
        我是div1
        <div class="inner">
            我是内部div
        </div>
    </div>


</body>
</html>

结果展示：

9.单位的讲解

单位介绍：

最基本的单位：像素，即屏幕上的分辨率，1920*1080，表示整个屏幕上有这些个点。

一个点就是一个像素。

百分比单位：是子元素针对于父元素的百分比。会随着父元素的属性改变而改变。

em单位：是一个相对单位，相对当前元素的字体大小。

rem单位：也是一个相对单位，相对的是整个页面的根元素的字体大小。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 单位：
            最基本的单位：像素，即屏幕上的分辨率，192*1080，表示整个屏幕上有这些个点。
                        一个点就是一个像素。
            百分比单位：是子元素针对于父元素的百分比。会随着父元素的属性改变而改变。
            em单位：是一个相对单位，相对!本元素!的字体大小。
            rem单位：也是一个相对单位，相对的是整个页面的根元素的字体大小。            
                        
                        */
        html{
            font-size: 20px;
        }
        .outer {
            width: 800px;
            height: 500px;
            background-color: orange; 
             /*设置字体大小为16px  */
             /* font-size:32px; */
             /* 你好 原来设计的是32像素，现在使用rem单位，因此相对的是根元素的20px来说的 */
             /* 所以，2rem=40px 所以太阳也相对变成了80px */
             font-size: 2rem;
        }
        .inner{
            width: 50%;
            height: 50%;
            background-color: blue;
            /* 设置字体大小为32px */
            font-size: 32px;
        }
        div div:last-child{
            /* 由于默认是32px，因为样式的继承。2em=2个32px，也就是64px的大小 */
            font-size: 2em;
            /* border:1em solid red; */
            /* 因为本元素里的字体大小是2em，所以border的真实像素是64px。
                当设计边框的宽度时，使用的是1em，像素大小就是64px（注意，是相对本元素的字体大小。）*/
                /*颜色的单位 rgb  */
                border: 1em solid rgb(255, 101, 252,0.5)
                    /* 最后一位，是透明度 */
            }  


    </style>
</head>
<body>
    高圆圆
    <div class="outer">你好
        <div class="inner">中国</div>
        <div>太阳</div>
    </div>
</body>
</html>

没有运行截图了。因为这是测试两部分的代码。

颜色的rgb:(0,0,0,(0~1)) 最后一位表示透明度，1表示不透明，0表示完全透明，0.5表示半透明。

rgb ：颜色的三原色，red, green, blue
在电脑上可以使用8位二进制来表示三原色，
red: 00000000~11111111
green: 00000000~11111111
blue: 00000000~11111111
二进制的数字不同，表示该颜色的比例不同。从左到右分别是红，绿，蓝。每个原色，也可以使用16进制表示
red        #ff
green     #ff
blue     #ff

   小贴士：如果三原色的16进制的字符一致，可以简写       比如： #aabbff 可以简写成 #abf

标签：段落,color,元素,样式,初学,自用,选择器,CSS,属性
From： https://blog.csdn.net/zhaogodzero/article/details/140503589

一、CSS的简介

二、样式分类和语法

1.内联样式

2.内部样式表

3.外部样式表

三、选择器

1.基本选择器

1.1标签选择器

1.2类选择器

1.3id选择器

1.4. 通配符选择器

2.复合选择器

3.关系选择器

4.属性选择器

5.伪类选择器

5.1元素选择伪类

5.2否定选择器

5.3 a链接伪类（我喜欢这个）

6.伪元素选择器

7. 选择器的优先级

8.样式的继承

9.单位的讲解

相关文章

赞助商

阅读排行

CSS初学自用1

一、CSS的简介

二、样式分类和语法

1.内联样式

2.内部样式表

3.外部样式表

三、 选择器

1.基本选择器

1.1标签选择器

1.2类选择器

1.3id选择器

1.4. 通配符选择器

2.复合选择器

3.关系选择器

4.属性选择器

5.伪类选择器

5.1元素选择伪类

5.2否定选择器

5.3 a链接伪类（我喜欢这个）

6.伪元素选择器

7. 选择器的优先级

8.样式的继承

9.单位的讲解

相关文章

赞助商

阅读排行

三、选择器