css笔记（待续~）

最新推荐文章于 2021-08-03 21:54:55 发布

Ti小芬

最新推荐文章于 2021-08-03 21:54:55 发布

阅读量192

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/sanqianjia/article/details/107073389

版权

本文详细介绍了CSS中的伪元素，包括`::first-letter`、`::first-line`、`::selection`、`::before`和`::after`的用法。接着探讨了样式的继承原则，解释了选择器优先级的计算方法。此外，还讨论了像素和百分比在布局中的应用，以及RGB、RGBA、十六进制和HSL颜色单位的差异。最后，讲解了文档流的概念和盒模型，包括内容区、内边距、边框、外边距以及水平布局的策略。

摘要由CSDN通过智能技术生成

CSS

伪元素

伪元素，表示页面中一些特殊的并不真实的存在的元素
伪元素使用 “::” 开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容（比如复制之后用鼠标选中的内容）
::before 元素的前面
::after 元素的后面
（注：before和after必须结合content属性来使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         p{
   
             font-size: 20px;
         }
         p::first-letter{
   
             font-size: 50px;
         }
         p::first-line{
   
             background-color: yellow;
         }
         p::selection{
   
             background-color: tomato;
         }
         div::before{
   
             content:'swhq';
             color: tomato;
         }
         div::after{
   
             content:'hdgy21gha';
             color: tomato;
         }
    </style>
</head>
<body>
    <div>你好啊哈哈哈哈哈</div>

    <p>hw d2gu1d8g82 dvwuqcxbeudyg1y3du99guavwh2gsvg2 dv2y8d1suws1ydyie831d shwvu1y</p>
</body>
</html>

在这里插入图片描述

样式的继承

样式的继承，一个元素的样式也会应用到它的后代元素上
注：并不是所有的样式都会被继承，比如背景相关的，边框相关的，定位相关的样式就不会被继承。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         div{
   
             color: aqua;
         }
    </style>
</head>
<body>
    <div>
        我是p元素
        <br>
        <span>我是P的后代</span>
    </div>
</body>
</html>

最低0.47元/天解锁文章

Ti小芬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css笔记（待续~）

伪元素伪元素，表示页面中一些特殊的并不真实的存在的元素伪元素使用 “::” 开头::first-letter 表示第一个字母::first-line 表示第一行::selection 表示选中的内容（比如复制之后用鼠标选中的内容）::before 元素的前面::after 元素的后面（注：before和after必须结合content属性来使用）<!DOCTYPE html><html lang="en"><head> <m
复制链接

扫一扫

专栏目录