《网页设计与制作（HTML+CSS+JavaScript）》课件_CORE-06.ppt

CSS与HTML结合的方式HTML的内部定义利用class或id选择性定义：CLASS定义样式的使用html head titleclass定义样式的使用/title styletype=text/css !-- p.a1{font-family:华文楷体;color:#FF0000} *.a2{font-family:黑体;color:#00FF00} -- /style /head body pclass=a1此行文字为红色华文楷体/p h3class=a2此行文字为绿色黑体/h3 h3class=a1此行文字为浏览器默认/h3 /body/htmlCSS与HTML结合的方式HTML的外部定义以嵌入方式调用CSS文件：嵌入外部样式表htmlheadtitle嵌入外部样式表/title styletype=text/css!--@importurl(cs.css);--/style/headbodybgcolor=lightyellowcenterclass=text 欢迎光临i迅腾科技/i欢迎光临/centerbr/br/center imgsrc=images/top.jpg/center/body/htmlCSS与HTML结合的方式HTML的外部定义以链接方式调用CSS文件：链接外部样式表html head title链接外部样式表/title linktype=text/cssrel=stylesheethref=cs.css /head bodybgcolor=lightyellow centerclass=text欢迎光临i迅腾科技/i欢迎光临 /centerbrbr centerimgsrc=images/top.jpg /center /body/htmlCSS与HTML结合的方式CSS的调用顺序CSS的调用顺序htmlheadtitleCSS的调用顺序/titlelinktype=text/cssrel=stylesheethref=cs.cssstyletype=text/css!--@importurl(cs2.css);--/style/headbodybgcolor=lightyellowcenterclass=text欢迎光临i迅腾科技/i欢迎光临/centerbrbrcenterimgsrc=images/top.jpg/center/body/htmlCSS与HTML结合的方式CSS的继承性质标记中的包含继承：包含继承包含继承html head titleCSS的包含继承/title styletype=text/css !-- h1{color:blue} -- /style /head body h1欢迎光临i迅腾科技/i欢迎光临/h1 /body/htmlCSS与HTML结合的方式CSS的继承性质标记中的包含继承：定义冲突CSS的定义冲突html head titleCSS的定义冲突/title styletype=text/css !-- h1{color:blue} i{color:red} -- /style /head body h1欢迎光临i迅腾科技/i欢迎光临/h1 /body/htmlCSS与HTML结合的方式CSS的继承性质标记中的相互继承：标记中的相互继承htmlheadtitle标记中的相互继承/titlestyletype=text/css!--h1i{color:red} --/style/headbody i此为浏览器默认斜体文字样