【nav{}】
这样的样式是给特定的标签直接定义样式时使用的,这个样式名称是跟标签是相对应的,比如我要给<p></p>这个标签设置样式,那我就可以直接写:p{样式}就可以,但是这样写并没有特指某个标签,而是指的页面内所有<p>标签的样式,所以,使用了这种方法,那么只要你的页面里有<p>这个标签的,那他们的样式就是统一的样式;
【.nav{}】这种前面加 “.” 的样式,是说明该样式是由类调用的,也就是容器是使用class调用这个样式的,这种样式是可以被多个不同的容器多次重复调用而没有限制的,属于共有样式;
【#nav{}】这种前面加 “#” 的样式是ID调用的,就是容器使用id=“#nav”这样来调用的,这样的样式是一次性的,专有的样式,即该样式只能是一个指定的容器只能调用一次这个样式,其他容器不能再次调用这个样式,也不可以多次调用,属于私有样式;
【关于调用样式的技巧】
举个例子:
<div class="demo1" id="demo2">示例一</div>
<div class="demo1" id="demo3">示例二</div>
<div class="demo4" id="demo5">示例三</div>

这是两个div,容器是可以同时使用class和id调用样式的,这样的好处在于可以将两个div的共同样式放在类样式里面,而各自不同的样式可以放在id样式里面,这样就避免重复写大量相同代码造成冗余的情况发生!
示例一的需要的样式是红色、宋体字,示例二是黑色、宋体字,而这三个示例都需要水平居中显示,那么他们的共同点就是示例一和示例二都需要宋体字,三个示例都要居中显示,那么就可以这样写样式:
<style>
<!--
.demo1{font-family:"宋体";} /*宋体字*/
#demo2{color:red;} /*红色色*/
#demo3{color:black;} /*黑色*/
div{margin:0 auto;} /*将页面内所有div居中显示*/
-->
</style>
这样就可以避免重复写很多不需要多次写的重复代码

css 命名 有的加# ,有的加点 ,有的没加。请问下都在什么情况下用的?的更多相关文章

  1. 使用Django的时候,页面请求正常,也没有报任何错误,甚至连警告都没有的情况下,页面却还是原地不动或者闪一下或者无限显示加载动画的情况下的解决办法

    这个问题描述比较笼统,但根据我目前遇到过两种情况来看,似乎都比较重要而且实用,所以打算分别讲述一下. 说明:Django的版本是Django2.0 第一种:URL配置错误 页面闪一下,却原地不动,可能 ...

  2. 判断jquery类库是否加载,如未加载则加载。

    本人所有文章使用到的东西均在"渭南电脑维修网"网站中得以实现和应用,还请大家参考. 抄写别人网站的同时,N多不同的网站,势必有N多的css.javascript引用文件都会重复引用 ...

  3. (转)面向属性的CSS命名

    原文链接:戳这里 自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根 ...

  4. 面向属性的CSS命名

    自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根想不出用什么名字来 ...

  5. 前端开发人员要注意的css规范,css命名。

    刚工作的时候也没注意关于css的规则,根据自己的心情想怎么用就怎么用,完成工作就好不会考虑代码的可读性,加载的性能,现在身为前端的一员就要有程序员的自我修养(嘿嘿,是不是很有责任感啊). 废话不多说, ...

  6. CSS 命名规范将省下调试时间

    我听说很多开发者厌恶 CSS.而在我的经验中,这往往是由于他们并没有花时间来学习 CSS. CSS 算不上是最优美的『语言』,但迄今二十多年来,它都是美化 web 举足轻重的工具.从这点来说,也还算不 ...

  7. CSS命名规范

    DIV+CSS规范命名大全集合 前端人员必看CSS命名规范 整理: 文件名必须由小写字母.数字.中划线组成 ).所有的命名最好都小写,一律采用小写加中划线的方式,不允许使用大写字母或 _2).属性的值 ...

  8. html,css命名规范 (转)

    HTML+CSS命名规范总结 1.HTML部分 1.1添加必须的utf-8的字符集,并且使用HTML5的简洁 方式: <meta charset="utf-8"> 1. ...

  9. css命名书写规范小结。

    单行形式书写风格的排版约束 1.   每一条规则的大括号 { 前后加空格 2.   多个selector共用一个样式集,则多个selector必须写成多行形式 3.   每一条规则结束的大括号 } 前 ...

随机推荐

  1. let 命令

    let命令取代并扩展了expr命令的整数算数符号. let除了支持5中基础的运算符. 还支持+=,-=,*=,.-,%= 自变运算符. 以及**幂次运算符. 在变量计算中不需要加上$来表示变量. [c ...

  2. 拖动元素,自由变换位置 jquery

    拖动元素,将改元素插入到某个元素前/后,并返回当前所在的位置的索引值,代码如下: <!DOCTYPE html><html lang="en"><he ...

  3. Python 3标准库 第十四章 应用构建模块

    Python 3标准库 The Python3 Standard Library by  Example -----------------------------------------第十四章   ...

  4. mybatis 中 if-test 判断大坑

    [<if test="takeWay == '0'">]mybatis的if判断 单个的字符要写到双引号里面才行,改为<if test='takeWay == & ...

  5. sh_08_格式化字符串

    sh_08_格式化字符串 info_tuple = ("小明", 21, 1.85) # 格式化字符串后面的 `()` 本质上就是元组 print("%s 年龄是 %d ...

  6. PyQT5堆叠布局:切换界面(QStackedLayout)

    几乎所有的GUI界面都需要用到这个场景:在一个界面里面,点击不同的按钮显示不同的内容 在Qt设计师中没有堆叠布局,需要我们手动添加 在Qt设计师中,设计3个切换的页面,和一个主界面. 注意在主界面是两 ...

  7. [LOJ3106][TJOI2019]唱、跳、rap和篮球:DP+生成函数+NTT+容斥原理

    分析 令\(f(i)\)表示共\(i\)组同学讨论cxk的位置的方案数(不考虑其他位置上的人的爱好),这个数组可以很容易地通过依次考虑每个位置是否是四个人中最后一个人的位置来递推求解,时间复杂度\(O ...

  8. JS框架_(JQuery.js)文章全屏动画切换

    百度云盘 传送门 密码:anap 文章全屏动画切换效果 <!doctype html> <html lang="zh"> <head> < ...

  9. [CSP-S模拟测试]:小盆友的游戏(数学 or 找规律)

    题目传送门(内部题110) 输入格式 第一行一个整数$N$,表示小盆友的个数. 第二行$N$个整数$A_i$,如果$A_i=-1$表示$i$目前是自由身,否则$i$是$A_i$的跟班. 输出格式 一个 ...

  10. RocketMQ存储系统概要设计和源码解读

    普遍消息存储技术的选型 分布式KV存储 NewSQL存储:TiDB 文件系统:RocketMQ,kafka,RabbitMQ RocketMQ:所有的message存储在一个log里,不区分topic ...