CSS字体属性
【1】字体大小font-size
- CSS使用font-size属性定义字体大小
- px(像素)是网页最常用的单位
- 每个浏览器都有自己的默认文字大小，谷歌浏览器为16px
- 我们要尽量给字体指定一个明确的大小，以防万一。
p {
font-size: 20px;
}
【2】字体粗细font-weight
- CSS使用font-weight属性设置文本字体的粗细
| 属性值 |
描述 |
| normal |
默认值不加粗 |
| bold |
定义粗体 |
| 100-900 |
400等同于normal，700等同于bold，注意这个数字后面不要跟单位 |
p {
font-weight: 700;
}
【3】字体样式font-style
| 属性值 |
作用 |
| normal |
默认值，浏览器会显示标准的字体样式 |
| italic |
斜体样式 |
p {
font-style: normal;
}
CSS文本属性
【1】文本颜色color
- color属性用于定义文本的颜色
- 可以使用预定义的颜色值，如red，green，blue等等
- 也可以使用十六进制如#FF0000
- 也可以使用RGB代码如rgb(255.0.0)
p {
color: #f4f4f4;
}
【2】对齐文本text-align
- text-align属性用于设置元素内文本内容的水平对齐方式
| 属性值 |
解释 |
| left |
左对齐（默认值） |
| right |
右对齐 |
| center |
居中对齐 |
p {
text-align: center;
}
【3】装饰文本text-decoration
- text-decoration属性用于规定添加到文本的装饰。
- 可以给文本添加上划线，删除线，下划线等
| 属性值 |
解释 |
| none |
默认，没有线 |
| underline |
下划线 |
| overline |
上划线 |
| line-through |
删除线 |
【4】文本缩进text-ident
- text-ident属性用来指定文本的第一行的缩进，通常是将段落的首行进行缩进
- 通过设置该属性，所有元素的第一行都可以缩进一个给定的长年度，甚至该长度可以是负值
- em是一个相对的单位，就是当前元素一个文字的大小。
-- 缩进10个像素
p {
text-indent: 10px;
}
-- 缩进两个字符的像素值
p {
text-indent: 2em;
}
【5】行间距line-height
- line-height属性用于设置行间的间距。
- 可以控制文字行与行之间的距离
p {
line-height: 26px;
}
CSS背景属性
【1】背景颜色background-color
background-color定义了元素的背景颜色- 一般情况下元素的背景颜色默认值为
transparent（透明），我们也可以手动指定背景颜色为透明色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {
background-color: pink;
}
</style>
</head>
<body>
<div id="div1">我是div1</div>
</body>
</html>
【2】背景图片background-image
| 参数值 |
作用 |
| none |
无背景图(默认) |
| url |
使用绝对或者相对地址指向背景图像 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {
background-image: url(/static/girl.png);
}
</style>
</head>
<body>
<div id="div1">我是div1</div>
</body>
</html>
【3】背景平铺background-repeat
- 如果需要在html页面上对背景图像进行平铺，可以使用
background-repeat属性
| 参数值 |
作用 |
| repeat |
背景图像在纵向和横向上平铺(默认) |
| no-repeat |
背景图像不平铺(不重复) |
| repeat-x |
背景图像在横向上平铺 |
| repeat-y |
背景图像在纵向上平铺 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="div1">我是div1</div>
</body>
</html>
【4】背景图片位置background-position
- CSS中的
background-position属性用于设置背景图片的起始位置。这个属性接受两个值，分别表示水平和垂直方向的位置。可以使用关键词、百分比、长度值或组合这些值来定义位置。
盒子模型
【1】盒子模型的组成
- 所谓盒子模型就是把html页面中的布局元素看作是一个矩形的盒子，也就是一个装有内容的容器
- CSS盒子模型本质上就是一个盒子，封装周围的html元素，它包括边框，外边距，内边距和实际内容
【2】边框（border）
-
border属性可以设置元素的边框。
-
边框由三部分组成，边框粗细，边框样式，边框颜色
-
语法：border:border-width|border-style|border-color
-
其中border-style有几个重要的参数
- none 没有边框 默认值
- solid 边框为实现
- dashed 边框为虚线
| 属性名 |
描述 |
border-width |
设置边框的宽度。 |
border-style |
设置边框的样式（实线、虚线等）。 |
border-color |
设置边框的颜色。 |
border |
设置边框的宽度、样式和颜色的缩写形式。 |
border-radius |
设置边框的圆角半径，用于创建圆角边框。 |
border-collapse |
用于设置表格的边框合并方式。 |
【3】边框会影响盒子的实际大小
- 边框会额外增加盒子的实际大小。因此我们由两种方案解决
- 测量盒子大小的时候不要量边框
- 如果测量的时候包含了边框,则需要width/height 减去边框宽度
【4】内边距（padding）
- padding属性用于设置盒子的内边距，就是盒子边框和盒子内容的距离
- 当我们给盒子指定padding值之后，会发生两件事情
- 内容和边框会有了距离，添加了内边距
- padding会撑大盒子的大小
| 属性 |
作用 |
| padding-left |
左内边距 |
| padding-right |
右内边距 |
| padding-top |
上内边距 |
| padding-bottom |
下内边距 |
#one {
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
}
#two {
width: 200px;
height: 200px;
background-color: greenyellow;
padding: 10px 20px;
}
#three {
width: 200px;
height: 200px;
background-color: #ff2f97;
padding: 10px 20px 30px;
}
| 值的个数 |
表达意思 |
| padding:5px; |
1个值代表上下左右都是5像素的内边距 |
| padding:5px,10px; |
2个值代表上下是5px，左右是10px |
| padding:5px,10px,20px; |
3个值代表上是5px,左右是10px,右是20px |
| padding:5px,10px,20px,30px; |
四个值分别代表上左下右 |
CSS-display属性
display 属性是CSS中用于设置元素生成框类型（box model）的属性。它定义了元素在布局中的表现方式，包括块级元素、内联元素、内联块元素等。
| 属性值 |
描述 |
block |
将元素呈现为块级元素，占据整个父容器宽度，新行开始。 |
inline |
将元素呈现为内联元素，在同一行内显示，不强制换行。 |
inline-block |
将元素呈现为内联块元素，同一行内显示，可以设置宽高。 |
flex |
将元素呈现为弹性容器，使用 Flexbox 进行灵活布局。 |
grid |
将元素呈现为网格容器，使用 Grid 进行网格布局。 |
none |
将元素隐藏，不占据空间，对布局没有影响。 |
table |
将元素呈现为表格容器，用于模拟表格布局。 |
table-row |
将元素呈现为表格行，配合table使用。 |
table-cell |
将元素呈现为表格单元格，配合table-row使用。 |
CSS-overflow属性
overflow 属性用于控制一个元素中内容的溢出处理方式。- 使用
hidden 或 auto 可以实现当内容超过容器大小时进行隐藏。这对于确保布局的整洁性很有用，特别是在有限空间内显示大量内容时。
| 属性值 |
描述 |
visible |
默认值，内容将溢出容器，并且可见。 |
hidden |
隐藏溢出的内容，不显示滚动条。 |
scroll |
显示滚动条，允许用户滚动查看溢出的内容。 |
auto |
仅在内容溢出时显示滚动条，否则不显示。 |
inherit |
继承父元素的 overflow 属性。 |
