一、概览
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>
浏览器运行结果: