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

最新推荐文章于 2024-07-23 14:07:14 发布

命中。

最新推荐文章于 2024-07-23 14:07:14 发布

阅读量3.4k

点赞数 3

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/YANGMENGZHENG/article/details/120858316

版权

(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>