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标签中
-->
时间： 2024-11-04 05:52:19