-
ID 与类
-
层叠
-
分组
-
继承
-
上下文选择器
-
子类选择器
-
其他选择器
-
结构与注释
20.1 ID 与类
选择器是用于控制页面设计的样式.即 ID 选择器何类选择器.
一直以来,许多开发人员经常将 ID 与类混淆,或者不能正确的使用这两种选择器,或者简
单的认为是一个代替另一个.这种认知是及其错误的.
(1). 应用 ID
每个 ID 在一个页面中只能使用一次,作为某个元素的唯一标识符 . 一般情况下,ID 只
用于页面的唯一元素,如页眉,主导航条 , 布局区块等.
示例:
This paragraph has red text.
相应的 CSS 代码:
#hightlight{
color:#FFFFFF;
}
(2). 将 ID 与选择器结合
/适合所有 h2 标题/
h2{
color:#333;
font-size:16px;
}
/只适合 title 的 h2 标题/
h2#title {
color:#eee;
}
相应的 XHTML 代码:
Title Of My Article
Title Of My Article
(3).ID 的使用场合
对于每个 ID,每个页面只能有一个元素使用该样式,因此 ID 应该为每个页面唯一存
在并仅使用一次的元素不保留,
(4). 避免使用 ID 的场合
当一个以上的地方需要使用同一 CSS 规则时,不应该使用 ID.
(5). 应用类
类可以无限次的使用,因此它是应用 CSS 的非常灵活的方法.
his paragraph has red text.
相关 CSS 代码:
.hightlight {
color:FFFFFF;
}
(6). 结合多个类和 ID
范例:
- Beer
- Spirtis
- Cola
- Lemonade
相应的 CSS 代码:
ul#drinks {
color:FF6600;
}
.mix {
Color:#999999;
}
.hot {
Color:#333333;
}
(7). 利用类改写基本样式: : : :
p{
Color:#ff6600;
}
.bleached {
Color:#ccc;
}
相应的 XHTML 代码:
This paragraph has red text.
This paragraph has red text.
(8). 直接将类链接到元素上
p.bleached {
color:red;
}
相应的 XHTML 代码:
This paragraph has red text.
(9). 避免 , , , , 适合
对于 class,如果多次重复使用或者使用子类选择器，那么就选择 class，如果是定义
唯一性的标记，比如布局，那么用 id。
2 20.2 层叠
(1).外部链接实现层叠
(2).导入样式实现层叠
@import url(“one.css”)
@import url(“two.css”)
@import url(“three.css”)
注意点:必须牢记一个规则,越晚给的规则越重要.
3 20.3 分组
h1{
Font-family:隶书,宋体,楷体;
Line-height: 140%;
Color:#333;
}
h2{
Font-family:隶书,宋体,楷体;
Line-height: 140%;
Color:#333;
}
h3{
Font-family:隶书,宋体,楷体;
Line-height: 140%;
Color:#333;
}
/分组后/
h1,h2.h3{
Font-family:隶书,宋体,楷体;
Line-height: 140%;
Color:#333;
}
/分组例外/
h1{
Font-style:italic;
}
4 20.4 继承
h1 {
Color:#333;
}
This is thegreatest heading in the world
从 BODY 继承
Body {
Margin:10px;
Font-family:隶书;
Background:#000;
Color:#fff;
} } } }
5 20.5 上下文选择器
h1{
Color: #ccc;
}
i {
Color:#000;
}
/使用上下文选择器/
h1 I {
Color:#000;
}
6 20.6 子类选择器
.box {
color:red;
}
.box1 {
font-weight:bold;
}
.box2 {
font-style:italic;
}
BoxBox1Box27 20.7 其他选择器
(1).类型选择器
p{color:black;}
a{text-decoration:underline;}
h1{font-weight:bold;}
(2).后代选择器
h2 i{
color:red;
}
li a{
text-decoration:none;
}
#main h1{
Color:red;
}
(3).伪类
a:link{color:blue;}
a:visited{color:green;}
a:hover,a:active{color:red;}
input:focus{background-color:yellow;}
(4).通用选择器
*{
Padding:0;
Margin:0;
}
(5).高级选择器
高级选择器,目前支持还不太完善,所以,对于站点功能很重要的任何元素上,应该避
免使用这些高级选择器.
1.子选择器和相邻同胞选择器
子选择器
#nav > li {background:url(bg.gif) no-repeat left top;}
- Home
- Server
- Development
- Consultancy
- Contact Us
相邻同胞选择器:
h1+p{font-weight:bold;}
Main Heading
First Paragraph
Second Paragraph
2.属性选择器
<strong title=”Cascading Style Sheets”>CSS
strong[title] {border-bottom: 1px dotted #999;}
strong[title]:hover {cursor:help;background:#ccc}
8 20.8 代码注释与结构
/body styles/
body {
Font-size:67.5%;
}
1.添加结构性注释
/*---------------------------------------------------
Version: 1.1
Author: andy budd
Website:http:www.andybudd.com
-----------------------------------------------------*/
2.自我提示
/*
Use the star selector hack to give IEa different font size
*/
布局结构：使用有意义的标记。
表格成了一种布局工具而不是显示数据的方式,人们使用块引用(blockquote)来添加
空白而不是表示引用.Web 很快就失去了意义,成了字体和表格标签的大杂烩.而现在我
们可以使用 DIV+CSS 来控制布局.
11应用 ID
无标题文档 定义选择器
定义选择器
21 ID 与选择器结合
无标题文档 ID 与选择器结合
柳志军同学
柳志军同学
22 class无标题文档 ID 与选择器结合
柳志军同学
柳志军同学
23 class应用类无标题文档 柳志军同学
柳志军同学
柳志军同学
柳志军同学
24 class应用类无标题文档 - 啤酒
- 可乐
- 红茶
- 绿茶
无标题文档 上下文选择器部分按时打算
上下文选择器部分按时打算
上下文选择器部分按时打算
26 子类选择器子类选择器 子类选择器子类选择器子类选择器27高级选择器子类选择器 /*下面是正文*/
3252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
