css样式的特性介绍及css字体属性与文本属性代码实例讲解

一、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