CSS中颜色、样式规则（字体样式、列表样式、表格样式）

最新推荐文章于 2025-07-01 12:18:29 发布
最新推荐文章于 2025-07-01 12:18:29 发布
阅读量3.6k 收藏 20
点赞数 3
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/YANGMENGZHENG/article/details/120858316
本文详细介绍了CSS中颜色的表示方法，包括颜色名、rgb函数和十六进制表示，并阐述了字体规则，如font-family、font-style、font-size和font-weight。此外，还讲解了列表样式的设置，如list-style-position、list-style-image、list-style-type以及list-style，以及表格样式的各种属性，如border-spacing、border-collapse、border-color、border-width、border-style和border-radius。

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

目录

一、CSS中的颜色设置

1、颜色的表示方式

（1）、颜色名

（2）、rgb函数

（3）、十六进制表示（HEX 值） 

​二、CSS样式规则

1、字体规则

 (1) font-family属性：字体

 (2) font-style：字体样式

 (3) font-size：字号

 (4) font-weight：文字的粗细

2、列表样式

 (1)  list-style-position：设置项目符号和文本的位置

 (2)  list-style-image：指定项目符号的图像      

 (3)  list-style-type：指定项目符号的类型

 (4)  list-style：指定列表样式

 3、表格样式

（1） border-spacing：指定单元格之间的距离,不能是负值

​（2） border-collapse：指定单元格的边框是否合并,取值有两个

（4） border-width：边框宽度

（5） border-style：边框线的样式

（6） border-radius：边框的弧度

一、CSS中的颜色设置

1、颜色的表示方式

（1）、颜色名

CSS/HTML支持140种标准颜色名，如：red、blue、yellow等。

（2）、rgb函数

A、r、g、b表示三原色的值(取值范围在0~255之间)，rgb（red，green，blue）。

B、每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。

     eg:rgb（255，0,0）显示为红色，因为红色值设置最大，其它值设置为0。

C、黑色为rgb（0,0,0），白色为rgb(255,255,255)

D、通常为所有 3 个光源使用相等的值来定义灰色阴影。

eg:rgb(120,120,120)   rgb(180,180,180)

E、rgba它指定了颜色的不透明度(red,green,blue,alpha),alpha参数介于0.0（完全透明）和1.0（完全不透明）之间的数字。

eg:

（3）、十六进制表示（HEX 值） 

A、#rgb或#rrggbb，其中 rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值（与十进制 0-255 相同）。

B、eg: #ff0000 显示为红色，因为红色设置为最大值（ff），其他设置为最小值（00）。

C、黑色为#000，白色为#fff 

D、通常为所有 3 个光源使用相等的值来定义灰色阴影。

eg:#3c3c3c, #767676

二、CSS样式规则

1、字体规则

（1)、font-family属性：字体

如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。

  (2)、 font-style：字体样式

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

  • normal - 文字正常显示
  • italic - 文本以斜体显示
  • oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .normal{
            font-style: normal;
        }
        .italic{
            font-style: italic;
        }
        .oblique{
            font-style: oblique;
        }
    </style>
</head>
<body>
    <p class="normal">正常字体normal</p>
    <p class="italic">斜体italic</p>
    <p class="oblique">倾斜oblique</p>
</body>
</html>

 此处截图显示有问题，大家可以自己实操一下。

 (3)、font-size：字号

A、font-size 属性设置文本的大小。

B、如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。

C、字号的设置方法（4种）

       a、以像素设置字体大小：

            使用像素设置文本大小可以完全控制文本大小

       b、用 em 设置字体大小：

            为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

            W3C 建议使用 em 尺寸单位。

       c、使用百分比和 Em 的组合

       d、响应式字体大小（vw）：

           “视口宽度”（"viewport width"）;

           视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米                   宽, 则 1vw 为 0.5 厘米。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .px{
            font-size: 16px; 
        }
        .em{
            font-size:1em ;
        }
        .em1{
            font-size:100% ;
        }
        .vw{
            font-size:1vw ;
        }
    </style>
