CSS教程：语义化方法替代结构化方法

2016-02-19 23:41 1 1 收藏

有一种朋友不在生活里，却在生命力；有一种陪伴不在身边，却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗？话不多说下面就和大家分享CSS教程：语义化方法替代结构化方法吧。

【 tulaoshi.com - Web开发】

　CSS代码的命名惯例一直是大家热门讨论的话题。今天网页教学网想通过分析一个流行三栏布局中的必要元素，来为大家讲解关于使用语义化方法替代结构化方法来命名CSS类的建议和指导。

CSS类命名的语义化VS结构化方式

　　一般而言，CSS类名的语义化声明方式应当考虑你的页面中某个相对元素的用意，独立于它的定位或确切的特性(结构化方式)。像left-bar, red-text, small-title这些都属于结构化定义的例子。

让我们看看下面这个例子:

CSS-语义化-结构化

　　而现在我们想把页面中的元素调换一下位置，如果你使用的是结构化方式(1)，那么你就要把所有CSS类名重新进行定义，因为它们的位置变了。在布局(3)中，我们看到元素都倒转了: right-bar 现在成了 left-bar，而 left-content 成了 right-content。如果你使用语义化方式则避免了此类问题。

　　换句话说，使用语义化方式的话，你在修改网站布局的时候可以仅仅修改相关CSS类的属性即可，而不用修改它们的类名了，如果网站的代码很庞大，这将节省大量的时间。

　　网页教学网会经常更新前端开发/网页设计等相关技术及教程文章，欢迎及时浏览网页教学网的最新教程及资源。

关于语义化的一些建议:

　　在开始之前，我想推荐两种简单的编写较好的CSS代码的指导方针:

为CSS类名定义的时候，尽量使用小写字母，如果有两个以上的单词，在每个单词之间使用-符或单词首字母大写(第一个单词除外)。如:main-content或mainContent。优化CSS代码，仅创建关键主要的CSS类并重新为子元素使用符合HTML标准的标签(h1, h2, p, ul, li, blockquote,)，例如,不要使用这种哦你那个方式:

div class=main
div class=main-title/div
div class=main-paragraph/div
/div
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）

而要这样写:

div class=main
h1/h1
p/p
/div

三栏布局中使用语义化方式的例子

　　让我们来通过这个简单的例子讲解一下如何为经典的三栏布局使用语义化方式命名:

CSS-语义化-教程

　　　使用语义化方式为CSS命名可以像这样:

#container{}
/*- Top section -*/
   #header{}
   #navbar{}
   /*- Main -*/
   #menu{}
   #main{}
   #sidebar{}
   /*- Footer -*/
   #footer{}

Container
#container 就是将你页面中的所有元素包在一起的部分，这部分你还可以命名为: wrapper, wrap, page. Header
#header 是网站页面的头部区域，一般来讲，它包含网站的Logo和一些其他元素。这部分你还可以命名为:top, Logo, page-header (或 pageHeader). Navbar
#navbar等同于横向的导航栏，是最典型的网页元素。这部分你还可以命名为:nav, navigation, nav-wrapper. Menu
#Menu区域包含一般的链接和菜单，这部分你还可以命名为: sub-nav , links. Main
#Main是网站的主要区域，如果是博客的话它将包含你的日志。这部分你还可以命名为: content, main-content (or mainContent)。 Sidebar
#Sidebar 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等这部分你还可以命名为: sub-nav, side-panel, secondary-content. Footer
#Footer包含网站的一些附加信息，这部分你还可以命名为: copyright.

来源:https://www.tulaoshi.com/n/20160219/1630380.html

上一篇： CSS实例：用CSS制作网页像素画
下一篇： CSS实现绝对的完美圆角框

看过《CSS教程：语义化方法替代结构化方法》的人还看了以下文章更多>>

WEB前端涉及的布局、结构化和标准化

标签： Web开发

很久没有写文章，最近一直在忙于找工作和找房子。哎，现在终于安定下来了，哎，又叹息一下，是因为我把去淘宝面试的机会也推掉了，本来以为要卷铺盖回武汉了，哎，不提了，很对不起小马哥，也很对不起自己啊！现在还是在上海，不扯了，开始正题吧。做前端开发快有3年时间，今天跟大家谈谈个人对WEB前端开发的一些经验（当然都是个人的一些...

将CSS按照层叠式结构化重新组织与构建

标签： Web开发

『Styleneat』CSS 文件结构格式重新组织服务，可以将书写风格凌乱的 CSS 文件按照层叠式结构重新组建，方便您进行阅读和研究，十分实用的一个在线工具。编程风格就如人的性格一般，不同程序员（设计师）的书写风格往往不尽相同，良好的风格更容易让其他人接受。就拿 WordPress 主题来说，我们或许更偏爱于使用代码风格良好、符合我们口味...

网页CSS优化使网页具有语义化

标签： Web开发

一、使用css缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。二.明确定义单位，除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如:width:100px width:100e...

加深对HTML和CSS标签语义化的理解

标签： Web开发

前两天参加了公司组织的一个WD培训，有一节课讲了标签语义化，听了之后感觉特别有用，更正了我以前对 HTML 和 CSS 的错误看法。首先说明的一点是，人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。以前我真的没有怎么重视过搜索引擎，现在开始比较在意了，因为页面的很大一部分流...

CSS教程:初始化CSS

标签： Web开发

为什么要初始化CSS？在webjx.com前面的文章中，我们讲过CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不近相同，所有开发时的第一件事可能就是如果把他们统一。也许他们平时做页面时根本就没考虑过浏览器兼容的问题。其实不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面差异。...

查看更多精彩>>