一, CSS 样式的特性:
1. 层叠性: 对同一元素同一属性的设定, 后设定的某个样式 (属性), 会覆盖之前设定的样式.
2. 继承性: 对某个元素所设定的样式, 不但影响该元素本身, 还影响该元素的后代元素.
有些属性有继承性, 但大多数属性都没有继承性! 通常用在有关文字的属性上.
3. 优先性: 伪元素选择器 > !important> 行内样式 > id 选择器 > 类选择器 / 伪类选择器 / 属性选择器 > 元素选择器 > *> 继承样式 > 浏览器默认样式
其中, 伪元素选择器又有: ::first-letter> ::selection> ::first-line
二, css 字体属性与文本属性:
示例代码:
- <style>
- /* 使用 font 综合属性时顺序不能错!*/
- .span{
- /* 分别为 style/weight/size/family*/
font:italic bold 50px 楷体;
- /* 字体可设定多个值, 浏览器优先使用前面
- 的, 没有再依次找后面的, 或使用内部字体.*/
- font-family: 楷体, 宋体, 黑体;
- color:red;
- }
- .p{
- border:1px solid red;
- width:500px;
- /* 文字的对齐方式 center/left/right 等 */
- text-align:center;
- /* 文字的装饰线 underline 下划线, overline 上划
- 线, linethough 中划线, none 无 */
- text-decoration:line-through;
- /* 设定行高 2em,em 是长度单位表示字高 */
- line-height:2em;
- /* 首行缩进 */
- text-indent:2em;
- /* 字符间距 1em, 注意: 中文的每个字都算一个字符 */
- letter-spacing:1em;
- /* 单词间距注意: 单词通常是以 "空格" 隔开的. 因
- 此, 连续的中文即使很长也只能算一个单词.*/
- word-spacing:1em;
- /* 以上 em 可换成 px*/
- }
- </style>
- <span class="span"> 中间的文字 </span>
- <p class="p"> 段落文本段落文本段落文本段落文本段落文本段落文本段落文本段落文本段落文本段落文本 </p>
结果如下:
图片. png
来源: https://www.2cto.com/kf/201805/750053.html