标签、类选择器及CSS命名规范

最新推荐文章于 2023-10-21 20:56:57 发布

Hudie.

最新推荐文章于 2023-10-21 20:56:57 发布

阅读量7.9k

点赞数 8

分类专栏： 3.前端技术专题文章标签：标签选择器类选择器 CSS命名规范

本文链接：https://blog.csdn.net/weixin_43691058/article/details/93008502

版权

3.前端技术专题专栏收录该内容

49 篇文章 2 订阅

订阅专栏

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

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

Hudie.

关注

8
点赞
踩
38

收藏

觉得还不错? 一键收藏
打赏
0
评论
标签、类选择器及CSS命名规范

一、标签选择器(元素选择器)使用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。基本语法格式：标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}或者元素名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}优缺点：能快速为页面中同类型的标签统一样式，同时也是缺点，不能设计差异化样式。<!DOCTYPE html>...
复制链接

扫一扫