CSS基础知识笔记(三)

继承

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

CSS中存在一些不能继承的样式，如：

border:1px solid red;

特殊性

同一标签设置不同的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样式的前后顺序来决定处在最后面的样式会被应用。

样式优先级：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

重要性

特殊情况下将某些样式提升到最高权值，需要用如下代码来解决：

p{color:red!important;}

!important必须写在分号的前面

样式优先级：

游览器默认样式<网页制作者样式<用户设置样式

 

文字排版-字体、字号、颜色

通用字体：微软雅黑

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

字号颜色：

body{font-size:12px;color:#666}

文字排版-粗体、斜体、下划线

粗体：span{font-weight:bold;}
斜体：a{font-style:italic;}
下划线：span{text-decoration:underline;}
text-decoration指的是：文本的装饰，属性值有none默认不显示下划线.
none： 指定文字无装饰
underline： 指定文字的装饰是下划线
overline： 指定文字的装饰是上划线
line-through： 指定文字的装饰是贯穿线
blink： 指定文字的装饰是闪烁。

文字排版-删除线、缩进、行间距(行高)

删除线：.oldPrice{text-decoration:line-through;}为文字加删除线
缩进：p{text-indent:2em;} 2em的意思就是文字的2倍大小。
行间距：p{line-height:1.5em;} 设置段落行间距1.5倍

 

段落排版-中文字间距、字母间距、对齐

中文字、字母间距：

p{letter-spacing:50px;}（中文字和字母间距）
p{word-spacing:50px;}（字母和字母间距）
对齐：
p{text-align:center;} 居中
p{text-align:left;} 居左
p{text-align:right;} 居右