预习5-flash63divcss第五课网站应用

官网：全国免费咨询热线：4006-553-664企业QQ：4006-553-664第五课：网站css应用主讲：（朱毅）第五课：网站css应用<一>CSS使用方式使用CSS控制页面有4种方式，分别为行内样式、内嵌式、链接式。

1.行内样式。直接写在HTML标签里，例如<divstyle="width:100px;height:100px;"></div>2.内嵌式。写在<style></style>中，例如

<styletype="text/css">div{width：100px;height:100px;}</style>3.链接式。使用频率最高，也最为实用，便于维护。例如

<linkhref="test.css"type="text/css"rel="stylesheet"/>rel即为relation的缩写，规定当前文档与被链接文档之间的关系，只有当rel为“stylesheet”时才能得到所有浏览器的支持，而其他值只能到部分的支持。优先级顺序为：行内样式>链接式>内嵌式第五课：网站css应用<二>CSS基本语法(1).CSS选择器

HTML中的标签的样式都是通过CSS选择器进行控制的，进而实现各种效果，有3中类别的选择器。

1.标签选择器。例如

div{width:100px;height:100px;}2.类别选择器。例如

.class1{color:red;}div.class2{color:blue;}3.ID选择器（页面唯一）。例如

#id1{color:black;}第五课：网站css应用(2).选择器的声明

选择器的声明可以有集体声明和嵌套声明。集体声明，例如

h1,h2,h3,h4{color:red;}

嵌套声明，例如

h1.class1{color:red;}表示h1标签下的所有class为class1的标签的字体为红色。

普通声明，例如.class1{color:red;}第五课：网站css应用(3).派生选择器通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在CSS1中，通过这种方式来应用规则的选择器被称为上下文选择器(contextualselectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在CSS2中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使HTML代码变得更加整洁。listrong{font-style:italic;font-weight:normal;}第五课：网站css应用(4).css继承样式子元素总是可以继承父元素的一些样式<pclass=“psty”><spanclass=“spansty”>这里显示展示内容</span></p><styletype=“text/css”>.pSty{font-size:14px;color:green;}.pSty.spansty{color:red;font-weight:bold;}</style>第五课：网站css应用我们在布局或者定义样式className的时候，遇到一些习惯的内容，总是害怕定义相同的className名称，如果碰巧遇到，这将直接导致我们所写的样式可能总是达不到我们想要的效果。定义私有className可以有效避免一部分误命名。<styletype=“text/css”>.news.hd{color:red;}.news.cont{color:red;}.cases.hd{color:green;}.cases.cont{color:green;}</style><divclass=“news”><divclass=“hd”></div><divclass=“cont”></div></div><divclass=“cases”><divclass=“hd”><