一、标签选择器(元素选择器)

使用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
基本语法格式：

标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}或者
元素名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

优缺点：能快速为页面中同类型的标签统一样式，同时也是缺点，不能设计差异化样式。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> p {
            color: blue;
        }
        div {
            color:red;
        }
    </style>
</head>
<body>
    <p>鸣人</p>
    <p>佐助</p>
    <p>李洛克</p>
    <div>雏田</div>
    <div>纲手</div>
    <div>静音</div>
</body>
</html>

上面代码中的p和div标签被作为了标签选择器：

二、类选择器

类选择器使用"."进行标识,后面紧跟类名。
基本语法：.

类名｛属性1：属性值1；属性2：属性值2；属性3：属性值3；｝
标签调用的时候用class="类名"即可。

<!DOCTYPE html>
<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