文章目录
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。
扫一扫
1180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
