HTML5+CSS3 从入门到精通（2）

最新推荐文章于 2023-02-13 16:56:57 发布
最新推荐文章于 2023-02-13 16:56:57 发布
阅读量748 收藏 4
点赞数
分类专栏： Web前端从入门到精通 文章标签： html5 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62845290/article/details/124775611
版权

目录

CSS是什么？

常用选择器

1. id选择器

 2. 类选择器

3. 通用选择器

 复合选择器

1. 交集选择器

 2. 选择器分组（并集选择器）

 关系选择器

1. 子元素选择器

2. 后代选择器

3. 兄弟选择器

4. 通用兄弟选择器

 属性选择器

 伪类选择器

:first-child

:last-child

:nth - child( )

:first - of - type

:last - of - type

:nth - of - type

:not( )否定伪类

 超链接的伪类

:visited

:hover 

:active

伪元素

::first - letter

::first-line

::selection

​编辑::before

::after

 继承

 选择器的权重

 ! important

 像素和百分比

 em 与 rem

 RGB值

RGB

RGBA

 hsl

CSS是什么？

CSS 是“Cascading Style Sheet”的缩写，中文意思为“层叠样式表”。

CSS作用：

        CSS 的主要作用是美化网页，对网页中元素的位置、字体、颜色、背景等属性进行精确控制。

        CSS 不仅可以静态地修饰网页，还可以配合 JavaScript 动态地修改网页中元素的样式。

常用选择器

1. id选择器

作用: 根据元素的id属性值选中一个元素

语法: #id属性值
例子: #box{ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中id带有box的元素 */
        #box{

        }
    </style>
</head>
<body>
    <!-- 为元素添加id -->
    <div id="box">

    </div>
</body>
</html>

 2. 类选择器

作用: 根据元素的class属性值选中一组元素

语法:  .class属性值

注意:  类选择器的定义需要用到一个英文的句号.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中类(class)是box的元素 */
       .box{

       }
    </style>
</head>
<body>
    <!-- 定义个类 -->
    <div class="box">

    </div>
</body>
</html>

3. 通用选择器

作用:  选中页面中的所有元素

语法:  *

用途：通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素。在开发中，我们通常使用通用选择器来清除 HTML 元素中默认的内外边距。

*{
    margin: 0;
    padding: 0;
  }

 复合选择器

1. 交集选择器

作用: 选中同时复合多个条件的元素

语法: 选择器1选择器2选择器3选择器n { } 

注意点: 交集选择器中如果有元素选择器，必须使用元素选择器开头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 将class为red的div字体设置为红色 */
        div.red{
            color: red;
        }
    </style>
</head>
<body>
    <div class="red">
        hello world
    </div>

    <span class="red">
        你好~ 朋友
    </span>
</body>
</html>

 运行结果如下图所示：

 

 2. 选择器分组（并集选择器）

