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

使用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