Web前端开发技术——HTML、CSS、JavaScript 教学课件 作者 聂常红第一讲 CSS层叠样式表.ppt

《Web前端开发技术——HTML、CSS、JavaScript 教学课件 作者 聂常红第一讲 CSS层叠样式表.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第一讲CSS层叠样式表1.1CSS概述1.2定义CSS样式表1.3CSS常用属性1.4CSS关联HTML文档的方式1.5在HTML文档中应用CSS1.6CSS的冲突学习目标熟练掌握CSS样式表的定义掌握样式表嵌入HTML文档的方式掌握在HTML文档中应用CSS样式的方式1.1CSS概述CSS（CascadingStyleSheet，层叠样式表）是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。特点将格式和结构分离以前所末有的能力控制页面布局制作体积更小、下载更快的网页可以实现许多网

2、页同时更新应用CSS的步骤定义样式表把样式表关联到HTML文档在HTML文档中应用样式表1.2定义CSS样式基本语法:选择符{属性名1:属性值1;属性名2:属性值2;……}常用选择符类型:HTML标记符自定义的类自定义的ID伪类1.HTML标记符HTML标记符重新定义了HTML标记符的显示效果，定义示例代码如下：h1{text-align:center;font-size:30pt;color:blue}HTML选择符示例2.自定义的类与ID使用自定义类或ID，可以定义一个通用的样式，以便应用到任何需要的地方。它们的应用需要分

3、别使用到class和id属性，定义示例代码如下：.classname{property:value…}#idname{property:value…}用户定义的类与ID示例3.伪类选择符伪类是一种特殊的类选择符，它最大的用处是可以对链接在不同状态下定义不同的样式效果，写书形式如下：a:link设置未访问过的超链接格式a:visited设置已访问过的超链接格式a:active设置活动超链接格式a:hover设置悬停状态的超链接格式伪类选择符示例代码如下：a:link{color:green;text-decoration:non

4、e}a:active{color:blue;text-decoration:none}a:visited{color:red;text-decoration:underline}a:hover{color:pink;font-style:italic}伪类选择符示例1.3CSS常用属性1.字体属性及其属性值字体属性示例2.文本属性及其属性值文本属性示例3.列表属性及其属性值列表属性示例4.颜色和背景属性及其属性值颜色和背景属性示例5.CSS区块属性区块边框区块边距区块定位1)区块边框属性及其属性值属性属性值描述borderColor_value、width_value、style设置边框的颜色、

6、宽度和样式Border-topColor_value、width_value、style设置边框的颜色、宽度和样式Border-leftColor_value、width_value、style设置边框的颜色、宽度和样式Border-rightColor_value、width_value、style设置边框的颜色、宽度和样式Border-bottomColor_value、width_value、style设置边框的颜色、宽度和样式属性值描述none设置无边框Dotted设置边框由点组成Dash设置边框由短线组成Solid设

7、置边框为实线Double设置边框是双实线Groove设置边框带有立体感的沟槽Ridge设置边框成脊形Inset设置边框内嵌一个立体边框outset设置边框外嵌一个立体边框边框style属性值边框属性示例一个属性可以设置多个属性值，不同的属性值之间使用空格间隔2)区块边距属性及其属性值边距属性示例3-1)区块定位之位置与大小属性CSS区块定位直接决定了网页中各个元素的位置、大小与是否浮动等可视属性。CSS区块定位有两种方法：相对定位和绝对定位区块定位之位置与大小属性示例3-2)区块定位之浮动与清除属性float属性将所属标记的显示空间指定为一个浮动元素，并使其周围对象按一定的方式环绕它排列。float属性的作用就象图像和表格的align属性一