浅析实验二 CSS样式表.ppt

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