.xxx 为 class 类
成都创新互联长期为1000+客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为孝昌企业提供专业的做网站、网站建设,孝昌网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。
#xxx 为 id
id 具有唯一性,就是说你某个页面中 id 只应该出现一次,比如你有个导航栏名字考虑叫 nav,而你整个页面上这个导航栏只出现一次就该用 id,那么就叫:#nav
而 class 类是用在重复出现的地方,比如你页面中有n个地方都有红色的标题字反复出现,那就用 class 定义个类,假设叫:.red{color:red;},然后在要用红色字的标签上添加这个类即可。
id 唯一性只是语法上的规范,实际上你一个页面中出现两次以上同一个 id ,浏览器还是能够正确解析。
ID具有唯一性,CLASS具有普遍性。
id样式用为#
ID:是指id为某个值的元素.CSS定义为:#div_id{}.定义之后就是ID为div_id的div是这种样式.范围单一,一般用于指定的元素.
class类样式用为.
类:是指class为某一个值的元素.CSS定义为:.div_class{}.定义之后就是类为div_class的div是这种样式.范围好控制,需要用这种样式的就给他class就行了.
把id留给后台开发和JS使用,除此之外页面的page id(如首页的外层需要一个ID id="pageIndex"),页面结构(header main footer)允许用id命名(ID命名建议使用驼峰命名)。其他禁止id使用在样式表CSS命名中,一律使用class命名。
在编码思想上,我们可以将页面拆分成不同的层级(布局、模块、元件)。
什么是CSS命名空间?
通过统一的命名规范定义命名的范围,成为CSS class id命名空间。
布局: 以语义化的单词layout作为命名空间,例如主栏布局命名 layout-main,只改变layout-命名空间后面的命名,layout始终保留。布局的命名空间为layout-xxx。
模块:页面是由一个或多个模块组成,模块的英文单词是module,规范简写成mod,如新闻模块mod-news,照片展示模块mod-photo-show。模块的命名空间为mod-xxx 。
元件:元件是属于模块内部的,也可以说模块是由元件和它内部的自有元素组成。如用户照片信息元件cell-user-photo。元件的命名空间为cell-xxx 。
文字颜色(命名空间text-xxx)
text-c1, text-c2,text-c3……
背景颜色(命名空间bg -xxx)
bg-c1,bg-c2,bg-c3……
边框颜色(命名空间border-xxx)
border-c1,border-c2,border-c3……
参考自文章 CSS命名规则
css的id和class不同之处在于体现在以下几个方面:
css中id的优先级高于class,以下示例代码进行说明:
style
.aa{color:#000}
#bb{color:ff0000}
/style
div class="aa" id="bb"猜猜class和id优先级谁高/div
style
#bb{color:ff0000}
.aa{color:#000}
/style
div class="aa" id="bb"猜猜class和id优先级谁高/div
说明:无论class的样式文件在第一行或者第二行输出结果都是红色字体,说明id优先级高于class。
2.class css中得用.class的属性值,id是#id的值。
正确使用id和class
如果涉及到js获取值的话用id,否则用class来写。
注意事项:命名css的class和id应该有一定的规范性。
可以这样理解:
一、元素:就是html标签,比如table,tr,td,img,input等等,在对这些使用css的时候,元素名前面可以不用加任何符号,如:对网页中所有input元素用一个css样式,那么可以在样式中写 input{样式}
二、ID:如果想在网页中某个特定地方使用css,这时候就可以给那个元素一个ID,在样式的时候,ID前面要加“#”,比如:想对ID为test的表格应用一个css样式,可以写作 #test
三、类就是大多数情况下都可以调用的,在前面要加个“.”,然后在使用的时候用 “class=类名”
可以这样理解:
一、元素:就是html标签,比如table,tr,td,img,input等等,在对这些使用css的时候,元素名前面可以不用加任何符号,如:对网页中所有input元素用一个css样式,那么可以在样式中写 input{样式}
二、ID:如果想在网页中某个特定地方使用css,这时候就可以给那个元素一个ID,在样式的时候,ID前面要加“#”,比如:想对ID为test的表格应用一个css样式,可以写作 #test
三、类就是大多数情况下都可以调用的,在前面要加个“.”,然后在使用的时候用 “class=类名”