前端三大技术栈之CSS3总结上

文章目录

1.CSS字体属性
- 1.1 font-family
- 1.2 font-size
- 1.3 font-weight
- 1.4 font-style
- 1.5 字体复合属性
- 1.6 文本颜色
- 1.7 文本对齐
- 1.8 装饰文本
- 1.9 行间距
2.CSS元素的显示模式
- 2.1 块元素
- 2.2 行内元素
- 2.3 行内块元素
- 2.4 CSS的元素显示转换
- 2.5 单行文字垂直居中的原理
3.CSS的背景
- 3.1 背景颜色
- 3.2 背景图片
- 3.3 背景平铺
- 3.4 背景图片位置
- 3.5 背景附着
- 3.6 背景色半透明
4. 外边距的典型应用
5. 圆角边框
6. 盒子阴影

1.CSS字体属性

CSS font属性用于定义字体系列、大小、粗细和字体样式(如斜体)。

1.1 font-family

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

p {font-family: "微软雅黑";
}div {font-family: Arial, "微软雅黑","Microsoft Yahei";
}

各种字体之间必须使用英文状态下的逗号隔开。
一般情况下，如果有空格隔开的多个单词组成的字体需加引号,即上面的Microsoft Yahei用了双引号引上。
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。
最常见的几个字体：font-family:“Microsoft Yahei”,tahoma,arial,“Hiragino Sans GB”;

1.2 font-size

CSS使用font-weight属性设置文本字体的字号。

p {font-size: 20px;
}

px(像素)大小是我们网页的最常用的单位。
谷歌浏览器默认的文字大小为16px。
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确的值大小，不要默认大小。
可以给body指定整个页面文字的大小。

1.3 font-weight

CSS使用font-weight属性设置文本字体的粗细。

p {font-weight: bold;
}

属性值	描述
normal	默认值(不加粗)
bold	定义粗体(加粗)
100~900	400等同于normal,而700等同于bold 注意这个数字后面不跟单位

我们如何让加粗标签(比如h和strong等)不加粗,或者其它标签加粗？

/* 让加粗标签字体不加粗*/
strong {font-size: normal;
}/* 让不加粗标签字体加粗*/
p {font-size: 700;
}

1.4 font-style

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

p {font-style:normal;
}

属性值	作用
normal	默认值，浏览器会显示正常的字体
italic	浏览器会显示斜体的字体样式

1.5 字体复合属性

字体属性可以把以上文字样式综合来写，这样更节省代码：

body {font:font-style font-weight font-size font-family;
}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开。
不需要设置的属性可以省略(取默认值)，但是必须保留font-size和font-family属性，否则font属性不起作用。

1.6 文本颜色

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

div {color: red;
}

表示形式	属性值
预定义的颜色值	red,green,blue等
十六进制	#FF0000,#FF6600等
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

1.7 文本对齐

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

div {text-align:center;
}

left:左对齐
right:右对齐
center:居中对齐

1.8 装饰文本

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

div {text-decoration:underline;
}

none:默认值。没有装饰线
underline：下划线。链接a标签自带下划线
overline:上划线。(几乎不用)
line-through:删除线(一般用于todo-list示例)

1.9 行间距

line-height属性用于设置行间的距离。可以控制文字行与行之间的距离。

p {line-height:26px;font-size:16px;
}

行高解释：

2.CSS元素的显示模式

什么是显示模式？
作用：网页的标签非常多，在不同的地方会用到不同类型的标签。
元素的显示模式就是元素(标签)以什么方式进行显示，比如< div >自己占一行，比如一行可以放多个< span >

HTML元素一般分为块元素和行内元素两种类型。

2.1 块元素

常见的块元素如下：

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中div最为典型

块级元素的特点：

比较霸道，自己独占一行。
高度、宽度、外边距以及内边距可以控制。
宽度默认是容器(父级宽度)的100%。
是一个容器及盒子，里面可以放行内元素或者块级元素。

注意：

文字类的元素内不能使用块级元素。
< p >标签主要用于存放文字，因此< p >里面不能放块级元素，特别是不能放< div >。
同理，< h1 >~< h6 >等都是文字类的块级标签，里面不能放其它块级元素。

2.2 行内元素

常见的行内元素有：

<a> <strong>  <b>  <em>  <i>  <del>  <s> <ins>  <u>  <span>等，其中<span>标签
是最典型的行内元素

行内元素的特点：

相邻行内元素在一行上，一行可以显示多个。
高、宽直接设置是无效的。
默认宽度就是它本身内容的宽度。
行内元素只能容纳文本或其它行内元素。

