Day03常用样式

作者：何张恒

时间：2022-08-05

章节博客地址：https://blog.csdn.net/qq_42263859/article/details/126179093?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22126179093%22%2C%22source%22%3A%22qq_42263859%22%7D&ctrtid=SNUrL

---

01、CSS Fonts字体属性

1、简写属性：font

font 简写属性在一个声明中设置所有字体属性。

可设置的属性是（按顺序）：

​ ①字体样式：font-style

​ ②字体是否正常显示：font-variant

​ ③字体粗细：font-weight

​ ④字体大小/行高：font-size/line-height

​ ⑤字体类型：font-family

/* 设置字体：斜体、加粗、字体大小12px/行高30px、楷体 */
font: oblique bold 12px/20px "楷体";
1
2

2、字体类型：font-family

font-family 属性设置文本的字体类型。

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意：①如果字体系列的名称超过一个字，它必须用引号；②多个字体系列是用一个逗号分隔指明

font-family: times,"Times New Roman","宋体";
1

3、字体样式：font-style

主要是用于指定斜体文字的字体样式属性。

这个属性有3个值

1. normal：正常-正常的显示文本。默认值。
2. oblique：斜体-以斜体字显示的文字
3. italic：斜体。对于没有斜体变量的特殊字体，将应用 oblique，故不建议使用

font-style: normal;    /* 正常-正常显示文本 */
font-style: oblique;   /* 斜体-以斜体字显示的文字 */
1
2

4、字体大小：font-size

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

font-size: 24px;    /* 设置字体大小为24px */
1

三种设置字体大小的方式：

1. 设置字体大小像素

   h1 {font-size:40px;}
   h2 {font-size:30px;}
   p {font-size:14px;}
   1
   2
   3

2. 用em来设置字体大小

   h1 {font-size:2.5em;}    /* 40px/16=2.5em */
   h2 {font-size:1.875em;}  /* 30px/16=1.875em */
   p {font-size:0.875em;}   /* 14px/16=0.875em */
   1
   2
   3

3. 使用百分比和em组合

   body {font-size:100%;}
   h1 {font-size:2.5em;}
   h2 {font-size:1.875em;}
   p {font-size:0.875em;}
   1
   2
   3
   4

5、字体粗细：font-weight

三段文字设置****的粗细：

font-weight:normal;   /* 设置字体正常显示*/
font-weight:bold;     /*设置字体加粗*/
font-weight:900;      /* 设置字体字体粗细为900 */
1
2
3

属性值：

6、定义小型大写字母文本：font-variant

font-variant 属性主要用于定义小型大写字母文本

font-variant: normal;      /*默认值。浏览器会显示一个标准的字体。*/
font-variant:small-caps;   /*把段落设置为小型大写字母字体*/
1
2

02、CSS Text文本

7、文本颜色：color

颜色属性被用来设置文字的颜色。

表示颜色的方式：

• 方式1：颜色英文单词表示法，如：红色red、蓝色blue
• 方式2：RGB表示法 rgb(r,g,b) r,g,b分别表示0-255之间的数字
• 方式3：rgba表示法 rgba(r,g,b,a) r,g,b,a分别是0-255 a是表示透明度，数字介于0-1之间，数字越小越透明
• 方式4：十六进制表示法

color: red; 
color: rgb(255,0,0); 
color: rgba(255,0,0,0.5); 
color: #ff0000;
1
2
3
4

8、文本缩进：text-indent

文本缩进属性是用来指定文本的第一行的缩进。

text-indent: 2em;   /* 设置文本的缩进2em */
ext-indent: 32px;   /* 32px/16 = 2em */
1
2

9、文本装饰：text-decoration

text-decoration 属性用来设置或删除文本的装饰。

（1）从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

text-decoration:none;   /* 删除下划线 */
1

（2）也可以用于装饰文字：

text-decoration: underline;     /* 设置下划线 */
text-decoration: overline;      /* 设置上划线 */
text-decoration: line-through;  /* 设置贯穿线 */
text-decoration: none;          /* 去除装饰 */
1
2
3
4

10、文本对齐方式：text-align

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

text-align: left;      /* 文本左对齐 */
text-align: right;     /* 文本右对齐 */
text-align: center;    /* 文本居中对齐 */
text-align: justify;   /* 文本两端对齐 */
1
2
3
4

11、垂直对齐方式：vertical-align

vertical-align 属性设置一个元素的垂直对齐方式。

vertical-align: top;     /* 垂直顶端对齐 */
vertical-align: middle;  /* 垂直居中对齐 */
vertical-align: bottom;  /* 垂直底端对齐 */
1
2
3

以下为参考图片

