重要的CSS属性

重要的CSS样式属性

属性 描述

position

指定元素的定位类型
top、left 指定元素上、左边缘的位置
bottom、right 指定元素下、上边缘的位置
width、height 指定元素的尺寸

z-index

指定元素相对其它重叠元素的“堆叠次序”,定义了元素定位的第三个维度

display

指定元素是否以及如何显示

visibility

指定元素是否可见

clip

定义元素的“裁剪区域”,只显示元素在区域内的部分

overflow

指定元素比分配的空间要大时的处理方式
margin、border、padding 指定元素的空白和边框

background

指定元素的背景颜色或图片

opacity

指定元素的不透明度(半透明度),它是CSS的属性,有些浏览器支持,IE中另有他法

 

用CSS定位元素

CSS的position属性指定了应用到元素上的定位类型,如下是4个可能出现的属性值:
Static
默认属性。指定元素按照常规的文档内容流(对多数西方语言而言就是从左往右、从上到下)进行定位。静态定位的元素不能使用top、left和类似其他属性定位。欲对文档元素使用CSS定位技术,必先将其position属性设置为除此之外的其他3个属性值。
Absolute
该值指定元素是相对于它包含的元素进行定位。相对于所有其他的元素,绝对定位的元素是独立定位的,它不是静态定位的元素中文档流的一部分。它的定位要么是相对于最近的定位祖先元素,要么是相对于文档本身。
Fixed
该值指定元素是相对于浏览器窗口进行定位的。固定定位的元素总是显示在那里,不会随着文档其他部分而滚动。类似绝对定位的元素,固定定位的元素和所有其他元素是独立的,它不是文档流的一部分。大多数现代浏览器支持固定定位,除了IE6。
Relative
当position属性设置为relative,元素按照常规的文档流进行布局,它的定位相对于它文档流中的位置进行调整。系统保留着元素在正常文档流中的空间,不会因为要填充空间而将其各边合拢,也不会将元素从新的位置“推开”。

1、第三个维度:z-index
z-index属性定义了第三个维度:它允许指定元素的堆叠次序,并指示两个或多个重叠元素中的哪一个应该绘制在其他的上面。z-index默认为0,可以是正或负的整数。当两个或多个元素重叠在一起时,它们是按照从低到高的z-index顺序绘制的。
注意。z-index只对兄弟元素应用堆叠效果。如果两个元素不是兄弟元素之间的重叠,那么设置它们的z-index属性无法决定哪一个显示在最上面。相反,“必须”设置这两个重叠元素的兄弟容器的z-index属性来达到目的。

2、CSS定位示例:文本阴影
CSS3规范包含一个text-shadow属性以在文本下产生阴影效果。许多现代浏览器都支持该效果,但是可以用CSS定位属性实现类似的效果,只要重复输出这段文本并重新定义:
<!—text-shadow属性自动产生阴影效果–>

<span style=”text-shadow:3px 3px 1px #888″>Shadowed</span>

<!–利用定位产生相同的效果–>

<span style=”position:relative;”>

Shadowed<!–投射阴影的文本–>

<span style=”position:absolute; top:3px; left:3px;z-index:-1;color: #888″>

Shadowed<!–这里是阴影–>

</span>

</span>

边框、外边距和内边距

CSS允许指定元素周围的边框、外边距和内边距。元素的边框是一个围绕(或部分围绕)元素绘制的矩形(活着CSS3中的圆角矩形)。属性还允许指定边框的样式、颜色和厚度:
border : solid black 1px; /*绘制一个1像素的黑色实线边框*/
border : 3px dotted red;/*绘制一个3像素的红色点线边框*/
margin和padding属性都指定元素周围的空白空间。主要的区别在于,margin指定边框外面——边框和相邻元素之间的空间,而padding指定边框之内——边框和元素内容之间的空间。

CSS盒模型和定位细节

首先,width和height只指定了元素内容区域的尺寸,它不包含元素的内边距或边框(或外边距)所需的任何额外空间。为了确定有边框元素在屏幕上的全尺寸,必须把元素的宽度加上左右两边倒内边距和左右两个边框宽度,把元素的高度加上上下两边的内边距和上下两个边框的宽度。
其次,left和top属性指定了从容器边框内侧到定位元素边框外侧的距离。这些属性不是从容器内容区域的左上角开始度量的,而是从容器内边距的左上角开始的。同样,right和bottom属性是从容器内边距的右下角开始度量的。

边框盒模型和box-sizing属性

标准CSS盒模型规定width和height样式属性给定内容区域的尺寸,并且不包含内边距和边框。CSS3中引进了box-sizing属性,默认值是content-box,它指定了上面描述的标准的盒模型。如果替换为box-sizing:border-box,width和height属性将包含边框和内边距。

元素显示和可见性

两个CSS属性影响了文档元素的可见性:visibility和display。visibility属性很简单:当其值设置为hidden时,该元素不显示;当其值设置为visible时,该元素显示。display属性更加通用,它用来为接收它的容易指定元素的显示类型。它指定元素是否是块状元素、内联元素、列表项等。但是,如果display设置为none,受影响的元素将不显示,甚至根本没有布局。

