css 命名 有的加# ,有的加点 ,有的没加。请问下都在什么情况下用的?
【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 命名 有的加# ,有的加点 ,有的没加。请问下都在什么情况下用的?的更多相关文章
- 使用Django的时候,页面请求正常,也没有报任何错误,甚至连警告都没有的情况下,页面却还是原地不动或者闪一下或者无限显示加载动画的情况下的解决办法
这个问题描述比较笼统,但根据我目前遇到过两种情况来看,似乎都比较重要而且实用,所以打算分别讲述一下. 说明:Django的版本是Django2.0 第一种:URL配置错误 页面闪一下,却原地不动,可能 ...
- 判断jquery类库是否加载,如未加载则加载。
本人所有文章使用到的东西均在"渭南电脑维修网"网站中得以实现和应用,还请大家参考. 抄写别人网站的同时,N多不同的网站,势必有N多的css.javascript引用文件都会重复引用 ...
- (转)面向属性的CSS命名
原文链接:戳这里 自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根 ...
- 面向属性的CSS命名
自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根想不出用什么名字来 ...
- 前端开发人员要注意的css规范,css命名。
刚工作的时候也没注意关于css的规则,根据自己的心情想怎么用就怎么用,完成工作就好不会考虑代码的可读性,加载的性能,现在身为前端的一员就要有程序员的自我修养(嘿嘿,是不是很有责任感啊). 废话不多说, ...
- CSS 命名规范将省下调试时间
我听说很多开发者厌恶 CSS.而在我的经验中,这往往是由于他们并没有花时间来学习 CSS. CSS 算不上是最优美的『语言』,但迄今二十多年来,它都是美化 web 举足轻重的工具.从这点来说,也还算不 ...
- CSS命名规范
DIV+CSS规范命名大全集合 前端人员必看CSS命名规范 整理: 文件名必须由小写字母.数字.中划线组成 ).所有的命名最好都小写,一律采用小写加中划线的方式,不允许使用大写字母或 _2).属性的值 ...
- html,css命名规范 (转)
HTML+CSS命名规范总结 1.HTML部分 1.1添加必须的utf-8的字符集,并且使用HTML5的简洁 方式: <meta charset="utf-8"> 1. ...
- css命名书写规范小结。
单行形式书写风格的排版约束 1. 每一条规则的大括号 { 前后加空格 2. 多个selector共用一个样式集,则多个selector必须写成多行形式 3. 每一条规则结束的大括号 } 前 ...
随机推荐
- 【LuoguP5328】[ZJOI2019]浙江省选
题目链接 题意 给你一堆斜率和纵截距都为正的直线 ,求对于一个条直线是否存在一个 x 使得在这条直线在 x 处能是前 m 大,输出最高能够达到的排名(排名定义为在 x 处严格大于自己的直线条数+1) ...
- Acwing-119-袭击(分治)
链接: https://www.acwing.com/problem/content/121/ 题意: 在与联盟的战斗中屡战屡败后,帝国撤退到了最后一个据点. 依靠其强大的防御系统,帝国击退了联盟的六 ...
- node的安装和配置教程
node,除了做数据服务处理,还是各大框架的环境依赖,作为前端开发人员,node是必不可少的.好了,接下来直接开始. 一.根据自己的安装环境(即你的电脑系统版本)下载对应安装包,官网地址:https: ...
- HTML中的超链接(Hyperlink)
超链接 ★超链接简单介绍 超链接可以说是网页中最常见的元素.超链接的英文名是hyperlink.每个网站都是由众多的网页组成,网页之间通常都是通过链接的方式相互关联的. 超链接能够让浏览者在各个独立的 ...
- C# image/byte[]/string/互转
public Image ByteArrayToImage(byte[] iamgebytes) { MemoryStream ms = new MemoryStream(iamgebytes); I ...
- reactjs 的 css 模块化工具 styled-components 升级后 createGlobalStyle 废除,使用 createGlobalStyle 的方案
在 styled-components 升级到 4 版本后设置全局属性的 createGlobalStyle 这个 api 被废除,替代的 api 是 createGlobalStyle 与过去组织代 ...
- WordPress过滤器(Filters):apply_filters和add_filter
过滤器(Filters)对于WordPress来说是非常重要的,它极大地扩展了WordPress的定制能力,提高了WordPress的灵活性.无论是制作主题还是开发插件,我们基本上都会或多或少地使用到 ...
- Excel导入导出工具(简单、好用且轻量级的海量Excel文件导入导出解决方案.)
Excel导入导出工具(简单.好用且轻量级的海量Excel文件导入导出解决方案.) 置顶 2019-09-07 16:47:10 $9420 阅读数 261更多 分类专栏: java 版权声明:本 ...
- extentsreport testng美化报告生成
一:主要内容 优化testng测试报告,使用extentsreport 解决extentsreport打开后加载不出来样式的问题 二:报告效果 先上图,看下testng extentsreport报告 ...
- 利用 IntelliJ IDEA 进行代码对比的方法
Sometimes,我们会有这样的需求,即:想对比出两个不同版本代码的区别.如何实现? 第 1 种:如果我们是从 SVN 检出的项目,并且想比较本地代码与从 SVN 检出时的代码相比都有那些区别,可以 ...