CSS第一课-添加一些样式.ppt

,开始学习CSS,教师： Tel：,我们在装修房子,这是卧室的设计 bedroom drapes:blue; carpet:wool shag; ,浴室也需要好好设计一下 bathroom tile:line white; drapes:pink; ,使用CSS设计HTML：,p background-color:red; ,你要做的第一件事是选择你要添加样式的元素，比如元素。注意，在CSS中，元素名称的两边不加。,接着你应指定你所添加样式的属性，比如说元素的背景颜色。,你要将背景颜色设置为红色。,将元素的所有样式置于 内。,在属性和它的值之间有一个冒号。,最后加一个分号。,我们称整个过程为一个规则。,添加更多样式,p background-color:red; border: 1px solid gray; ,元素将有一个边框。,宽度为一个像素，实绩，灰色。,你要做的就是再添加一个属性并给它赋值。,问题：,每一个元素都拥有相同的样式吗？或者说，我可以把两个段落设置成不同的颜色吗？ 可以在一个元素上设置什么属性呢？ 为什么要用另一种语言定义这些样式，而不用HTML呢？既然我们用HTML编写元素，那为什么不直接用HTML写样式呢？,在你的HTML中引入CSS, Head First Lounge ,为了在HTML中直接添加CSS样式，必须在元素里添加样式开始和结束标记：。,你的CSS规则放在这个位置。,给茶馆网站添加样式, p color:maroon; ,用来改变字体颜色的属性称为 “color”（你也许认为应该是 “font-color”或“text-color”，但它不是）。,在你的HTML中引入CSS,为标题添加样式,h1 font-family:sans-serif; color: gray; h2 font-family:sans-serif; color: gray; ,若想要为多个元素写同一个规则，只需要在选择符之间加逗号，如“h1,h2”。,h1,h2 font-family:sans-serif; color: gray; ,p color:maroon; ,p color:maroon; ,给欢迎词下划线,border-bottom:1px solid black;,我们将把下划设置成1像素宽的黑线实体。,指定只针对的规则,h1,h2 font-family:sans-serif; color:gray; h1 border-bottom:1px solid black; p color:maroon; ,第一个规则指定h1、h2的共同属性。,第二个规则只给h1添加另一个属性。,问题：,这种方法的优点是什么呢？对每个元素分开设计，不是更利于我们区分各个元素的样式吗？,选择符,我们称之为选择符。,h1 color:gray; h1,h2 color:gray; ,这个样式适用于选择符(此时，为元素)选择的元素。,另一个选择符，这个样式适用于元素和元素。,创建CSS文件,h1, h2 font-family: sans-serif; color: gray; h1 border-bottom: 1px solid black; p color: maroon; ,你的“loung.css”文件应该像这样，记住，没有标记。,把“lounge.html”链接到外部样式表, Head First Lounge . . . ,这是链接到外部样式表的HTML。,这里不需要元素了，已经被删除。,链接外部样式表语法,使用link元素来链接外部信息。,rel属性指明HTML文件和你要链接的东西之间的关系，我们要链接到一个样式表，因此我们将属性值设为“stylesheet”。,信息类型是“text/css”,也就是一个样式表。,样式表定位于一个href（现在我们使用的是相对链接，但它可以是一个完整的URL）。,Link是一个空元素。,把其它两个文件链接到外部样式表,注意相对路径的书写。,了解继承,注意，当我们向元素添加 font-faminly属性时，存在于元素中的元素的字体也会受到影响。,中的元素从元素继承了 font-family样式。,如果没有继承，你将不得不为整个网站里所有段落的每个行内元素添加CSS规则。,继承是如何起作用的,如果我们设置所有元素字体，这里可以看到所有受它影响的元素。,如果我们把字体属性上移会有什么结果？,我们把字体属性从段落和标题移到元素。,继承的覆盖,通过把font-family属性上移到body从而设置了整个网页的字体。但如果你不想在所有的元素中都使用sans-serif字体呢？比如你想在元素中使用serif字体。,但你想要在元素中使用serif字体。你必须用CSS规则来覆盖继承属性。,body font-family: sans-serif; h1, h2 color: gray; h1 border-bottom: 1px solid black; p color: maroon; ,em font-family: serif; ,问题：,当我覆盖继承时，浏览器如何知道应该对元素执行哪一条规则？ 我如何知道哪些CSS属性可被继承，哪些不能被继承呢？ CSS里可以写注释吗？,类,要把元素添加到一个类中，只需添加一个带有类名（如“greentea”）的“class”属性。,创建类选择符,首先是p选择符。,然后一个“.”来指定一个类。,最后是类的名称。,这是规则将绿茶类里所有段落的文本设置为绿色,这个选择符选择绿茶类里的所有段落。,进一步了解类,只需添加另一个选择符来处理绿茶类里的。现在这个规则将适用于绿茶类里的元素和元素,如果你省略所有的元素名称，而用一个句点并且后接一个类名，那么这个规则将会适用于该类内的所有成员。,一个元素可以加入多个类,将每个类名赋给“class”属性值，类名之间用一个空格隔开。顺序无关紧要。,应用样式的原则,首先，是否有选择符选择你的元素。 其次，继承来的属性。 还是没有找到，那么使用默认值。 如果有多个选择符选择一个元素呢？ 我们称之为“冲突”。哪个规则能胜出呢？如果一个规则比另一个规则更具体，那它将胜出。 如果还是无法确定，则用最靠后的规则起作用。,举例,这是选择所有段落元素的规则。,这条规则选择了绿茶类的所有成员。此规则比前一条稍微具体点。,这条规则只选择了绿茶类的段落。比前一条更具体。,这些规则只选择了某个特定类里的段落。因此它们的具体性与p.greentea相同。,发生冲突时，如果规则的具体性相同，最靠后的规则起作用。,要点：,CSS中简单的表达式，称为规则？ 每个规则为选定的HTML元素提供样式。 一个典型的规则包括一个选择符、若干属性和属性值。 选择符指定对哪些元素应用规则。 每个属性声明以一个分号结束。 一个规则里的所有属性和属性值包含在括号之间。 你可以用元素名作为选择符来选择任意元素。 你可以一次选择多个元素，只需要用逗号把那些元素名隔开就可以了。 在HTML中引入一个样式的最简单的方法是用标记。 你应当给HTML和复杂的站点链接一个外部样式表。 元素用来引入一个外部样式表。 许多