1、实验二 CSS样式表,一、实验目的,了解样式表(CSS)的特点； 熟悉CSS的基本语法、格式； 熟练运用CSS设计精美页面。,二、CCS简介,CSS 指层叠样式表 (Cascading Style Sheets)； 解决内容与表现分离的问题 ； 可以极大提高工作效率； 样式表可放在网页内部也可保存在外部的.css文件中； 样式表能同时改变站点中所有页面的布局和外观。,基础语法,CSS 语法由三部分构成：选择器、属性和值。 格式：selector property: value； 选择器(selector)通常是你希望定义的HTML元素或标记，属性(property)是你希望改变的属性，并且每个
2、属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明。,例： body color:blue;,设置背景颜色和文本颜色,一个简单的HTML示例body background-color:yellow;h3 color:red;欢迎光临我的主页,格式:,建立.css文件(ex1.css)body background-color:yellow;h3 color:red;,调用.css文件一个简单的HTML示例欢迎光临我的主页,调用.CSS文件实现样式表功能,基础语法说明,颜色设置中，除了英文单词，我们还可以使用十六进制的颜色值 或RGB（n1,n2,n3）; 如果属
3、性值为若干单词，则要给值加引号 ; 如果要定义不止一个属性，则需要用分号将每个属性分开。,高级语法,群组选择器你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。 例：h1,h2,h2,h3,h5,h6 color: green;,派生选择器,派生选择器允许你根据文档的上下文关系来确定某个标签的样式。 li strong font-style: italic; font-weight: normal; 我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用 我是斜体字。这是因为strong元素位于li元素内。 ,id 选择器,id 选择
4、器可以为标有特定 id 的HTML元素指定特定的样式。 id 选择器以 “#” 来定义。 #menubar background:#ccc; color:#c00; ,类选择器,在CSS里用一个点开头表示类别选择器定义 。 在页面中，用class=“类别名”的方法调用。 .center text-align: center This heading will be center-aligned This paragraph will also be center-aligned.,CSS中用四个伪类来定义链接的样式,a:link 未访问的链接 a:visited 已访问的链接 a:hover
5、鼠标移动到链接上 a:active 选定的链接 说明 在CSS定义中， a:hover必须被置于a:link和 a:visited之后，才是有效的；a:active必须被置于 a:hover之后，才是有效的。,a:link color: #FF0000 a:visited color: #00FF00 a:hover color: #FF00FF a:active color: #0000FF,设置行间距,p.small line-height: 90%p.big line-height: 200%这是拥有标准行高的段落。 这是拥有标准行高的段落。这个段落拥有更小的行高。 这个段落拥有更小的行高。这个段落拥有更大的行高。 这个段落拥有更大的行高。,一个简单的HTML示例a:link color: #FF0000a:visited color: #00FF00a:hover color: #FF00FFa:active color: #0000FF欢迎光临我的主页,
