CSS（二）

Toxic_Girl

已于 2023-10-15 16:17:08 修改

阅读量227

点赞数

文章标签： css 前端

于 2023-10-07 22:11:19 首次发布

本文链接：https://blog.csdn.net/Toxic_Girl/article/details/133654233

版权

4.文本样式

与字体样式的区别：

字体样式针对的是字体本身的形体效果，文本样式针对的是整个段落的排版效果。

4.1首行缩进

text-indent：后+像素值

<!DOCTYPE html>
<html lang="zh-CN">
<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 {
            font-size:14px;
            text-indent:28px;    /*缩进两格*/
        }
      </style>
</head>
<body>
    <h3> 爱莲说 </h3>
    <p> 水陆草木之花，可1爱者甚蕃2。晋陶渊明独爱菊3；自李唐来，世人甚爱牡丹4。
    予5独爱莲之6出淤泥7而不染8，濯9清涟10而不妖11，中通外直12，不蔓不枝13，
    香远益清14，亭亭净植15，可16远观而不可亵17玩18焉19。</p>
    <p>予谓20菊，花之隐逸者21也；牡丹，花之富贵者也；莲，花之君子22者也。
    噫23！菊之爱24，陶后鲜25有闻26，莲之爱，同予者何人27？牡丹之爱，宜乎众矣28。</p>
    

</body>
</html>

效果：

4.2水平对齐

text-align：left左对齐（默认值），center居中对齐，right右对齐。

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        #p1 { text-align: left;}
        #p2 { text-align: center;}
        #p3 { text-align: right;}
      </style>
</head>
<body>
    <p id="p1">爱莲说1</p>
    <p id="p2">爱莲说2</p>
    <p id="p3">我爱学习3</p>
    

</body>
</html>

效果：

4.3文本修饰

text-decoration：none（去除所有划线效果，默认值）；underline（下划线）；line-through（中划线）；overline（顶划线）。

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        #p1 { text-decoration: overline;}
        #p2 { text-decoration: underline;}
        #p3 { text-decoration: line-through;}
      </style>
</head>
<body>
    <p id="p1">爱莲说1</p>
    <p id="p2">爱莲说2</p>
    <p id="p3">我爱学习3</p>
</body>
</html>

效果：

实用例子：去除超链接下划线

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        #a1 { text-decoration: none;}
        
      </style>
</head>
<body>
    <a id="a1" href="https://www.bilibili.com/">哔哩哔哩</a>
    <a id="a2" href="https://www.bilibili.com/">哔哩哔哩</a>
</body>
</html>

效果：

4.4大小写转换

text-tarnsform

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        #p1 { text-transform: uppercase;}
        #p2 { text-transform: lowercase;}
        #p3 { text-transform: capitalize;}
        
      </style>
</head>
<body>
    <p id="p1" >i have nothing to declare except my genius.</p>
    <p id="p2" >I HAVE NOTHING TO DECLARE.</p>
    <p id="p2" >i have nothing to declare except my genius.</p>
</body>
</html>

效果：

4.5行高

line-height：指一行的高度，行间距指两行之间的距离。

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        #p1 { line-height: 15px;}
        #p2 { line-height: 20px;}
        #p3 { line-height: 25px;}
        
      </style>
</head>
<body>
    <p id="p1" >i have nothing to declare except my genius.</p>
    <p id="p2" >I HAVE NOTHING TO DECLARE.</p>
    <p id="p2" >i have nothing to declare except my genius.</p>
</body>
</html>

效果：

4.6间距

letter-spacing：字母间距，字间距

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        #p1 { letter-spacing: 0px;}
        #p2 { letter-spacing: 3px;}
        #p3 { letter-spacing: 5px;}
        
      </style>
</head>
<body>
    <p id="p1" >i have nothing to declare except my genius.除了我的天才，我没什么好申报的。</p>
    <p id="p2" >I HAVE NOTHING TO DECLARE.除了我的天才，我没什么好申报的。</p>
    <p id="p2" >i have nothing to declare except my genius.除了我的天才，我没什么好申报的。</p>
</body>
</html>

word-spcing：行间距

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        #p1 { word-spacing: 0px;}
        #p2 { word-spacing: 3px;}
        #p3 { word-spacing: 5px;}
        
      </style>
</head>
<body>
    <p id="p1" >i have nothing to declare except my genius.除了我的天才，我没什么好申报的。</p>
    <p id="p2" >I HAVE NOTHING TO DECLARE.除了我的天才，我没什么好申报的。</p>
    <p id="p2" >i have nothing to declare except my genius.除了我的天才，我没什么好申报的。</p>
</body>
</html>

效果：

5.边框样式

6.列表项符号

list-style-type:none;使用频率最高的，无序列表中的

7.列表项图片

list-style-image：url（图片路径）

8.超链接伪类

需要按照下表顺序定义，否则有些没法显示。

<!DOCTYPE html>
<html lang="zh-CN">
<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{
          text-decoration: none;
        }
        a:link{color: red;}
        a:visited{color: purple;}
        a:hover{color:yellow;}
        a:active{color: blue;}
      </style>
</head>
<body>
  <a href="https://www.bilibili.com/" target="_blank">哔哩哔哩</a>

</body>
</html>

效果展示：为什么我的浏览器默认紫色，重新定义也无效，因为浏览器记录过点击，清除缓存试试。

实际开发中的应用：

9.深入了解伪类

hover伪类可以定义任何一个鼠标经过时元素的样式。

效果：

10.鼠标样式

自定义鼠标样式：cursor

小技巧：

输入div*4，再按tab键会有如下效果：

<body>
    <div>*4

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

Toxic_Girl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS（二）

text-decoration：none（去除所有划线效果，默认值）；underline（下划线）；line-through（中划线）；overline（顶划线）。text-align：left左对齐（默认值），center居中对齐，right右对齐。line-height：指一行的高度，行间距指两行之间的距离。text-indent：后+像素值。的形体效果，文本样式针对的是。实用例子：去除超链接下划线。
复制链接

扫一扫