</head>
<body>
    <p class="px">使用像素</p>
    <p class="em">使用em</p>
    <p class="em1">使用%和em结合</p>
    <p class="vw">使用vw</p>
</body>
</html>

 

 (4)、 font-weight：文字的粗细

normal默认值，定义标准字体
bold定义粗字体
bolder定义更粗的字体
lighter定义更细的字体
数字（如：100）定义字体粗细，400等同于normal，700等同于bold
inherit规定应该从父元素继承字体的粗细

​​<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .normal{
            font-weight: normal; 
        }
        .a1{
            font-weight:400; 
        }
        .bold{
            font-weight:bold; 
        }
        .bolder{
            font-weight:bolder; 
        }
        .a2{
            font-weight:lighter; 
        }
    </style>
</head>
<body>
    <p class="normal">正常粗细</p>
    <p class="a1">正常粗细</p>
    <p class="bold">加粗</p>
    <p class="bolder ">更粗的字体</p>
    <p class="a2">字体变细</p>

</body>
</html>

 

2、列表样式

（1）  list-style-position：设置项目符号和文本的位置

list-style-position设置项目符号和文本的位置
  outside默认值，列表项目符号放置在文本以外，且环绕文本不根据符号对齐
  inside列表项目符号放置在文本以内，且环绕文本根据符号对齐 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .u1{
            list-style-position: inside;
        }
        .u2{
            list-style-position: outside;
        }
    </style>
</head>
<body>
    <h2>项目符号点将在列表项之外</h2>
    <ul class="u1">
        <li>红楼梦</li>
        <li>水浒传</li>
        <li>三国演义</li>
    </ul>
    <h2>项目符号点将在列表项之内</h2>
    <ul class="u2">
        <li>红楼梦</li>
        <li>水浒传</li>
        <li>三国演义</li>    
    </ul>
    
</body>
</html>

 

(2)  list-style-image：指定项目符号的图像  
    

list-style-image指定项目符号的图像  
 .u3{
            list-style-image: url(../image/1.gif);
        }

 

<h2>用图像做项目符号</h2>
    <ul class="u3">
        <li>红楼梦</li>
        <li>水浒传</li>
        <li>三国演义</li>    
    </ul>

 

 

(3)  list-style-type：指定项目符号的类型

 list-style-type指定项目符号的类型

 list-style-type:none 属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在 <ul> 或 <ol> 中添加 margin:0 和 padding:0 

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .u2{
            list-style-type:none;
        }
        /* .u2{
            list-style-position: outside;
        } */
    </style>
</head>
<body>
    <h2>有列表项目符号</h2>
    <ul class="u1">
        <li>红楼梦</li>
        <li>水浒传</li>
        <li>三国演义</li>
    </ul>
    <h2>删除项目符号</h2>
    <ul class="u2">
        <li>红楼梦</li>
        <li>水浒传</li>
        <li>三国演义</li>    
    </ul>
   
    
</body>
</html>

 (4)   list-style：指定列表样式

list-style指定列表样式

在使用简写属性时，属性值的顺序为：

  • list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
  • list-style-position（指定列表项标记应显示在内容流的内部还是外部）
  • list-style-image（将图像指定为列表项标记）

如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。

 

ul {
  list-style: square inside url("sqpurple.gif");
}

 3、表格样式

（1）border-spacing：指定单元格之间的距离,不能是负值

A、如果定义一个 length 参数，那么定义的是水平和垂直间距。

      如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。

B、inherit：规定应该从父元素继承 border-spacing 属性的值。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<style type="text/css">
table.one 
{
/* border-collapse: separate; */
border-spacing: 10px
}
table.two
{
/* border-collapse: separate; */
border-spacing: 10px 50px
}
</style>
</head>
<body>

