标签：
4.1 CSS工作原理
<div style = "color:green"> <!-- <div>标签中的文本是绿色 --> This text is green. <!-- <p>标签设置了颜色,<p>标签中的文本的颜色为蓝色 --> <p style = "color:blue">This text is blue.</p> <!-- <p>标签没有设置颜色,因此<p>标签继承<div>的文本的颜色 --> <p>This text is still green.</p> </div>
4.2 一个基本的样式单
body { font-size: 10pt; /* 设置字体的尺寸 */ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; /* 规定元素的字体系列 */ color: black; /* 颜色 */ line-height: 14pt; /* 设置行间的距离(行高) */ padding-left: 5pt; /* 设置元素左内边距(空白) */ padding-right: 5pt; /* 设置元素右内边距(空白) */ padding-top: 5pt; /* 设置元素上内边距(空白) */ } h1 { font: 14pt Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: bold; /* 设置字体的粗细 */ line-height: 20pt; } p.subheader { font-weight: bold; color: #593d87; } img { padding: 3pt; /* 设置所有内边距属性 */ float: right; /* float属性定义元素在哪个方向浮动. */ } a { text-decoration: none; /* 规定添加到文本的修饰, */ } a.link, a:visited { color: #8094d6; } a:hover, a:active { color: #FF9933; } div.footer { font-size: 9pt; font-style: italic; /* 属性定义字体的风格 */ line-height: 12pt; text-align: center; /* 规定文本的水平对齐方式 */ padding-top: 30pt; }
4.3 CSS样式入门
<!-- CSS中的样式属性分为两大类 1.布局属性,由影响网页上元素位置的属性(如边距,填充,对齐等等)组成. 2.格式化属性,由影响网站中元素的视觉显示的属性(如字体类型,大小,颜色等)组成-->
4.3.1 布局属性
<!-- CSS布局属性用于决定内容在网页上如何排列. 最重要的布局属性之一就是display,它描述元素相对于其他元素如何显示.display属性有4个可能的取值 1.block: 元素显示在下一行,作为一个新段落 2.list-item: 元素显示在下一行,前面有列表元素标记(项目符号) 3.inline: 元素显示在当前段落内 4.none: 元素隐藏不显示-->
4.3.2 格式化属性
<!-- CSS格式化属性用于控制网页内容的外观,而不是物理位置. 最常用的格式化属性之一是border -->
4.4 使用样式类
/* 样式类是一组自定义的格式化说明,可用于网页中的任何元素 */ /* h1: 选择符 font: 样式属性 36pt Courier: 值 */ h1 { font:36pt Courier; } /* .名称可以将相同的元素分为不同的类 */ h1.silly { font: 36pt Comic Sans; } h1.serious { font: 36pt Arial; }
4.5 使用样式ID
/* 样式ID是一组自定义的格式化规范,可以只应用到网页中的一个元素,每页只使用一次 */ p#title { font: 24pt Verdana, Geneva, Arial, sans-serif } /* <p id = "title">Some Title Goes Here</p> */
4.6 内部样式单和内联样式
<?xml version = "1.0" encoding = "UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en"> <head> <title>Some Page</title> <style type = "text/css"> div.footer { font-size: 9pt; line-height: 12pt; text-align: center; } </style> </head> <body> <div class="footer"> Copyright 2009 Acme Products,Inc. </div> </body> </html>
4.7 总结
<!-- <style></style> 使得可以在文档中包含内部样式单,用于<head>和</head>之间 type="内容类型" Internet内容类型,对于CSS样式单,总是text/css <link /> 链接外部样式单(或其他文档类型),用于文档的<head>部分 href="url" 样式单的地址 type="内容类型" Internet内容类型,对于CSS样式单,总是text/css rel="样式单" 链接类型,对于样式单,总是stylesheet <span></span> 除提供一个放置样式或其他属性的位置外,不起什么作用,类似于<div></div>但不产生分行 style="style" 包含内联样式说明,可用于<span>,<div>,<body>和其他大部分HTML标签中 -->
标签：
原文地址：http://www.cnblogs.com/revoid/p/5584049.html
