css3继承

不可继承的:display.margin.border.padding.background.height.min-height.max- height.width.min-width.max-width.overflow.position.left.right.top. bottom.z-index.float.clear.table-layout.vertical-align.page-break-after. page-bread-before和unicode-bidi.(注:基本上什么盒…

【Web前端HTML5&CSS3】05-样式继承与其他概念

笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版目录样式继承与其他概念 1. 继承 2. 选择器的权重 3. 长度单位像素屏幕分辨率图像分辨率百分比 em rem 4. 颜色单位 RGB值 RGBA 十六进制的RGB值样式继承与其他概念 1. 继承样式的继承,我们为一个元素设置的样式,同时也会应用到它的后代元素上继承是发生在祖先后后代之间的,继承的设计是为了方便我们的开发利用继承,我们可以将一些通用的样式,统一设置到共同的祖先元素上.这样只需设置一次即…

《CSS3实战》读书笔记第4章：样式继承

节省你的时间--样式继承 ### 什么是继承? 后代元素可以继承先代元素的一些属性.有了它,可以省去分别定义样式的时间.继承了方向是由外而内的. ### 继承的局限性应该注意到,有些属性是不适宜继承的. 作为全局规则,背景色,margin ,border不继承. 浏览器定义的规则,比如h标题,超链接a,等不予继承开发者应用自己定义的样式,不会继承先代属性. ### 综合案例:继承是怎样工作的 html骨架 <body> <div><img src="images…

CSS3学习笔记-1：CSS样式继承

自己在写css时总会遇上css样式继承的问题,好在一般问题不大,但一直也不明白css样式继承的规则,最近发现了一篇文章讲的不错,因此转载过来: 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质.继承特性最典型的应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即可.这项特性可以给网页设计者提供更理想的发挥空间.但同时继承也有很多规则,应用的时候容易让人迷惑 CSS的一个主要特征就是继承,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个…

【CSS3】内联、内部、外部样式，样式优先级、层叠、继承

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="…

HTML5 & CSS3初学者指南(2) – 样式化第一个网页

介绍我们已经使用基本的 HTML 编写了一个网页.但是,写出来的 HTML 代码的网页看起来很平淡,没有吸引力. 如何改善这种很平淡的页面呢? 让我们开始使用网页的基本样式来改善页面效果,我们将会使用到 CSS 的功能. 正式开始 CSS 是层叠样式表的缩写,它是为网页添加样式的通用语言,在所有浏览器中都支持.最新的标准是 CSS3,这与早期版本完全向后兼容.CSS3 的规范是由 W3C 开发的,目前仍处于开发阶段,其最新的版本是 CSS Snapshot 2010. 打开你的文本编辑器,键入…

css3盒模型

css2.1盒模型: 当你定义盒子的宽高后:如果添加padding和border值后盒子的宽高会被撑大盒子的高度=定义的高度+(padding-top + padding-bottom)+(border-top + border-bottom); 盒子的宽度=定义的宽度+(padding-left+ padding-right)+(border-left+ border-right); css3.0盒模型: 当你定义盒子高度后:如果添加padding和border值后盒子大小不会改变,他会向内…

HTML5移动开发学习笔记之CSS3基础学习

CSS回顾在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现的效果是: 2.CSS定位与浮动 1)定位: 属性描述 position 把元素放到一个静态的(static:元素框正常生成),相对的(relative:元素框偏移某个距离[相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置]),绝对的(absolute:元素框从…

CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）

CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象的动态语言,有java的影子,有C的味道,中间有比其它语言多的糟粕,使用预处理办法可以解决这些问题.其中Less[les]与Sass是CSS的预处理技术,而CoffeeScript.TypeScript则是javascript的预处理技术. 一.Less 1.1.概要 Less是一种动态样式语言,L…

CSS3与页面布局学习总结（四）——页面布局大全

一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &…

CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格式化上下文.常规流(也称标准流.普通流)是一个文档在被显示时最常见的布局形态.一个框在常规流中必须属于一个格式化上下文,你可以把BFC想象成一个大箱子,箱子外边的元素将不与箱子内的元素产生作用. BFC是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系…

CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border).内边距(Padding)和内容(Content),其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型,加上了doctype声明,让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子.当设置一个元素的样式如下: <!DOCTYPE html> <html> <…

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务.当然内容与用户资源也是不能忽视的.尽量不要跨职责范围使用,有点“SRP单一职责”的意思,如字体大小应该是CSS控制的,就不应该使用HTML标签完成,如果CSS能解决的问题尽量不要用JavaScript完成. 一.CSS3概要 CSS(Cascading Style Sheet)是层叠样式表的…

【HTML5&CSS3进阶03】Jser与Csser如何一起愉快的翻新老组件

上次,我们形成了两种header的布局,一种flexbox,一种float,最后与身边做重构的同事交流下来,选择了float的布局. 事实上布局的选型不需要我关注,我的参与或者一些意见多数是自我提升,但要说html结构完全控制于csser的话就不一定了在整个header组件的代码过程中,我与重构同事就一些地方发生了重复的交流,争论,今天就header组件的布局以及功能实现,聊一聊js与css的配合然后header组件本身是一个老组件,我们顺便探讨下,这类老组件应该如何翻新比较合适. 最初的结…

使用CSS3制作导航条和毛玻璃效果

导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题:通过CSS3来制作类似下面的导航条和毛玻璃效果. 导航条是梯形形状的.…

H5是什么，CSS3又是什么？

