css继承性优先级重要性及文字文本的设置

一、继承性

继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。

p{color:red;}

<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

有一些css样式是不具有继承性的。如border:1px solid red;

p{border:1px solid red;}

<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

在上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的。

二、选择器的优先级

1、如果一个元素使用了多个选择器,则会按照选择器的优先级来给定样式。

2、选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

选择器最高层级!important

p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

这时 p 段落中的文本会显示的red红色。

注意：!important要写在分号的前面

这时样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

三、权值计算-特殊性

有的时候我们为同一个元素设置了不同的CSS样式代码，浏览器会根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

下面是权值的规则：

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

四、设置字体系列

我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。

下面代码实现：为网页中的文字设置字体为宋体/微软雅黑。

body{font-family:"宋体";}


body{font-family:"Microsoft Yahei";}/*兼容性更好*/
body{font-family:"微软雅黑";}

注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。

font-size设置字体大小

body{font-size:12px;}

font-weight设置字体粗细

p span{font-weight:bold;}

font-style设置字体样式

 p{
            font-style:italic;
        }

font-style可以设置字体样式，并且有种3设置方式。

正常字体为normal,也是font-style的默认值。

italic为设置字体为斜体，用于字体本身就有倾斜的样式。

oblique为设置倾斜的字体，强制将字体倾斜。

使用color设置字体颜色

color的值有3种设置方式：

• 英文命令颜色

p{color:red;}

• RGB颜色

这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。

p{color:rgb(133,45,200);}

每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：

p{color:rgb(20%,33%,25%);}

• 十六进制颜色

这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。

p{color:#00ffff;}

 font样式的简写方式

body{
    font-style:italic;
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋体",sans-serif;
}
/*缩写为一句：*/

body{
    font:italic  bold  12px/1.5em  "宋体",sans-serif;
}

/*一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：*/
body{
    font:12px/1.5em  "宋体",sans-serif;
}
/*只是有字号、行间距、中文字体、英文字体设置。*/

、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

五、 CSS3文本样式

 使用text-decoration添加文本修饰

span {
        text-decoration:line-through;
    }

text-decoration可以设置添加到文本的修饰。

text-decoration默认值为none, 定义标准的文本。

text-decoration的值为underline为定义文本下的一条线。

text-decoration的值为overline为定义文本上的一条线。

text-decoration的值为line-through为定义穿过文本下的一条线，一般用于商品折扣价。

使用text-indent为文本添加首行缩进

p{text-indent:2em;}

注意：2em的意思就是文字的2倍大小。

 使用line-height为文字设置行间间距

p{line-height:1.5em;}

使用letter/word-spacing增加或减少字符间的空白

h1{
    letter-spacing:50px;
}
/*字母与字母间距*/

h1{
    word-spacing:50px;
}
/*单词间距*/

使用text-align设置文本对齐方式

h1{
    text-align:center;/*居中*/
}
h1{
    text-align:left;/*居左*/
}
h1{
    text-align:right;/*居右*/
}

长度值

比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。

1、像素

像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。

2、em

就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：

p{font-size:12px;text-indent:2em;}

上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。

下面注意一个特殊情况：

但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：

html:

<p>以这个<span>例子</span>为例。</p>

css:

p{font-size:14px}
span{font-size:0.8em;}

结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。

3、百分比

p{font-size:12px;line-height:130%}

设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。