一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于 <head> 标签内部）
4.内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权。
这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
1.值的不同写法和单位:
当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。
p { color: rgb(100%,0%,0%); }
比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。
2.记得写引号:
如果值为若干单词，则要给值加引号：
p {font-family: "sans serif";}
3.多重声明：
如果要定义不止一个声明，则需要用分号将每个声明分开。应该在每行只描述一个属性，这样可以增强样式定义的可读性。
p {
text-align: center;
color: black;
font-family: arial;
}
4.空格和大小写
多重声明和空格的使用使得样式表更容易被编辑：
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。
如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
5.选择器分组
用逗号将需要分组的选择器分开
h1,h2,h3,h4,h5,h6 {
color: green;
}
6.继承及其问题
根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。
body {
font-family: Verdana, sans-serif;
}
7.派生选择器
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。
列表中的 strong 元素变为斜体字，而不是通常的粗体字
(1)
li strong {
font-style: italic; 字体
font-weight: normal; 设置粗细
}
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
(2)
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
<p>不受影响<strong>不受影响red</strong>.</p>
<h2>不受影响red.</h2>
<h2>这里不受影响<strong>影响到的文字blue</strong>.</h2>
8.id 选择器
(1)
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
id 属性只能在每个 HTML 文档中出现一次。
#red {color:red;}
#green {color:green;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
在现代布局中，id 选择器常常用于建立派生选择器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
9.类选择器
在 CSS 中，类选择器以一个点号显示
.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用
和 id 一样，class 也可被用作派生选择器：
.fancy td {
color: #f60;
background: #666;
}
元素也可以基于它们的类而被选择：
td.fancy {
color: #f60;
background: #666;
}
<td class="fancy">
10.属性选择器
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注释：Internet Explorer 7 （以及更高版本）在规定了 !DOCTYPE 的情况下支持属性选择器。
IE6 及更低的版本不支持属性选择器。
(1)带有指定属性 [title] { color:red; }
(2)指定属性值,属性值全匹配 [title=W3School] { color:red; }
(3)包含属性值,属性值用空格分隔 [title~=hello] { color:red; } <h2 title="hello world">Hello world</h2>
(4)包含属性值,属性值用连字符分隔[title|=hello] { color:red; }<p lang="en-us">Hi!</p>
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
11.创建CSS
(1)外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css" />
(2)内部样式表
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
(3)内联样式
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
多重样式时,如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
分享到：
相关推荐
Nice 是轻量的CSS基础代码库，没有一味的重置，而是 注重各浏览器基础表现 ，减小开发难度。 Nice只重置掉可能产生问题的样式（body、form的默认margin等），并且解决了一些可能产生的兼容性问题，保留和坚持部分...
2. CSS入门教程——基本语法(一) 3. CSS入门教程——基本语法(二) 4. CSS入门教程——加入方式 5. CSS入门教程——文字属性 6. CSS入门教程——文本属性) 7. CSS入门教程——背景属性 8. CSS入门教程——列表 ...
这样，我们在 Build 我们的页面的时候，就是建立在一个完全一致的基础上，能够非常方便的让我们按照自己的想法去进行排版布局。通过这个 例子我们可以看到，使用了 Css Reset之后的样式会是什么样的。 或者...
defaults.css normalize.css扩展，带有明显的重置和默认设置 显着的重置： 填充物，边距 在边框fieldset ， iframe audio ， canvas ， iframe ， img ， svg... —最佳实践CSS基础 —一个微小的现代CSS重置 — Er
DIV+CSS教程——第一天XHTML_CSS基础知识
CSS初级教程包括:CSS语法,CSS颜色,CSS文本与CSS字体,CSS边框,CSS列表等基础知识. CSS高级教程包括:CSS选择符,CSS相关特性,CSS盒模式,标准网页设计与页面排版,CSS伪类与伪元素等. 通过梦之都的CSS教程,你将学会怎样...
minireset.css 一个微小的现代CSS重置，涵盖了基础知识： 重置字体大小：这样使用语义标记不会影响样式重置块边界：以便仅在需要时应用间距重置表：以便表格数据仅占用所需的空间保留行内填充：以便按钮和输入保持其...
它建立在XP.css的基础上，XP.css是98.CSS的扩展。 7.css 7.css是一个很小CSS框架，它采用语义HTML并将其样式化为Windows 7设计。 它建立在XP.css的基础上，XP.css是98.CSS的扩展。 它没有附带任何JavaScript，因此与...
cropper.js cropper.css 用于原生Html实现 简单的图片编辑功能，可实现裁剪，缩放，旋转等基础功能、
第一天 XHTML CSS基础知识 第二天 一列布局 第三天 二列和三列布局 第四天 纵向导航菜单及二级弹出菜单 第五天 超链接伪类 第六天 html列表 第七天 横向导航菜单 第八天 下拉及多级弹出菜单 第九天 CSS...
CSS中元素的两种居中方式....
CSS核心基础--CSS基础选择器 CSS选择器 什么是CSS选择器？ CSS基础选择器 01 CSS基础选择器 要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。 CSS...
Blueprint是一个CSS框架，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。
CSS另类布局和CSS基础，总之值得一看
Typesettings.css Typesettings.css是一个受精于传统图形设计基础的精简设计系统，可用于最少的网站或文章设计。 没有颜色； 没有Java脚本； 不需要任何课程！ 在2.x版中，字体缩放更大，设计更粗壮，对比度也更强。...
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体...此资源 原创HTML+CSS基础 实战51zxw.net 小清流吖羞羞萌芽之作。
一、如何使用CSS样式 1、链接外部样式（推荐） <link href="http://www.dhtmlet.com/dhtmlet.css" rel="stylesheet" type="text/css" /><br>特点：样式与代码分离。 2、定义内部样式块对象 <style ...
书名：CSS基础教程 作者：（英）柯林森 著，刘志忠 等译 来源：人民邮电出版社 出版时间：2007年09月 ISBN:9787115164629 定价：49元 内容介绍： 本书是优秀的CSS 入门书，重点讲述了如何使用CSS 实现基于Web ...
Tent CSS 是一个基础的 CSS 框架，只提供了基本的东西用于构建网站
HTML5与CSS3基础教程（中文第8版） 本书自第1版至今，一直是讲解HTML和CSS入门知识的经典畅销书，全面系统地阐述HTML5和CSS3 基础知识以及实际运用技术，通过大量实例深入浅出地分析了网页制作的方方面面。最新第8版...