css的属性（2）与伪类和伪元素

无微或无常

已于 2024-08-13 20:04:31 修改

阅读量1k

点赞数 34

文章标签： css 前端笔记

于 2024-08-13 19:46:54 首次发布

本文链接：https://blog.csdn.net/weixin_71949204/article/details/141141134

版权

文本换行

1. word-wrap 文字换行

word-wrap 属性设置⽂本内部⻓单词或URL换⾏取值：

normal 默认值（浏览器保持默认处理）。
break-word 在⻓单词或 URL 地址内部进⾏换⾏。

2.word-break

word-break 属性设置⾃动换⾏的处理⽅法取值：

normal 使⽤浏览器默认的换⾏规则。
break-all 允许在单词内换⾏。
keep-all 只能在半⻆空格或连字符处换⾏。

3. white-space 不允许文字换行

nowrap:文本不会换行，文本会在在同一行上继续，直到遇到 < br >标签为止。

text-overflow 当文本溢出包含元素时剪切文字

ellipsis ：显示省略符号来代表被修剪的文本。

<style>
  .box{
    width: 300px;
    border: 1px solid #f00;
    white-space: nowrap;
    /*溢出隐藏*/
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<div class="box">
  这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本这是一个测试文本
</div>

案例：单行/多行文本省略

<!-- 案例：单行文本省略 -->
<style>
  ul{
    width: 400px;
  }
  li{
    width: 100%;
    float: left;
    /* 不让文字换行 */
    white-space: nowrap;
    /*溢出隐藏 */
    overflow: hidden;
    /*添加省略符号 */
    text-overflow: ellipsis;
  }
</style>
<ul>
  <li>中财办副主任：慈善捐赠是自愿行为，不能搞“逼捐”</li>
  <li>念！首位歼-10女飞行员余旭牺牲5周年 曾驾机飞越天安门</li>
  <li>外交部：中美双方正就元首会晤的具体安排保持密切沟通</li>
  <li>今年以来多地出生人口降幅超一成 专家：育龄妇女数量减少是源头</li>
  <li>俄媒：美国驻也门使馆人员被扣为“人质”，美国国务院回应</li>
</ul>

<!-- 多行文本省略 -->
<style>
  ul{
    width: 200px;
  }
  li{
    width: 100%;
    margin-top: 30px;
    margin-left: 30px;
    /* 标签变为弹性盒子 */
    display: -webkit-box;
    /*按照垂直方向排序 */
    -webkit-box-orient: vertical;
    /*保留对应的行数 */
    -webkit-line-clamp: 2;
    /*多余的行数隐藏 */
    overflow: hidden;
  }
</style>
</head>
<body>
    <ul>
        <li>1.中财办副主任：慈善捐赠是自愿行为，不能搞“逼捐”</li>
        <li>2.念！首位歼-10女飞行员余旭牺牲5周年 曾驾机飞越天安门</li>
        <li>3.外交部：中美双方正就元首会晤的具体安排保持密切沟通</li>
        <li>4.今年以来多地出生人口降幅超一成 专家：育龄妇女数量减少是源头</li>
        <li>5.俄媒：美国驻也门使馆人员被扣为“人质”，美国国务院回应</li>
    </ul>
 </body>

文字阴影text-shadow【css3】

text-shadow 属性向文本设置阴影。

语法：text-shadow: x-shadow y-shadow blur color;

x-shadow	必需。水平阴影的位置允许负值
y-shadow	必需。垂直阴影的位置允许负值
blur	可选。模糊的距离
color	可选。阴影的颜色

/* 单层阴影 */
p.info {
    text-shadow: -5px -5px 3px black;
    font-size: 50px;
}
/* 多层阴影 */
p {
    text-shadow: 5px 5px 3px red,8px 8px 3px orange,11px 11px 3px yellow,14px 14px 3px green,17px 17px 3px yellowgreen,20px 20px 3px greenyellow,23px 23px 3px blue;
    font-size: 50px;
}
/* 正阴影 */
div {
    text-shadow: 0 0 5px #fff,0 0 10px #fff,0 0 15px #fff,0 0 40px #ff00de,0 0 70px #ff00de;
    font-size: 50px;
}

盒子阴影box-shadow【css3】

box-shadow 属性向框添加一个或多个阴影。

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow	必需。水平阴影的位置允许负值
v-shadow	必需。垂直阴影的位置允许负值
blur	可选。模糊距离
spread	可选。阴影尺寸
color	可选。阴影颜色
inset	可选。将外部阴影（outest）改为内部阴影

.box2 {
    width: 150px;
    height: 200px;
    background-color: antiquewhite;
    /*
    内阴影
    box-shadow: 0px 0px 15px 0px #000 inset;
    */
}
/* 小米商品鼠标悬浮阴影 */
.box2:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
}

text-stroke

是用来为文本添加描边效果的css属性，但请注意，它并非标准CSS属性，而是WebKit（如Safari和Chrome）浏览器专有的CSS扩展属性，为了兼容其他浏览器，通常会配合 -webkit-text-stroke 和 -moz-text-stroke 等私有前缀属性一起使用

-webkit-text-stroke: stroke-width color;
-moz-text-stroke: stroke-width color;

需要注意的是，使用-webkit-text-stroke会导致文本的渲染性能下降，特别是当文本内容非常多或者在移动设备上时，可能会影响到性能和体验。

属性	描述
stroke-width	规定文本描边的宽度，可以用长度单位（如 px、em 等）指定。
color	描边的颜色，可以是任何有效的CSS颜色值，比如 red、#FF0000 或 rgba(255, 0, 0, 0.5)。