经常有客户咨询说你们会做H5吗,就像这个,拿过来一看,一个上下滑动的贺卡,这已经成为了大部分人对H5的理解,甚至很多大公司都推出了制作这种动画的工具,可以快速生成此类页面.(其实,这就用到了一些CSS3的技巧,好吗!!!) 我大H5就是你们说的这样吗,伤心!!!! H5可是个牛逼闪闪的东西,且是你们说的那么低端从大名鼎鼎w3school上可以了解到H5其实包含了很多的内容,有众多的新标签,canvas,svg,地理位置,web存储,应用缓存,web workers等,你们这些鸟人就知道nav,…

css3 FlexBox 弹性布局

Flex 弹性布局这个是css3中新添加的内容,现在已经支持所有的浏览器,利用Flex布局,可以简便.完整.响应式地实现各种页面布局. 注意:在设置 flex 后,子元素的flaot ,clear, vertical-align 都失效. Webkit 内核的浏览器,必须加上 -webkit前缀 flex 里面的元素我们把它们称为项目目前支持: 1.Chrome 21+ 2.Opera 12.1+ 3.Firefox 22+ 4.Safari 6.1+ 5.IE 10+ 在弹性布局中有…

CSS3学习基本记录

CSS3 边框 border-radius: 圆角 border-radius: 15px 50px 70px 100px; 左上右上右下左下 box-shadow:阴影 box-shadow:1px 2px 3px #ccc; 1px:水平位移 2px:竖直 border-image:边框图片 border-image: source slice width outset repeat; border-image:url(border.png) 30 round; 用图片border.p…

CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

一.前言 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 Filter,而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了,而IE5.5~9则使用IE滤镜.JS+DIV或VML处理!本篇为先占个坑,以后慢慢填^_^!!! CSS3 Filter兼容性表 SVG effect for HTML兼容…

CSS3总结（帅哥）

第1章CSS3简介如同人类的的进化一样,CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. 1.1 CSS3的现状 1.浏览器支持程度差,需要添加私有前缀 2.移动端支持优于PC端 3.不断改进中 4.应用相对广泛 1.2 如何对待 1.坚持渐进增强原则 2.考虑用户群体 3.遵照产品的方案 4.听Boss的第2章准备工作 2.1 统一环境由于CSS3兼容性问题的普遍存在,为了避免因兼容性带…

CSS3的flex布局

flex的一些属性 CSS3中引入了另一种框--flexbox,flexbox有一些block和inline不同的性质,比如: 自适应子元素(flex item,又称伸缩项目)的宽度伸缩项目的float,clear,vertical-align属性失效不能继承flex框,但可以依次设置可以修改flex流的方向以及布置规则现在就大体讲述下这个具体属性的表示含义. 设置flexbox的兼容性将一个容器设置为flexbox(又称伸缩容器)很简单,但是却存在一些兼容性的问题,比如在IE10下,…

CSS3知识点整理&&一些demo

css3能做什么响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出 http://codepen.io/airen/pen/icFba 如果大家感兴趣,大家可以去慕课网上找大漠老师的课学习. 边框 1.圆角效果 border-radius:border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角.右上角.右下角和左下角,顺时针 */ bord…

CSS3透明属性opacity

例子: <div id="fixhovertree" style="position:fixed;left:100px;width:120px;top:100px;opacity:0.5;background-color:silver;color:red">何问起<a href="http://hovertree.com/hvtart/bjae/q3etb2qv.htm" target="_blank">…

CSS3与页面布局学习笔记（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）

【HTML5&CSS3进阶学习01】气泡组件的实现

前言气泡组件在实际工作中非常普遍,无论是网页中还是app中,比如: 我们这里所谓气泡组件是指列表型气泡组件,这里就其dom实现,css实现,js实现做一个讨论,最后对一些细节点做一些说明,希望对各位有用小钗最近初学CSS,这里做一个专题,便于自身CSS提升,文章有不少问题与可优化点,请各位指导组件分类单由气泡组件来说,他仍然属于“弹出层”类组件,也就是说其会具有这些特性: ① 布局为脱离文档流 ② 可以具有mask蒙版,并且可配置点击蒙版是否关闭的特性 ③ 可选的特性有点击浏览器回退关闭…

CSS/CSS3常用样式小结

1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; 2.设置溢出文本显示为省略标记: text-overflow:ellipsis; (注:text-overflow:clip | ellipsis | ellipsis-word;…

css3弹性盒模型

一.简介 css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局. 目前box属性还没有得到firefox.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).chrome/safari(-webkit-).所以完全可以在手机端的webview页面中采取这样的布局. 二.弹性盒模型默认情况下,盒子并不具有弹性,如果box-flex…

CSS3混合模式mix-blend-mode/background-blend-mode简介，PS中叠加效果

一.CSS3 mix-blend-mode 首先,要知道”blend-mode”就是混合模式的意思.那mix, 恩,我也不知道为什么命名为mix, 可能是该属性不仅可以作用于HTML,还可以作用于SVG,干脆叫mix一起捋过来.该CSS属性作用是让元素内容和这个元素的背景以及下面的元素发生“混合”. mix-blend-mode: normal; //正常 mix-blend-mode: multiply; //正片叠底 mix-blend-mode: screen; //滤色 mix-blen…

CSS Sprites+CSS3 Icon Font

CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.根据具体图标在大图上的位置,给背景定位. CSS Sprites加速的关键,不是降低质量,而是减少个数. 做成Sprites的很大的原因是图片流量大,想象一下,如果将一些小图片做成字体模式进行显示,会不会很神奇呢?随着CSS3对字体…

CSS3外轮廓属性

外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者被激活时呈现. outline属性早在CSS2中就出现了,主要是用来在元素周围绘制一条轮廓线,可以起到突出元素的作用.但是并未得到各主流浏览器的广泛支持,在CSS3中对outline作了一定的扩展,在以前的基础上增加新特性.outline属性的基本语法如下: outline: ［outline-co…

【css3继承】的更多相关文章