对于 web 前端小白来说,可能对 CSS 还不是很理解。CSS 的用途有很多,它不仅能够动态地润饰网页,还能够配合各种脚本语言动静地对网页各元素进行格式化。CSS 可能对网页中元素地位的排版进行像素级准确管制,反对简直所有的字体字号款式,领有对网页对象和模型款式编辑的能力。
什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
- 款式定义如何显示 HTML 元素
- 款式通常存储在样式表中
- 把款式增加到 HTML4.0 中,是为了解决内容与体现拆散的问题
- 内部样式表能够极大进步工作效率
- 内部样式表通常存储在 CSS 文件中
- 多个款式定义可层叠为一个
CSS 为 HTML 标记语言提供了一种款式形容,定义了其中元素的显示方式。CSS 在 Web 设计畛域是一个冲破。利用它能够实现批改一个小的款式更新与之相干的所有页面元素。这所有都离不开 CSS 的个性,接下来简略聊聊 CSS 的 3 大个性。
CSS 的 3 大个性是指层叠性、继承性以及优先级。
一、CSS 层叠性
阐明:层叠性是多种 CSS 款式的叠加,是浏览器解决款式抵触的形式。在 HTML 中对于同一个元素能够有多个 CSS 款式存在,当有雷同权重的款式存在时,会依据这些款式呈现的先后顺序来决定,处于最初面的 CSS 款式将会笼罩后面的 CSS 款式。
举例 :
上面代码,呈现一个 div 标签指定了雷同款式不同值的状况,这就是款式抵触。
div{color:red;}
div{color:blue;}
准则:
通常呈现款式抵触,会按 CSS 书写的程序,以最初的款式为准。
款式不抵触,不会层叠。
款式抵触,遵循就近准则。长江后浪推前浪,前面款式盖后面。
二、CSS 继承性
阐明:简略地了解为—“子承父业“,是指子标签会继承父标签的 == 某些 == 款式,如文本色彩和字号。想要设置一个可继承的属性,只需将它利用于父元素即可。
举例:
<style>
div{color:pink;font-size:20px;}
</style>
<div>
<span>
我是什么色彩的?</span>
</div>
正当应用继承能够简化代码,升高 CSS 款式的复杂性。对于字体、字号、色彩、行距等 == 文本类属性 == 具备继承性,都能够在 body 中对立设置,而后影响文档中所有文本。
然而,并不是所有的 CSS 属性都能够继承,如边框、外边距、内边距、背景、定位、元素高度等 == 与块级元素相干的 == 属性都不具备继承性。
三、CSS 优先级
在简单 CSS 样式表,往往并不是雷同款式不同值的重叠这么简略,经常出现两个或多个不同款式规定利用在同一元素上,这时到底采纳哪个款式呢?这就是典型的 CSS 优先级问题。
解决优先级问题,就是思考款式权重的高下。这里先给大家介绍一些非凡的状况:
== 继承款式的权重为 0。== 也就是说,在嵌套构造中,无论父元素款式权重多大,子元素继承时,利用在子元素上的权重都为 0,即子元素定义的款式会笼罩所有继承来的款式。
== 行内款式优先。== 利用 style 属性的元素,其行内款式的权重十分高,能够了解为远大于 100。总之,他领有比下面进步的选择器都大的优先级。
权重雷同时,CSS 遵循就近准则。也就是说凑近元素的款式具备最大的优先级,或者说排在最初的款式优先级最大。
CSS 定义了一个!important 命令,该命令被赋予最大的优先级。也就是说不论权重如何以及款式地位的远近,!important 都具备最大优先级。
CSS 学习教程
如果你是一个老手,那我倡议你观看视频教程学 css,这里举荐能源节点老杜讲的 web 前端教程,教程中具体解说了什么是 css,HTML 引入 CSS 款式的三种形式等知识点。
css 材料下载
http://www.bjpowernode.com/?s…