您的位置：首页 > Web前端 > CSS

犀牛——第16章脚本化CSS

2015-09-25 10:20 477 查看

第16章脚本化CSS

层叠样式表（Cascading Style Sheet,CSS）是一种指定HTML文档视觉表现的标准。

16.1 CSS概览

有两种方式将一组定义视觉表现的CSS属性和对应的HTML元素关联在一起。

第一种是通过给每个单独的HTML元素设置style属性值的方式，成为内联样式：

<p style="margin:20px;border:solid red 2px;">

This paragraph has increased margins and is surrounded by a rectangular red border.

</p>

通常将单独的HTML元素与CSS样式分开并把它们定义在一个样式表中会更有用。

p{

text-indent:.5in;

}

用<style>和</style>标签把一个CSS样式表包起来放在<head>标签里，它就和HTML文档关联在一起了。

<html>

<head><title>Test Docuemtn</title>

<style>

body{margin-left:30px;margin-right:15px;background-color:#fffff}

p{font-size:24px;}

</style>

<head>

<body>

<p>Testing,testing</p>

</body>

</html>

样式表保存在自己的文件中，引用到HTML页面中。

为了在页面中引入样式表，在文档的<head>中使用<link>标签：

<head>

<title>Test Document</title>

<link rel="stylesheet" href="mystyles.css" type="text/css">

</head>

16.1.1 层叠

“层叠”指示了应用于文档中任何给定元素的样式规则是各个“来源”的“层叠”效果：

Web浏览器的默认样式表
文档的样式表
每个独立的HTML元素的style属性

style属性中的样式覆盖了样式表中的样式，并且文档的样式表中的样式覆盖了浏览器的默认样式。任意给定元素的样式表现可能是来自3个来源的一个样式组合。

16.1.2 CSS历史

16.1.3 复合属性

例如，font-family,font-size和font-weight属性可以用font的复合属性值一个性设置：
font:bold italic 24pt helvetica;

16.1.4 非标准属性

16.1.5 CSS举例

16.2 重要的CSS属性

16.2.1 用CSS定位元素
position属性指定了应用到元素上的定位类型，如下是4个可能出现的属性值：

static：默认属性。指定元素按照常规的文档内容流进行定位。
absolute:该值指定元素是相对于它包含的元素进行定位。
fixed:该值指定元素是相对于浏览器窗口进行定位的。
relative:当position属性设置为relative，元素按照常规的文档流进行布局，它的定位相对于它文档流中的位置进行调整。

一旦设置了元素的position属性为除了static以外的值，就可以通过元素的left、top、right和bottom属性的一些组合指定元素的位置。

<div style="position:absolute;left:100px;top:100px;">
1.第三个维度：z-index

z-index属性定义了第三个维度：它允许指定元素的堆叠次序，并指示两个或多个元素中的哪一个应该绘制在其他的上面。z-index默认为0，可以是正或负的整数。当两个或多个元素重叠在一起时，它们是按照从低到高的z-index顺序绘制的。

2.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>

16.2.2 边框、外边距和内边距

边框：border

外边距：margin

内边距：padding

16.2.3 CSS盒模型和定位细节

16.2.4 元素显示和可见性

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

设置visibility属性为hidden使得元素不可见，但是在文档布局中仍保留了它的空间。

如果元素的display属性设置为none，在文档布局中不再给它分配空间，它各边的元素会合拢，就当它从来不存在。

16.2.5 颜色、透明度和半透明度

opacity属性来处理，该属性值是0~1之间的数字，1代表100%不透明（默认值），而0代表0%不透明。

16.2.6 部分可见：overflow和clip

visibility属性可以让文档元素完全隐藏，而overflow和clip属性允许只显示元素的一部分。

overflow属性指定内容超出元素的大小时该如何显示。该属性允许的值和含义如下显示：

visible：默认值。如果需要，内容可以溢出并绘制在元素的边框的外面。

hidden：裁剪掉和隐藏溢出的内容。

scroll：元素一直显示水平和垂直滚动条。

auto:滚动条只有在内容超出元素尺寸时显示，而非一直显示。

clip属性切确地指定了应该显示元素的哪个部分，它不管元素是否溢出。

clip属性的值指定了元素的裁剪区域。裁剪区域是矩形的，不过clip属性的语法预留了开放的可能。clip属性的语法是：rect(top right bottom left)。

style="clip:rect(0px 100px 100px 0px);";

16.2.7 示例：重叠半透明窗口

16.3 脚本化内联样式

脚本化CSS最直接了当的方法就是更改单独的文档元素的style属性。类似大多数HTML属性，style也是元素对象的属性，它可以在JavaScript中操作。但是style属性不同寻常：它的值不是字符串，而是一个CSSStyleDeclaration对象。

例子：

e.style.fontSize = "24pt";

e.style.fontWeight = "bold";

e.style.color = "blue";

HTML元素的style属性是它的内联样式，它覆盖在样式表中的任何样式说明。CSSStyleDeclaration对象的属性可以理解为代表内联样式，但是它值返回有意义的值：JavaScript代码已经设置过的值或者HTML元素显式设置了想要的内联样式的值。

16.4 查询计算出的样式

元素的计算样式是一组属性值，它由浏览器通过把内联样式结合所有连接样式表中所有可应用的样式规格后导出得到的：它就是一组在显示元素时实际使用的属性值。类似内联样式，计算样式也是用一个CSSStyleDeclaration对象来表示的，区别是，计算样式是只读的。

用浏览器窗口对象的getComputedStyle()方法来获得一个元素的计算样式。此方法的第一个参数就是要获取其计算样式的元素，第二个参数也是必需的，通常是null或空字符串，但它也可以是命名CSS伪对象的字符串。

var title = document.getElementById("section1title");

var titlestyles = window.getComputedStyle(title,null);

getComputedStyle()方法的返回值是一个CSSStyleDeclaration对象，它代表了应用自指定元素上的所有样式。

查询计算样式与设置内联样式

//用指定的因子缩放元素e的文本尺寸

function scale(e,factor){

//用计算样式查询当前文本的尺寸

var size = parseInt(window.getComputedStyle(e,"").fontSize);

//用内联样式来放大尺寸

e.style.fontSize = factor*size +"px";

}

16.5 脚步化CSS类

通过内联style属性脚本化CSS样式的一个可选方案是脚本化HTML的class属性值。
例子：让用户对文档中单独的段落引起注意。
首先,定义一个“attention”的类：
.attention{
background-color:yellow;
font-weight:bold;
border:solid black 2px;
}
如下代码设置和清除元素的className属性来为元素添加和移除“attention”类：
function grabAttention(e){e.className = "attention";}
function releaseAttention(e){e.className = "";}

16.6 脚步化样式表

在脚步化样式表时，将会碰到两类需要使用的对象。

元素对象，由<style>和<link>元素表示，两种元素包含或引用样式表。
CSSStyleSheet对象，它表示样式表本身。document.styleSheets属性是一个只读的类数组对象，它包含CSSStyleSheet对象，表示与文档关联在一起的样式表。

16.6.1 开启和关闭样式表

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

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

16.6.3 创建新样式表

创建整个新样式表并将其添加到文档中是可能的。只需创建一个全新的<style>元素，将其插入到文档的头部，然后用其innerHTML属性来设置样式表内容。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

犀牛——第16章 脚本化CSS

第16章 脚本化CSS