下载文档原格式
CSS入门和高级技巧第1天课堂笔记（本课程共8天）目录CSS入门和高级技巧 (1)目录 (2)一、上节课知识的复习 (3)二、表格 (5)2.1 表格的基本使用 (5)2.2 表格单元格的合并 (5)三、div和span标签 (10)3.1 div标签 (10)3.2 span (11)四、HTML杂项 (12)4.1 注释 (12)4.2 字符实体 (12)五、废弃标签介绍 (14)六、CSS整体感知 (15)6.1 简介 (15)6.2 整体感知 (16)6.3 style标签——css的舞台 (17)6.4 css对换行不敏感、缩进不敏感 (17)6.5 分号 (18)6.6 先学几个属性 (18)七、基本选择器 (19)7.1 标签选择器 (19)7.2 id选择器 (20)7.3 类选择器 (21)八、高级选择器 (24)8.1 后代选择器 (24)8.2 交集选择器 (25)8.3 并集选择器 (25)8.4 通配符* (26)九、继承性和层叠性 (27)9.1 继承性 (27)9.2 层叠性 (28)一、上节课知识的复习●一定要会用Chrome浏览器审查别人的网页，还有自己的项目，排错的功能，快捷键是F12。
2008年诞生的谷歌浏览器，一诞生就解决了原来前端工程师调试难的问题。
●插入图片，页面中能够插入的图片类型：jpg、jpeg、bmp、png、gif；不能的psd、fw。
语法：1<img src=”路径” alt=”替代文字” />●相对路径、绝对路径：相对路径就是从html页面出发，找到图片：1<img src=”a/b/1.jpg” />等价于1<img src=”./a/b/1.jpg” />图片位于html文件较浅的文件夹中：1<img src=”../../../1.jpg” />绝对路径：直接的门牌号。
以http://开头，或者以/开头的都是绝对路径。
css知识点总结CSS知识点总结。
一、CSS简介。
1. 定义。
- CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML（或XML 等标记语言）文档外观和布局的样式语言。
它可以控制网页元素的样式，如颜色、字体、大小、间距、布局等。
2. 作用。
- 将内容（HTML）与表现（CSS）分离。
这使得网页的维护和更新更加容易，例如，如果要改变整个网站的字体颜色，只需要修改CSS文件中的相关样式规则，而不需要逐个修改HTML页面中的每个元素。
二、CSS的基本语法。
1. 选择器（Selector）- 元素选择器。
- 直接使用HTML元素名称作为选择器，例如`p`选择所有的`<p>`段落元素，`h1`选择所有的`<h1>`标题元素等。
- 类选择器。
- 以`.`开头，后面跟着自定义的类名。
例如`.my - class`可以选择所有带有`class = "my - class"`属性的元素。
在HTML中可以这样使用：`<div class="my - class">...</div>`。
- ID选择器。
- 以`#`开头，后面跟着自定义的ID名。
ID在一个HTML页面中应该是唯一的。
例如`#my - id`可以选择带有`id = "my - id"`属性的元素，如`<div id="my - id">...</div>`。
2. 声明块（Declaration Block）- 由一个或多个声明（Declaration）组成，每个声明包含一个属性（Property）和一个值（Value），中间用`:`分隔，声明之间用`;`分隔。
例如：p {color: red;font - size: 16px;}- 在这个例子中，`p`是选择器，`{}`内部是声明块。
手把手教你学习HTML和CSS的基础知识第一章：HTML基础知识HTML，全名为超文本标记语言（HyperText Markup Language），是用于创建网页的标准标记语言。
学习HTML是学习网页开发的第一步。
本章将介绍HTML的基础知识。
1.1 HTML的起源与发展HTML最早由蒂姆·伯纳斯-李（Tim Berners-Lee）于1990年创造，并在1993年发布了HTML 2.0的第一个正式规范。
随着时间的推移，HTML不断发展，现在最新的版本是HTML5。
1.2 HTML文档的结构HTML文档由HTML标签组成，标签用于定义文档的结构和呈现内容。
一个HTML文档通常包含<head>、<body>和</html>等标签。
1.3 HTML标签的基本语法HTML标签由尖括号包围，并以起始标签和结束标签的形式出现。
例如，<p>是一个起始标签，</p>是一个结束标签。
还有一些标签是没有结束标签的，如<br>标签。
1.4 HTML元素与属性元素是指由起始标签、内容和结束标签组成的整体。
属性提供了关于元素的额外信息，如元素的样式、链接地址等。
HTML元素和属性中的内容是由标签和值组成的。
1.5 常用的HTML标签HTML有很多常用的标签，本章只介绍一些基础的标签。
如<h1>到<h6>标签用于定义标题；<p>标签用于定义段落；<a>标签用于创建超链接等。
第二章：CSS基础知识CSS，全名为层叠样式表（Cascading Style Sheets），是用于网页设计的样式表语言。
学习CSS可以为HTML文档添加样式和布局。
本章将介绍CSS的基础知识。
2.1 CSS的起源与发展CSS最早由赖耶斯博士（Håkon Wium Lie）和贝尔纳斯·卡尔（Bert Bos）于1996年创造，并在1997年发布了CSS1的第一个正式规范。
CSS动画制作从入门到精通CSS（层叠样式表）动画是一种用来为网页元素添加动态效果的技术。
通过使用CSS属性和关键帧，我们可以创建各种各样的动画，使网页更加生动有趣。
本文将从入门级别开始介绍CSS动画制作的基础知识，逐步深入，带你掌握CSS动画制作的各种技巧和实践。
一、入门篇1.1 CSS动画基础概念CSS动画可以通过提供的属性和关键帧来实现。
其中，常用的属性有animation、transform和transition等。
animation属性用于定义动画效果的名称、持续时间和动画方式；transform属性可以改变元素的形状、大小或者位置；transition属性用于定义元素过渡效果的属性和持续时间。
1.2 创建简单的CSS动画通过简单的代码示例，我们可以学习如何创建一个基本的CSS动画。
比如，通过设置animation属性的值，我们可以使一个元素在指定时间内从起始位置平滑地移动到目标位置。
通过设置transition属性的值，我们可以使元素的某个属性在一定时间内实现平滑的过渡效果。
二、进阶篇2.1 使用关键帧实现动画效果关键帧是CSS动画制作中非常重要的概念。
通过定义一系列关键帧，我们可以控制元素在动画过程中的各个状态和效果。
例如，通过设置@keyframes规则，我们可以定义一个元素在指定时间内逐渐改变颜色、旋转或者缩放的动画效果。
2.2 制作多个元素的动画组合有时候，我们需要让多个元素以一定的方式进行协调的动画效果。
比如，我们可以通过创建一个动画组，将多个元素的动画效果进行组合，使它们同时或者按照一定顺序进行动画播放。
这种方式可以制作更为复杂和炫酷的动画效果。
三、高级篇3.1 使用CSS库加速动画制作除了使用原生的CSS属性和关键帧制作动画效果外，我们还可以借助一些优秀的CSS库来加速动画的制作过程。
这些库提供了丰富的动画效果模板和封装好的API，使我们可以更快速地制作出专业级别的动画效果。
css基础知识点总结CSS基础知识点总结CSS（Cascading Style Sheets）是一种用于描述网页样式和布局的语言，它可以控制网页的颜色、字体、排版和其他各种外观方面的属性。
在这篇文章中，我们将总结一些CSS的基础知识点，帮助读者理解并掌握CSS的基本概念和用法。
一、选择器（Selectors）选择器是CSS中用来选择要应用样式的HTML元素的部分。
常见的选择器包括元素选择器、类选择器、ID选择器、伪类选择器等。
元素选择器通过元素的标签名选择元素，类选择器通过元素的class 属性选择元素，ID选择器通过元素的id属性选择元素，伪类选择器则用于选择具有特定状态的元素，如:hover用于选择鼠标悬停在元素上的状态。
二、属性（Properties）属性是CSS中用来控制元素外观的部分。
常见的属性包括颜色、字体、背景、边框、尺寸等。
通过为元素指定属性值，可以改变元素的外观样式。
例如，color属性用于设置文本颜色，font-family属性用于设置文本字体，background-color属性用于设置元素背景颜色，border属性用于设置元素边框样式。
三、值（Values）值是属性中可接受的具体数值或关键词。
不同的属性接受不同类型的值。
例如，color属性接受表示颜色的关键词（如red、blue）或十六进制颜色值（如#FF0000、#0000FF），font-size属性接受表示字体大小的数值（如12px、1.5em），background-image属性接受表示背景图片的URL值。
四、盒模型（Box Model）盒模型是CSS中用于布局的基本概念之一。
每个HTML元素都被看作是一个矩形的盒子，由内容区、内边距、边框和外边距组成。
内容区指的是元素的实际内容，内边距指的是内容区与边框之间的空间，边框指的是元素的边界，外边距指的是元素与其他元素之间的空间。
通过设置这些属性的值，可以控制元素的大小和间距。
网页设计代码css知识点在网页设计中，CSS是一种重要的编程语言，用于控制网页的样式和布局。
掌握CSS知识点，能够让我们更好地设计和优化网页，提升用户体验。
本文将介绍一些常见的CSS知识点，以帮助读者更好地理解和应用CSS。
一、CSS选择器CSS选择器用于选择HTML文档中的元素，并为其应用样式。
常见的CSS选择器包括：1. 元素选择器：通过元素名称选择元素。
例如，p选择所有的段落元素。
2. 类选择器：通过class属性选择元素。
例如，.intro选择所有class 为intro的元素。
3. ID选择器：通过id属性选择元素。
例如，#header选择id为header的元素。
4. 后代选择器：选择元素的后代元素。
例如，ul li选择所有ul元素中的li元素。
5. 伪类选择器：用于选择特定状态的元素。
例如，:hover选择鼠标悬停在元素上的状态。
二、盒模型在CSS中，每个元素都被看作是一个矩形的盒子，盒模型由四个部分组成：内容(content)、填充(padding)、边框(border)和外边距(margin)。
1. 内容：元素的实际内容，包括文本和图像等。
2. 填充：元素内容和边框之间的空白区域。
3. 边框：填充区域的边界。
4. 外边距：边框和相邻元素之间的空白区域。
通过CSS中的属性可以调整盒模型的大小、颜色和边框样式等。
三、尺寸和定位1. 宽度和高度：使用width和height属性设置元素的宽度和高度。
2. 相对定位：使用position属性设置元素的定位方式。
常见的定位方式有相对定位(relative)和绝对定位(absolute)。
3. 浮动：使用float属性将元素从正常的文档流中移动，并使其向左或向右浮动。
四、文本样式1. 字体样式：使用font-family属性设置字体样式。
例如，font-family: Arial, sans-serif;设置字体为Arial或者sans-serif。
网站建设培训教程CSS从入门到精通第一章 CSS简介 (4)第一节：什么是CSS? (4)什么是CSS (4)参见 (4)第二节：使用CSS的优势 (4)第二章 CSS入门例子 (4)示例 (4)第三章 CSS语法 (5)第一节：外部引用CSS (5)使用 link 标签引用CSS (5)使用 @import 引用CSS (5)第二节：内部引用CSS (6)第三节：内联引用CSS (7)第四节：CSS 选择符 -- CSS的名字 (7)选择符语法 (7)选择符取名规则 (7)常用的三种选择符 (8)选择符用法总结 (8)第五节：CSS 声明 (9)语法 (9)介绍两个常用的技巧 (9)第六节：CSS 注释 (9)语法 (10)示例 (10)第四章 CSS颜色 (10)CSS颜色表示方法 (10)注意: (11)第五章CSS背景 (11)第一节：CSS background-color 属性 (11)background-color -- 背景色,定义背景的颜色 (11)示例 (11)第二节：CSS background-image 属性 (12)background-image -- 定义背景图片 (12)示例 (12)第三节：CSS background-repeat 属性 (12)background-repeat -- 定义背景图片的重复方式 (12)示例 (13)第四节：CSS background-position 属性 (13)background-position -- 定义背景图片的位置 (13)示例 (13)第五节: CSS background-attachment 属性 (14)background-attachment -- 定义背景图片随滚动轴的移动方式 (14)示例 (14)第六节：CSS background 属性 (14)background -- 五个背景属性可以全部在此定义 (14)示例 (15)第六章 CSS文本 (16)第一节: CSS text-decoration 属性 (16)text-decoration -- 定义文本是否有划线以及划线的方式 (16)示例 (16)第二节: CSS white-space 属性 (17)white-space -- 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式 (17)示例 (17)第七章 CSS字体 (18)第八章 CSS边框 (18)第九章 CSS边外补白 (18)第一节: CSS margin 属性 (18)margin-top -- 定义上边外补白 (19)margin-right -- 定义右边外补白 (19)margin-bottom -- 定义下边外补白 (19)margin-left -- 定义左边外补白 (19)第十章 CSS边内补白 (19)padding -- 定义边内补白 (19)padding-top -- 定义上边内补白 (20)padding-bottom -- 定义下边内补白 (20)padding-left -- 定义左边内补白 (20)padding-right -- 定义右边内补白 (20)第十一章 CSS属性索引 (20)第一节：CSS2.1属性按功能索引 (20)CSS盒模式 (20)CSS视觉格式模型 (21)CSS视觉效果 (21)CSS列表 (21)CSS背景 (22)CSS字体 (22)CSS文本 (22)CSS颜色 (22)第一章 CSS简介第一节：什么是CSS?什么是CSS➢CSS是Cascading Style Sheets(层叠样式表)的简称.➢CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).➢在标准网页设计中CSS负责网页内容(XHTML)的表现.➢CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.➢可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.➢CSS是由W3C的CSS工作组产生和维护的.参见➢W3C的CSS主页/Style/CSS/➢在w3c网站上校验CSS的正确性/css-validator/第二节：使用CSS的优势➢内容与表现分离,有了CSS,网页的内容(XHMTL)与表现就可以分开了.➢使用CSS可以减少网页的代码量,增加网页的浏览速度第二章 CSS入门例子示例➢定义文字的颜色<html><style type="text/css" media="all">p {color:red;}p1 { color:blue;}</style><body><p>color就代表颜色,我们使用红色 red 为文字颜色.</p><p1>你可以修改代码使用 blue 蓝色, yellow 黄色等.学习文字的颜色</p1> </body></html>这段代码显示的结果如下：第三章 CSS语法➢CSS语法非常简单,组成CSS语法的元素只有CSS选择符与CSS属性.➢每个CSS选择符由1个或多个CSS属性组成.➢CSS是大小写敏感的,在CSS语法中推荐使用小写.第一节：外部引用CSSCSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件.外部引用CSS是最好的引入CSS的方式(可以使代码量最小,表现最统一,也是标准网页设计推荐的).使用 link 标签引用CSS示例<head><link rel="stylesheet" type="text/css" href="/style.css" /></head>➢href -- 指定需要加载的资源(CSS文件)的地址URI➢rel -- 指定链接类型➢type -- 包含内容的类型,一般使用type="text/css"使用 @import 引用CSS➢示例<head><style type="text/css">@import url(/style.css);</style></head>相对路径与绝对路径加载文件的时候可以使用相对路径或者绝对路径.绝对路径:文件的完整路径,主页上的文件或目录在硬盘上真正的路径./html/default.html就是绝对路径,/html/default.html也是绝对路径,C:winntsystem.sys也是绝对路径相对路径:相对于我们查看文档的路径.../default.html或者default.html或者../../default.html都是相对路径➢小结外部引用CSS中 link与@import的区别差别1：老祖宗的差别。
手把手整理CSS3知识汇总【思维导图】
手把手收拾CSS3学问汇总【思维导图】
CSS3学问汇总思维导图请见文章底部
这两天总结了一下CSS3中的基本学问点，没有做到很全面，由于之前也记过一些笔记，就没有再收拾成文档。
这里我会把之前的笔记拍照贴出来，基本都是一些很零碎的小学问点，需要大家平常多敲代码，多翻看笔记，以加深记忆，从而对CSS娴熟运用。
前面也收拾几篇关于CSS3104个学问点汇总和55 个提高CSS 开发效率的必备片段，有爱好的小伙伴可以看看：《关于前端CSS写法104个学问点汇总（一）》
《关于前端CSS写法104个学问点汇总（二）》
《手把手教你55 个提高CSS 开发效率的必备片段》
《手把手教你利用CSS控制文本溢出截断省略解决计划合集》CSS3 模块包括：
手把手收拾CSS3学问汇总【思维导图】
第1页共6页。
Css 知识点总结Css 知识点总结 (1)基本格式： (3)1、派生选择器 (3)2、id 选择器（选择器以"#" 来定义）： (3)如何插入样式表 (4)1、外部样式表 (4)2、内部样式表 (4)3、内联样式 (4)4、多重样式 (4)css背景 (5)1、背景色 (5)2、背景图像 (5)3、背景重复 (6)4、背景定位 (6)5、背景关联 (6)css文本 (7)1、文本颜色：text-indent 属性： (7)2、水平对齐：text-algin属性： (7)3、字间隔：word-spacing 属性 (8)5、字符转换text-transform 属性 (8)6、文本装饰 (8)7、direction 属性规定文本的方向/ 书写方向。
(8)CSS 字体 (9)1、font 属性 (9)2、font-family 属性 (9)3、font-style 属性 (10)4、font-variant 属性 (10)5、font-weight 属性 (10)6、font-size 属性 (11)7、line-height 属性 (11)CSS 列表 (12)1、设置所有的列表属性 (12)2、list-style-type 属性 (12)3、list-style-position 属性 (13)4、list-style-image 属性 (13)CSS 表格 (14)1、border-collapse 属性 (14)2、border-spacing 属性 (14)3、caption-side 属性 (15)4、empty-cells 属性 (15)5、table-layout 属性 (15)CSS 框模型概述 (16)CSS 内边距 (16)CSS 边框 (17)1、border 简写 (17)2、4个边框分别设置 (18)CSS 外边距 (18)1、margin 属性 (18)基本格式：三种格式：（CSS 语法由三部分构成：选择器、属性和值）例：body {color: blue}1、派生选择器例：Css部分：strong {color: red;}h2 {color: red;}h2 strong {color: blue;}Html文件部分:<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p> <h2>This subhead is also red.</h2><h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2> 2、id 选择器（选择器以"#" 来定义）：例：Css部分：#red {color:red;}#green {color:green;}Html 文本：<p id="red">这个段落是红色。
CSS 简介需要具备的基础知识在继续学习之前，你需要对下面的知识有基本的了解：•HTML•XHTMLCSS 概述•CSS 指层叠样式表 (C ascading S tyle S heets)•样式定义如何显示 HTML 元素•样式通常存储在样式表中•把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题•外部样式表可以极大提高工作效率•外部样式表通常存储在CSS 文件中•多个样式定义可层叠为一样式解决了一个普遍的问题HTML 标签原本被设计为用于定义文档内容。
通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。
而文档布局希望通过浏览器来完成，而不使用任何的格式化标签。
由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。
所有的主流浏览器均支持层叠样式表。
样式表极大地提高了工作效率样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性作起的作用那样。
样式通常保存在外部的 .css 文件中。
通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。
作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。
如需进行全局变换，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
多重样式将层叠为一个样式表允许以多种方式规定样式信息。
样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。
甚至可以在同一个 HTML 文档内部引用多个外部样式表。
层叠次序当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1.浏览器缺省设置2.外部样式表3.内部样式表（位于 <head> 标签内部）4.内联样式（在 HTML 元素内部）因此，内联样式（在 HTML 元素内部）拥有最高的优先权.CSS 基础语法CSS 语法由三部分构成：选择器、属性和值：selector {property: value}选择器 (selector) 通常是你希望定义的 HTML 元素或标签;属性 (property) 是你希望改变的属性，并且每个属性都有一个值。
属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：body {color: blue}上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。
在上述例子中，body 是选择器，而包括在花括号内的的部分是声明。
声明依次由两部分构成：属性和值，color 为属性，blue 为值。
值的不同写法和单位除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：p { color: #ff0000; }为了节约字节，我们可以使用 CSS 的缩写形式：p { color: #f00; }我们还可以通过两种方法是用 RGB 值：p { color: rgb(255,0,0); }p { color: rgb(100%,0%,0%); } 是对255的百分比。
，请注意，当使用 RGB 百分比时，即使当值为0时也要写百分比符号。
但是在其他的情况下就不需要这么做了。
比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位。
记得写引号提示：如果值为若干单词，则要给值加引号：p {font-family: "sans serif";}多重声明：提示：如果要定义不止一个声明，则需要用分号将每个声明分开。
下面的例子展示出如何定义一个红色文字的居中段落。
最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。
然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。
就像这样：p {text-align:center; color:red;}你应该在每行只描述一个属性，以便使样式定义的可读性更强，就像这样：p {text-align: center;color: black;font-family: arial;}空格和大小写敏感大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。
多重声明和空格的使用使得样式表更容易被编辑：body {color: #000;background: #fff;margin: 0;padding: 0;font-family: Georgia, Palatino, serif;}是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。
不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
CSS派生选择器（为嵌套中的元素设定样式）派生选择器：通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：li strong {font-style: italic;font-weight: normal;}请注意标记为 <strong> 的红色代码的上下文关系：在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的class 或 id，代码更加简洁。
再看看下面的 CSS 规则：strong {color: red;}h2 {color: red;}h2 strong {color: blue;}下面是它施加影响的 HTML：CSS id 选择器id 选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：#myred {color:red;}#mygreen {color:green;}下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
<p id=" myred ">这个段落是红色。
</p><p id=" mygreen ">这个段落是绿色。
</p>注意：id 属性必须唯一。
id 选择器和派生选择器在现代布局中，id 选择器常常用于建立派生选择器。
#sidebar p {font-style: italic;text-align: right;margin-top: 0.5em;}上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。
这个元素很可能是 div 或者是表格单元，尽管它也可能是一个表格或者其他块级元素。
它甚至可以是一个内联元素，比如 <em></em> 或者<span></span>，不过这样的用法是非法的，因为不可以在内联元素 <span> 中嵌入 <p>一个选择器，多种用法即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：#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;}在这里，与页面中的其他 p 元素明显不同的是，sidebar 内的 p 元素得到了特殊的处理，同时，与页面中其他所有 h2 元素明显不同的是，sidebar 中的 h2 元素也得到了不同的特殊处理。
备注：选择器的派生方式在中无法支持？单独的选择器id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用：#sidebar {border: 1px dotted #000;padding: 10px;}根据这条规则，id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框，同时其周围会有 10 个像素宽的内边距（padding，内部空白）。
老版本的 Windows/IE 浏览器可能会忽略这条规则，除非你特别地定义这个选择器所属的元素：div#sidebar {border: 1px dotted #000;padding: 10px;}。
