CSS中颜色、样式规则(字体样式、列表样式、表格样式)

目录

一、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、每个参数 (redgreen 以及 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&
  • 3
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值