css3的三大特性:

一、层叠性

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉

比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。

一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准。

  1. 样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。
  2. 样式不冲突,不会层叠

CSS最后的执行口诀:  长江后浪推前浪,前浪死在沙滩上。

二、继承性

所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。

简单的理解就是: 子承父业。

CSS最后的执行口诀:  龙生龙,凤生凤,老鼠生的孩子会打洞。

注意:

恰当地使用继承可以简化代码,降低CSS样式的复杂性。子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,以及color属性)

三、优先级

定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。

在考虑权重时,初学者还需要注意一些特殊的情况,具体如下:

继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。

权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。

CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。

总结优先级:

  1. 使用了 !important声明的规则。
  2. 内嵌在 HTML 元素的 style属性里面的声明。
  3. 使用了 ID 选择器的规则。
  4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
  5. 使用了元素选择器的规则。
  6. 只包含一个通用选择器的规则。
  7. 同一类选择器则遵循就近原则。

  总结:权重是优先级的算法,层叠是优先级的表现。

Mate

<!DOCTYPE html>  <!-- H5标准声明,使用 HTML5 doctype,不区分大小写 -->

<head lang="en"> <!-- 标准的 lang 属性写法 -->

<meta charset="utf-8">    <!-- 声明文档使用的字符编码 -->

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>   <!-- 优先使用 IE 最新版本和 Chrome -->

<meta name="description" content="不超过150个字符"/>       <!-- 页面描述 -->

<meta name="keywords" content=""/>      <!-- 页面关键词 -->

<meta name="author" content="name, email@gmail.com"/>    <!-- 网页作者 -->

<meta name="robots" content="index,follow"/>      <!-- 搜索引擎抓取 -->

<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> <!-- 为移动设备添加 viewport -->

<!-- 设置页面不缓存 -->

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

Mate移动端的属性

在移动端开发,最常看到head里面设置了下面这个属性

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" >

  • width : 设置layout viewport 的宽度,为一个正整数,或字符串"width-device"
  • initial-scale:设置页面的初始缩放值,为一个数字,可以带小数
  • minimum-scale:允许用户的最小缩放值,为一个数字,可以带小数
  • maximum-scale:允许用户的最大缩放值,为一个数字,可以带小数
  • height:设置layout viewport 的高度,这个属性并不重要,很少使用
  • user-scalable:是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许

特殊说明:(IE6,7,8)支持,需要使用css3mediaqueries.js

<!--[if lt IE 9]>

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

<![endif]>

meta http-equiv

http-equiv顾名思义,相当于http的文件头作用。把 content 属性关联到 HTTP 头部。 http-equiv属性主要有以下几种参数:

  • content-Type(设定网页字符集)(推荐使用HTML5的方式)

说明:用于设定网页字符集,便于浏览器解析与渲染页面举例:

<meta http-equiv="content-Type" content="text/html;charset=utf-8">  <!--旧的HTML,不推荐 -->

  • X-UA-Compatible(浏览器采取何种版本渲染当前页面)

说明:用于告知浏览器以何种版本来渲染页面。(一般都设置为最新模式,在各大框架中这个设置也很常见。)

<meta http-equiv="X-UA-Compatibel" conent="IE=edge,chrome=1" >  <!-- 指定IE和Chrome使用最新版本渲染当前页面 -->

  • cache-control(指定请求和响应遵循的缓存机制)

说明:指定浏览器如何缓存某个响应以及缓存多长时间

<meta http-equiv="cache-contorl" conent="no-cache">

共有以下几种用法:

- no-cache: 先发送请求,与服务器确认该资源是否被更改,如果未被更改,则使用缓存。

- no-store: 不允许缓存,每次都要去服务器上,下载完整的响应。(安全措施)

- public : 缓存所有响应,但并非必须。因为max-age也可以做到相同效果。

- private : 只为单个用户缓存,因此不允许任何中继进行缓存。(比如说CDN就不允许缓存private的响应)

- maxage : 表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。例如:max-age=60表示响应可以再缓存和重用 60 秒。

  • expires(网页到期时间)

说明:用于设定网页的到期时间,过期后网页必须到服务器上重新传输。举例:

<meta htttp-equiv="expires" content="Sunday 26 October 2019 01:00 GMT">

  • Pragma(cache模式)

说明:是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出 。举例:

<meta http-equiv="pragma" content="no-cache">

  • Set-Cookie(cookie设定)

