CSS基础

CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素。

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 标签内部）
4. 内联样式（在 HTML 元素内部）

语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

h1 {color:red; font-size:14px;}

提示：如果值为若干单词，则要给值加引号。

每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：

p {
  text-align: center;
  color: black;
  font-family: arial;
}

选择器

派生选择器
通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。

列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器
li strong {
    font-style: italic;
    font-weight: normal;
  }

id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 “#” 来定义。

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

类选择器
类选择器以一个点号显示，下列中所有拥有 center 类的 HTML 元素均为居中。

.center {text-align: center}

注意：类名的第一个字符不能使用数字！

属性选择器
对带有指定属性的 HTML 元素设置样式。
为带有 title 属性的所有元素设置样式：

[title]
{
color:red;
}

选择器的分组
可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

背景

背景色

p {background-color: gray; padding: 20px;}

background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

背景图像

body {background-image: url(/i/eg_bg_04.gif);}

background-image 也不能继承。事实上，所有背景属性都不能继承。

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  //背景重复，默认地，背景图像将从一个元素的左上角开始。
  background-repeat:no-repeat;
  //背景定位
  background-position:center;
  //背景关联
  background-attachment:fixed
  }

文本

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

p {
//缩进文本，下面的规则会使所有段落的首行缩进 5 em
text-indent: 5em;
}
//字间隔
p.spread {word-spacing: 30px;}
//字符转换，字母大写
h1 {text-transform: uppercase}
//文本装饰
a {text-decoration: none;}
//处理空白符，设置为 normal 时，会合并所有的空白符，并忽略换行符。
p {white-space: normal;}

字体

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。

//使用通用字体系列
body {font-family: sans-serif;}
//文本斜体显示
p.italic {font-style:italic;}
//字体加粗
p.thick {font-weight:bold;}
//使用像素来设置字体大小
p {font-size:14px;}

链接

为链接设置样式。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：

• a:link - 普通的、未被访问的链接
• a:visited - 用户已访问的链接
• a:hover - 鼠标指针位于链接的上方
• a:active - 链接被点击的时刻

a:link {color:#FF0000;}		/* 未被访问的链接 */
a:visited {color:#00FF00;}	/* 已被访问的链接 */
a:hover {color:#FF00FF;}	/* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}	/* 正在被点击的链接 */

a:link {
//text-decoration 属性大多用于去掉链接中的下划线
text-decoration:none;
//background-color 属性规定链接的背景色
background-color:#B2FF99;
}

列表

列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。

//列表类型
ul {list-style-type : square}
//列表项图像
ul li {list-style-image : url(xxx.gif)}

表格

表格属性可以帮助您极大地改善表格的外观。

//下面的例子为 table、th 以及 td 设置了蓝色边框
table, th, td
  {
  border: 1px solid blue;
  }
//border-collapse 属性设置是否将表格边框折叠为单一边框
table
{
border-collapse:collapse;
}
//表格宽度设置为 100%
table
  {
  width:100%;
  }
//将 th 元素的高度设置为 50px
th
  {
  height:50px;
  }
  //表格文本对齐；
  
  td
  {
  //text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中；
  text-align:right;
  //vertical-align 属性设置垂直对齐方式
  vertical-align:bottom;
  //表格内边距
  padding:15px;
  }