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. Elasticsearch集群节点配置详解

    注意:如果是在局域网中运行elasticsearch集群也是很简单的,只要cluster.name设置一致,并且机器在同一网段下,启动的es会自动发现对方,组成集群. 2.elasticsearch- ...

  2. wxpython绘制音频

    #-*- coding: utf-8 -*- ############################################################################# ...

  3. Nginx 学习笔记(十)介绍HTTP / 2服务器推送(译)

    原文地址:https://www.nginx.com/blog/nginx-1-13-9-http2-server-push/ 我们很高兴地宣布,2018年2月20日发布的NGINX 1.13.9支持 ...

  4. java操作数据库:增删改查

    不多bb了直接上. 工具:myeclipse 2016,mysql 5.7 目的:java操作数据库增删改查商品信息 test数据库的goods表 gid主键,自增 1.实体类Goods:封装数据库数 ...

  5. 嫁给程序员的好处,你get到了吗?

    首先,我们要知道,什么是程序员?程序员是做什么的? "程序员(英文Programmer)是从事程序开发.维护的专业人员.一般将程序员分为程序设计人员和程序编码人员,但两者的界限并不非常清楚, ...

  6. Weex Ui - Weex Conf 2018 干货分享

    本文是2018年 Weex Conf 中议题<Weex + Ui>的内容文档整理,主要给大家介绍飞猪 Weex 技术体系从无到有的过程,包括 Weex Ui 组件库的开发和发展,重点分享在 ...

  7. Groovy 设计模式 -- 抽象工厂 模式

    抽象工厂 https://blog.csdn.net/wyxhd2008/article/details/5597975 首先来看看这两者的定义区别: 工厂模式:定义一个用于创建对象的借口,让子类决定 ...

  8. 三十、Linux 进程与信号——信号的概念及 signal 函数

    30.1 信号的基本概念 信号(signal)机制是Linux 系统中最为古老的进程之间的通信机制,解决进程在正常运行过程中被中断的问题,导致进程的处理流程会发生变化 信号是软件中断 信号是异步事件 ...

  9. Debian Security Advisory(Debian安全报告) DSA-4405-1 openjpeg2

    package :openjpeg2 相关CVE ID: CVE-2017-17480 CVE-2018-5785 CVE-2018-6616 CVE-2018-14423 CVE-2018-1808 ...

  10. proxysql 系列 ~ 读写分离核心功能

    一 相关表介绍 1 mysql_user 列表配置    1 username && password 账号密码    2 default_hostgroup 默认的组ID2 mysq ...