字体属性
font-family | 设置文本的字体属性 | 例如:p {font-family: "Microsoft Yahei"} |
font-size | 设置字体大小 | 例如:div {font-size: 16px} |
font-weight | 设置字体粗细 | 例如:div {font-weight: 700} |
font-style | 设置文本的风格 | 例如:div {font-style: normal}; div {font-style:italic} |
文本属性
color | 设置字体颜色 | 例如:<div style="color: red">红色字体</div> |
text-align | 设置文本对齐 | 例如:<div style="text-align: center">字体居中对齐</div>;(可以设置:left/center/right) |
text-decoration | 设置文本修饰;如:给文本添加下划线、删除线、上划线等 | 例如:<div style="text-decoration: underline">给文字添加下划线</div> |
text-indent | 设置文本缩进,指定文本的第一行缩进,如段落首行缩进 | 例如:<div style="text-indent: 2 em">首行缩进2个文字的距离</div>;(一个em表示一个文字大小的距离) |
line-height | 设置行间距大小 | 例如:<div style="line-height: 10px">设置行间距</div> |
块级元素 & 行内元素 & 行内块元素
块级元素的特点:
1.独占一行;
2.可以设置 宽、高、内边距和外边距;
3.宽度默认是容器(父元素)的宽度;
4.块级元素是一个容器,里面可以放行内或块级元素。
块级元素有:<h1>~<h6>、 <p>、 <div>、 <ul>、<ol>、<li>等等。
行内元素的特点:
1.相邻行内元素在一行上,即:一行可以显示多个行内元素;
2.无法直接设置 宽、高;
3.宽度默认是元素本身的宽度;
4.行内元素只能容纳文本或其他行内元素。
行内元素有: <a>、 <b>、 <em>、<span>、<s>等等。
行内块级元素的特点:
1.相邻行内块级元素在一行上,但是他们之间会有空白间隙;一行可以显示多个行内块级元素;
2.宽度默认是元素本身的宽度;
3.可以设置 宽、高、内边距和外边距;
行内块级元素有: <img>、 <input/>、<td>等等
可以通过 css中的 display属性将行内元素和块级元素相互转化。