- 第1节:CSS 简介
- 第2节:CSS 语法
- 第3节:CSS Id 和 Class选择器
- 第4节:CSS 创建
- 第5节:CSS Backgrounds (背景)
- 第6节:CSS Text(文本)
- 第7节:CSS Fonts (字体)
- 第8节:CSS 链接样式
- 第9节:CSS 列表样式 (ul)
- 第10节:CSS Table (表格)
- 第11节:CSS Box Model (盒子模型)
- 第12节:CSS Border (边框)
- 第13节:CSS 轮廓(outline)属性
- 第14节:CSS Margin(外边距)
- 第15节:CSS Padding(填充)
- 第16节:CSS 分组和嵌套
- 第17节:CSS 尺寸 (Dimension)
- 第18节:CSS Display (显示) 与 Visibility(可见性)
- 第19节:CSS Positioning (定位)
- 第20节:CSS Float(浮动)
- 第21节:CSS 水平对齐 (Horizontal Align)
- 第22节:CSS 组合选择符
- 第23节:CSS 伪类
- 第24节:CSS 伪元素
- 第25节:CSS 导航栏
- 第26节:CSS 下拉菜单
- 第27节:CSS 图像透明/不透明
- 第28节:CSS 图像拼合技术
- 第29节:CSS 媒体类型
- 第30节:CSS 属性选择器
CSS Id 和 Class选择器
CSS Id 和 Class
id 和 class 选择器
如果你要在 HTML 元素中设置 CSS 样式,你需要在元素中设置 "id" 和 "class" 选择器。
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以 #
来定义。
以下的样式规则应用于元素属性 id = "para1":
实例
{ text-align:center;
color:red; }
ID 属性不要以数字开头,数字开头的 ID 在 Mozilla/Firefox 浏览器中不起作用。
ID 属性只能在每个 HTML 文档中出现一次。具体的解释,请参阅 XHTML:网站重构。
class 类选择器
class 选择器用于描述一组元素的样式,class 选择器有别于 id 选择器,class 可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点".
"号显示:
在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。
实例
你也可以指定特定的 HTML 元素使用 class。
在以下实例中, 所有的 p 元素使用 让该元素的文本居中:
实例
类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
标签选择器
除了提到的 id 和 class 选择器外,第三种选择器为标签选择器,即以 HTML 标签作为 CSS 修饰所用的选择器。
实例
<style>
h3{color:red;}
</style>
<h3>test教程</h3>
内联选择器
第四种内联选择器即直接在标签内部写 CSS 代码。
实例
<h3 style="color:red;">test教程</h3>
这四种 CS 选择器有修饰上的优先级,即:
内联选择器 > id选择器 > 类选择器 > 标签选择器