CSS 初探
CSS 指层叠样式表 (Cascading Style Sheets)
样式，定义了如何显示 HTML 元素
作用
将 HTML 中元素的编写，和样式定制分开
只需定义一个外部 CSS 文件，可以供全网站所有页面使用，方便修改
CSS 规则的语法
由两个主要的部分构成：选择器，以及一条或多条声明。声明用花括号包围。
selector {declaration1; declaration2; ... declarationN }
选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。属性是希望设置的样式属性，每个属性有一个值，属性与值通过冒号分隔。
selector {property: value}
多重声明
如果要定义不止一个声明，则需要用分号将每个声明分开。
最后一条规则是不需要加分号的。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是方便增删，避免出错。
应该在每行只描述一个属性，这样可以增强样式定义的可读性：
p {
text-align: center;
color: black;
font-family: arial;
}
class 和 id 名称对大小写是敏感的。
选择器
选择器的分组
有相同声明的选择器可以被分在一组共享声明，只需要用逗号将同一个分组的选择器分开。
h1,h2,h3,h4,h5,h6 {
color: green;
}
派生选择器
用空格表示层级关系
li strong {
font-style: italic;
font-weight: normal;
}
为 li 元素中 strong 元素中的内容定制样式
HTML 代码：
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
id 选择器
用#来表示对有某个 id 的元素指定样式
#red {color:red;}
将下面代码中，id 属性为 red 的 p 元素显示为红色
<p id="red">这个段落是红色。</p>
或者
对 id 为 sidebar 的 div 元素定制样式
div#sidebar {
border: 1px dotted #000;
padding: 10px;
}
- 用作派生选择器
可以用 id 选择器 建立 派生选择器
id 为 sidebar 的元素中的 段落 和 二级标题 定制样式
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}
类选择器
用.表示针对类指定样式
.center {text-align: center}
所有拥有 center 类的 HTML 元素均为居中。
<h1 class="center">
This heading will be center-aligned
</h1>
- 用作派生选择器
和 id选择器 一样，类选择器 也可被用作派生选择器
.fancy td {
color: #f60;
background: #666;
}
类名为 fancy 的元素内部的表格单元会以灰色背景显示橙色文字
元素也可以基于它们的类而被选择：
td.fancy {
color: #f60;
background: #666;
}
属性选择器
可以为拥有指定属性的 HTML 元素设置样式
[title]
{
color:red;
}
[title=W3School]
{
border:5px solid blue;
}
属性选择器在为不带有 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;
}
使用
样式可以在以下几个地方定义并被页面使用
(优先级由高到低)
- HTML 元素内部定义
- HTML 文件头元素中
- 外部 CSS 文件/样式表文件
将多重样式定义层叠为一个
当同一个 HTML 元素的一个属性被不止一个样式定义时，只有一个优先级最高的样式定义会生效。所有根据规则生效的样式，会组成一个新的虚拟样式表。
外部样式表拥有针对 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;
HTML 元素内部定义
当样式仅需要在一个元素上应用一次时
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
HTML 文件头元素中
当单个文档需要特殊的样式时
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
外部 CSS 文件
样式可以存储在样式表中，外部样式表是 CSS 文件。可以在同一个 HTML 文档内部引用多个外部样式表。
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面在<head>标签中使用 <link>标签链接到样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
样式表文件内容的例子
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
HTML 代码：
一个类中可以指定多个样式，用空格隔开
<body>
<ul class="nav">
<li>[站外图片上传中……(2)]</li>
</ul>
<ul class="nav header">
<li><a href="">Home</a></li>
<li><a href="">Site</a></li>
<li><a href="">Other</a></li>
</ul>
</body>
- 覆盖
在样式表中这样定义：
}
h1, h2, h3 {
color: #37A5F0;
}
h1 {
color: #ffffff;
margin: 10px 0 15px 0;
text-align: center;
}
h2 {
margin: 10px 0 20px 0;
text-align: center;
font-size: 26px;
font-weight: bold;
}
h3 {
margin: 15px 0 15px 0;
border-bottom: 1px solid #CCCCCC;
padding-bottom: 3px;
font-size: 18px;
font-weight: bold;
}
选择器组中定义的声明，优先级低于单独定义的
疑问？
li:last-child
.nav {
padding-left: 0;
margin: 5px 0 20px 0;
text-align: center;
}
.nav li {
display: inline;
padding-right: 10px;
}
.nav li:last-child {
padding-right: 0;
}
