CSS（文本、字体、盒子）-CSDN博客

本文链接：https://blog.csdn.net/wx_tracy/article/details/122578002

一、文本属性

1、文本颜色

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

2.文本对齐

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

left：左对齐（默认值）right：右对齐 center：居中对齐

3、文本装饰

text-decoration 属性用来设置或删除文本的装饰。可以给文本添加下划线（underline）、删除线（line-through）、上划线（overline），但从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

a {text-decoration:none;}

4、文本缩进

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

p {text-indent : 2em;}

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

5、行间距

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

6、文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

p.uppercase {text-transform:uppercase;}

p.lowercase {text-transform:lowercase;}

p.capitalize {text-transform:capitalize;}

其余有关设置字符间距、设置文本方向、设置文本阴影、设置元素中空白的处理方式等搜索菜鸟教程

二、字体

1、字体系列：font-family 属性设置文本的字体系列。

注意事项：

各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体加引号

2、字体大小：font-size 属性设置文本的大小

如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。

标题标签比较特殊，需要单独指定文字大小

注：可以使用百分比和em组合

设置 <body>元素的默认字体大小的是百分比：

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

3、字体粗细

font-weight属性设置文本字体的粗细

font-weight：normal | bold（粗体） | bolder（特粗体） | lighter（细体） | number

4、文字样式

font-style：主要是用于指定斜体文字的字体样式属性

p.normal {font-style:normal;}/*正常*/
p.italic {font-style:italic;}/*斜体*/

三、盒子

盒子模型（box model）：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

1、边框（border）

语法：border: border-width(定义边框粗细) || border-style |（边框样式）| border-color（边框颜色）

①边框样式

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。效果取决于边框的颜色值

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

②简写属性（没有顺序）

如：border:5px solid red;

③单独设置边框的各边

border-top：1px solid red;

④border-collapse（表格细线边框）

2、内边距（padding）

padding属性用于设置内边距，即边框与内容之间的距离

padding-left / right / top / bottom

简写属性：

值的个数	表达意思
padding：5px	1个值，代表上下左右都有5像素内边距
padding：5px 10px	2个值，代表上下内边距5像素，左右内边距10像素
padding：5px 10px 20px	3个值，代表上内边距5像素，左右10像素，下20像素
padding：5px 10px 20px 30px	4个值，顺时针

注：如果盒子已经有了宽度和高度，此时在指定内边框，会撑大盒子，如果保证盒子跟预想中的效果一样，则让width/height减去多出来的内边距大小即可

3、外边距（margin）

①巧妙运用外边距使块级盒子水平居中，满足条件如下：盒子必须指定了宽度+盒子左右的外边距都设置为auto

常见写法：