CSS之文本排版

---

CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定的HTML标签元素，而且应用于其后代。

有的时候我们为同一元素设置了不同的CSS样式代码，浏览器是根据权值来判断使用哪种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 */

层叠是在HTML文件中对于同一元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些CSS样式的前后顺序来决定，处于最后面的CSS样式会被应用。

标签内部（内联样式表）>当前文件中（嵌入样式表）>外部文件中（外部样式表）

在我们写代码的时候有些特殊情况需要为某些样式设置具有最高权值可以使用，这个时候我们用(!important)来解决。

p{color:red !important;}
p{color:green;}
<p class="one">这是一首简单的<span>小情歌</span>,唱着人们心肠的曲折。</p>

上述代码段显示结果是小情歌三个字显示为红色，因为(!important)将颜色为红色这个样式的权值设置为最高权值，所以p标签内优先使用红色的样式。这里要注意的是(!important)要写在分号的前面。当网页制作者不设置CSS样式的时候，浏览器会按照自己的一套样式来显示网页，并且用户也可以在浏览器中设置自己习惯的样式。(!important)优先级样式权值高于用户自己设置的样式。

样式的优先级：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式

 

---

字体

CSS样式可以为网页中的文字设置字体、字号大小、颜色等属性样式。这里注意不要设置不常用的字体，因为如果用户本地电脑上没有安装你设置的字体，就会显示浏览器默认的字体。这是因为用户是否可以看到你设置的字体样式取决于用户电脑本地上是否安装了开发者设置的字体。

body{font-family:"宋体";}
body{font-family:"Microsoft Yahei"}
body{font-family:"微软雅黑"}
/*设置字体英文比中文兼容性好，现在一般网页习惯设置微软雅黑字体，因为这种字体既美观又可以安全的在用户那边展示出来*/

 

字号、颜色

body{font-size:20px;color:#fff;}

 

粗体

CSS样式还可以把字体样式进行改变，可改变的样式有粗体、斜体、下划线和删除线。

p span{font-weight:bold;}

 

斜体

p a{font-style:italic;}

 

下划线可以起到强调文字的视觉效果

p a{text-decoration:underline;}

 

删除线

.oldPrice{text-decoration:line-through;}

 

缩进

p{text-indent:2em;}

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

 

行间距

行间距(行高)属性(line-height)，下边代码实现的是设置段落行间距为1.5倍。

p{line-height:1.5em;}

 

中文字间距(letter-spacing)、字母间距(word-spacing)

h1{
    letter-spacing:5px;
}
<h1>编程使我快乐</h1>

h2{
    word-spacing:5px;
}
<h2>你不是真正的快乐<h2>

 

对齐

要为块状元素中的文本、图片设置居中的样式，可以使用text-align样式代码。

h1{
    text-align:center;      /*居中*/
}

h2{
    text-align:left;        /*居左*/
}

h3{
    text-align:right;       /*居右*/
}

---

在CSS中，HTML的标签元素被分为三种，分别是块级元素、内联元素(行内元素)和内联块级元素。

常用的块级元素：<div>、<p>、<h1>......<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

常用的内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素：<img>、<input>

块级元素特点：每个块级元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身父容器的100%(和父元素的宽度一致)，除非设定一个宽度。

设置display:block就是将元素显示为块级元素。

/*a被转换为块级元素、从而使a具有块级元素的特点*/
a{display:block;}

内联元素特点：和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字和图片的宽度，不可改变。

块级元素也可以通过display:inline将元素设置为内联元素，从而使元素具有内联元素的特点。

div{
    display:inline;
}

内联块级元素(inline-block)就是同时具备内联元素、块级元素的特点，代码display:inline-block就是将元素设置为内联块级元素。<img>、<input>标签就是这种内联块级标签。

内联块级元素特点：和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。

---