2KB项目,专业的源码交易网站 帮助 收藏 每日签到

如何使用CSS类和ID

  • 时间:2019-01-23 18:46 编辑:2KB 来源:2KB.COM 阅读:376
  • 扫一扫,手机访问
  • 分享
摘要: 英文原文:How
英文原文:How to Use CSS Classes and IDs

Instructions

Assigning Names

  • 1

    有一些标签id在网页中是经常见到的,例如,container (or wrapper), header, content, sidebar, footer.这些标签id都是很好的例子,因为它们的名字就能知道其作用,它们申明的目的是为了辨别div或者其他标签元素。

  • 2

    id和 class 最好可以用来表示特定的意思.  诀窍就是去选择一个任何时候都能代表这个元素意思的名字

    给出的建议,例如,  你有一个标签代表的是当天的特价,你决定把它字体标红,你可以把元素的名字命名为“special” 或者是“red”

       "special" 应该是好的选择. 时间的推移, 你的颜色的方案可能会改变,然而"red"就会使人疑惑,但是如果这个名字是"special" 就能让你很好的辨认出这个标签的目的

  • 3

       确保你选择的这个名字有意义的,当你需要重新修改样式可能这些样式已经半年或一年没有碰了。这是一个好的选择

什么时候使用 Class 或 ID

  • 4

    在一个页面里,每个ID必须是唯一的,例如:在一个页面上只能有一个div使用某一个ID,但一个(class)能在页面中被使用多次。例如:你可以有一些图片在页面上一起使用 "leftfloat" 或 "rightfloat" 作为这些图片的(class)

  • 5

    第一步基于信息,你可能会想应该使用大量的使用(class)和少量的ID.恰好相反,为了精简标记你需要尽可能少用(class)。在类(class)上使用大数字命名或命名成名称(这里的名称指绝对名称,如:注册页面中的用户名 username、密码 password)这都是不好的习惯,类(class)应该作为元素的分类来命名。

  • 6

    类(class)在有时是必须的,但有时给元素(element)指定一个ID然后使用子元素选择器(descendant selector)指向那个目标元素的子元素比为每一个子元素分配一个(class)的做法要少一些代码。

  • 7

    例如, 假设在一个列表上有一些链接。你可以在列表里分配一个类(class)到每个单独的链接来样式化这些链接。或者分配一个ID在这个列表容器(如:UL或OL元素)并使用子元素选择器(descendant selector)写一个规则。假设你给UL分配一个ID为 "subnav"。这个子元素选择器(descendant selector) 将样式化subnav下面的链接。

    如下所示:#subnav a:link {rule here}

  • 8

    在一些地方里某些东西(这里应该是指指定重复的ID)频繁出现在同一个页面里会导致子元素选择器(descendant selector)不工作,类(class)的话就可以完好使用。我已经举例提醒过,应使用一个类来使一个图片向左还是向右浮动到页面的任何地方。

    假设你的目录中每一个条目有几个段落的描述,但你又想段落中的其中一个是不同的形式。假如它是介绍(introductory)段落你能分配它一个类(class)名为 "intro"。但如它是给用户的表扬信(testimonials),你可以分配它一个类(class)名为 "testimonial",然后你可以创建一个类 .intro 或 .testimonial 的样式,那些段落将会被区分成不同的。

提示&警告

  • 类与ID名可以都写成小写形式(如,#subnav)或驼峰命名方式(如,#subNav)。如果你选择驼峰命名方式,请确保你输入正确的HTML标记,否则浏览器将无法识别你的CSS规则。
  • 在类或者ID名称中不能有空格。使用下划线代替空格是可行的。
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接。 2KB翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。


2KB项目(www.2kb.com,源码交易平台),提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务

  • 全部评论(0)
资讯详情页最新发布上方横幅
最新发布的资讯信息
【计算机/互联网|】Nginx出现502错误(2020-01-20 21:02)
【计算机/互联网|】网站运营全智能软手V0.1版发布(2020-01-20 12:16)
【计算机/互联网|】淘宝这是怎么了?(2020-01-19 19:15)
【行业动态|】谷歌关闭小米智能摄像头,因为窃听器显示了陌生人家中的照片(2020-01-15 09:42)
【行业动态|】据报道谷歌新闻终止了数字杂志,退还主动订阅(2020-01-15 09:39)
【行业动态|】康佳将OLED电视带到美国与LG和索尼竞争(2020-01-15 09:38)
【行业动态|】2020年最佳AV接收机(2020-01-15 09:35)
【行业动态|】2020年最佳流媒体设备:Roku,Apple TV,Firebar,Chromecast等(2020-01-15 09:31)
【行业动态|】CES 2020预览:更多的流媒体服务和订阅即将到来(2020-01-08 21:41)
【行业动态|】从埃隆·马斯克到杰夫·贝佐斯,这30位人物定义了2010年代(2020-01-01 15:14)
联系我们

Q Q: 7090832

电话:400-0011-990

邮箱:7090832@qq.com

时间:9:00-23:00

联系客服
商家入住 服务咨询 投拆建议 联系客服
0577-67068160
手机版

扫一扫进手机版
返回顶部