Maison > interface Web > tutoriel HTML > CSS基础知识笔记(三)_html/css_WEB-ITnose

CSS基础知识笔记(三)_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:32:58
original
1190 Les gens l'ont consulté

继承

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

CSS中存在一些不能继承的样式,如:

border:1px solid red;
Copier après la connexion

特殊性

同一标签设置不同的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*/
Copier après la connexion

层叠

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

样式优先级:内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。

重要性

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

p{color:red!important;}
Copier après la connexion

!important必须写在分号的前面

样式优先级:

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

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

通用字体:微软雅黑

body{font-family:"Microsoft Yahei";} /*兼容性更好*/body{font-family:"微软雅黑";}
Copier après la connexion

字号颜色:

body{font-size:12px;color:#666}
Copier après la connexion


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

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


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

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

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

中文字、字母间距:

p{letter-spacing:50px;}(中文字和字母间距)p{word-spacing:50px;}(字母和字母间距)对齐:p{text-align:center;} 居中p{text-align:left;} 居左p{text-align:right;} 居右
Copier après la connexion

 

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal