CSS 的特性值

来源:http://www.chinese-glasses.com 作者:Web前端 人气:187 发布时间:2020-04-22
摘要:时间: 2019-09-26阅读: 99标签: 特性CSS 值的解析 一、什么是 CSS 继承? 哪些属性能继承,哪些不能? CSS继承: 1.优先级从高到低依次为:网页开发者定义的样式、网页阅读者定义的样式、浏

时间: 2019-09-26阅读: 99标签: 特性CSS 值的解析

一、什么是 CSS 继承? 哪些属性能继承,哪些不能?
CSS继承:
1.优先级从高到低依次为:网页开发者定义的样式、网页阅读者定义的样式、浏览器的默认样式
2.对继承的元素来说,子元素自身的样式优先级高于从父级继承来的样式
3.当元素的一个 继承属性没有指定值时,则取父元素的同属性的 计算值,只有文档根元素取该属性的概述中给定的初始值(这里的意思应该是在该属性本身的定义中的默认值)。
当元素的一个 非继承属性 没有指定值时,则取属性的初始值该值在该属性的概述里被指定。

CSS 中的声明,由 CSS 的特性和值,中间以 ":" 隔开组成。

CSS哪些属性能继承:
所有元素可继承:visibility和cursor。
内联元素可继承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
块状元素可继承:text-indent和text-align。
列表元素可继承:list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承:border-collapse。

我们可以使用 CSS 选择器,为选中的元素设置需要的样式。

CSS哪些属性不能继承:
不可继承的: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。

在介绍 CSS 的特性和值的时候,特地的提到了浏览器应该怎样处理错误的值 -- 应该将包含错误值,不符合句法的值的声明直接忽略。然而有些浏览器却按照自己的方式做了某些纠正,也就是浏览器容错。

二、如何让块级元素水平居中?如何让行内元素水平居中?
块级元素居中:margin:0 auto;
行内元素居中:text-align:center;

那么,有没有想过,在我们给予一个特性正确的值的情况下,浏览器应该怎样处理呢?是否最终你看到的就是你设置的值呢?答案是否定的!

三、用 CSS 实现一个三角形
http://js.jirengu.com/rivozetewe/2/edit

当浏览器解析了一个文档 ( document ) 并且生成了文档树 ( document tree ),那么,它必须为文档树中的每一个元素,根据目标媒介类型所适用的每一个特性,指定一个值。

四、单行文本溢出加 ...如何实现?
http://js.jirengu.com/silevajoli/1/edit

而开发者给某个元素的 CSS 特性设置某个值,到这个元素的特性值被计算渲染,也就是得到最终的值,需要经过四步计算:

10bet,五、px, em, rem 有什么区别
px像素(Pixel),相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
PX特点
1、IE无法调整那些使用px作为单位的字体大小;
2、国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

通过指定值 ( specified value ) 确定这个值;将这个值分解为一个可以用来继承的值,即计算后的值 ( computed value );必要情况下把计算后的值转换成一个绝对的值,即使用值 ( used value )根据显示环境的限制,改变使用值以使之能够显示在用户端,最后这个值被称作实际值 ( actual value )。

EM
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
EM特点
em的值并不是固定的;
em会继承父级元素的字体大小。

这些值的计算过程类似工资的计算过程,你的应得工资是一个设置值,实际工资还要减掉你的缺勤,保险,个人所得税等……实际计算出来的数字才是应用到你身上的具体数额。

REM
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。
px 与 rem 的选择?
对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可 。
对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

下面来详细的介绍这四个步骤的四种值。

六、解释下面代码的作用?为什么要加引号? 字体里5b8b4f53代表什么?
body{ font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','5b8b4f53',sans-serif;}
解释:
body里元素字体大小设置为12px, line-height行高为之前1.5的倍,字体样式为tahoma,系统里要是没装这种字体就采用arial样式,没有找到就往后推,直到找到为止,都没有找到,就用系统默认样式sans-serif.
加引号:因为单词间有空格,不加会误认为是多个单词,误认为多个样式.其实就这代表一种样式.
'5b8b4f53' :汉字宋体的unicode编码

指定值

代码
七、实现如下三角形
http://js.jirengu.com/yuwogufigi/1/edit
http://js.jirengu.com/xexecowamu/1/edit
http://js.jirengu.com/gemotiwaqe/1/edit
http://js.jirengu.com/giqucemuqi/1/edit
http://js.jirengu.com/nebafifeka/1/edit
http://js.jirengu.com/henetehewu/1/edit
http://js.jirengu.com/mobuwuyoli/1/edit

一般来讲,开发者设定的值,即为指定值,但是最终这个值的确定还需考虑其他几个方面( 按照优先顺序排列 )。

10bet 1

层叠顺序

23303ae31546a47d8a07339cb738bab308e112e4_1_690x482.png

首先考虑有层叠顺序的情况,即开发者明确了设置了 CSS 特性的值。

层叠顺序会影响开发者设定的值,所以,应该根据层叠顺序来确定声明的优先级别,优先级高的声明才会起作用。关于层叠顺序,后续会有详细的说明。

例如,开发者在定义样式的时候,加了 '!important' 的声明要优于未加 '!important' 的声明。

div{ height : 100px; height : 130px !important;}

其中,带有 '!important' 的 height 声明才是指定值。

继承( inheritance )

如果没有明确的设置这个值,那么会先考虑它是否继承了父元素的值。这时候指定值使用它父元素的值,通常是父元素的计算值。

例如:

pThe greet emis/em good!/p

EM 元素没有指定颜色,他将继承父元素的颜色用来显示字符串 "is"。因此,EM 元素是红色。EM 元素 'color' 特性的指定值在没有层叠影响的情况下,就是 "red"。

初始值

最后,在不存在以上两种情况的时候,使用元素的初始值。

如果不设置元素的 'width',它的指定值就是 "auto";对于 'font-size',不设置的情况下,其指定值是 "medium"。

关于指定值在 JavaScript 中的获取方法,可以使用 "element.style.property" 语句模式:

本文由10bet发布于Web前端,转载请注明出处:CSS 的特性值

关键词:

最火资讯