一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <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>
选择器的分组
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。
h1,h2,h3,h4,h5,h6 {
color: green;
}
li strong {
font-style: italic;
font-weight: normal;
}
修饰li下的strong
id 选择器以 "#" 来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;}
#green {color:green;}
id 选择器和派生选择器
在现代布局中，id 选择器常常用于建立派生选择器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元，尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素，比如 <em></em> 或者 <span></span>，不过这样的用法是非法的，因为不可以在内联元素 <span> 中嵌入 <p>
在 CSS 中，类选择器以一个点号显示：
.center {text-align: center}
td.fancy {
color: #f60;
background: #666;
}
在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。
属性选择器
下面的例子为带有 title 属性的所有元素设置样式：
[title]
{
color:red;
}
属性和值选择器
下面的例子为 title="W3School" 的所有元素设置样式：
[title=W3School]
{
border:5px solid blue;
}
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
[lang|=en] { color:red; }
属性选择器在为不带有 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;
}
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：
h3 {
text-align: right;
font-size: 20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color: red;
text-align: right;
font-size: 20pt;
分享到：
相关推荐
【CSS基础学习】是网页设计领域中的重要环节，它是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。CSS（层叠样式表）让网页设计者能够分离内容与表现，使得网页设计更加灵活且易于...
在IT领域，CSS...总结，学习CSS基础不仅涉及语法和选择器，还包括布局、响应式设计以及预处理器的使用。通过不断实践和了解这些概念，初学者可以逐步提升CSS技能，从而更好地设计和构建美观、功能完善的网页。
DIV+CSS教程——第一天XHTML_CSS基础知识
本“CSS基础学习源码”是一个适合初学者的资源包，提供了丰富的实践材料，帮助理解并掌握CSS的基础知识。 首先，我们来详细探讨CSS的基础概念： 1. **选择器与声明**：CSS的核心在于选择器和声明。选择器用于定位...
### CSS基础教程知识点详解 #### 一、CSS简介 **CSS**，全称为 **Cascading Style Sheets**（级联样式表），是一种用于定义HTML文档布局的语言。它可以帮助开发者更好地控制网页的外观，如字体、颜色、间距、大小...
书名：CSS基础教程 作者：（英）柯林森 著，刘志忠 等译 来源：人民邮电出版社 出版时间：2007年09月 ISBN:9787115164629 定价：49元 内容介绍： 本书是优秀的CSS 入门书，重点讲述了如何使用CSS 实现基于Web ...
【CSS基础知识详解】 CSS，全称为Cascading Style Sheets，中文通常翻译为“层叠样式表”，是用于控制网页布局和样式的规范。它弥补了HTML在表现层设计上的局限性，让网页设计更加灵活多样。自IE 3.0开始，浏览器...
### CSS基础知识解析 #### 一、CSS简介 - **1.1 HTML的局限性** HTML是一种用于构建网页内容的标准标记语言。它主要用于定义网页内容的结构和意义，例如使用`<h1>`标签来表示一级标题，使用`<p>`标签来表示段落...
HTML+CSS 基础知识点总结 HTML+CSS 是前端开发的基础技术，掌握 HTML、CSS 和 JavaScript 语言是必不可少的。下面是 HTML+CSS 基础知识点总结： 1. HTML 是网页内容的载体，内容就是网页制作者放在页面上想要让...
在"前端CSS基础——常规流中练习对应图片代码"中，你可能会看到如何通过CSS控制元素在常规流中的位置和大小。例如，可以使用`display`属性来改变元素的行为，将一个内联元素转换为块级元素，或者创建一个内联块级...
《HTML XHTML CSS基础教程（第6版）》是由著名IT教育家Elizabeth Castro编著的一本经典教程，专门针对初学者设计。这本书详细介绍了网页开发的基础技术，包括HTML、XHTML和CSS，帮助读者掌握构建现代网页的核心技能...
**CSS基础** 1. **选择器与声明**：CSS通过选择器（如元素选择器、类选择器、ID选择器等）来定位HTML元素，然后用声明（属性：值）来设置样式。 2. **盒模型**：CSS盒模型包括内容、内边距、边框和外边距，影响...
css基础教程，适合新手使用，仅供参考
CSS，层叠样式表，是用于控制网页元素样式的重要语言。在这篇关于"CSS基础选择器"的讲解中，我们将深入理解CSS选择器的概念以及如何使用它们来定位并应用样式到HTML...这样可以帮助你更好地理解和应用CSS基础选择器。
CSS基础-介绍及语法，css入门必备资料
### CSS基础代码详解 #### CSS入门精要：掌握核心概念与实践技巧 **CSS（Cascading Style Sheets）**，即层叠样式表，是一种用于描述网页文档（如HTML或XML）外观和格式的标记语言。它使得网页设计更加灵活、高效...
html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css...
**CSS基础代码详解** 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码，非常适合CSS初学者作为学习素材。通过阅读和理解这些...
DIV+CSS基础教程全攻略，让你熟练如何更好的掌握DIV+CSS
【CSS基础知识】是针对初学者入门的一门课程，旨在教授如何使用CSS来控制网页的样式和布局。CSS，即层叠样式表（Cascading Style Sheets），是一种样式语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）...