web@css引入方式,基本选择器,3大特性,高效运行
所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素。
1.不要再ID选择器前使用标签名
解释:ID选择是唯一的,加上标签名相当于画蛇添足了,没必要。
2.不要在类选择器前使用标签名
解释:如果没有相同的名字出现就是没必要,但是如果存在多个相同名字的类选择器则有必要添加标签名防止混淆如(p.colclass{color:red;} 和 span.colclass{color:red;}
3.尽量少使用层级关系;
#divclass p.colclass{color:red;}改为 .colclass{color:red;}
4.使用类选择器代替层级关系(如上)推存使用类选择器
1.引入方式
行间式
<div style="color:red;</div>
内联式
<style>
*{}
#id{}
div{}
.class{}
</style>
外联式
<link rel="stylesheet" type="text/css" href="1.css">
继承:即子类元素继承父类的样式;(例如:父级设置font-size=16px,子会继承)
优先级:相同样式-哪个的选择器权重高显示哪个 比较权重;
层叠:后者和前者:相同部分-后者覆盖前者 不同两者叠加
四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符。
优先级的算法:
每个规则对应一个初始"四位数":0、0、0、0
若是 行内选择符,则加1、0、0、0
若是 ID选择符,则加0、1、0、0
若是 类选择符/属性选择符/伪类选择符,则分别加0、0、1、0
若是 元素(标签)选择符/伪元素选择符,则分别加0、0、0、1
需注意的:
①、!important的优先级是最高的,但出现冲突时则需比较”四位数“;
②、优先级相同时,则采用就近原则,选择最后出现的样式;
③、继承得来的属性,其优先级最低;
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
web@css引入方式,基本选择器,3大特性,高效运行的更多相关文章
- 认识CSS中css引入方式、选择器、文本样式设置以及显示模式
前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...
- 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...
- CSS引入方式的区别详解
在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外 ...
- link标签和css引入方式
link常见用途 <link> 标签最常见的用途是链接样式表,在 HTML 中,<link> 标签没有结束标签,此元素只能存在于 head 部分,不过它可出现任何次数. < ...
- 项目复习期总结3:CSS引入方式,凝视,命名规范,背景,行高,文本属性
文件夹: 1.CSS凝视的书写 怎么写?优点? 2.CSS引入方式 各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等全部属性 ...
- css引入方式和基本样式
css的三种引入方式: 1.内嵌:直接在标签中添加style属性 格式:<标签名 style="样式1:样式值1:样式2=样式值2:"></标签名> 2.内 ...
- css引入方式
1.<style> body{} </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link re ...
- 【使用DIV+CSS重写网站首页案例】CSS引入方式
CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: * type="text/css" 为默认可以不写 例子: <!DOCTYPE h ...
- css 基础 css引入方式
color:red; //改变颜色 font-size:18px : //改变文字大小 background-color : blue; //设置背景颜色 width:100px ://设置宽度 he ...
随机推荐
- 【leetcode-71】 简化路径
(1 pass) 以 Unix 风格给出一个文件的绝对路径,你需要简化它.或者换句话说,将其转换为规范路径. 在 Unix 风格的文件系统中,一个点(.)表示当前目录本身:此外,两个点 (..) 表示 ...
- 开源框架.netCore DncZeus学习(三)增加一个菜单
框架运行起来了,先尝试增加一个菜单. 本节增加一个菜单名字:公司管理,需要注意一点,所有的name都要保持一致,注意圈中部分.为了防止手敲代码出错,建议复制已有的代代码进行修改(比如这里用的Role页 ...
- Delegate与Event关系
1.Delegate是类型,Event是成员(本质为成员方法),Event成员类型派生于Delegate.仅此! 2.大概就好比说委托是C++里一个方法的模板,而event是这个模板具体的实现
- jqGrid api 中文说明
JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. 下面是转自其他人b ...
- 使用AOP思想无侵入式申请权限,解决组件化中权限问题(一)
首先介绍AspectJx使用 https://github.com/HujiangTechnology/gradle_plugin_android_aspectjx 在根项目的build.gradle ...
- 第六天-request response\13-request乱码.avi;
疑问:提交为POST时 ,request为什么不放在Post里面处理呢? 服务器已经启动后,修改html的代码不需要重启服务器就可以生效 :超链接中有中文,也是需要像get那样 通过该配置文件可以解决 ...
- 音乐app各部分笔记(二)
7-15播放器progress-circle圆形进度条组件实现 1.首先是引入三步 progress-circle 引入到player.vue中 然后就是 SVG技术 值得注意的事 svg 中 ...
- Nginx系列6:对称加密与非对称加密各自的应用场景
强推:推荐一篇通俗易懂的对称加密和非对称加密的文章:https://segmentfault.com/a/1190000004461428 推荐一篇文章:对称加密算法与非对称加密算法的优缺点:http ...
- Linux系统安全学习笔记(1)-- 文件系统类型
今天看了一个关于Linux系统安全的视频教程,这个教程有很多的知识点,我会分几篇博文将我的笔记分享出来. 首先是关于Linux文件系统类型的一些知识,Linux有四种常见的文件系统类型(网上大多数是3 ...
- 关于链表所有操作,面试必考C++
#include <iostream> #include <stack> using namespace std; //链表的结构体 struct ListNode { int ...