文档介绍:第10章 CSS的基础知识
什么是样式表
样式表的基本结构
如何在网页中加入css
div与span标签
CSS的几个特性
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。
是用于控制网页元素的显示方式
样式表的宗旨就是将结构(内容)和格式分离
CSS也是一种标记语言,有很多属性来源于HTML,它也需要通过浏览器解释执行。
什么是样式表
样式表的基本结构
一个样式表由许多样式规则组成的,用以告诉浏览器怎样去显示一个网页文档。
样式表的核心是规则,样式表的规则格式如下: Selector{property1:value1;property2:value2;property3:value3;……}
Selector定义样式作用的对象
property为CSS属性,value为属性对应的值
样式定义的语法示例
H1 {text-align:center; font-family:黑体}
选择器
样式定义
样式属性
属性取值
常用Selector类型
HTML标记符
用户定义的类
用户定义的ID
虚类
HTML标记符的Selector
HTML标记符是最常用的selector,它重新定义了HTML标记符的显示效果。例如:
H1{text-align:center;color:red}
使所有用H1标记符修饰的内容都居中和用红色显示。
示例如下
例10-1:建立一个简单的样式表
<html>
<head><title>简单的样式表</title>
<style type="text/css">
<!--
h1{color:red;font-size:35px;font-family:黑体}
p{background:yellow;color:blue;font-size:25px;font-family:隶书}
--> </style>
</head>
<body bgcolor=lightblue>
<center><h1>样式表</h1>
<p>这是一个简单的样式表</p>
</center>
</body></html>
用户定义类
定义方式classname{property:value…}
表示任何带有class属性为classname的标记符都采用所定义的样式。
定义方式
*. classname{样式属性:属性值; 样式属性:属性值;......}
所有HTML标签都可引用它
*符号可以省略
HTML标签. classname{样式属性:属性值; 样式属性:属性值;......}
只有该指定的标签才能引用它
10