文本、列表、其他样式、显示隐藏元素及px、-em和rem的区别

本文链接：https://blog.youkuaiyun.com/weixin_45753087/article/details/126194130

这篇博客详细介绍了CSS中文本的样式设置，包括颜色属性如rgb、rgba和16进制，文本装饰，字体图标（以阿里巴巴矢量图标库为例）的使用，以及列表样式的默认设定。此外，还讨论了隐藏与显示元素的方法，如display、visibility和opacity，并提及了px、em和rem的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1文本属性

属性概览：

color 为字体指定颜色

font-style 用于打开和关闭斜体文本

font-weight 为字体设置粗细程度

font-size 为文字指定大小

font-family 为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体

webFont 网络字体

字体图标

text-decoration 设置或者取消文本修饰

text-align 文字排列方式

text-indent 文本缩进属性

text-transform 设置或者取消字体改变

text-shadow 设置或者取消文本阴影

1.1颜色属性

css中通过color属性来修改颜色

1.2.1英文单词

设置一个标签，给标签修改颜色时可用英文单词，例如red(红)、skyblue(天蓝)、pink(粉)、green(绿)等

<head>
    <style>
        div{
            /* 颜色设置为红色 */
            color: red;
        }
    </style>
</head>

<body>
    <div>我是一个div</div>
</body>

1.2.2rgb三原色

三原色即为红、蓝、绿，取值为0-255之间，通过三原色的三色分别取不同的值，可以得到最终获得的颜色

<head>
    <style>
        div{
            /* rgb 三原色 red green blue  */
            /* color: rgb(red, green, blue); */
            /* 颜色为黄色的值 */
            color: rgb(255, 255, 0);
        }
    </style>
</head>

<body>
    <div>我是一个div</div>
</body>

1.2.3rgba三原色及透明度

与三原色相同，不过多出了一个可以调节透明度的标签，透明度的取值为0-1之间

<head>
    <style>
        div{
            /* rgba 三原色+透明度0-1之间取值,值越大,透明度越低 */
            /* 颜色为暗红色 */
            color: rgba(255, 0, 0, 0.5);
        }
    </style>
</head>

<body>
    <div>我是一个div</div>
</body>

1.2.4 16进制

通过每两位表示一个颜色，每到16就向前进一位，与三原色类似

<head>
        div{
            /* 16进制 */
            /* 颜色接近春绿色(springgreen) */
            color: #1dce7e;
        }
    </style>
</head>
<body>
    <div>我是一个div</div>
</body>

1.3文本样式

<head>
        p{
            /* 文本样式 */
            /* 设置文本打开或者关闭italic斜体 */
            font-style: italic;
            /* 设置文本粗细程度 100-900 默认为normal(400)
                bold 700 bolder 900    
            */
            font-weight: bold;
            /* 设置文本字体 检索电脑自带的字体 */
            font-family: '楷体';
            /* 字体大小  */
            font-size: 28px;
            /* 缩写形式 style weight size family */
            font: italic bold 28px ZoomlaTangYin-A053;
        }
    </style>
</head>
<body>
    <p>我是一个段落标签</p>
</body>

1.4字体图标（这里只介绍阿里巴巴矢量图标库(iconfont)的使用）

1.4.1单色图标

1.进入iconfont官网，找到单色图标库，将喜欢的图标加入到购物车(登录后)(可添加多个)

2.打开购物车，点击下方的下载代码，将下载好的代码文件夹放到你正在编辑的html的同级目录(方便查找引用)

3.在head标签下使用link语法引入，href 地址填下载好的代码目录里后缀为css的文件夹

4.在body标签下使用i语法引入，class里填“iconfont icon-flower”(flower为我下载的花的单色图标，这里引入你下载好的图标的名称即可，可在下载好的文件夹里的iconfont.css里查看)

<head>
    <!-- iconfont 单色图标库的使用 引入样式文件 -->
    <link rel="stylesheet" href="../font_9saqil75th/iconfont.css">
</head>
<body>
    <i class="iconfont icon-jiankangzhibiaojiance"></i>
</body>

1.4.2多色图标

1.进入iconfont官网，找到单色图标库，将喜欢的图标加入到购物车(登录后)(可添加多个)

2.打开购物车，点击下方的添加至项目(没有可创建)，选择Symbom，然后点击下载至本地，将下载好的代码文件夹放到你正在编辑的html的同级目录(方便查找引用)

3.在head标签下使用script语法引入，src 地址填下载好的代码目录里后缀为js的文件夹

4.在body标签下使用下列语法引入，href 里填“#icon-icon-flower”(flower为我下载的花的多色图标，这里引入你下载好的图标的名称即可，可在下载好的文件夹里的iconfont.js里查看)

<head>
    <!-- 使用iconfont 多色图标库 -->
    <!-- script是书写js代码的区域  -->
    <script src="../font_3537022_lgf17en86u/iconfont.js"></script>
</head>
<body>
    <!-- 使用多色图标 -->
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-icon-flower"></use>
    </svg>
</body>

1.5文本装饰属性

