当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 <head> 标签内部)
- 内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。
记得写引号
提示:如果值为若干单词,则要给值加引号:
p {font-family: "sans serif"
;}
多重声明:
提示:如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。大多数有经验的设计师会在每条声明的末尾都加上分号,这么的好处是,当你从现有的规则中增减声明时,会尽可能的减少出错的可能性。就像这样:
p {text-align:center;
color:red;
}
你应该在每行只描述一个属性,这样可以增强样式定义的可读性,就像这样:
p {
text-align: center;
color: black;
font-family: arial;
}
选择器的分组
你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。
h1,h2,h3,h4,h5,h6
{
color: green;
}
使用外部样式表:
每个页面使用 <link> 标签链接到样式表。<link> 标签在(文档的)头部:
<head>
<link
rel="stylesheet" type="text/css" href="mystyle.css
" />
</head>
不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ,它仅在 IE 6 中有效,但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:
<p style
="color: sienna; margin-left: 20px">
This is a paragraph
</p>
分享到:
相关推荐
html和css笔记 基础内容 自己做的比较
css笔记
自己整理的韩顺平的 div+css 笔记笔记,非常的完整,欢迎大家下载
Html\CSS+DIV学习笔记(史上最实用的CSS笔记).
css笔记整理(精简) 初识CSS CSS语法 CSS样式引入 css选择器 CSS中的块级元素与行内元素 background 背景(集合样式) font 文字(集合样式) border 边框(复合样式,集合样式) CSS 框模型概述
css大全,自己总结的css笔记,希望各位能喜欢!!
css的笔记
html css 笔记
css 笔记 包括 滤镜 阴影 圆角css 笔记 包括 滤镜 阴影 圆角css 笔记 包括 滤镜 阴影 圆角css 笔记 包括 滤镜 阴影 圆角css 笔记 包括 滤镜 阴影 圆角
最全的css笔记
韩顺平的div+css视频教程里边,讲课用的笔记
学习黑马前端36期的css笔记,快来下载吧,也可以关注我,联系我。
CSS手册,内容包含CSS几乎全部内容,可以作为手册快速学习,复习
html和css基础总结,适合入门web和初学者
CSS笔记.pdf
主要根据狂神说的视频整理CSS
html学习资料
本人上学的时候整理出来的html/css笔记,非常适合初学者看.
css笔记第一版 ,之后还会有HTML笔记,javascript笔记