<table class="one" border="1">
<tr>
<td>张三</td>
<td>李四</td>
</tr>
<tr>
<td>小明</td>
<td>小花</td>
</tr>
</table>

<br />

<table class="two" border="1">
<tr>
<td>理科</td>
<td>文科</td>
</tr>
<tr>
<td>美术</td>
<td>体育</td>
</tr>
</table>

</body>
</html>


       
（2）border-collapse：指定单元格的边框是否合并,取值有两个

separate单元格边框独立,默认值
 collapse相邻单元格的边框合并
inherit规定应该从父元素继承 border-spacing 属性的值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<style type="text/css">
table.one 
{
border-collapse:collapse;  /*相邻单元格边框合并*/
/* border-spacing: 10px */
}
table.two
{
border-collapse: collapse;
/* border-spacing: 10px 50px */
}
</style>
</head>
<body>

<table class="one" border="1">
<tr>
<td>张三</td>
<td>李四</td>
</tr>
<tr>
<td>小明</td>
<td>小花</td>
</tr>
</table>

<br />

<table class="two" border="1">
<tr>
<td>理科</td>
<td>文科</td>
</tr>
<tr>
<td>美术</td>
<td>体育</td>
</tr>
</table>

</body>
</html>


（3） border-color：边框颜色

A、border-color:red green blue pink;

  • 上边框是红色
  • 右边框是绿色
  • 下边框是蓝色
  • 左边框是粉色

B、border-color:red green blue;

  • 上边框是红色
  • 右边框和左边框是绿色
  • 下边框是蓝色

C、border-color:dotted red green;

  • 上边框和下边框是红色
  • 右边框和左边框是绿色

D、border-color:red;

  • 所有 4 个边框都是红色

       
（4） border-width：边框宽度

与颜色设置顺序一样，可以参考上一条 

（5）border-style：边框线的样式

与颜色设置顺序一样，可以参考上一条  

（6）  border-radius：边框的弧度

用%或长度定义圆角形状。

eg:50%或100px

 

CSS样式规则-CSS结构的特点
xiaoxijinger的博客
04-29 983
要想熟练地使用CSS对网页进行修饰，首先要了解CSS样式规则。设置CSS样式的具体语法规则如下。 选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; …} 在上面的样式规则中，选择器用于指定需要改变样式的HTML标签，花括号内部是一条或多条声明。每条声明由一个属性和属性值组成，以“键值对”的形式出现。 其中属性是对指定的标签设置的样式属性，例如字体大小、文本颜色等。属性和属性值之间用英文冒号“:”连接，多个声明之间用英文分号“;”进行分隔。例如，图1所示的CSS样式规则的结构示意图。 图1
CSS颜色--基本样式
pig_html的博客
12-26 1283
CSS样式 1.指定颜色的几种方式 颜色名称 { color:green; } //（预定义/跨浏览器的颜色名称） RGB { color:rgb(0,0,0); } //即是代表红、绿、蓝，以这三种颜色拼出的 RGBA { color:rgba(0,0,0,0.5); } //前面三位 rgb 和上面一样，最后一位代表了透明度，这里是 0.5 的透明度 十六进制 { color:#ff0000; } HSL色彩{ color: hsl(120,65%,75%); } HSLA颜色{ color: hsla
CSS颜色代码全解析：从基础到高级应用
最新发布
weixin_32312889的博客
07-01 1017
CSS颜色关键字是预定义的颜色名称，可以直接在CSS样式表中使用，无需引用RGB值或其他形式的编码。它们非常适用于快速设置那些常见的颜色，例如红色、蓝色或绿色。CSS中预定义的关键字颜色包括标准颜色（如blackwhitered等）和部分浏览器特定的扩展关键字（如alicebluecadetblue等）。在使用颜色关键字时，场景通常包括需要快速一致的颜色定义，特别是在基本的网页设计元素如链接 (a标签)、文本 (p标签) 或背景 (body标签) 上。
CSS颜色样式
weixin_33834137的博客
09-12 312
<style> .p1{ color:red; } .p2{ color:green; } .p3{ color:blue; } .p4{ color:#ff0000; } .p5{ color:#f00; } .p6{ color:rgb(255,0,0); } .p7{ color:rgb(178,178,178); } .p8{ ...
颜色样式
weixin_44540479的博客
07-17 211
作者：郑凯丰 开发工具：VS、WPF、XAML 编写日期：2019年7月16日 单一的颜色填充： SolidColorBrush <Rectangle Width=”100” Height=”100”> <Rectangle.Fill> <SolidColorBrush Color=”Red”> </SolidColorBru...
颜色和样式
小小博客
07-03 472
前言 主要用来更改绘图的线段颜色，以及用何种类似的点构成线段，具体看下面的内容即可。 颜色 Matplotlib线条颜色有四种表示方式。都是通过color属性来声明的。 8中内建默认颜色缩写（当然全拼也可以）。 缩写 全拼 颜色 b blue 蓝色 g green 绿色 r red 红色 m magenta 品红色 c cyan 青色 y yellow 黄色...
表格列表偶数列、奇数列的CSS样式示例
09-25
1. **整体样式**：`.list_table`类定义了表格的基本样式，包括上边距、内边距、字体大小、单词换行规则、边框宽度和颜色，以及边框合并方式。这确保了表格在视觉上具有统一性。 2. **表头样式**：`.list_table th`...
CSS实用表格模板：动态样式与颜色变换效果
此外，CSS表格样式不仅仅局限于颜色，还可以包括字体大小、边框样式、单元格间距、对齐方式等其他视觉效果。使用`border`属性可以定义表格的边框样式和颜色；`padding`属性能够控制单元格内容与其边框之间的间距；而...
css reset 重置样式介绍
09-25
2. 字体样式：重置字体大小、字体系列和字体颜色等，确保文本的一致性。 3. 列表样式：通常去除列表元素的默认样式，如点号。 4. 表单元素：重置input、select等表单元素的内边距、外边距和垂直对齐方式。 5. 图片...
CSS样式表教程：浏览器默认样式
09-27
在网页设计中，CSS样式表起着至关重要的作用，它决定了网页元素的外观和布局。然而，不同浏览器之间对相同HTML元素的默认样式处理存在差异，这是CSS样式表教程中经常提到的一个问题。这种差异性可能导致同一个网页在...
CuteEditor 编辑器的字体样式无法控制的解决方法
10-29
例如，创建一个名为`Editor.css`的文件，然后在这个文件中定义你需要的字体样式，如字体大小、颜色、字体系列等。之后，在初始化CuteEditor时，将这个属性设置为`Editor.css`，如下所示： ```javascript var editor...
css 样式颜色
11-07
html中css样式的各种颜色，各种颜色应有尽有，快速让你开发，请尽快下载哦， css 各种颜色样式
css颜色代码，css颜色样式
08-03
很实用的css颜色代码大全，有用的朋友，下载看看啊。对网页制作相当使用。
用CSS控制表格的交替颜色.rar
07-05
用CSS控制表格的交替颜色
CSS样式规则
Liyunhao_haoge的博客
10-03 7331
CSS样式规则 使用HTML时，需要遵从一定的规范。CSS也是如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：选择器 {属性:属性值;属性:属性值;}如：h1 {color:red; font-size:20px;} 在上面的规则中: 1、选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。 2、属性和属性值以“键值对”的形式出现。 3...
颜色样式案例
weixin_57770903的博客
05-07 462
通过颜色传达意义、表达不同的模块，这有一系列的定义方法，包括支持链接、悬停、选中等状态相关的的样式集。 颜色 .text-primary .text-secondary .text-success .text-danger .text-warning .text-info .text-light .text-dark .text-body .text-muted .text-white .text-black-50 .text-white-50 Copy <pclas.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值