<head>
    <!-- 文本装饰属性 -->
    <style>
        a{
            /* 取消下划线 */
            text-decoration: none;
        }
        .div1{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            /* 文本对齐方式 左对齐 中间对齐 右对齐 */
            text-align: center;
        }
        .div2{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .div3{
            /* 删除线 */
            text-decoration: line-through;
        }
        .div4{
            /* 下划线 */
            text-decoration: underline;
        }
        p{
            /* 设置文本的缩进 首行缩进两个字符 */
            text-indent: 2em;
        }
        section{
            /* 设置字体的形变 */
            text-transform: uppercase;
            /* 设置首字母大写 */
            text-transform: capitalize;
            /* 等宽字体 */
            text-transform: full-width;
            /* 设置文本阴影 */
            text-shadow: -5px -5px 1px red;
        }
    </style>
</head>
<body>
    <section>hello css</section>
    <div class="div1">我是一个div
        <div class="div2"></div>
    </div>
    <div class="div3">我是div3</div>
    <div class="div4">我是div4</div>
    <br>
    <a href="">百度一下</a>
    <p>我是一个段落标签我是一个段落标签我是一个段落标签我是一个段落标签</p>
</body>

2列表样式

默认样式

ul,ol 元素的margin-top，margin-bottom均为16px(1em) ， padding-left为40px(2.5em)

li 元素没有设置默认的空白（行间距）

dl 元素的margin-top，margin-bottom均为16px(1em),但是没有内边距

dd 元素的margin-left为40px(2.5em)

p 元素的margin-top，margin-bottom为16px(1em)

<head>
  <style>
    /* 设置列表标志项 */
    ul{
      list-style-type: square;
      /* 设置列表标志项位置 outside为默认的一个取值 */
      list-style-position: inside;
      /* 自定义列表标志项 */
      list-style-image: url(../images/03.png);
      /* list的缩写形式 */
      list-style: circle url(../images/02.png) inside;
      /* 取消标志项 */
      list-style: none;
    }
  </style>
</head>

<body>
  <ul>
    <li>第1个li标签</li>
    <li>第2个li标签</li>
    <li>第3个li标签</li>
  </ul>
</body>

3.其他样式

<head>
    <style>
        div{
            /* 设置行高 */
            width: 300px;
            /* height: 300px; */
            border: 1px solid red;
            /* 文本居中 水平居中 垂直居中 */
            text-align: center;
            line-height: 300px;
            /* display */
            /* 设置行内元素 */
            /* display :inline; */
            /* 设置行内块元素 具有行内元素和块级元素的特点 */
            display: inline-block;
        }
        span{
            /* 设置块级属性 */
            display: inline-block;
            /* display: block; */
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>我是一个div</div>
    <span>我是一个span</span>
    <span>我是一个span</span>
    <div>我是一个div</div>
</body>

4.隐藏与显示元素

4.1display

<head>
    <style>
        .div1{
            width: 300px;
            height: 300px;
            background-color: red;
            /* 使用display隐藏元素 不占据屏幕空间 */
            /* display: none; */

        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>

多用于鼠标不悬浮时隐藏元素，悬浮到特定位置时显示元素

显示时使用 display: block;

(对于元素显示时占据位置的情况，可以设置元素的相对定位解决 position: relative;)

4.2 visibility

<head>
    <style>
        .div1{
            width: 300px;
            height: 300px;
            background-color: red;
            /* 使用visibility隐藏元素 占据屏幕空间 */
            visibility: hidden;
            /* visible为显示 */
            visibility: visible;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>

与display用法类似

4.3 opacity(透明度)

<head>
    <style>
        .div1{
            width: 300px;
            height: 300px;
            background-color: red;
            /* 使用opacity(透明度)隐藏元素 0-1 占据屏幕空间 */
            opacity: 0;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>

4.4 overflow

<head>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: red;
            /* overflow 隐藏元素 将超出父元素的内容隐藏 */
            /* overflow: hidden; */
            /* 将超出父元素的内容以滚动条的形式显示 */
            /* overflow: scroll; */
            /* 自适应 */
            /* overflow: auto; */
        }
    </style>
</head>
<body>
    <div class="div1">
        <div>第1个标签</div>
        <div>第2个标签</div>
        <div>第3个标签</div>
        <div>第4个标签</div>
        <div>第5个标签</div>
        <div>第6个标签</div>
        <div>第7个标签</div>
        <div>第8个标签</div>
        <div>第9个标签</div>
        <div>第10个标签</div>
        <div>第11个标签</div>
        <div>第12个标签</div>
        <div>第13个标签</div>
        <div>第14个标签</div>
        <div>第15个标签</div>
        <div>第16个标签</div>
        <div>第17个标签</div>
        <div>第18个标签</div>
        <div>第19个标签</div>
        <div>第20个标签</div>
    </div>
</body>

扩展：设置鼠标悬浮样式(悬浮到此元素上的样式)

手指样式

cursor: pointer;

5.px、em、rem的区别

<head>
	<!-- px和em和rem的区别
	1.px像素单位 相对于屏幕宽高度而言
	2.em相对长度单位 相对于当前元素的字体大小而言 
        默认1em=16px
  
	3.rem相对长度单位  相当于html元素字体大小而言的 -->
	<style>
		html{
			font-size: 40px;
		}
		div {
			/* 1.em */
			font-size: 28px;
			/* 文字到边框的距离 */
			/* padding: 1em; */
			/* 2.rem */
			padding: 1rem;
		}
	</style>
</head>

<body>
	<div>我是一个div</div>
</body>