一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 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方言)...