颜色、透明度和半透明度

可以通过CSS的color属性指定文档元素包含的文本的颜色,并可以用background-color属性指定任何元素的背景颜色。
如果没有为元素指定背景颜色或图像,它的背景通常透明。

部分可见:overflow和clip

overflow和clip属性允许只显示元素的一部分。overflow属性指定内容超出元素的大小时如何显示。该属性允许的值和含义如下:
visiable
默认值。如果需要,内容可以溢出并绘制在元素的边框的外面。
hidden
裁减掉河隐藏溢出的内容,即在元素尺寸和定位属性值定义的区域外不会绘制内容。
scroll
元素一直显示水平和垂直滚动条。如果内容超出元素尺寸,允许用户通过滚动来查看额外的内容。此属性值负责文档在计算机屏幕中的显示。
auto
滚动条只在内容超出元素尺寸时显示,而非一直显示。
clip属性的值指定了元素的裁减区域,语法是:
rect(top right bottom left)
相对于元素边框的左上角,top、right、bottom和left4个值裁减了矩形的边界。例如,要只显示元素的100*100像素大小部分,可以赋予该元素style属性:
style=”clip : rect(0px 100px 100px 0px)”

脚本化内联样式

style属性不同寻常:它的值不是字符串,而是一个CSSStyleDeclaration对象,在使用CSSStyleDeclaration对象的style属性时,记住所有的值都应该是字符串。
HTML元素的style属性是它的内联样式,它覆盖在样式表中的任何样式说明。CSSStyleDeclaration对象的属性可以理解为代表内联样式,但是它只返回有意义的值:JavaScript代码已经设置过的值或者HTML元素显示设置了想要的内联样式的值。

查询计算出的样式

元素的计算样式是一组属性值,它由浏览器通过把内联样式结合所有链接样式表中所有可应用的样式规则后计算得到:是一组在显示元素时使用的属性值。类似内联样式,计算样式也是用一个CSSStyleDeclaration对象来表示,区别是,计算样式是只读的。
用浏览器窗口对象的getComputedStyle()方法来获得一个元素的计算样式。此方法的一个参数就是要获取其计算样式的元素,第二个参数也是必需的,通常是null或空字符串,但它也可以是命名CSS伪对象的字符串,如“:before”、“:afer”。
表示计算样式的CSSStyleDeclaration对象和表示内联样式的对象之间有一些重要的区别:
• 计算样式的属性是只读的
• 计算样式的值是绝对值:类似百分比和点之类相对的单位将全部转换为绝对值。
• 不计算复合属性,他们只基于基础的属性。
• 计算样式的cssText属性未定义。

脚本化CSS类

通过内联style属性脚本化CSS样式的一个可选方案是脚本化HTML的class属性值。改变元素的class就改变了应用元素的一组样式表选择器,它能在同一时刻改变多个css属性。

脚本化样式表

脚本化样式表时,将会碰到两类需要使用的对象。第一类是元素对象,由<style>和<link>元素表示,两种元素包含或引用样式表。这些是常规的文档元素,如果它们有id属性值,可以用document.getElementById()函数来选择它们。第二类是CSSStyleSheet对象,它表示样式表本身。document.styleSheets属性是一个只读的类数组对象,它包含CSSStyleSheet对象,表示与文档关联在一起的样式表。

开启和关闭样式表

最简单的脚本化样式表也是最便捷和健壮的。<style>、<link>元素和CSSStyleSheet对象都定义了一个在JavaScript中可以设置和查询的disabled属性。顾名思义,如果disabled属性为true,样式表就被浏览器关闭并忽略。

查询、插入与删除样式表规则

除了样式表的开启和关闭以外,CSSStyleSheet对象也定义了用来查询、插入和删除样式表规则的API。

document.styleSheets[]数组的元素是CSSStyleSheet对象。CSSStyleSheet对象有一个cssRules[]数组,它包含样式表的所有规则。IE使用不同的属性名rules代替cssRules。

cssRules[]或rules[]数组的元素为CSSRule对象。CSSRule对象有两个属性可以便捷的使用。selectText是规则的CSS选择器,它引用一个描述与选择器相关联的样式的可写CSSStyleDeclaration对象。

除了查询和修改样式表中已存在的规则以外,也能向样式表添加从中删除规则。标准的API接口定义了insertRule()和deleteRule()方法来添加和删除规则。

IE不支持insertRule()和deleteRule(),但定义了大致等效的函数addRule()和removeRule()。

创建新样式表

在大多数浏览器中,可以用标准的DOM技术:只要创建一个全新的<style>元素,将其插入到文档的头部,然后用其innerHTML属性来设置样式表的内容。但是在IE8以及更早版本中,CSSStyleSheet对象通过非标准方法document.createStyleSheet()来创建,其样式文本用cssText属性值来指定。

Categories: 学习笔记

发表评论