CSS定义选择器
- ID与类
- 层叠
- 分组
- 继承
- 上下文选择器
- 子类选择器
- 其他选择器
- 结构与注释
20.1 ID与类
选择器是用于控制页面设计的样式.即ID选择器何类选择器.
一直以来,许多开发人员经常将ID与类混淆,或者不能正确的使用这两种选择器,或者简单的认为是一个代替另一个.这种认知是及其错误的.
(1).应用ID
每个ID在一个页面中只能使用一次,作为某个元素的唯一标识符.一般情况下,ID只用于页面的唯一元素,如页眉,主导航条,布局区块等.
示例:<p id="hightlight">This paragraph has red text.</p>
相应的CSS代码:
#hightlight{
color:#FFFFFF;
}
(2).将ID与选择器结合
/*适合所有h2标题*/
h2{
color:#333;
font-size:16px;
}
/*只适合title的h2标题*/
h2#title {
color:#eee;
}
相应的XHTML代码:<h2>Title Of My Article</h2>
<h2 id="title">Title Of My Article</h2>
(3).ID的使用场合
对于每个ID,每个页面只能有一个元素使用该样式,因此ID应该为每个页面唯一存在并仅使用一次的元素不保留,
(4).避免使用ID的场合
当一个以上的地方需要使用同一CSS规则时,不应该使用ID.
(5).应用类
类可以无限次的使用,因此它是应用CSS的非常灵活的方法.
<p class="hightlight">his paragraph has red text.</p>
相关CSS代码:
.hightlight {
color:FFFFFF;
}
(6).结合多个类和ID
范例:
<ul id="drinks">
<li class="mix">Beer</li>
<li class="mix">Spirtis</li>
<li class="hot">Cola</li>
<li class="hot">Lemonade</li>
</ul>
相应的CSS代码:
ul#drinks {
color:FF6600;
}
.mix {
Color:#999999;
}
.hot {
Color:#333333;
}
(7).利用类改写基本样式:
p{
Color:#ff6600;
}
.bleached {
Color:#ccc;
}
相应的XHTML代码:
<p>This paragraph has red text.</p>
<p class="bleached">This paragraph has red text.</p>
(8).直接将类链接到元素上
p.bleached {
color:red;
}
相应的XHTML代码:
<p class="bleached">This paragraph has red text.</p>
(9).避免,适合
对于class,如果多次重复使用或者使用子类选择器,那么就选择class,如果是定义唯一性的标记,比如布局,那么用id。
20.2 层叠
(1).外部链接实现层叠
<link rel="stylesheet" type="text/css" href="css/one.css">
<link rel="stylesheet" type="text/css" href="css/two.css">
<link rel="stylesheet" type="text/css" href="css/three.css">
(2).导入样式实现层叠
@import url("one.css")
@import url("two.css")
@import url("three.css")
注意点:必须牢记一个规则,越晚给的规则越重要.
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;
}
20.4 继承
h1 {
Color:#333;
}
<h1>This is the greatest heading <i>in the world</i></h1>
从BODY继承
Body {
Margin:10px;
Font-family:隶书;
Background:#000;
Color:#fff;
}
20.5 上下文选择器
h1{
Color: #ccc;
}
i {
Color:#000;
}
/*使用上下文选择器*/
h1 I {
Color:#000;
}
20.6 子类选择器
.box {
color:red;
}
.box1 {
font-weight:bold;
}
.box2 {
font-style:italic;
}
<div class="box">Box</div>
<div class="box box1">Box1</div>
<div class="box box2">Box2</div>
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;}
<ul id="nav">
<li>Home</li>
<li>Server
<ul>
<li>Development</li>
<li>Consultancy</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
相邻同胞选择器:
h1+p{font-weight:bold;}
<h1>Main Heading</h1>
<p>First Paragraph</p>
<p>Second Paragraph</p>
2.属性选择器
<strong title="Cascading Style Sheets">CSS</strong>
strong[title] {border-bottom: 1px dotted #999;}
strong[title]:hover {cursor:help;background:#ccc}
20.8 代码注释与结构
/*body styles*/
body {
Font-size:67.5%;
}
1.添加结构性注释
/*---------------------------------------------------
Version: 1.1
Author: andy budd
Email:info@andybudd.com
Website:http:www.andybudd.com
-----------------------------------------------------*/
2.自我提示
/*
Use the star selector hack to give IE a different font size
http://www.info.co.ph
*/
布局结构:使用有意义的标记。
表格成了一种布局工具而不是显示数据的方式,人们使用块引用(blockquote)来添加空白而不是表示引用.Web很快就失去了意义,成了字体和表格标签的大杂烩.而现在我们可以使用DIV+CSS来控制布局.
CSS定义选择器的更多相关文章
- 20, CSS 定义选择器
1. ID 与类 2. 层叠 3. 分组 4. 继承 5. 上下文选择器 6. 子类选择器 7. 其他选择器 8. 结构与注释 20.1 ID 与类 选择器是用于控制页面设计的样式.即 ID 选择器何 ...
- 用Less CSS定义常用的CSS3效果函数
定义圆角及调用 /* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @ ...
- CSS 后代选择器
后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- css中选择器的使用
css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...
- CSS 派生选择器
派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...
- CSS id 选择器
id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二 ...
- CSS 包含选择器(九)
一.包含选择器 包含选择器中前后两部分之间以空格隔开,根据左侧选择符指定的祖先元素,然后在该元素下寻找匹配右侧的选择侧符的下级元素 定义包含选择器时,必须保证在HTML结构中第一个对象能够包含第二个对 ...
- CSS样式选择器
<!-- css样式选择器 HTML选择器 类选择器 ID选择器 关联选择器 组合选择器 伪元素选择器 selector{ /* selector是样式选择器 property:value; / ...
随机推荐
- PLS-00215:字符串长度限制在范围
在Oracle中有一张people表 创建跟新表的存储过程 修改定义字段长度 总结:在Oracle中执行存储过程时,输出参数的长度要与原表中字段长度一致!
- 102. Binary Tree Level Order Traversal
题目: Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to ri ...
- 数据备份--dump
数据中 心操作大量的数据.当遭到破坏时,这就是一场灾难.这时候需要备份来恢复,及时你又大量的备份数据都没用,备份也肯定不是在浪费时间.你也许很幸运从 来没有经历过数据丢失.但是, 由于这种事情极少发生 ...
- Redis文档
http://manual.csser.com/redis/connection/auth.html
- poj2823
这是一道题意简单,数据较大的题(喜闻乐见): 一开始可能会想到RMQ问题,ST,线段树都是O(nlogn),应该勉强能过(没试过): 由于这道题区间是滚动连续的,所以,可以使用单调队列! 以最小值为例 ...
- 重装sql server2008数据库安装不上原因
因为注册表已经存在了sql server的信息,所以重新安装时需要删除注册表的一些信息 打开注册表:regedit 删除 HKEY_LOCAL_MACHINE\system/CurrentContro ...
- Apache HTTP Server多个拒绝服务漏洞
漏洞版本: Apache Group Apache HTTP Server < 2.4.9 漏洞描述: BUGTRAQ ID: 66303 CVE ID: CVE-2013-6438,CVE-2 ...
- ZJOI2010网络扩容
无限orz hzwer神牛…… 第一问很简单,按数据建图,然后一遍最大流算法即可. 第二问则需要用最小费用最大流算法,主要是建图,那么可以从第一问的残留网络上继续建图,对残留网络上的每一条边建 ...
- MySQL索引的查看创建和删除
1.索引作用 在索引列上,除了上面提到的有序查找之外,数据库利用各种各样的快速定位技术,能够大大提高查询效率.特别是当数据量非常大,查询涉及多个表时,使用索引往往能使查询速度加快成千上万倍. 例如,有 ...
- CDN-内容推送网络
前段时间介绍了浏览器缓存机制,通过浏览器缓存一方面可以改善用户的体验,而不用漫长地等待从服务器下载资源:另一方面减轻服务器压力.节省流量.CDN是另一种可以大幅度优化用户体验,且减轻服务器压力的技术. ...