文档介绍：2讲 CSS、网页布局与js 重点:CSS
1
一、CSS 二、网页布局 三、js简单应用
2
一、 CSS (第6章 )
3
(一) CSS样式控制 (第6章 )
级联样式表(cascading style sheet, css)的作用是统一控制网页中的元素的外观和布局。
页面中使用CSS的三种方法:内联式、嵌入式、链接式。
4
使用style属性将CSS放在某个HTML标签中,一般形式为:
style="属性名1: 值1; 属性名2: 值2;……"
属性名与属性值之间用“:”分隔,如果一个样式中有多个属性,各属性之间用分号“;”隔开。
1、内联式样式
5
在Visual Studio 2008中,有两种设置样式的方法:
在源视图下直接设置样式。
在设计视图下,利用可视化界面设置样式。
【例6-1】内联式样式设置示例:设置div的样式。
<div style="border-style: groove; font-family: 隶书; width: 462px; height: 300px; cursor: move; ">
6
在网页的head部分直接实现CSS样式, 即在<head>与</head>标签内,以<style>开始,</style>结束。
CSS规则由两部分组成:选择符和声明。声明由属性名和属性值组成。所以简单的CSS规则如下:
选择符{属性名1: 值1; 属性名2: 值2; ……}
例如: p { color : Green; }
p(段落标签)为选择符,color(颜色)是p的属性名,green(绿色)是color的属性值。该规则声明所有段落标签的内容应该将color属性设置为绿色,即所有<p>中文本将变成绿色。
2、嵌入式样式
7
CSS规则中主要的4个要素:
选择符:表明CSS规则应用到页面的哪个部分。选择符最简单的类型是元素选择符,它指出明确的标签元素,例如HTML中的<p>标签。
声明:声明包含在{}大括号内。大括号内应首先给出属性名,接着是冒号,然后是属性值。结尾分号是可选项,推荐使用结尾分号,以便于规则的扩展。
属性:属性按官方CSS规范定义。用户可以定义特有的样式效果,与CSS兼容的浏览器可能会支持这些效果,如果不支持的浏览器会忽略这些属性。
值:声明的值放置在属性名和冒号之后。它确切定义应该如何设置属性。每个属性值的范围也在CSS规范中定义。
8
在Visual Studio 2008中,也有两种设置嵌入式样式的方法:在源视图下直接设置样式;利用可视化窗口设置样式。
【例6-2】嵌入式样式示例:设置所有div的样式。
<style type="text/css">
div
{
font-family: 隶书;
background-color: #008080;
width: 300px;
height: 300px;
}
</style>
9
CSS最常用的方法是链接式样式。
利用这种方法可以在网页中调用已经定义好的样式表文件(css文件)。
与嵌入式相比,链接式可以将定义好的样式在网站的多个页面上重复使用,提高了开发效率,降低了维护成本,同时也实现了将页面结构和表现彻底分离,最适合大型网站的外观设计。
3、链接式样式
10