注意：

链接里面不能再放链接
特殊情况是< a >里面可以放块级元素，但是给< a>转换一下块级模式最安全。

2.3 行内块元素

在行内元素中有几个特殊的标签

<img />  <input />  <td>

它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素。

行内块元素的特点：

和相邻行内元素在一行上，但它们之间会有空白缝隙，一行可以显示多个(行内元素特点)
默认宽度就是它本身内容的宽度(行内元素特点).
高度、行高、外边距以及内边距都可以控制(块级元素特点)

元素模式	元素排列	设置模式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或其他行内元素
行内块元素	一行放多个行内块元素	可以设置宽度和高度	它本身内容的宽度

2.4 CSS的元素显示转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性。比如想要增加链接< a >的触发范围。

转换为块元素：dispaly:block;
转换为行内元素：display:inline;
转换为行内块：display:inline-block;

2.5 单行文字垂直居中的原理

简单理解：行高的上空隙和下空隙把文字挤到了中间，如果行高小于盒子高度文字会偏上，如果行高大于盒子高度，则文字会偏下。

3.CSS的背景

通过CSS背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

3.1 背景颜色

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

background-color:颜色值;

一般情况下，元素的背景颜色默认值是transparent（透明），我们也可以手动设置背景颜色为透明颜色。

3.2 背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者超大的背景图片，优点是非常便于控制位置。

background-image:none|url;

none:无背景图
url:使用绝对或相对地址指定背景图像

3.3 背景平铺

background-repeat:repeat|no-repeat|repeat-x|repeat-y

repeat:背景图像在纵向和横向上平铺(默认值)
no-repeat:背景图像不平铺
repeat-x:横向平铺
repeat-y:纵向平铺

3.4 背景图片位置

background-position:length/positon

值可取x,y坐标值，单位为px，也可以取方位名词。

参数是方位名词

如果指定了两个值都是方位名词，则两个值的前后顺序无关，比如left top和top left效果一致。
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

3.5 背景附着

background-attachment:scroll||fixed;

3.6 背景色半透明

CSS3为我们提供了背景颜色半透明效果。

background:rgba(0,0,0,0.3);

最后一个参数是alpha透明度，取值范围在0~1之间。

4. 外边距的典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

盒子必须指定了宽度。
盒子左右外边距设置为auto。

注意：以上方法是让块级元素水平居中，行内元素或行内块元素水平居中给其父元素添加text-align：center；即可。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>插件</title></head><style>div{height:50px;background-color: pink;text-align: center;}span{background-color: blue;}</style><div><span>百度</span></div></body>
</html>

5. 圆角边框

在CSS3中，新增了圆角边框样式，这样我们就可以变圆角了。

语法：

border-radius:length;

参数值可以是数值或百分比的形式。
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或直接写50%。
如果是矩形，想要圆形边框，设置为高度的一半即可。

radius半径原理：圆与边框的交集形成了圆角的效果。

如上图所示，假设border-radius半径为10px，就会生成四个半径为10px的圆与矩形相切，外面的四大角就会被舍去，形成圆角边框。

1.正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或直接写50%：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>插件</title></head><style>*{margin:0px;padding:0px;}div{height:200px;width:200px;border-radius: 100px;background-color: pink;}</style><div></div></body>
</html>

2.如果是矩形，想要圆形边框，设置为高度的一半即可。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>插件</title></head><style>*{margin:0px;padding:0px;}div{height:200px;width:400px;border-radius: 100px;background-color: pink;}</style><div></div></body>
</html>

规律：值用百分比表示时，取0%~50%，由小变大，圆角更加明显，当大于50%时，它的表现与50%是一样的，就是正规的圆角。

6. 盒子阴影

CSS3中新增了盒子阴影，我们可以使用box-shadow属性添加阴影。
语法：

box-shadow:h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离，数值越大越模糊
spread	可选，阴影的尺寸，数值越大，阴影越大
color	可选，阴影的颜色
inset	可选。将外部阴影(outset)改为内部阴影

注意：

默认的是外阴影(outset)，但是不可以写这个单词，否则阴影无效。
盒子阴影不占用空间，不会影响其它盒子排列。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>插件</title></head><style>* {margin: 0px;padding: 0px;}div {height: 200px;width: 200px;background-color: pink;margin: 100px auto;box-shadow: 30px 30px 10px 10px red;}</style><body><div></div></body>
</html>

上面代码box-shadow属性没有写入outset，因为它是默认值，如果你写入反而无法显示阴影了，如果你想在内部显示阴影再在上面添加inset。