九：以理论结合实践方式梳理前端 CSS 3 ——— 伪元素的应用

最新推荐文章于 2023-06-29 17:29:19 发布

十三餍

最新推荐文章于 2023-06-29 17:29:19 发布

阅读量132

点赞数

分类专栏： CSS3+ 专栏文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weijun20180101/article/details/123612988

版权

CSS3+ 专栏专栏收录该内容

10 篇文章 0 订阅

订阅专栏

伪元素的应用

CSS伪元素是用来添加一些选择器的特殊效果。

伪元素的语法：

selector:pseudo-element {property:value;}

CSS类也可以使用伪元素：

selector.class:pseudo-element {property:value;}

:first-line 伪元素

“first-line” 伪元素用于向文本的首行设置特殊样式。下面的属性可应用于 “first-line” 伪元素：

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p:first-line {
    color:#ff0000;
    font-variant:small-caps;
}
</style>
</head>

<body>
<p>你可以使用 "first-line" 伪元素向文本的首行设置特殊样式。</p>
</body>
</html>

:first-letter 伪元素

“first-letter” 伪元素用于向文本的首字母设置特殊样式。下面的属性可应用于 “first-letter” 伪元素：

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if “float” is “none”)
text-transform
line-height
float
clear

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p:first-letter {
	color:#ff0000;
	font-size:xx-large;
}
p:first-line {
	color:#0000ff;
	font-variant:small-caps;
}
</style>
</head>

<body>
<p>你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母
设置特殊样式。</p>
</body>
</html>

:before 伪元素

“:before” 伪元素可以在元素的内容前面插入新内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	h1:before {content: '你好';}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
</body>
</html>

:after 伪元素

“:after” 伪元素可以在元素的内容之后插入新内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	h1:after {content: 'ok';}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性.</p>
</body>
</html>

注：:before 与 :after 中的 content 属性值除了可以是文本，也可以是图片地址，甚至还可以通过 attr 去获取标签定义的某个属性的属性值，达到传值的功效

元素居中方案

文字居中

（1）文字水平居中

<!DOCTYPE html>
<html>
<head>
    <style>
    .box {
        width: 500px;
        height: 300px;
        border: 1px solid black;
        text-align: center; /* 设置文字居中对齐 */
    }
    </style>
</head>
<body>
    <div class="box">
        <p class="item">我居中啦<br/>我居中啦</p>
        <p class="item">我也居中啦</p>
    </div>
</body>
</html>

（2）文字垂直居中

<!DOCTYPE html>
<html>
<head>
    <style>
    .box {
        width: 500px;
        height: 300px;
        border: 1px solid black;
        display: table-cell;    /* 设置元素生成框的类型为 表格单元 */
        vertical-align: middle; /* 设置元素垂直对齐方式为 中线对齐  */
    }
    </style>
</head>
<body>
    <div class="box">
        <p class="item">我居中啦<br/>我居中啦</p>
        <p class="item">我也居中啦</p>
    </div>
</body>
</html>

（3）文字垂直居中

<!DOCTYPE html>
<html>
<head>
    <style>
    .box {
        width: 500px;
        height: 300px;
        border: 1px solid black;
        line-height: 300px; /* 设置 lin-height 属性，值与 height 属性相等 */
    }
    .item {
        margin: 0;  /* 设置 margin  值为 0，防止偏移 */
        padding: 0; /* 设置 padding 值为 0，防止偏移 */
        display: inline-block;  /* 设置元素生成框的类型为 行内块框 */
        vertical-align: middle; /* 设置元素垂直对齐方式为 中线对齐 */
        line-height: 24px; /* 设置行高，覆盖父元素设置 */
    }
    </style>
</head>
<body>
    <div class="box">
        <p class="item">我居中啦<br/>我居中啦</p>
        <p class="item">我也居中啦</p>
    </div>
</body>
</html>

块框居中

（1）块框水平居中

