wangchao.org
添加收藏 | 博客
 
购物视频论坛IT业界自然风光美女图片王朝网络小游戏BT下载生活百科编程设计手机图铃小说
 
笑话 | 水库 | 娱乐 | 体育 | 英语 | 宠物 | 美食 | 旅游 | 养生 | 手机 | 数码 | 汽车 | 珠宝 | 美容 | 装修 | 厨房 | 科普 | 动物 | 植物 | 影音 | 百科 | 知道 | 词典
  
 
 您好! 您现在位于: 王朝网络 → 编程设计 → 《CSS样式表中的选择符返回上一页 
 
1楼 

CSS样式表中的选择符

  网上购物、在线购物、购物搜索 欢迎光临本站购买图书、影视、音乐、数码、百货,手机等商品。

  一、类型选择符
  什么是类型选择符?指以网页中已有的标签类型作为名称的行径符。body是网页中的一个标签类型,div,p,span都是。
  如下:
  body {}
  div {}
  p {}
  span {}
  二、群组选择符
  对于XHMTL对象,可以对一组同时进行了相同的样式指派。
  使用逗号对选择符进行了分隔,这样书写的优点在于同样的样式只需要书写一次即可,减少代码量,改善CSS代码结构。
  使用时应该注意"逗号"是在半角模式下,并非中文全角模式。
  如下:
  h1,h2,h6,p,span
  {
  font-size:12px;
  color:#FF0000;
  font-family: arial;
  }
  三、包含选择符
  对某对象中的子对象进行样式指点定,这样选择方式就发挥了作用。
  需要注意的是,仅对此对象的子对象标签有效,对于其它单独存在或位于此对象以外的子对象,不应用此样式设置。
  这样做的优点在于,帮我们避免过多的id、class设置,直接对所需的元素进行定义。
  如下:
  h2 span
  {
  color:red;
  }
  如下:
  body h1 span strong
  {
  font-weight:bold;
  }
  四、id选择符
  根据DOM文档对象模型原理所出现的选择符,对于一个XHTML文件,其中的每一个标签都可以使用一个id=""的形式进行一个名称指派,但需要注意,在一个XHTML文件中id是具有唯一性而不可以重复的。
  在div css布局的网页中,可以针对不同的用途进行命名,如头部为header、底部为footer。
  XHTML如下:
  <div id="content"></div>
  CSS如下:
  #content
  {
  font-size:14px;
  line-height:120%;
  }
  五、class选择符
  其实id是对于XHTML标签的扩展,而class是对SHTML多个标签的一种组合,class直译的意思是类或类别。
  对于XHTML标签使用class=""进行名称指派。与id不同,class可以重复使用,对于多个样式相同的元素,可以直接定义为一个class。
  使用class的优点已不言自明,它对CSS代码重用性有良好的体现,众多的标签均可以使用一个样式来定义而不需要每一个编写一个样式代码。
  XHTML如下:
  <p class="he"></p>
  <span class="he"></span>
  <h5 class="he"></h5>
  CSS如下:
  .he
  {
  margin:10px;
  background-color:red;
  }
  六、标签指定式的选择符
  如果想同时使用id和class,也想同时使用标签选择符,可以使用如下的方式:
  h1#content {}
  /*表示所有id为content的h1标签*/
  h1.p1 {}
  /*表示所有class为p1的h1标签*/
  标签指定式选择符的精度介于标签选择符及id/class选择符之间,是常用的选择符之一。
  七、组合选择符
  对于上面的所有选择符而言,进行组合使用。如下:
  h1 .p1 {}
  /*表示h1下的所有class为p1的标签*/
  #content h1 {}
  表示id为content的标签下的所有h1标签
  h1 .p1,#content h1 {}
  /*表示h1下的所有class为p1的标签以及id为content的标签下的所有h1标签*/
  h1#content h2{}
  /*id为content的h1标签下的h2标签*/
  CSS选择符是非常自由与灵活的,可以根据页面的需要,使用各种选择符,尽量结构化与优化CSS文件.

