CSS(Web技术应用基础)

12CSS5.1CSS简介5.1.1CSS作用网页展现的样式从网页中独立出来集中管理3CSS5.1.2样式表的使用结构多个网页文件共享样式文件多个样式文件套用在一个网页文件上HTML文件1HTML文件NCSS样式文件HTMLCSS样式文件NCSS样式文件14CSS5.2定义样式格式选择器{规则}选择器(Selector)规则(Rule)例5.15htmlheadtitle选择符的应用/title/headstyletype=text/css/*定义样式*/!--h2{color:green;font-family:楷体;}.redfont{font-family:华文彩云;color:red}h4.bluefont{font-family:隶书;color:blue}#id_olivefont{font-family:楷体;color:olive}h4#purplefont{font-family:仿宋体;color:purple}--/style6bodyh2显示楷体绿色/h2h3class=redfont显示华文彩云红色/h3h4class=bluefont显示隶书蓝色/h4h3id=id_olivefont显示楷体橄榄绿/h3h4id=purplefont显示仿宋体紫色/h4/body/html7CSS5.3应用CSS样式的4种方式直接定义style属性在HTML文档内定义内部样式表嵌入式样式单外部(链接)样式单85.4样式表应用案例使用用CSS样式的4种方式显示界面9CSS1.直接定义style属性例5.2htmlheadtitle直接定义HTML标记中的style属性/title/headbodyh1style=color:green;text-align:center;font-style:italic;font-family:隶书;font-size:x-large;用四种方式将样式表功能应用到Web页面中/h1/body/html例5.210CSS2.定义内部样式表htmlheadtitle定义内部样式表/titlestyletype=text/css/*定义样式*/!--h1{color:green;text-align:center;font-style:italic;font-family:隶书;font-size:x-large;}--/style/headbodyh1用四种方式将样式表功能应用到Web页面中/h1/body/html例5.311CSS3.嵌入外部样式表12CSSstyle1.css保存文字的其它样式h1{text-align:center;font-style:italic;font-family:隶书;font-size:x-large;}style2.css保存文字的颜色h1{color:green;}13CSShtmlheadtitle嵌入外部样式表/titlestyletype=text/css/*定义样式*/!--@importurl(style1.css);@importurl(style2.css);/style/headbodyh1用四种方式将样式表功能应用到Web页面中/h1/body/html例5.414CSS4.链接外部样式表htmlheadtitle链接外部样式表/titlelinkrel=stylesheettype=text/csshref=style1.csslinkrel=stylesheettype=text/csshref=style2.css/headbodyh1用四种方式将样式表功能应用到Web页面中/h1/body/html例5.515HTML5.5页面定位页面定位是指网页作者可以精确地将一个网页元素定位在页面的某一个位置。16position三种设定方式：•Absolute：页面对象的绝对位置，原点在窗口的左上角。•Relative：页面对象与HTML代码中上一个对象的相对位置。•Static：静态位置，该值是默认值，页面对象将根据HTML源代码的位置顺序显示。17CSSleft:元素的左边距Top：元素的顶边距Width：元素的宽度Height：元素的高度z-index：定义页面元素在Z轴上的位置，Z轴的定义从后到前18CSShtmlheadtitle定位技术的应用/titlestyletype=text/cssspan{font-size:28pt;font-family:隶书}span.level2{position:absolute;z-index:2;left:100;top:100;color:green}span.level1{position:absolute;z-index:1;left:103;top:103;color:red}span.level0{position:absolute;z-index:0;left:106;top:106;color:yellow}p.lev1{position:absolute;z-index:2;left:50;top:50;font-size:20pt;color:blue}p.lev2{position:absolute;z-index:-2;left:52;top:52;font-size:20pt;color:darkred}/style例5.619/headbodyspanclass=level2Web技术应用基础/spanspanclass=level1Web技术应用基础/spanspanclass=level0Web技术应用基础/spanpclass=lev1欢迎学习/spanpclass=lev2欢迎学习/span/body/html20CSS作业与实验完