认清CSS的类class和标识id选择符

珍妮你好美

珍妮你好美

2016-01-29 11:47

认清CSS的类class和标识id选择符,认清CSS的类class和标识id选择符

  在CSS初级教程中我们仅仅考虑了HTML选择符──以HTML标签形式出现。你当然可以用类选择符class和标识选择符id来定义自己的选择符。这样做的好处是,依赖于class或者id,你可以不同地表现相同的HTML元素。

  在CSS中,类选择符在一个半角英文句点(.)之前,而id则在半角英文井号(#)之前。

  看起来像这样:

  #top { background-color: #ccc; padding: 1em }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)

  .intro { color: red; font-weight: bold; }

  HTML与CSS的连接用属性id和class。像这样:

以下是引用片段:
#top { background-color: #ccc; padding: 1em }  //id
.intro { color: red; font-weight: bold; }//class

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/html/)


  应用如下:


以下是引用片段:
<div id="top" 
<h1Chocolate curry</h1
<p class="intro"网页制作爱好者-www.devdao.com</p 
<p class="intro"http://www.devdao.com/</p 
</div

  id和class不同之处在于,id用在唯一的元素上,而class则用在不止一个的元素上。

  你也可以为一个指定的HTML元素应用选择符,把HTML选择符放置在前面就可以了,所以, p.jam { whatever }会应用在有类“jam”的段落上。

展开更多 50%)
分享

猜你喜欢

认清CSS的类class和标识id选择符

Html CSS布局 Div+CSS XHTML
认清CSS的类class和标识id选择符

CSS选择符

Web开发
CSS选择符

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS选择符详解

Web开发
CSS选择符详解

应用技巧:CSS特殊选择符伪类

Web开发
应用技巧:CSS特殊选择符伪类

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS选择符详解之关系选择符篇

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
CSS选择符详解之关系选择符篇

CSS教程:CSS选择符的用法和实例

Web开发
CSS教程:CSS选择符的用法和实例

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

怎样管理好样式

怎样管理好样式

《全民英雄》公会界面功能详解

《全民英雄》公会界面功能详解
下拉加载更多内容 ↓