![img](file:///D:\InstalledSoftware\3.QQ\保存消息\820732120\Image\C2C\AT_SJ[%GAKU]NQ)K6M2XX.png)

12、设置行高：line-height

字体最底端与字体内部顶端之间的距离（属性用于指定行之间的间距）

长度单位（em、ex、px）

line-height:38px;   /* 设置行高为38px */
1

03、CSS Link超链接

注意：设置为若干链路状态的样式，也有一些顺序规则：

• a:hover 必须跟在 a:link 和 a:visited后面
• a:active 必须跟在 a:hover后面

			a{
				text-decoration: none; /* 去除下划线 */
			}
			/* 当用户鼠标放在链接上时 ：显示红色red、显示下划线*/
			a:hover{
				color: red;   /* 设置字体颜色red */
				text-decoration: underline;   /* 添加下划线 */
			}
			/* 当链接被点击的那一刻 ：显示蓝色blue、显示贯穿线*/
			a:active{
				color: blue;  /* 设置字体颜色blue */
				text-decoration: line-through;  /* 添加贯穿线 */
			}
			
			a:link{
				color: #FFFF00;
			}
			a:visited{
				color: red;
			}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

13、超链接样式：a:hover

a:hover表示当用户鼠标放在链接上时，显示里面内容设置的属性

/* 当用户鼠标放在链接上时 ：显示红色red、显示下划线*/
a:hover{
	/* 以下两个为常见设置的的链接样式*/
	color: red;   /* 设置字体颜色red */
	text-decoration: underline;   /* 添加下划线 */
}
1
2
3
4
5
6

04、CSS 列表：

14、列表-简写属性：list-style

list-style:简写属性，用于把所有用于列表的属性设置于一个声明中。

可以设置的属性（按顺序）:

• list-style-type：设置列表项标志的类型（例如：实心圆、空心圆、实心方块等）
• list-style-position：设置列表中列表项标志的位置
• list-style-image：使用图像来替换列表项的标记。

list-style:none;  /* 无标记(去除列表前的项目符号) */
1

ul
{	
    list-style:square url("sqpurple.gif");
}
1
2
3
4

15、list-style-type

设置列表项标志的类型（例如：实心圆、空心圆、实心方块等）

list-style-type: none;   /* 无标记(去除列表前的项目符号) */
list-style-type: disc;   /* 实心圆，默认 */
list-style-type: circle; /* 空心圆 */
list-style-type: square; /* 实心方块 */
1
2
3
4

示例:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			.a{
				list-style-type: none;   /* 无标记(去除列表前的项目符号) */
			}
			.b{
				list-style-type: disc;   /* 实心圆，默认 */
			}
			.c{
				list-style-type: circle; /* 空心圆 */
			}
			.d{
				list-style-type: square; /* 实心方块 */
			}
		style>
	head>
	<body>
		
		<ul>
			<li class="a">第1项li>
			<li class="b">第2项li>
			<li class="c">第3项li>
			<li class="d">第4项li>
		ul>	
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

16、list-style-position

list-style-position属性指示如何相对于对象的内容绘制列表项标记。

属性值：

解析：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CQSXuA03-1659764955278)(C:\Users\HeZhangHeng\AppData\Roaming\Typora\typora-user-images\image-20220806114347751.png)]

17、list-style-image

指定列表中的列表项标记的图像：

• url：图像的路径
• none：默认。无图形被显示
• inherit：规定应该从父元素继承 list-style-image 属性的值

ul
{
	list-style-image:url('sqpurple.gif');
}
1
2
3
4

05、CSS Backgrounds背景

18、背景简写：background

背景缩写属性可以在一个声明中设置所有的背景属性。

可以设置的属性值，各值之间用空格分隔，不分先后顺序：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

background-color: #C00;   /*背景色*/
background-image: url(../image/arrow-down.gif);  /* 插入背景图片 */
background-repeat: no-repeat;     /* 不平铺 */
background-position-x: 205px;     /* 向右移动205px */
background-position-y:10px ;      /* 向下移动10px */

/* 上述5个注释可简写为如下所示 */
/* 设置背景色#C00、插入图片、向右移动205px、向下移动10px、不平铺 */
background: #C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
1
2
3
4
5
6
7
8
9

18、背景颜色：background-color

background-color 属性定义了元素的背景颜色.

/* 四种设置背景颜色的方式 */
background-color: red;       
background-color:#0000A8;
background-color:rgb(0,0,255);
background-color:rgba(0,0,255,0.8);
1
2
3
4
5

19、背景图像：background-image

background-image 属性设置一个元素的背景图像。

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

background-image: url(../image/arrow-down.gif);
1

20、背景重复：background-repeat

设置如何平铺对象的 background-image 属性。

默认情况下，重复background-image的垂直和水平方向。

（1）水平平铺、垂直平铺、不平铺

background-repeat: repeat-x;    /* 水平平铺 */
background-repeat: repeat-y;    /* 垂直平铺 */
background-repeat:no-repeat;    /* 不平铺 */
1
2
3

21、背景图像起始位置：background-position

background-position属性设置背景图像的起始位置。

/* 第一个值是水平位置，第二个值是垂直。 */
/* 左上角是原点0,向右为x轴正方向，向下为y轴正方向 */
/* 单位可以是像素、百分数等 */
background-position-x: 205px;     /* 向右移动205px */
background-position-y:10px ;      /* 向下移动10px */
1
2
3
4
5