作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,选择器n{ }
比如：#b1,.p1,h1,span,div.red{ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 同时选中三个元素 */
        h1,h2,h3{
            /* 为元素设置字体大小 */
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h1>我是h1标题</h1>
    <h2>我是h2标题</h2>
    <h3>我是h3标题</h3>
</body>
</html>

未设置字体大小前：

 设置后：

 关系选择器

  • 父元素
      直接包含子元素的元素叫做父元素
  • 子元素
      直接被父元素包含的元素是子元素
  • 祖先元素
      直接或间接包含后代元素的元素叫做祖先元素，一个元素的父元素也是它的祖先元素
  • 后代元素
      直接或间接被祖先元素包含的元素叫做后代元素，子元素也是后代元素
  • 兄弟元素
      拥有相同父元素的元素是兄弟元素

1. 子元素选择器

子选择器只会匹配某个元素的直接后代

选择器之间用大于号 > 分隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div > span{
            color: tomato;
        }
    </style>
</head>
<body>
    <div>
        <span>我是第一个span</span>
        <p>
            <span>我是第二个span</span>
        </p>
    </div>
</body>
</html>

运行结果如下图所示：

 2. 后代选择器

后代选择器的定义方式就是将标签名、class 属性或 id 属性等按照标签的嵌套关系由外到内的依次罗列，中间使用空格分开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中div后所有的span元素 */
        div span{
            color: tomato;
        }
    </style>
</head>
<body>
    <div>
        <span>我是第一个span</span>
        <p>
            <span>我是第二个span</span>
        </p>
    </div>
</body>
</html>

 运行结果如下图所示：

 

 3. 兄弟选择器

一、相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。

二、相邻兄弟选择器的定义需要用到加号 +，加号两边为相邻的两个元素，选择器会匹配加号后面的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中p相邻的span元素 */
        p + span{
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <span>我是第1个span</span>
        <p>
            <span>我是第2个span</span>
        </p>
        <span>我是第3个span</span>
        <span>我是第4个span</span>
        <span>我是第5个span</span>
        <span>我是第6个span</span>
    </div>
</body>
</html>

  运行结果如下图所示：

 

 4. 通用兄弟选择器

通用兄弟选择器需要用到波浪号 ~，波浪号两边为同一父级元素下的两个元素，选择器会匹配波浪号后面的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中与p是同级别的，p后面的所有span元素 */
        p ~ span{
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <span>我是第1个span</span>
        <p>
            <span>我是第2个span</span>
        </p>
        <span>我是第3个span</span>
        <span>我是第4个span</span>
        <span>我是第5个span</span>
        <span>我是第6个span</span>
    </div>
</body>
</html>

运行结果如下图所示：

 属性选择器

一、属性选择器用来匹配具有特定属性的元素。

二、属性选择器的定义方式与标签选择器相似，只不过需要在标签的后面使用方括号[ ]来指定标签具有的属性信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择含有指定属性的 */
        div[title]{
            color: chocolate;
        }
    </style>
</head>
<body>
    <div title="hello">第一个</div>
    <div title="hello">第二个</div>
    <div title="hello">第三个</div>
    <div>第四个</div>
</body>
</html>

运行结果如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择含有指定属性和属性值的元素 */
        div[title = hello]{
            color: chocolate;
        }
    </style>
</head>
<body>
    <div title="hello">第一个</div>
    <div title="he">第二个</div>
    <div title="hello">第三个</div>
    <div>第四个</div>
</body>
</html>

运行结果如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择属性值以指定值开头的元素 */
        div[title ^= h]{
            color: chocolate;
        }
    </style>
</head>
<body>
    <div title="hello">第一个</div>
    <div title="he">第二个</div>
    <div title="hello">第三个</div>
    <div title="world">第四个</div>
</body>
</html>

运行结果如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择属性值以指定值结尾的元素 */
        div[title $= o]{
            color: chocolate;
        }
    </style>
</head>
<body>
    <div title="hello">第一个</div>
    <div title="he">第二个</div>
    <div title="hello">第三个</div>
    <div title="world">第四个</div>
</body>
</html>

运行结果如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择属性值中含有某值的元素的元素 */
        div[title *= o]{
            color: chocolate;
        }
    </style>
</head>
<body>
    <div title="hello">第一个</div>
    <div title="he">第二个</div>
    <div title="hello">第三个</div>
    <div title="world">第四个</div>
</body>
</html>

运行结果如下图所示：

 伪类选择器

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

:first-child

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:first-child{
            color: chocolate;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第1个</li>
        <li>我是第2个</li>
        <li>我是第3个</li>
        <li>我是第4个</li>
        <li>我是第5个</li>
    </ul>
</body>
</html>

运行结果如下图所示：

 :last-child

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:last-child{
            color: chocolate;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第1个</li>
        <li>我是第2个</li>
        <li>我是第3个</li>
        <li>我是第4个</li>
        <li>我是第5个</li>
    </ul>
</body>
</html>

运行结果如下图所示：

 :nth - child( )

特殊值:
n表示第n个 ，n的范围0到正无穷
2n 或 even表示选中偶数位的元素

2n+1 或 odd 表示选中奇数位的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中奇数位 */
        ul li:nth-child(odd){
            color: chocolate;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第1个</li>
        <li>我是第2个</li>
        <li>我是第3个</li>
        <li>我是第4个</li>
        <li>我是第5个</li>
    </ul>
</body>
</html>

 运行结果如下图所示：

 

: first - of - type

这些个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中同类型第一个 */
        ul li:first-of-type{
            color: chocolate;
        }
    </style>
</head>
<body>
    <ul>
        <span>我是span</span>
        <li>我是第1个</li>
        <li>我是第2个</li>
        <li>我是第3个</li>
        <li>我是第4个</li>
        <li>我是第5个</li>
    </ul>
</body>
</html>

 运行结果如下图所示：

: last - of - type

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中同类型最后一个 */
        ul li:last-of-type{
            color: chocolate;
        }
    </style>
</head>
<body>
    <ul>
        <span>我是span</span>
        <li>我是第1个</li>
        <li>我是第2个</li>
        <li>我是第3个</li>
        <li>我是第4个</li>
        <li>我是第5个</li>
    </ul>
</body>
</html>

  运行结果如下图所示：

 

: nth - of - type

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中同类型的第二个 */
        ul li:nth-of-type(2){
            color: chocolate;
        }
    </style>
</head>
<body>
    <ul>
        <span>我是span</span>
        <li>我是第1个</li>
        <li>我是第2个</li>
        <li>我是第3个</li>
        <li>我是第4个</li>
        <li>我是第5个</li>
    </ul>
</body>
</html>

  运行结果如下图所示：

 :not( )否定伪类

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

注意：:nth-child()是整体一个大的排序，而:nth-of-type()是同类型的排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中除了第二个元素以外的所有的li */
        ul li:not(:nth-child(2)){
            color: chocolate;
        }
    </style>
</head>
<body>
    <ul>
        <span>我是span</span>
        <li>我是第1个</li>
        <li>我是第2个</li>
        <li>我是第3个</li>
        <li>我是第4个</li>
        <li>我是第5个</li>
    </ul>
</body>
</html>

  运行结果如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中除了同类型第三个元素以外的所有的li */
        ul li:not(:nth-of-type(3)){
            color: chocolate;
        }
    </style>
</head>
<body>
    <ul>
        <span>我是span</span>
        <li>我是第1个</li>
        <li>我是第2个</li>
        <li>我是第3个</li>
        <li>我是第4个</li>
        <li>我是第5个</li>
    </ul>
</body>
</html>

  运行结果如下图所示：

 超链接的伪类

:link 用来表示没访问过的链接（正常的链接)

 当点击链接为#的超链接，链接就会变一个颜色，而没访问过的链接就是正常的蓝色  

如下图：

注： javascript:; 与 # 都可用作超链接的占位符

 我们可以用:link来设置没访问过的链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置没访问过的链接，为橙色 */
        a:link{
            color: orange;
        }
    </style>
</head>
<body>
    <a href="#">访问过的</a>
    <br>
    <a href="javascript:;">我是没访问过的</a>
</body>
</html>

 运行结果如下：

 

 :visited

:visited用来表示访问过的链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置没访问过的链接，为橙色 */
        a:link{
            color: orange;
        }

        /* 设置访问过的链接，为红色 */
        a:visited{
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">访问过的</a>
    <br>
    <a href="javascript:;">我是没访问过的</a>
</body>
</html>

  运行结果如下：

 注意：link 和 visited 只能给a使用，是超链接独有的

:hover 

: hover用来表示鼠标移入的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置没访问过的链接，为橙色 */
        a:link{
            color: orange;
        }

        /* 设置访问过的链接，为红色 */
        a:visited{
            color: red;
        }

        /* 设置鼠标移入超链接后，背景颜色为灰色 */
        a:hover{
            background-color: gray;
        }
    </style>
</head>
<body>
    <a href="#">访问过的</a>
    <br>
    <a href="javascript:;">我是没访问过的</a>
</body>
</html>

 运行结果如下：

 :active

: active用来表示鼠标点击

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置没访问过的链接，为橙色 */
        a:link{
            color: orange;
        }

        /* 设置访问过的链接，为红色 */
        a:visited{
            color: red;
        }

        /* 设置鼠标移入超链接后，背景颜色为灰色 */
        a:hover{
            background-color: gray;
        }

        /* 当鼠标点击，背景颜色变为#bfa */
        a:active{
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <a href="#">访问过的</a>
    <br>
    <a href="javascript:;">我是没访问过的</a>
</body>
</html>

  运行结果如下：

 

补充： 

 链接伪类先后顺序被称为 LVHA 顺序：:link — :visited — :hover — :active。

 hover 和 active 可以绑定任意元素 

伪元素

伪元素：表示页面中一些特殊的并不真实的存在的元素（特殊的位置)
伪元素使用::开头

::first - letter

::first-line

::first - letter 表示第一个字母

::first - line 表示第一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 将第一个字母 L大小设置为30个像素 */
        p::first-letter{
            font-size: 30px;
        }

        /* 设置第一行的背景颜色 */
        p::first-line{
            background-color: rgba(0, 0, 0, .3);
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia cum non molestiae deleniti suscipit, earum odio distinctio et optio, pariatur ipsum tenetur ad praesentium nesciunt ut vitae neque dolor fuga.</p>
</body>
</html>

  运行结果如下：

 ::selection

表示选中的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 将第一个字母 L大小设置为30个像素 */
        p::first-letter{
            font-size: 30px;
        }

        /* 设置第一行的背景颜色 */
        p::first-line{
            background-color: rgba(0, 0, 0, .3);
        }

        /* 设置选中后，字体颜色变为red */
        p::selection{
            color: red;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia cum non molestiae deleniti suscipit, earum odio distinctio et optio, pariatur ipsum tenetur ad praesentium nesciunt ut vitae neque dolor fuga.</p>
</body>
</html>

  运行结果如下：

::before

::after

: : before元素的开始

: : after元素的最后
   -    before 和 after 必须结合content属性来使用

通过 content 属性来为一个元素添加修饰性的内容，此元素默认为行内元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 在p元素的开头加个 “绿色的心” */
        p::before{
            content: '❤';
            color: #bfa;
        }

        /* 在span元素的结尾加个“红心” */
        span::after{
            content: '❤';
            color: red;
        }
    </style>
</head>
<body>
    <p>您好啊</p>
    <span>欢迎来学习</span>
</body>
</html>

  运行结果如下：

 继承

样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上继承是发生在祖先与后代之间的
继承的设计是为了方便我们的开发
利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上
这样只需设置一次即可让所有的元素都具有该样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 为他们的祖先元素设置字体大小，会继承到后代所有元素身上 */
        body{
            font-size: 30px;
        }

        /* 为p设置字体颜色，后代元素第一个span就会继承 */
        p{
            color: greenyellow;
        }
    </style>
</head>
<body>
    <p>hello world
        <span>我是第一个span</span>
    </p>

    <span>我是第二个span</span>
</body>
</html>

   运行结果如下：

注意:

并不是所有的样式都会被继承
比如背景相关的，布局相关……这些样式都不会被继承。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 背景颜色是会被继承的 */
        p{
            color: greenyellow;
            background-color: chocolate;
        }

        .bg{
            background-color: gray;
        }
    </style>
</head>
<body>
    <p>hello world
        <br>
        <span>我是第一个span</span>
    </p>

    <span class="bg">我是第二个span
        <span>我是第三个span</span>
    </span>

    
</body>
</html>

 运行结果如下：

 选择器的权重

样式的冲突

        当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
        发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定

 选择器的权重：

  1. 内联样式
  2. id选择器
  3. 类和伪类选择器
  4. 元素选择器
  5. 通用选择器
  6. 继承的样式 (没有优先级)
     
  • 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器是单独计算的)
  • 选择器的累加不会超过其最大的数量级，类选择器在高也不会超过id选择器
  • 如果优先级计算后相同，此时则优先使用靠下的样式

即使同一类相加起来再高，也不会超过其最大级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       #first{
           color: red;
       }
       
       .red.blue.yello.hello{
           color: blue;
       }
    </style>
</head>
<body>
    <div id="first" class="red blue yello hello">
        <span>您好！</span>
    </div>
</body>
</html>

运行结果如下：

 ! important

可以在某一个样式的后边添加 ! important ，则此时该样式会获取到最高的优先级，甚至超过内联样式。
注意：在开发中这个一定要慎用！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       #first{
           color: red;
       }
       
       .red.blue.yello.hello{
           color: blue !important;
       }
    </style>
</head>
<body>
    <div id="first" class="red blue yello hello">
        <span>您好！</span>
    </div>
</body>
</html>

运行结果如下：

 

 像素和百分比

长度单位：
        像素
        屏幕（显示器）实际上是由一个一个的小点点构成的
        不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰，所以同样的200px在不同的设备下显示效果不一样

 百分比：
        也可以将属性值设置为相对于其父元素属性的百分比

        设置百分比可以使子元素跟随父元素的改变而改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .box1{
           width: 200px;
           height: 200px;
           background-color: tomato;
       }

       /* 子元素的宽高是父元素的50% */
       .box2{
           width: 50%;
           height: 50%;
           background-color: aqua;
       }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

运行结果如下：

 em 与 rem

 em

  • em是相对于元素的字体大小来计算的

  • 1em = 1 font-size

  • em会根据字体大小的改变而改变

rem

  • rem是相对于根元素(html)的字体大小来计算
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .box1{
           font-size: 20px;
           /* 相当于 20em*20px=400px */
           width: 20em;
           /* 15em*20px=300px */
           height: 15em;
           background-color: chocolate;
       }

    </style>
</head>
<body>
    <div class="box1">
    </div>
</body>
</html>

运行结果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            font-size: 10px;
        }
       .box1{
           font-size: 20px;
           /* 20*10 */
           width: 20rem;
           /* 15*10 */
           height: 15rem;
           background-color: chocolate;
       }

    </style>
</head>
<body>
    <div class="box1">
    </div>
</body>
</html>

运行结果如下：

 RGB值

RGB

  • RGB通过三种颜色的不同浓度来调配出不同的颜色
  • R red, G green, B blue
  • 每一种颜色的范围在0 ~ 255 (0% - 100%)之间
  • 语法: RGB(红色, 绿色, 蓝色)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .box1{
           width: 100px;
           height: 100px;
           /* 全0就是黑色 */
           background-color: rgb(0, 0, 0);
       }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

运行结果如下：

RGBA

  • 就是在rgb的基础上增加了一个a，a表示不透明度
  • 需要四个值，前三个和rgb一样，第四个表示不透明度
  • 1表示完全不透明，0表示完全透明，.5半透明
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .box1{
           width: 100px;
           height: 100px;
           background-color: rgba(0, 0, 0, .5);
       }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

运行结果如下：

 

 十六进制的RGB值

  • 语法:#红色绿色蓝色
  • 颜色浓度用 00~ ff 调整
  • 如果颜色两位两位重复可以进行简写

例如：

#aabbcc  >   #abc

#aabbce  不可简写

 hsl

hsl值 与 hsla值

  • h色相(0 - 360)
  • s饱和度，颜色的浓度0% -100%
  • l亮度，颜色的亮度0%-100%
  • a不透明度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .box1{
           width: 100px;
           height: 100px;
           /* 色相、饱和度、亮度、不透明度 */
           background-color: hsla(50, 60%, 70%, .5);
       }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

望大牛指点，更新中… 

张小阳__
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5+css3从入门到精通
07-03
更适合前端新手学习，web开发，html5+css3，更新的技术
相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）等用法
weixin_34050005的博客
09-29 5254
前言：我们在码代码的时候，经常会遇到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特殊的是选取第几个元素添加或删除样式，下面记录css选择器中常见的选择器:相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）、first-child、:last-child、:nth-child()、:nth-last-child()的用...
css选择器
不会飞的小飞侠24
08-24 236
类选择器可以根据标签的 class 属性匹配具体的 HTML 标签，所有符合条件的标签都会根据选择器内的样式进行格式化。子选择器与后代选择器类似，不过子选择器只会匹配某个元素的直接后代（元素与其子元素之间只有一层嵌套关系），子选择器由两个或多个选择器组成，选择器之间用大于号。这种由多个 class 属性值所组成的类选择器我们可以称之为“多类选择器”，而前面介绍的由单个 class 属性值定义的类选择器可以称为“单类选择器”。属性选择器的定义方式与标签选择器相似，只不过需要在标签的后面使用方括号。
HTML5+CSS3 从入门到精通（1）
张小阳_的博客
05-14 834
HTML5+CSS3 学习笔记
HTML5+CSS3从入门到精通 中文pdf版​
weixin_30488313的博客
04-25 923
HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式，讲述了用HTML5+CSS3设计构建网站的必备知识，相对于专业指南、高级程序设计、开发指南同类图书，本书是一本适合快速入手的自学教程。内容有：创建HTML5文档，实战HTML5表单，实战HTML5绘画，HTML5音频与视频，Web存储，离线应用，Workers多线程处理，Geolocation地理位置等技术。CSS3部分主...
HTML5+CSS3从入门到精通 源码和示例
09-25
HTML5+CSS3从入门到精通，作者：[美]Terry Felke-Morris， 源码和示例1-13章
《HTML5+CSS3从入门到精通》源码1-13章
09-12
源自于清华大学出版社出版的《HTML5+CSS3从入门到精通》中的教学资源,非常适合初学者自学网页设计.由于上传文件大小有限制,只好分成多个文件分别上传.一共19章,这是前13章.
html5+css3从入门到精通 pdf_HTML5从入门到精通之HTML5的技术组成
weixin_39880899的博客
11-29 513
　　随着互联网不断的迭代和创新，HTML5的发展也伴随着互联网渐入上升的趋势。并且已经逐渐蔓延到我们的生活点点滴滴之中。曾经风靡网页技术的霸主Flash动画也慢慢随着HTML5特性的公布被慢慢取代。由于HTML5网页技术出现时间较晚，而发展速度过快。这就导致了HTML5网页技术的资源比较零散，没有一个完整的学习体系。　　HTML5从入门到精通第一步了解技术组成：　　1、脱机功能　　HTML5透过J...
html css3入门到精通 pdf,css3从入门到精通pdf完整版附视频教程
weixin_32430445的博客
06-22 821
本帖最后由 长沙-小知姐姐 于 2019-3-20 09:41 编辑这次和大家一起来聊一聊css3,在前端编程中，html，css，js分别被称之为前端编程中的骨，肉，魂。html搭建前端页面的结构，就像是人的骨骼一般，支撑整个页面。css控制前端页面显示的效果和布局，就像是人的血肉一般，使得整个页面更加生动，灵活。js控制前端页面的业务逻辑，就像是人的灵魂一般，让页面能像一个人一样做该做的事情。...
HTML5+CSS3从入门到精通
10-16 111
跨平台开发技术-HTML5+CSS3从入门到精通(配两实战项目，兼顾PC版&&移动版网页+手游开发) 课程分类：HTML5+CSS3 适合人群：初级 课时数量：79课时 用到技术：html5 涉及项目：北风淘淘网站开发、北风酷跑游戏开发 咨询qq：1840215592 课程简...
CSS3+HTML5+从入门到精通-PDF中文教程
08-22
CSS3+HTML5+从入门到精通-中文学习教程,全本PDF教程，需要的朋友下载
HTML5与CSS3基础教程（中文第8版）.pdf
05-15
HTML5与CSS3基础教程（中文第8版） 本书自第1版至今，一直是讲解HTML和CSS入门知识的经典畅销书，全面系统地阐述HTML5和CSS3 基础知识以及实际运用技术，通过大量实例深入浅出地分析了网页制作的方方面面。最新第8版不仅介绍了 文本、图像、链接、列表、表格、表单等网页元素，还介绍了如何为网页设计布局、添加动态效果等，另 外还涉及调试和发布。本书提供了一个强大的配套网站，上面列出了书中的完整代码示例以及更多优秀实 例及进阶参考资料，以供读者参考学习。 通过学习本书，零起点读者即可创建网站，而中高级水平的开发人员也可以快速了解HTML5新元 素、 CSS3的奇幻效果、响应式Web设计以及各种最佳实践。
HTML5+CSS3从入门到精通.zip
05-29
想学习JavaWeb前端的就要在学好Java的基础的同时掌握HTML5+CSS3的技术，方便后续开发时对网页的修改以及样式美化。
html语言入门微盘,HTML+CSS从入门到精通(中文).pdf
weixin_33304896的博客
05-31 438
HTMLCSS从入门到精通(中文)本章目标熟悉HTML的各种标签熟练设置HTML各标签的属性熟练使用CSSwww简介WWW ，是World Wide Web (万维网)的缩写。万维网通常也简称为Web ，它是由无数的商业、教育、娱乐等资料组成的一个庞大的信息空间。我们在这个信息空间中遨游、浏览、搜寻资料，最终呈现在浏览器中的信息，就是Web页面。Web页面绝大多数都是...
HTML5+CSS3 从入门到精通
MichaelAn的博客
02-13 300
HTML5+CSS3 从入门到精通 2021-12 粗读前三章，价值不大 书籍介绍：HTML5+CSS3从入门到精通，李东博主编，清华大学出版社。2013年第一次出版，时间很早，入门级别书籍，大部分章节可以快速阅读。 第一章 Web 开发新时代 HTML5特点 兼容性好(传统的 HTML4 比较旧，XML规则太严格...
css从入门到精通
11-08
《CSS从入门到精通》共分为四篇，循序渐进的讲述了网页基础知识和CSS布局的实战技术，从基本概念到具体实践、从对网页的认识到制作网页、从使用CSS进行网页局部的设计到进行整个网站的布局制作都进行了详细的阐述，并对具体知识点进行了详细的实例讲解。, 本书内容丰富，注重思维方法的转变和提高实际操作能力，以最简单的方法介绍使用CSS进行符合Web标准的网页设计的相关知识和技巧。全书以CSS布局为主体内容，探讨CSS布局的入门知识与网站布局实战技巧、版式布局到细节、浏览器兼容性等，帮助读者改变传统的网站设计思维，进入基于Web标准的网页设计领域。本书含有大量实例，详细描述各个CSS属性，以及代码编写技巧，方便读者模拟实践。本书适合将要学习或者正在学习使用CSS布局技术的用户阅读，并可作为Web前端代码架构的从业人员的参考手册。
html5+css3+javascript从入门到精通
最新发布
03-16
要从入门到精通，需要掌握它们的基本语法、常用标签和属性、布局和样式技巧、事件处理和动画效果等方面的知识。此外，还需要了解一些常用的框架和库，如jQuery、Bootstrap、Vue.js等，以及一些开发工具和技巧，如...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值