《网页设计》课件——3-2CSS的使用.pptxVIP

CSS的使用

目录◎CSS样式设置规则◎CSS样式的调用◎CSS基础选择器

1CSS样式设置规则CSS样式设置规则由选择器和声明部分组成。语法：选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}选择器绿色部分为选择器，大括号部分为声明部分，包括属性与属性值。声明由属性和值两部分组成。属性和值用英文冒号“：”链接。多个“键值对”之间用英文分号“；”进行区分，最后一个分号可以省略，为了规范最好保留。举例：P{color:red;font-size:18px;line-height:30px;}声明部分

注意选择器命名统一使用英文、英文简写或者统一使用拼音。选择器命名尽量不缩写，除非是一看就懂得单词。在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释，可以使用/**/（斜杠和星号）或者使用!----进行注释。其中/**/（斜杠和星号）进行多行注释，而!----进行单行注释。CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。多个属性之间必须用英文状态下的分号隔开，最后用的分号可以省略，但是为了便于增加新样式最好保留。如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。例如：p{font-family:microsoftyahei;}

CSS常见命名规则名称含义名称含义header页头container容器footer页脚nav导航aside或sidebar侧边栏column栏目wrapper或wrap页面外围控制整体布局宽度left左侧right右侧center中间loginbar登录条logo标志banner广告main页面主体hot热点news新闻download下载subnav子导航menu菜单submenu子菜单search搜索friendlink友情链接copyright版权scroll滚动content内容tab标签页list列表msg提示信息title栏目标题joinus加入guild指南service服务register注册status状态vote投票partner合伙伙伴

2CSS样式的调用插入样式表的方法：行内样式表、内部样式表、链入外部样式表。1.行内样式表语法：标签名称style=样式属性1:属性值1;样式属性2:属性值2;样式属性…举例：pstyle=color:#fff;font-size:24px;

举例演示【实例4-1】行内样式表应用。注意：行内样式也可以通过标签的属性来控制样式，由于没有做到结构与表现的分离，所以，不建议使用。只有在样式规格较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。

2.内部样式表语法：headstyletype=text/css选择器{样式属性:属性值;…}/style/head内部样式表是将样式表嵌入到HTML文件的文件头head中的方式。举例：headstyletype=text/cssp{color:red;}/style/head

举例演示【实例4-2】内部样式表。注意：行内样式表与内部样式表的引用方法都属于引用内部样式表，即样式表规则的有效范围只限于该HTML文件，在该文件以外将无法使用。但这也具有一定的局限性，对于一个网站的构建，不建议使用这种方式，因为它不能体现CSS代码的重用优势。

3.链接样式表语法：linkhref=*.csstype=text/cssrel=stylesheet链接样式表将一个外部样式表链接到HTML文档中。链接的CSS文件的位置文档的类型链接样式表

举例演示【实例4-3】链接样式表。

3基础选择器1.标签选择器语法：标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}举例：标签选择符也称为类型选择符，是指用HTML标签名称作为选择器，HTML中的所有标签都可以作为标签选择符。td{font-size:14px;color:#ff0000;line-height:18px;font-family:微软雅黑;}

2.类选择器语法：.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}举例：定义h3标签选择器为“.redtitle”，例如：类选择器能够把相同的元素分类定义成不同的样式。定义类选择符时，在自定义类的前面需要加一个英文点号“.”。.redtitle{font-size:20px;col