css权值和优先级+命名规范

选择器权值：

标签选择器：1

类选择器和伪类选择器：10

ID选择器：100

通配符选择器：0

行内样式：1000

!important 在一定条件下，优先级最高


常用的css样式命名

页面结构
页头：header
页面主体：main
页尾：footer
内容：content/container
容器: container

导航：nav
侧栏：sidebar
栏目：column
页面外围控制：wrapper
左右中：left right center

导航
导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar

左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary

功能
标志：logo
广告：banner
登陆：login
登录条：loginbar

注册：register
搜索：search
功能区：shop
标题：title

原文地址：https://www.cnblogs.com/chenyingying0/p/12244966.html

时间： 2024-08-29 07:28:14

css权值和优先级+命名规范的相关文章

关于css权值的问题

最近迷上html5,看了一些相关学习资料,现在把css中常见易出错易混淆的知识总结一下: 首先说一下关于css样式继承,重叠和特殊性: 有的时候我们会为同一个元素设置不同的css样式代码,那么元素会启用哪一个css样式呢? 浏览器是根据权值来判断使用哪种样式的,权值越高,就使用哪种样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100 1.特殊性 还有一个权值比较特殊----继承也有权值但是很低,有的文献提出它只有0.1,所以可以理解继承的权限最低. 2.

CSS 权值 层叠 重要性（!important）

1.特殊性 权值 有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码: p{color:red;} .first{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p> p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种

9.css权值

有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码: p{color:red;} .first{color:green;} <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p> p和.first都匹配到了p这个标签上,那么会显示哪种颜色呢?green是正确的颜色,那么为什么呢?是因为浏览器是根据权值来判断使用哪种css样式的,权值

css权值计算

外部样式表<内部样式表<内联样式: HTML 标签选择器的权值为 1: Class 类选择器的权值为 10: ID 选择器的权值为 100: 内联样式表的权值最高 1000: !important权值最高: 脚本的样式最牛逼: 以上所有都一样,看顺序,后者覆盖前者.

CSS权值比较(读书笔记)

1.继承0.1    标签1    类选择符10    ID选择符100 2.层叠:后面的样式会覆盖前面的样式. 3.内联样式表(标签内部) > 嵌入样式表(当前文件中) > 外部样式(外部文件) 4.!important具有最高权值,p{color:red  !important;} 5.!important > 用户自己设置的样式 > 网页制作者样式 > 浏览器默认样式

【html/css】html/css命名规范

无论做什么,规则总是最重要的.无规矩不成方圆,有了规矩,我们才能有规可循,有则可依,人与人之间才能正常的交流交往. 人人都有自己的命名习惯,不过,代码是需要交流的,当有些命名习惯仅只自己能看懂,甚至自己在过后都看不懂时,就成为了交流中的障碍了.所以,有一个规范的命名规则是很重要的.命名规则有很多,大家各取所需,这里介绍一下在html/css中一些约定俗成的命名规范,权作记录: 1.所有的命名最好都小写 2.属性的值一定要用双引号("")括起来,且一定要有值如class="di

HTML5基础CSS命名规范讲解

相信有很多HTML5全栈开发的初学者对CSS的命名规则都是一头雾水,这可不是一个好的现象,那么下面就来给大家说一下HTML5全栈开发中的命名规范,希望可以帮到各位.. CSS命名规范 全局样式命名规范:global.css; 框架布局命名规范:layout.css; 字体样式命名规范:font.css; 链接样式命名规范:link.css; 打印样式命名规范:print.css; 常用类/ID命名规范 页眉规范:header 内容规范:content 容器规范:container 页脚规范:fo

Web UI 网站用户界面设计命名规范

Web UI 网站用户界面设计命名规范 WEB UI设计命名规范,也就是网站用户界面设计(网页设计)命名规范. 这套规范并非单纯的CSS.html或JavaScript命名规范,它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范. 许多美工设计效果图源文件没有对图层命名的习惯,而网上大多命名规范都是关于css.html.js和一些服务器端语言的,设计方面的命名规范很 少.设计师也是技术团队的成员,而前端开发工程师需要使用设计师的效果图源文件的,所以统一命名规范和设计规范对

项目复习期总结3：CSS引入方式，注释，命名规范，背景，行高，文本属性

目录: 1.CSS注释的书写 怎么写?好处? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等所有属性 ① CSS注释书写规范: 1.单行注释:    直接写在属性值的后面,如: ① .search{ border:1pxsolid#fff;/*定义搜索输入框边框*/ background:url(../images/icon.gif)no-report#333;/*定义搜索框的背景*/ } ② .wr