stroke-width

规定文本描边的宽度，可以用长度单位（如 px、em 等）指定。

<style>
.container1 {
    -webkit-text-stroke: 1px red;
}
.container2 {
    -webkit-text-stroke: 0.06em red;
}

</style>
<div class="container container1">1像素宽的红色描边</div>
<div class="container container2">0.06em的红色描边</div>

color

描边的颜色。可以是任何有效的CSS颜色值，比如 red、#FF0000 或 rgba(255, 0, 0, 0.5)。

.container1 {
    -webkit-text-stroke: 1px red;
}
.container2 {
    -webkit-text-stroke: 1px green;
}

案例：镂空文字

.container {
    font-size: 36px;
    <!-- 方法一: -->
    color: transparent;
    <!-- 方法二: -->
    /* color:rgba(0,0,0,0) */
    <!-- 方法三: -->
     /* color: #fff; 缺点不能有背景颜色  */
}

.container1 {
    -webkit-text-stroke: 1px red;
}

拓展1：多行/多行文本垂直居中

单行文本垂直居中

<style>
.box{
    width: 300px;
    height: 300px;
    border: 1px solid #f00;
    line-height: 300px;
}
</style>
<div class='box'>
  比如，当前热映《长清湖》超越了《你好，李焕英》票房
</div>

多行文本垂直居中

<style>
  .box{
    width: 300px;
    height: 300px;
    border: 1px solid #f00;
    /* 将div修改为table单元格的特性 */
    display: table-cell;
    /* 垂直居中 */
    vertical-align: middle;
  }
</style>
<div class='box'>
  比如，当前热映《长清湖》超越了《你好，李焕英》票房，这是很不容易的。要知道当初《你好，李焕英》不仅拥有天时（影院放开不久），还有人和。贾玲与刘德华互联网上频繁互动，为影片上映做好了预热，不大卖都难。
</div>

css伪类和伪元素

伪类

定义

伪类⽤于向某些选择器添加特殊的效果

超链接伪类

给a链接添加⼏种状态：

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问或访问过后的链接 */
a:hover {color:#FF00FF;} /* 鼠标悬浮或划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

其他常⻅的伪类选择器 :focus :checked :first-child :last-child等

元素获取

伪元素不是真正的元素，不存在与⽂档之中，所以 js ⽆法对它进行操作。为什么叫他“元素”？因为我们可以对其进⾏跟元素⼏乎⽆差别的操作。

:first-child  /* 第一个子元素 */
:last-child  /* 最后一个子元素 */
:only-child /* 只有一个子元素 */
:root  /* 根标签 */
:nth-child(n)   /* 第几个子元素 */
ul li:nth-child(1){color:#f00;}   /* 第一个子元素 - 从1开始 */ 
ul li:nth-child(2n){color:#f00;} /* 偶数行的子元素 - 2的倍数的所有元素 */ 
:nth-child(odd)  /* 奇数元素 */
:nth-child(even)  /* 偶数元素 */
:nth-last-child(-n+4) /* 后4个元素 */

伪元素

定义

CSS伪元素是⽤来添加⼀些选择器的特殊效果。最好使⽤双冒号，防⽌与伪类混淆

first-letter首字母

first-letter 伪元素⽤于向⽂本的⾸字⺟设置特殊样式：

p::first-letter {color: red;}

其他常⻅的伪元素选择器

::first-line 首行
::first-letter 首字母
::before 元素前插入
::after 元素后插入
::placeholder：选取输入字段中的占位文本。改变input中占位符的颜色

before与after的⽤法总结

before定位的基准是其主元素的右上⻆，after定位的基准是主元素的结尾处。当主元素没有内容时before与after仍会正常⼯作，属性为行内元素，若需要设置⾼宽度等属性需要首先设置为块元素。 content是伪元素必需的属性。若伪元素没有内容，需赋值为空格：content:' '; before与after的主要⽤途是对元素默认样式的的美化：美化时需要结合定位于内容。⼀般讲主元素设置为position：relative，伪元素设置为position：absolute，以⽅便对伪元素定位。

a:hover::before,
a:hover::after {
    position: absolute;
}
a:hover::before {
    content: "我是前"; left: -20px;
}
a:hover::after {
    content: "我是后"; right: -20px;
}

伪类与伪元素区别

<style>
    li.first-item {
        color: orange
    }
</style>
<ul>
    <li class="first-item">我是第一个</li>
    <li>我是第二个</li>
</ul>

如果想要给第一项添加样式，可以在为第一个

添加一个类，并在该类中定义对应样式

如果不用添加类的方法，我们可以通过给设置第一个

的:first-child伪类来为其添加样式。这个时候，被修饰的
元素依然处于文档树中。

<style>
    .first{
        font-size:18px;
    }
    p::first-letter {
        font-size:18px;
    }
</style>
<p><span class="first">我</span>是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落我是段落</p>

如果想要给该段落的第一个字添加样式，可以在第一个字中包裹一个元素，并设置该span元素的样式如果不创建一个元素，我们可以通过设置的::first-letter伪元素来为其添加样式。这个时候，看起来好像是创建了一个虚拟的元素并添加了样式，但实际上文档树中并不存在这个元素。

伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。

CSS3规范中的要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类，比如::before和::after等伪元素使用双冒号(::)，:hover和:active等伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号(::)表示方法。除了少部分伪元素，如::backdrop必须使用双冒号，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after也可以正确运行。建议使用双冒号的写法，更容易识别出是伪类还是伪元素。