标签、类选择器及CSS命名规范
一、标签选择器(元素选择器)
使用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
基本语法格式：
标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}或者
元素名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
优缺点：能快速为页面中同类型的标签统一样式，同时也是缺点，不能设计差异化样式。
鸣人
佐助
李洛克
雏田纲手静音
上面代码中的p和div标签被作为了标签选择器：
二、类选择器
类选择器使用"."进行标识,后面紧跟类名。
基本语法：.
类名｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝
标签调用的时候用class="类名"即可。
<html lang="en">
<head><meta charset="UTF-8"><style>p {color: blue;}div {color:red;}.mingren{color: aqua;}style>
head>
<body><p class="mingren">鸣人p><p>佐助p><p>李洛克p><div>雏田div><div>纲手div><div>静音div>
body>
html>
- 优点：可以为元素对象定义单独或相同的样式，弥补了标签选择器的缺点。
三、CSS命名规范
- ①长名称或词组可以使用中横线来为选择器命名。
- ②不建议使用"_"下划线来命名CSS选择器。
- ③不要用纯数字、中文等命名，尽量使用英文字母来表示。
常用id命名：
(1)页面结构
- 容器: container
- 页头：header
- 内容：content/container
- 页面主体：main
- 页尾：footer
- 导航：nav
- 侧栏：sidebar
- 栏目：column
- 页面外围控制整体布局宽度：wrapper
- 左右中：left right center
(2)导航
- 导航：nav
- 主导航：mainbav
- 子导航：subnav
- 顶导航：topnav
- 边导航：sidebar
- 左导航：leftsidebar
- 右导航：rightsidebar
- 菜单：menu
- 子菜单：submenu
- 标题: title
- 摘要: summary
(3)功能
- 标志：logo
- 广告：banner
- 登陆：login
- 登录条：loginbar
- 注册：regsiter
- 搜索：search
- 功能区：shop
- 标题：title
- 加入：joinus
- 状态：status
- 按钮：btn
- 滚动：scroll
- 标签页：tab
- 文章列表：list
- 提示信息：msg
- 当前的: current
- 小技巧：tips
- 图标: icon
- 注释：note
- 指南：guild
- 服务：service
- 热点：hot
- 新闻：news
- 下载：download
- 投票：vote
- 合作伙伴：partner
- 友情链接：link
- 版权：copyright
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！