说明:如果网页过期。那么这个网页存在本地的cookies也会被自动删除。举例:

<meta http-equiv="Set-Cookie" content="name, date"> <!-- 格式 -->

<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> <!-- 具体范例 -->

  • refresh(自动刷新并指向某页面)

说明:网页将在设定的时间内,自动刷新并调向设定的网址。举例:

<meta http-equiv="refresh" content="2;URL=https://segmentfault.com/u/clearlove07"> <!-- 意思是2秒后跳转向我的博客 -->

css3的三大特性以及移动端说明的更多相关文章

  1. CSS3的三大特性

    在学习CSS 的时候,我们必须要熟练和理解CSS 的三大特性,那么CSS 的三大特性又是什么呢? CSS 的三大特性:层叠 继承 优先级  ,CSS 三大特性是我们学习CSS 必须掌握的三个特性. 首 ...

  2. python 之 前端开发(CSS三大特性、字体属性、文本属性、背景属性)

    11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性​2.注意:    1.只有以color.font-.text-.l ...

  3. 前端基础-CSS的各种选择器的特点以及CSS的三大特性

    一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...

  4. HTML5和CSS3的新特性

    html5的新特性 添加了用于媒介回放的 <video>,<audio> 元素 添加了语义标签譬如 header.footer.nav 等等元素 添加了用于绘画的 canvas ...

  5. C++ 面向对象的三大特性和五个原则

    1.三大特性: 封装:就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏.一个类就是一个封装了数据以及操作这些数据的代码的逻辑实体.在一个对象内 ...

  6. CSS3常用新特性

    CSS3的新特性 新增CSS3特性有兼容性问题,ie9+才支持 移动端支持优于PC端 新增选择器和盒子模型以及其他特性 CSS新增选择器 属性选择器 属性选择器可以根据元素特定属性来选择元素,这样就可 ...

  7. oop的三大特性和传统dom如何渲染

    OOP的三大特性是什么: 封装 :就是将一个类的使用和实现分开,只保留部分接口和方法与外部联系继承:子类自动继承其父级类中的属性和方法,并可以添加新的属性和方法或者对部分属性和方法进行重写.继承增加了 ...

  8. CSS/CSS3语法新特性笔记

    CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...

  9. Fis3的前端工程化之路[三大特性篇之声明依赖]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

随机推荐

  1. Sending form data

    https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data This arti ...

  2. 圆周运动的css3特效案例

    <!doctype html><html lang="zh-cn"><head> <meta charset="UTF-8&qu ...

  3. oracle 数据迁移之数据泵的基本使用

    oracle相同数据库下跨schema的表迁移—expdp/impdp 需求:将GUIDO用户下的表迁移到SCOTT用户下 select * from dba_role_privs where GRA ...

  4. Python 数字系列-数字格式化输出

    数字的格式化输出 问题 你需要将数字格式化后输出,并控制数字的位数.对齐.千位分隔符和其他的细节. 解决方案 格式化输出单个数字的时候,可以使用内置的 format() 函数,比如: >> ...

  5. DB-MD:MD/主数据

    ylbtech-DB-MD:MD/主数据 主数据(MD Master Data)指系统间共享数据(例如,客户.供应商.账户和组织部门相关数据).与记录业务活动,波动较大的交易数据相比,主数据(也称基准 ...

  6. CDN:BootCDN

    ylbtech-CDN:BootCDN BootCDN稳定.快速.免费的前端开源项目 CDN 加速服务共收录了 3351 个前端开源项目 1. 推荐返回顶部 1. bootstrap Bootstra ...

  7. springcloud核心组件Eureka、Ribbon、Feign、Hystrix、Zuul

    各个组件角色扮演:    Eureka:各个服务启动时,Eureka Client都会将服务注册到Eureka Server,并且Eureka Client还可以反过来从Eureka Server拉取 ...

  8. storm集群搭建和java应用

    1. vim /etc/hosts ssh免密登录192.168.132.154 c0192.168.132.156 c1192.168.132.155 c2 storm集群:192.168.132. ...

  9. IsAjaxRequest

    具体来说,IsAjaxRequest代码可以分解为以下功能: public static bool IsAjaxRequest(this HttpRequestBase request) { if ( ...

  10. Java中的类修饰符

    资料主要来源于网络(http://60.28.60.3/zy/java-new/zhishidian/chap3/3.htm) 之前每次写小测试程序的时候,总是把一个类放在一个Java文件中,按理说这 ...