你的位置:首页 > 网页设计

[网页设计]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;} 居右