4.高效的css
 所谓高效就是让浏览器查找更少的元素标签来确定匹配的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>
 2.基本选择器
 *{}
 #id{}
 div{}
 .class{}
 
</style>
外联式
<link rel="stylesheet" type="text/css" href="1.css">
3.特性--继承、优先级和层叠
继承:即子类元素继承父类的样式;(例如:父级设置font-size=16px,子会继承)
优先级:相同样式-哪个的选择器权重高显示哪个  比较权重;
层叠:后者和前者:相同部分-后者覆盖前者 不同两者叠加
CSS优先级:是由四个级别和各级别的出现次数决定的。
  四个级别分别为:行内选择符、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大特性,高效运行的更多相关文章

  1. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

  2. 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

    前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介    叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...

  3. CSS引入方式的区别详解

    在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外 ...

  4. link标签和css引入方式

    link常见用途 <link> 标签最常见的用途是链接样式表,在 HTML 中,<link> 标签没有结束标签,此元素只能存在于 head 部分,不过它可出现任何次数. < ...

  5. 项目复习期总结3:CSS引入方式,凝视,命名规范,背景,行高,文本属性

    文件夹: 1.CSS凝视的书写 怎么写?优点? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等全部属性 ...

  6. css引入方式和基本样式

    css的三种引入方式: 1.内嵌:直接在标签中添加style属性 格式:<标签名 style="样式1:样式值1:样式2=样式值2:"></标签名> 2.内 ...

  7. css引入方式

    1.<style>          body{}    </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link re ...

  8. 【使用DIV+CSS重写网站首页案例】CSS引入方式

    CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: *  type="text/css"      为默认可以不写 例子: <!DOCTYPE h ...

  9. css 基础 css引入方式

    color:red; //改变颜色 font-size:18px : //改变文字大小 background-color : blue; //设置背景颜色 width:100px ://设置宽度 he ...

随机推荐

  1. linux 内核模块makefile通用模板

    ifneq ($(KERNELRELEASE),)# 在 mylist 后面添加需要编译的模块数量 mylist=hello.o a.o# 为每一个模块添加所需的文件 hello-objs := ma ...

  2. windows安装mysql5.7.xx解压版

    解压后修改配置文件 my.ini [mysql] # 设置mysql客户端默认字符集 default-character-set=utf8 [mysqld] #设置3306端口 port = 3306 ...

  3. C# Serializable

    System.SerializableAttribute 串行化是指存储和获取磁盘文件.内存或其他地方中的对象.在串行化时,所有的实例数据都保存到存储介质上,在取消串行化时,对象会被还原,且不能与其原 ...

  4. Bootstrap Web框架

    Bootstrap 一.简介 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的 ...

  5. [Android] Android 卡片式控件CardView的优雅使用

    [Android] Android 卡片式控件CardView的优雅使用 CardView是在安卓5.0提出的卡片式控件 其具体用法如下: 1.在app/build.gradle 文件中添加 comp ...

  6. cookie与session的区别与关系

    cookie与session的区别 1. 存储位置不同 cookie存储在浏览器中 session存储在服务端里 2. 大小不同 cookie最大4K session由于是存在服务端,因此理论上没有大 ...

  7. luogu 2371 墨墨的等式

    1.背包dp #include<bits/stdc++.h> #define rep(i,x,y) for(register int i=x;i<=y;i++) #define ll ...

  8. sql 左右连接 on 之后的and 和where的区别

  9. Linux或UNIX系统配置检查

    1. Linux或UNIX系统配置检查 系统配置的扫描是基于被动式策略进行扫描,主要检测主机上是否存在配置错误或者不符合预定义的安全策略的配置,通常需要管理员权限才能执行的扫描. 在Linux或UNI ...

  10. webstorm破解版

    链接:https://www.cnblogs.com/LUA123/p/8452501.html#undefined