《WEB前端开发技术实用教程》课件第03章 网站的“华丽外衣”-CSS样式.pptx

1、1 1目录3.1 CSS样式表概述3.2 在网页中引入CSS样式表的方式3.3 CSS样式语法构成3.4 选择器介绍3.5 CSS样式属性3.1 CSS 样式表概述p CSS是Cascading Style Sheets的简写，全称“层叠样式表”。p CSS样式可以设置网页元素的大小，颜色，位置，显示，背景等，使网页的显示的效果实现与word一样的排版控制。p CSS样式可以将网页结构内容和其表现风格分离，将原来由XHTML语言所承担的一些与结构无关的功能剥离出来，改由CSS来完成。3.2 网页中引入CSS样式表 直接在标签后加入style属性，加入样式定义(1)行内样式 在网页的标记中引入标

2、记进行样式定义(2)内嵌样式 首先创建一个独立的css样式文件，并编写好样式内容，然后在需要此样式的页面的标记中，通过链接的方式引入此样式文件(3)外部样式顾客虐我千百遍，我视顾客如初恋！p color:red;font-size:20px 在在head标签内书写标签内书写3.3 CSS 样式语法构成CSS 语法由三部分构成：选择器、属性和值选择器、属性和值，如下格式：3.4 选择器(selector)介绍选择器选择器类别类别选择器选择器定义格式定义格式示例示例说明说明基本选基本选择器择器标签选择器标签名样式规则;h2 background-color:#CCFF33;text-align:c

3、enter;(h2即为标签选择器即为标签选择器)用html标签如p,div,ul,li等作为选择器；同一类html标签均会使用此样式。类别选择器.类名样式规则;.myclass1 border:1px solid#00FF00;color:#AA00FF (“.myclass1”为类别选择器)这是块标记段落标记同一类名的标签会使用同一样式，定义类名前面有点(.)符号，引用此类别样式用class=”类名”格式。ID选择器#id名样式规则;#box width:800px;margin:0px auto;(“#box”为ID选择器)盒子一ID选择器用”#”来定义，一般ID名称唯一，只有使用此ID选

4、择器的元素才有此样式效果。3.4 选择器(selector)介绍选择器选择器类别类别选择器选择器定义格式定义格式示例示例说明说明复合复合选择选择器器群组选择器选择器1,选择器2，.样式规则;h1,h2,h3,p,divfont-size:12px;font-family:宋体;h1,h2,h3,p,div使用同一样式，减少代码量，提高重用对一组对象的相同样式进行定义包含选择器父选择器 子选择器样式规则;#main liline-height:25px;font-size:12px;float:left;时事要闻经典评论热门话题 只对id=“main”的div内的子标记li应用样式。对某一对象的

5、子对象进行样式定义，前一对象包含后一对象,中间用空格隔开,可以多级包含，如div li acolor:#00AA88;，设定div标签中的列表项中的超链接样式。3.4 选择器(selector)介绍选择器选择器类别类别选择器选择器定义格式定义格式示例示例说明说明特殊选特殊选择器择器伪类选择器:伪类 样式规则;a:link,a:visited color:blue;text-decoration:none;a:hover color:red;text-decoration:underline;对同一个HTML元素的各种状态和其所包括的部分内容是一种定义方式。a:link：链接未被访问前；a:ho

6、ver：鼠标经过链接时；a:active：在鼠标点击与释放之间发生的事件a:visited：访问过的链接通配符选择器*样式规则;*font-size:12px;font-family:宋体;文档中所有的元素字体大小均为12px，字体均为宋体。可以与任何元素匹配，优先级最低。3.5 CSS样式属性3.5.1 字体属性3.5.2 文本属性3.5.3 背景属性3.5.4 边框属性3.5.5 类表属性3.5.1 字体属性字体属性：font-family：字体类型 font-size：字体大小.color：字体颜色 font-weight：字体粗细 font-style：字体斜体 text-decora

7、tion：下划线(underline)、顶划线(overline)、删除线(line-through)、无修饰(none)；text-transform：英文字母大小写3.5.2 文本属性文本属性：text-align：段落水平对齐，设置值：center、right、left、justify vertical-align：段落垂直对齐，设置值：sub、super、top、middle、bottom、相对于元素行高属性的百分比 letter-spacing：字母的间距 word-spacing：单词的间距 line-height：文本行高 text-indent：缩进方式 white-space

8、：排版方式，设置值：normal、pre、nowrap3.5.3 背景属性背景属性：background-color：背景颜色 b a c k g ro u n d-i m a ge：背 景 图 片，例 如，b a c k g ro u n d-image:url(“images/bg.jpg”)background-repeat：背景重复方式,设置值：no-repeat、repeat、repeat-x、repeat-y background-position：背景位置,设置值：left、center、right、top、bottom、具体值 background-attachment：固定或

9、滚动背景，设置值：fixed、scroll3.5.4 边框属性边框属性：border-width：边框宽度，(border-top-width、border-right-width、border-bottom-width、border-left-width)，设置值：thin、medium、thick或数值 border-color：边框颜色，(border-top-color、border-right-color、border-bottom-color、border-left-color)border-style：边框样式，(border-top-style、border-right-sty

10、le、border-bottom-style、border-left-style)，设置值：none、dotted、dashed、solid、double、groove、ridge、inset、outset。border：合并设置边框样式，如border:1px solid#FF0000;3.5.5 列表属性列表属性：list-style-type：设置列表符号类型，设置值有disc，circle，square，decimal，upper-roman，lower-roman，upper-alpha，lower-alpha，none等。list-style-image：设置列表图像，设置值有url(“图像url”)，none；list-stle-position：设置列表位置，设置值outside：列表项目标记放置在文本以外，且环绕文本不根据标记对齐；inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。本章小结u本章主要介绍了CSS样式在网页中的引入方式，CSS样式语法构成。重点介绍了CSS选择器分类及CSS样式属性，包括字体属性、文本属性、背景属性、边框属性及列表属性等。传道，授业，解惑