脚本化CSS（一） - 之CSS概览

浏览数：18 / 时间：2015年06月09日

一、概览

CSS定义了属性以指定字体、颜色、外边距、边框、背景图片、文本对其方式、元素尺寸和元素位置。

1 font-weight:bold;
2 margin-left:10%;    /*左边距是页面宽度的10%*/
3 text-indent:.5in;    /*1/2英寸缩进*/
4 font-size:12pt;    /*字体尺寸12pt*/

样式的引用方法：

1.内联样式

2.用<style>和</style>标签把一个CSS样式表抱起来放在<head>标签里

3.保存在单独的文件中，在文档的<head>中使用<link>标签引入

1 <link rel=‘stylesheet‘ href=‘demo.css‘ type=‘text/css‘/>

二、CSS历史

CSS1在1996年12月被采纳，他定义了具体的颜色、字体、外边距、边框和其他的基本样式。

CSS2在1998年5月被采纳，它定义了许多高级特性，最著名的就是支持元素的绝对定位。

CSS2.1澄清和更正了CSS2，并且它删除了浏览器供应商从未实现的功能。现代浏览器基本上都完全支持CSS2.1，但是低于IE8的IE还有一些遗漏问题。

CSS3将CSS划分为更小的模块。

三、复合属性

1 font:bold italic 24pt helvetica;

四、非标准属性

当浏览器厂商实现非标准CSS属性时，它们在属性名前面加了一个厂商前缀。

Firefox -moz-

Chrome -webkit-

IE -ms-

Opera -o-

五、CSS举例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset=‘utf-8‘/>
 5 <title>demo</title>
 6 <style>
 7     h1,h2{
 8         color: blue;
 9         font-style: italic;
10         text-align: center;
11     }
12     .WARNING{
13         font-weight: bold;
14         font-size: 150%;
15         margin: 0 1in 0 1in;
16         background: yellow;
17         border: solid red 8px;
18         padding: 10px;
19     }
20     #special{
21         text-align: center;
22         text-transform: uppercase;
23     }
24 </style>
25 </head>
26 
27 <body>
28 
29 <h1>Cascading Style Sheets Demo</h1>
30 
31 <div class=‘WARNING‘>
32     <h2>Warning</h2>
33     This is a warning!
34     Notice how it grabs your attention with its bold text and bright colors.
35     Also notice that the heading is centered and in blue italics.
36 </div>
37 
38 <p id="special">
39     This paragraph is centered <br/>
40     and appears in uppercase letters. <br/>
41     <span style="text-transform: none;">
42         Here we explicitly use an inline style to override the uppercase letters.
43     </span>
44 </p>
45 
46 </body>
47 </html>