<!DOCTYPE html>
<html>
<head>
    <style>
    .box {
        width: 500px;
        height: 300px;
        background: black;
        border: 1px solid black;
    }
    .item {
        width: 100px;
        height: 100px;
        background: gray;
        border: 1px solid white;
        margin: 0 auto; /* 设置外边距，上下外边距为 0，左右外边距为 auto（自动居中处理） */
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
    </div>
</body>
</html>

（2）块框垂直居中

<!DOCTYPE html>
<html>
<head>
    <style>
    .box {
        width: 500px;
        height: 300px;
        background: black;
        border: 1px solid black;
        position: relative; /* 设置 position 为 relative */
    }
    .item {
        width: 100px;
        height: 100px;
        background: gray;
        border: 1px solid white;
        position: absolute;  /* 设置 position 为 absolute */
        top: 50%; /* 距离定位元素顶部 50% */
        transform: translateY(-50%); /* 沿着 Y 轴反向偏移 50% */
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
    </div>
</body>
</html>

（3）块框水平、垂直居中

<!DOCTYPE html>
<html>
<head>
    <style>
    .box {
        width: 500px;
        height: 300px;
        background: black;
        border: 1px solid black;
        display: flex;           /* 使用 Flex 布局 */
        flex-direction: row;     /* 设置主轴沿着水平方向 */
        justify-content: center; /* 设置沿着主轴对齐方式 居中对齐 */
        align-items: center;     /* 设置沿交叉轴对齐方式 居中对齐 */
    }
    .item {
        width: 100px;
        height: 100px;
        background: gray;
        border: 1px solid white;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
    </div>
</body>
</html>

三角形方案

三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

尖角朝上

<!DOCTYPE html>
<html>
<head>
    <style>
    .triangle-up {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    }
    </style>
</head>
<body>
    <div class="triangle-up"></div>
</body>
</html>

尖角朝下

<!DOCTYPE html>
<html>
<head>
    <style>
    .triangle-up {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid red;
    }
    </style>
</head>
<body>
    <div class="triangle-up"></div>
</body>
</html>

尖角朝左

<!DOCTYPE html>
<html>
<head>
    <style>
    .triangle-up {
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-right: 100px solid red;
        border-bottom: 50px solid transparent;
    }
    </style>
</head>
<body>
    <div class="triangle-up"></div>
</body>
</html>

尖角朝右

<!DOCTYPE html>
<html>
<head>
    <style>
    .triangle-up {
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-left: 100px solid red;
        border-bottom: 50px solid transparent;
    }
    </style>
</head>
<body>
    <div class="triangle-up"></div>
</body>
</html>

尖角朝左上

<!DOCTYPE html>
<html>
<head>
    <style>
    .triangle-up {
        width: 0;
        height: 0;
        border-top: 100px solid red;
    	border-right: 100px solid transparent;
    }
    </style>
</head>
<body>
    <div class="triangle-up"></div>
</body>
</html>

尖角朝右上

<!DOCTYPE html>
<html>
<head>
    <style>
    .triangle-up {
        width: 0;
        height: 0;
        border-top: 100px solid red;
    	border-left: 100px solid transparent;
    }
    </style>
</head>
<body>
    <div class="triangle-up"></div>
</body>
</html>

尖角朝左下

<!DOCTYPE html>
<html>
<head>
    <style>
    .triangle-up {
        width: 0;
        height: 0;
        border-bottom: 100px solid red;
    	border-right: 100px solid transparent;
    }
    </style>
</head>
<body>
    <div class="triangle-up"></div>
</body>
</html>

尖角朝右下

<!DOCTYPE html>
<html>
<head>
    <style>
    .triangle-up {
        width: 0;
        height: 0;
        border-bottom: 100px solid red;
    	border-left: 100px solid transparent;
    }
    </style>
</head>
<body>
    <div class="triangle-up"></div>
</body>
</html>