web前端开发------CSS有关知识梳理

web前端开发------CSS有关知识梳理
CSS Fonts(字体用于定义系列，大小，粗细，和文字样式（如斜体）

字体款式：

CSS使用font-family属性定义文本的字体系列。

举例：
```
<head>
	<style>
		p{//将p段落的字体设置为微软雅黑
			font-family: "微软雅黑";
		}
		div{//将div中的文字设置为黑体
			font-family: "黑体";
		}
	style>
head>
<body >
<p>你好Javap>
<div>hello，C++div>
<div>hello,javadiv>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
```
显示如下：

注意：
```
各种字体之间必须使用英文状态下的逗号隔开。

一般情况下，如果有空格隔开的多个单词组成的字体，加引号。

尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示，使用多个字体开始，当第一个字体没有下载时，使用第二个以此类推

最常见的几个字体：body[font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';]
1
2
3
4
5
6
7
```
字体大小：

CSS使用font-size属性定义字体大小。

举例：
```
<head>
	<style>
		p{
			font-size:50px ;
		}
	style>
head>
<body >
<p>你好Javap>
body>
1
2
3
4
5
6
7
8
9
10
```
显示如下：

注意：
```
px（像素）大小是我们网页的最常用的单位

谷歌浏览器默认的文字大小为16px

不同浏览器可能默认显示的字号大小一致，一般情况下，都需要设置一个值，而不使用默认值。

可以给body指定整个页面文字的大小
1
2
3
4
5
6
7
```
字体的粗细：

CSS使用font-weight来设置文字的粗细。

举例：
```
<head>
	<style>
		.bold{
			font-weight: bold;
		}
		.number{
			font-weight: 700px;
		}
		.normal{
			font-weight: normal;
		}
		.number1{
			font-weight: 400px;
		}
	style>
head>
<body >
<h1 class="normal">你好Pythonh1>
<h1 class="number1">你好C++h1>
<p class="number">你好webp>
<p class="bold">你好Javap>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
```
显示如下：
**注意

文字的加粗和默认值可以通过normal/400[默认]或者bold/700[加粗],注意这两种方式都是可以的，且400/700后面无单位

文字样式：

CSS使用font-style属性设置文本的风格。

normal：默认值—浏览器会显示标准的字体样式 font-style：normal

italic:浏览器会显示斜体的字体样式

举例：
```
<head>
	<style>
		p{
			font-style: italic;
		}
		em{//em为斜体标签，常见的斜体标签有em/i
			font-style: normal;
		}
	style>
head>
<body >
<p>你好webp>
<em>你好Javaem>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
```
显示如下：

注：平时很少将文字设置为倾斜字体，通常都是将倾斜的字体设置为正常字体

字体复合属性：

方式1设置字体的属性：
```
p{
			font-style:italic;
			font-family: "微软雅黑";
			font-size: 20px;
			font-weight: 700;
}
1
2
3
4
5
6
```
方式2设置字体的属性：
```
p{
			font:  font-style font-weight  font-size font-family ;
			font: italic 700 20px "微软雅黑";
}
1
2
3
4
```
以上所述的这两种方式都可以实现对字体设置同样的样式，但是在代码量上，第二种方式明显要简洁一些，而第二种方式就是我们要介绍的字体复合属性：

语法规范：

使用font的复合属性时，必须根据下面语法规范中的顺序进行书写，不能更改顺序，并且各个属性之间需要使用空格隔开
```
body{
font:  font-style font-weight  font-size font-family ;
}
1
2
3
```
不需要设置的属性可以省略（即为系统给定的默认值），但是必须保留font-size和font-family属性，否则font的复合属性是无法生效的

字体属性总结：

文本属性：

CSS Text（文本）属性可以定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本缩进，行间距等。

文本颜色：

color属性用于定义文本的颜色

举例：

设置p标签中的文本颜色为绿色：
```
p{
			color: green;
}
1
2
3
```
对齐文本：

text-align属性用于设置元素内文本内容的水平对齐方式

举例：

将div标记中的文字居中对齐：
```
div{
text-align:center;
}
1
2
3
```
```
text-align："center";//居中对齐
text-align:"left";//左对齐
text-align:"right";//右对齐
1
2
3
```
通常情况下，如果我们为设置文本的对齐方式，系统会默认的左对齐

装饰文本：

text-decoration属性规定添加到文本的修饰，可以给文本添加下划线，删除线，上划线
```
div{
text-decoration:underline;//添加下划线
text-decoration:overline;//添加上划线
text-decoration:line-through;//添加删除线
text-decoration:none;//默认，没有装饰线
}
1
2
3
4
5
6
```
此外由于我们之前所学的超链接是自带下划线的，因此我们常常使用text-decoration:none;在标签中用来去除超链接自带的下划线

文本缩进：

text-indent属性用来指定文本的第一行缩进，通常是将段落的首行缩进.

方式1：

举例：

将div中的文字首行缩进10px，缩进的数值也可以为负值
```
div{
text-indent：10px;
}
1
2
3
```
显示效果如下：

通过显示效果我们会发现，它缩进的举例并不是我们常用的两个字符，因此，通过具体的数值来设置缩进的方法，我们一般情况下不使用。

方式2：

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小

举例：

将div中的文字首行缩进当前文字大小的两个字符
```
div{
text-indent：2em;
}
1
2
3
```
显示如下：

行间距：

line-height属性用于设置行间的距离（行高），可以控制文字行与行之间的距离。
```
p{
line-height:20px;
}
1
2
3
```
设置行间距为10px:

设置行间距为100px:

CSS文本属性总结：

CSS的三种样式表：

按照CSS样式书写的位置（或者引入的方式）

CSS样式表可以分为三大类：1：行内样式（行内式）2：内部样式表（嵌入式）3：外部样式表（链接式）

内部样式表：

内部样式表（内嵌样式表）：通过此种方式，可以方便控制当前整个页面中元素样式设置

举例：
```
<head>
	<style type="text/css">
	div{
		color: red;
		font-size: 12px;
	}
style>
head>
<body>
<div>hello，worlddiv>
<div>hello,webdiv>
body>
1
2
3
4
5
6
7
8
9
10
11
12
```

字体款式：

字体大小：

字体的粗细：

文字样式：

字体复合属性：

字体属性总结：

文本属性：

文本颜色：

对齐文本：

装饰文本：

文本缩进：

行间距：

CSS文本属性总结：

CSS的三种样式表：

内部样式表：