CSS样式的内容

发布时间 2023-11-07 20:51:29作者: 和哗

字体样式

css提供了大量的字体样式,下面将说明部分字体样式的内容

一.color颜色

表示字体的颜色,可以直接使用英文单词,也可以使用rgb(),或者使用rgba()来赋值

语法:
color: 英文颜色/rgb(x,x,x)/rgba(x,x,x,x);

①rgb():由红绿蓝混合成的颜色,取值范围是1-255

②rgba():由红绿蓝混合成的颜色,取值范围是1-255,但比rgb()多一个参数是透明度,透明度的取值在0-1

 二.字体大小

字体大小font-size,单位px

语法:
font-size: 数量px

浏览器中默认字体大小16pxem表示当前字体的大小

三.字体粗细

字体粗细font-weight,取值范围100-900

语法:
font-weight数量;

常用700相当于bold

四.字体类别

改变字体类别font-family,比如微软雅黑宋体黑体

语法:
font-family字体类别,字体类别,.....,字体类别

五.字体风格

改变字体风格font-style,取值有italic(斜体)normal(默认值,正常的)

语法:
font-style: italic/normal;

六.文字修饰

文字修饰text-decoration,取值有line-through(删除线)underline(下划线)overline(上划线)

语法:
text-decorationline-through/underline/overline;

七.首行缩进

首行缩进text-ident单位em,如果首行缩进2格可以使用2em

语法:
text-indent数量em;

八.文字对齐方式

文字对齐text-align,参数有center(居中)left(左对齐)right(右对齐)

语法:
text-aligncenter/right/left ;

容器样式

一.宽度

宽度width,单位px

语法:
width:数量px;

二.高度

高度height,单位px

语法:
height: 数量px;

三.边框

边框border,里面有3个值分别代表边框宽度线的类型颜色

边框宽度:数量px

线的类型dashed(虚线),solid(实现)

颜色rgb(x,x,x)rgba(x,x,x,x)颜色英文

语法:
border: 数量px    线的类型     颜色;

四.行高

行高line-height,单位px

行高容器高度一致的时候,垂直居中

语法:
line-height数量px ;

无序列表样式

一.去除序列号

去除序列号list-style,参数取值none

语法:
list-stylenone

二.序列号样式

序列号样式list-style-type,取值有dic(实心圆)square(正方形)circle(空心圆)

语法:
list-style-typedisc/circle/square ;

特别的css样式提供无序列表变成有序列表的方法:属性值decimal

举个例子:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8 
 9     <style>
10         ul {
11             list-style-type: decimal;
12         }
13     </style>
14 </head>
15 
16 <body>
17     <ul>
18         <li>这是一个无序列表</li>
19         <li>这是一个无序列表</li>
20         <li>这是一个无序列表</li>
21         <li>这是一个无序列表</li>
22         <li>这是一个无序列表</li>
23     </ul>
24 </body>
25 
26 </html>

效果展示:

 三.序列号位置

序列号位置list-style-position,取值有outside(外部)inside(内部)

语法:
list-style-positioninside/outside

四.序列号的样式改为图片

序列号的样式改为图片list-style-image,可以通过url()确定图片位置

语法:
list-style-imageurl(相对路径);