一、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中颜色代码和单位
CSS中颜色有其代码,部分颜色可以直接用英文代替,例如black,green,blue,red等. CSS中单位有多种表达形式,百分比等. 下面是来自w3cschools的信息: 1.用英文名称表示: ...
[css] css中最常用的字体有哪些？你是怎么选择字体的？
[css] css中最常用的字体有哪些?你是怎么选择字体的? 总结: win:微软雅黑为Win平台上最值得选择的中文字体,但非浏览器默认,需要设置:西文字体的选择以Arial.Tahoma等无衬线字体 ...
html如何给3种渐变色,css中颜色渐变的实现（三种方式）
本篇文章给大家带来的内容是关于css中颜色渐变的实现(三种方式),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. !!注意IE9及之前的版本不支持渐变.Safari要加-webkit- ...
css中引入新的字体文件
css中引入新的字体文件 @font-face { font-family: 'fzltxhk'; src:url('fzltxhk.ttf') format('truetype') ...
CSS中几种中文字体的英文写法.
网页前端开发制作中经常我们需要用一些像微软雅黑,宋体等中文字体的情况,一般我们直接使用font-family:"微软雅黑"这样的写法,;以前还真没发现这有什么问题,直到今天折磨一上 ...
【CSS】4-css文字，文本，列表，背景样式
4-css样式 1.css文字样式文字特效:font-family: 字体类型font-size: 字体大小font-style: 字体风格 italic斜体font-weight: 字体粗细,bo ...
Web前端开发笔记——第三章 CSS语言第四节 CSS列表、表格样式
目录一.CSS列表样式 (一)设计列表项前标志类型 (二)设计列表项前标志位置 (三)设计列表项图片 (四)设计整体列表属性二.CSS表格样式 (一)设计表格大小 (二)设计表格边框 (三)奇偶选 ...
CSS 中颜色如何表示？
CSS 中的颜色如何表示?简单易学 1.英语单词表示法这个是给英语大佬准备的,英语不好这种方式就跳过.反正我记不住那么多英语单词的. 说实话,我一个单词都不认识,也没去查翻译,就看图翻译的哈哈哈.样 ...
HTML和CSS中如何设置中文字体
你是不是也遇到过这个问题:在HTML或CSS中怎么设置字体为宋体或楷体或黑体等等中文字体呢?下面就来解决这个问题. 用font-family:字体英文名即可. fon标记是HTML里最常用的文字格式 ...

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：指定单元格的边框是否合并,取值有两个

（3） border-color：边框颜色

（4） border-width：边框宽度

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

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

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

最新文章

热门文章