<style>
#box{
width: 500px;
height: 300px;
border: 1px solid red;
padding: 10px;
margin: 90px auto;
background-color: antiquewhite;
font-size: 12px;
}
</style>
...
<div id="box">
文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置文本设置。
</div>
图片.png
注意：我们设置盒子里面的字体属性，在盒子的style中设置。
规范：在web中不能使用中文文字比12px更小的单位。文字大小都是偶数。
font-size: 12px; # 文字大小
font-family: 微软雅黑,airal; # 字体 （宋体是所有浏览器都兼容的，常规使用的字体有：微软雅黑，宋体，airal）（多个参数，前面的字体不解析，那么就解析后面的字体）
color: red; # 控制字体颜色 ( 颜色的设置有三种方式： 1.#a51a3b; 2. red; 3. rgb(255,255,255); 常用的是第一种16进制色彩值)
line-height: 30px; # 行高 (行高的理解：我们所写的文字是在行高的上下居中，文字与行高的上面的间隙和文字与行高下面的间隙的数值是一样的，相等的。)
text-align:center; # 文字左右方向的设置，left,right,center。 （text-align:center; 文字左右居中）
行高30_文字大小18_那么上下的间隔都是6.png
我们也可以将文本在div中的展示理解为div是一张纸，那么每行的间隔线就是写字本的那个线，我们把每行文字写在每行的上下居中的地方。
如果只有一行文字，想要文字在div的上下居中，那么可以设置line-height等于盒子的高度。
line-height等于盒子高度.png
如果还想要文字的左右对齐，那么就需要使用到text-align:center;
text-indent:32px; # 首行缩进 （文字大小是16px的话，那么首行缩进2*16px）（缩进这里一般使用em，1em代表一个字, 2em代表2个字，就不怕文字大小的调节而又必须改变text-intent了。）
text-indent:2em; .png
会自动检索文字大小，并且缩进相应字数。
font-weight:bold; # 文字着重 (bold：粗体, normal:正常, 还可以输入数值 )（改变的话，每个文字的相对位置是不会改变的）
font-style:italic; # 文字样式 （italic:斜体，normal:正常）
text-decoration:underline; # 文本修饰 (underline:文本，也就是所有文字下面都有下划线，overline:上边线, line-through:中划线, none:没有修饰)
上面是常用的,下面是不常用的。
letter-padding:10px; # 文字间距
word-spacing: 10px; # 单词间距 （是以空格为解析单位，认为空格的前后就是2个单词，不管是中文还是英文，还是其他语言。）
网友评论