一、类型选择符 什么是类型选择符?指以网页中已有的标签类型作为名称的行径符。body是网页中的一个标签类型,div,p,span都是。 如下: body {} div {} p {} span {} 二、群组选择符 对于XHMTL对象,可以对一组同时进行了相同的样式指派。 使用逗号对选择符进行了分隔,这样书写的优点在于同样的样式只需要书写一次即可,减少代码量,改善CSS代码结构。 使用时应该注意"逗号"是在半角模式下,并非中文全角模式。 如下: h1,h2,h6,p,span { font-size:12px; color:#FF0000; font-family: arial; } 三、包含选择符 对某对象中的子对象进行样式指点定,这样选择方式就发挥了作用。 需要注意的是,仅对此对象的子对象标签有效,对于其它单独存在或位于此对象以外的子对象,不应用此样式设置。 这样做的优点在于,帮我们避免过多的id、class设置,直接对所需的元素进行定义。 如下: h2 span { color:red; } 如下: body h1 span strong { font-weight:bold; } 四、id选择符 根据DOM文档对象模型原理所出现的选择符,对于一个XHTML文件,其中的每一个标签都可以使用一个id=""的形式进行一个名称指派,但需要注意,在一个XHTML文件中id是具有唯一性而不可以重复的。 在div css布局的网页中,可以针对不同的用途进行命名,如头部为header、底部为footer。 XHTML如下: <div id="content"></div> CSS如下: #content { font-size:14px; line-height:120%; } 五、class选择符 其实id是对于XHTML标签的扩展,而class是对SHTML多个标签的一种组合,class直译的意思是类或类别。 对于XHTML标签使用class=""进行名称指派。与id不同,class可以重复使用,对于多个样式相同的元素,可以直接定义为一个class。 使用class的优点已不言自明,它对CSS代码重用性有良好的体现,众多的标签均可以使用一个样式来定义而不需要每一个编写一个样式代码。 XHTML如下: <p class="he"></p> <span class="he"></span> <h5 class="he"></h5> CSS如下: .he { margin:10px; background-color:red; } 六、标签指定式的选择符 如果想同时使用id和class,也想同时使用标签选择符,可以使用如下的方式: h1#content {} /*表示所有id为content的h1标签*/ h1.p1 {} /*表示所有class为p1的h1标签*/ 标签指定式选择符的精度介于标签选择符及id/class选择符之间,是常用的选择符之一。 七、组合选择符 对于上面的所有选择符而言,进行组合使用。如下: h1 .p1 {} /*表示h1下的所有class为p1的标签*/ #content h1 {} 表示id为content的标签下的所有h1标签 h1 .p1,#content h1 {} /*表示h1下的所有class为p1的标签以及id为content的标签下的所有h1标签*/ h1#content h2{} /*id为content的h1标签下的h2标签*/ CSS选择符是非常自由与灵活的,可以根据页面的需要,使用各种选择符,尽量结构化与优化CSS文件.

 
标签: CSS  中的  样式  选择  
 
您可以将本页贴到其他网站
UBB代码HTML代码
 
 
 
 
 
 
 更多内容
 ·关于客户端XHTML,CSS和JavaScri ·IE6因为编码问题无法正确解析CSS ·用css让图片自动适应大小 ·校内网CSS添加音乐方法
 ·CSS经典实用技巧18招 ·CSS滤镜说明和用法 ·最全的CSS浏览器兼容问题 ·Windows 2003服务器不能播放Flv文
 ·关于Win2003服务器配置FLV文件 ·Photoshop人物摄影肤色美化细节 ·利用Word将PDF转换DOC文件的方法 ·就这么简单 PDF与其他格式转换技
 ·谨防WinRAR泄露隐私!巧清除记录 ·光影魔术手:照片批量处理绝对省事 ·强制删除临时文件Index.dat保安全 ·本地连接“修复”功能妙用两则
 ·动画保存不愁 FlashGet妙取Flash ·PowerPoint 2007流程文字转变成图 ·Word表格的空白单元格批量写入字 ·教您打开Windows 7 Build 6801的
 ·Word 2007自动提取数据制作成绩通 ·Windows 7中包含MinWin 微软透露 ·瑞星11.4病毒播报:梅勒斯木马下 ·CorelDRAW教程:商品条形码操作流
 
 
最新评论  点此查看所有评论
 
 
 
 
发表评论(支持UBB码)


验证码:  
 
 
 
© 2005- 王朝网络 版权所有