5.2.2 CSS样式表.ppt

教育科学出版社教育科学出版社教育科学出版社教育科学出版社网络技术应用网络技术应用网络技术应用网络技术应用（选修（选修（选修（选修）江苏省上冈高级中学江苏省上冈高级中学 吴银华吴银华第五章 动态网页设计-5.2.2 CSS样式表(CSSCSS基本概念基本概念)1.什么是CSS样式表及样式？2.CSS样式表的基本结构是什么？CSS（Cascading Style Sheet，可译为“层叠样式表”简称“样式表”）样式表样式表是一组样式，用于控制网页的外观。样式样式就是用一个指定名字来标识和保存的一组格式选项集合。样式样式1 1 身高:185cm;体重:105kg;性别:男;性格:暴躁;CSSCSS样式样式表表 样式样式2 2 三国人物志关羽 属性属性:值值;张飞第五章 动态网页设计-5.2.2 CSS样式表(HTMLHTML基础基础)基本HTML标记:HTML教程我的第一个标题我的第一个段落。一行一列表格 一行二列表格样式属性及值样式属性及值样式属性及值样式属性及值:第五章 动态网页设计-5.2.2 CSS样式表(内联样式表内联样式表)第一段 动态网页制作第一段 理解动态HTML插入位置:样式标记:样式名称:P(段落标记)样式优点:1.精简网页代码，提高下载速度2.内容与样式分离便于修改维护注意注意:代码代码是注释标记，为防止浏览器的不兼容性。是注释标记，为防止浏览器的不兼容性。内联样式表内联样式表第三段 CSS样式表样式特点:一次设置，多处使用第五章 动态网页设计-5.2.2 CSS样式表(常见样式常见样式)常见样式:p 段落table 表格td 单元格body 主体常见属性:font-size 大小font-family 字体字体Color颜色background-color 背景颜色background-image背景图像背景边框border简写属性，用于把针对四个边的属性设置在一个声明。border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。border-width简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。border-color简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。dotteddashedsoliddoubleborder-style:border:1px solid red;h3 标题第五章 动态网页设计-5.2.2 CSS样式表(CSSCSS颜色代码颜色代码)#FFFFFF#DDDDDD#AAAAAA#888888#666666#444444#000000#FFB7DD#FF88C2#FF44AA#FF0088#C10066#A20055#8C0044#FFCCCC#FF8888#FF3333#FF0000#CC0000#AA0000#880000#FFC8B4#FFA488#FF7744#FF5511#E63F00#C63300#A42D00#FFDDAA#FFBB66#FFAA33#FF8800#EE7700#CC6600#BB5500#FFEE99#FFDD55#FFCC22#FFBB00#DDAA00#AA7700#886600#FFFFBB#FFFF77#FFFF33#FFFF00#EEEE00#BBBB00#888800#EEFFBB#DDFF77#CCFF33#BBFF00#99DD00#88AA00#668800#CCFF99#BBFF66#99FF33#77FF00#66DD00#55AA00#227700#99FF99#66FF66#33FF33#00FF00#00DD00#00AA00#008800#BBFFEE#77FFCC#33FFAA#00FF99#00DD77#00AA55#008844#AAFFEE#77FFEE#33FFDD#00FFCC#00DDAA#00AA88#008866#99FFFF#66FFFF#33FFFF#00FFFF#00DDDD#00AAAA#008888#CCEEFF#77DDFF#33CCFF#00BBFF#009FCC#0088A8#007799#CCDDFF#99BBFF#5599FF#0066FF#0044BB#003C9D#003377#CCCCFF#9999FF#5555FF#0000FF#0000CC#0000AA#000088#CCBBFF#9F88FF#7744FF#5500FF#4400CC#2200AA#220088#D1BBFF#B088FF#9955FF#7700FF#5500DD#4400B3#3A0088#E8CCFF#D28EFF#B94FFF#9900FF#7700BB#66009D#550088#F0BBFF#E38EFF#E93EFF#CC00FF#A500CC#7A0099#660077#FFB3FF#FF77FF#FF3EFF#FF0 0FF#CC00CC#990099#770077CSS 颜色使用组合了红绿蓝颜色值颜色使用组合了红绿蓝颜色值(RGB)的十六进制的十六进制(hex)表示法进行定义。使用三个双位数来编写，并以表示法进行定义。使用三个双位数来编写，并以#符号开头。符号开头。第五章 动态网页设计-5.2.2 CSS样式表(嵌入样式表嵌入样式表)嵌入样式表嵌入样式表插入位置:标记内部代码标记:Style=“样式代码”样式特点:个性设置，只对当前位置应用样式第五章 动态网页设计-5.2.2 CSS样式表(外联样式表外联样式表)插入位置:代码标记:样式特点:应用于多个被调用的网页,使网站风格一致外联样式表外联样式表第五章 动态网页设计-5.2.2 CSS样式表(CSSCSS三种方式三种方式)名称位置应用范围代码内联样式表Head区当前页面 嵌入样式表对应标记嵌入区域外联样式表Head区多个网页三种插入样式比较三种插入样式比较三种插入样式比较三种插入样式比较根据具体需求选择样式的插入方式根据具体需求选择样式的插入方式根据具体需求选择样式的插入方式根据具体需求选择样式的插入方式