css教程:选择合适的、成心义的元素描述内容

发布时间:2017-04-10 11:51 来源:互联网 以后栏目:网页设计教程

   您应当明白为甚么我会说到这个,选择合适的、成心义的元素去描述你的内容,确保您所选择的是富有语义的类class和id特点值。做精确的任务会使你的生活变得轻易很多,假设你是某个团队的一分子,对团队其他成员来讲也是如此。看一下下面的这条规矩: Webjx.Com

  .l13k { color: #369; } Webjx.Com

  假设您是刚接办这个任务,您在CSS文件中看到了下面的内容,您能不克不及说清楚这个类是甚么意思?

  大年夜部分情况下您都邑说不。这个类的称号能够是个缩写,然则生怕没有办法去弄清楚他究竟是甚么的缩写,眼前是一摸黑,或许是这类情况,能够是你把它放到这里,你如今很清楚它是甚么意思,然则你能包管3年以后你还记得它是甚么意思么? 网页教授教化网

  如今我们看一下下面的规矩:

  .left-blue { color: #369; }

  你能够急速知道这个类选择符是为左边边栏的显示蓝色区块而创建的,这时候它就精确的表达了必定的语义。正如我在下面提到的,一旦要你在在一周内要重新设计,然则在重构过程当中,这个区块须要定位到左边,色彩变成白色,类的特点值就没有任何意义。所以你如今须要改变你一切的特点值,要不就甚么都不改变,不过如许能够或招致重重的困惑。

  是以处理下面成绩的最好办法就是在类特点值的定名中防止应用色彩(包含色彩称号和十六进制值)或许宽度、高度的尺寸值;同时你也尽可能的防止除应用任何注解表示情势的值,例如box、left、right。反之,将表示和内容分别的意义也就不复存在了。

  最后,我们看一下最合适的定名规矩:

  .product-description { color: #369; }

  您应当能懂得,这个规矩是应用于产品描述。不管您的设计改变了若干次都不会改变。清楚清楚明了的感到不错吧。:)

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、