5CSS第一课-添加一些样式ppt课件

1、*开始学习开始学习CSS教师：我们在装修房子这是卧室的设计bedroom drapes:blue; carpet:wool shag;浴室也需要好好设计一下bathroom tile:line white; drapes:pink;*使用使用CSSCSS设计设计HTMLHTML：pbackground-color:red;你要做的第一件事是选择你要添加你要做的第一件事是选择你要添加样式的元素，比如样式的元素，比如元素。留意，元素。留意，在在CSSCSS中，元素名称的两边不加中，元素名称的两边不加。接着你应指定你所添加样式的属性，接着你应指定你所添加样式的属性，比如说比如说元素的背景颜色。元素的

2、背景颜色。你要将背景颜色你要将背景颜色设置为红色。设置为红色。将将元素的所有元素的所有样式置于样式置于 内。内。在属性和它的值在属性和它的值之间有一个冒号。之间有一个冒号。最后加一个分号。最后加一个分号。我们称整个过程我们称整个过程为一个规则。为一个规则。*添加更多样式添加更多样式p background-color:red;border: 1px solid gray;元素将有一个元素将有一个边框。边框。宽度为一个像素，宽度为一个像素，实绩，灰色。实绩，灰色。你要做的就是再添加你要做的就是再添加一个属性并给它赋值。一个属性并给它赋值。*问题：问题：*每一个元素都拥有相同的样式吗？或者说，我可

3、以把两个段落设置成不同的颜色吗？*可以在一个元素上设置什么属性呢？*为什么要用另一种语言定义这些样式，而不用HTML呢？既然我们用HTML编写元素，那为什么不直接用HTML写样式呢？*在你的在你的HTMLHTML中引入中引入CSSCSSHead First Lounge.为了在为了在HTMLHTML中直接添加中直接添加CSSCSS样式，必样式，必须在须在元素里添加样式开始和元素里添加样式开始和结束标记：结束标记：。你的你的CSSCSS规则放在这个位置。规则放在这个位置。*给茶馆网站添加样式给茶馆网站添加样式 p color:maroon; 用来改变字体颜色的属性称为用来改变字体颜色的属性称为

4、“color”“color”（你也许认为应该是（你也许认为应该是 “font-color“font-color或或“text-color”“text-color”，但它不是）。但它不是）。在你的HTML中引入CSS*为标题添加样式为标题添加样式h1 font-family:sans-serif; color: gray;h2 font-family:sans-serif; color: gray;若想要为多个元素写同一个规则，若想要为多个元素写同一个规则，只需要在选择符之间加逗号，如只需要在选择符之间加逗号，如“h1,h2”“h1,h2”。h1,h2 font-family:sans-seri

5、f; color: gray;p color:maroon;p color:maroon;*给欢迎词下划线给欢迎词下划线 border-bottom:1px solid black;我们将把下划设置成我们将把下划设置成1 1像素宽的像素宽的黑线实体。黑线实体。*指定只针对指定只针对的规则的规则h1,h2 font-family:sans-serif; color:gray;h1 border-bottom:1px solid black;p color:maroon;第一个规则指定第一个规则指定h1h1、h2h2的共同属性。的共同属性。第二个规则只给第二个规则只给h1h1添加另一个属性。添加另

6、一个属性。*问题：问题：*这种方法的优点是什么呢？对每个元素分开设计，不是更利于我们区分各个元素的样式吗？*选择符选择符我们称之为选择符。我们称之为选择符。h1 color:gray;h1,h2 color:gray;这个样式适用于选这个样式适用于选择符择符( (此时，为此时，为元素元素) )选择的元素。选择的元素。另一个选择符，这个样式适用于另一个选择符，这个样式适用于元素和元素和元素。元素。*创建创建CSSCSS文件文件h1, h2 font-family: sans-serif; color: gray;h1 border-bottom: 1px solid black;p color:

7、 maroon;你的你的“loung.css“loung.css文件应该像这样，文件应该像这样，记住，没有记住，没有标志。标志。*把把“lounge.html“lounge.html链接到外部样式表链接到外部样式表 Head First Lounge .这是链接到外部样这是链接到外部样式表的式表的HTMLHTML。这里不需要这里不需要元元素了，已经被删除。素了，已经被删除。*链接外部样式表语法链接外部样式表语法使用使用linklink元素来链元素来链接外部信息。接外部信息。relrel属性指明属性指明HTMLHTML文件和你要链接的东西之文件和你要链接的东西之间的关系，我们要链接到一个样式表，

8、因间的关系，我们要链接到一个样式表，因此我们将属性值设为此我们将属性值设为“stylesheet”“stylesheet”。信息类型是信息类型是“text/css”,“text/css”,也就是一个样式表。也就是一个样式表。样式表定位于一个样式表定位于一个hrefhref现在我们使用的是相对现在我们使用的是相对链接，但它可以是一个完链接，但它可以是一个完整的整的URLURL）。）。LinkLink是一个空元素。是一个空元素。*把其它两个文件链接到外部样式表把其它两个文件链接到外部样式表注意相对路径的书写。*了解继承了解继承留意，当我们向元素添加 font-faminly属性时，存在于元素中的元

9、素的字体也会受到影响。中的元素从元素继承了 font-family样式。如果没有继承，你将不得不为整个网站里所有段落的每个行内元素添加CSS规则。*继承是如何起作用的继承是如何起作用的如果我们设置所有元素字体，这里可以看到所有受它影响的元素。*如果我们把字体属性上移会有什么结果？如果我们把字体属性上移会有什么结果？我们把字体属性从段落和我们把字体属性从段落和标题移到标题移到元素。元素。*继承的覆盖继承的覆盖通过把font-family属性上移到body从而设置了整个网页的字体。但如果你不想在所有的元素中都使用sans-serif字体呢？比如你想在元素中使用serif字体。但你想要在但你想要在元

10、素中使用元素中使用serifserif字体。你必须用字体。你必须用CSSCSS规规则来覆盖继承属性。则来覆盖继承属性。body font-family: sans-serif;h1, h2 color: gray;h1 border-bottom: 1px solid black;p color: maroon;em font-family: serif;*问题：问题：*当我覆盖继承时，浏览器如何知道应该对元素执行哪一条规则？*我如何知道哪些CSS属性可被继承，哪些不能被继承呢？*CSS里可以写注释吗？*类类要把元素添加到一个类中，只需添加要把元素添加到一个类中，只需添加一个带有类名如一个带有

11、类名如“greentea”“greentea”）的）的“class“class属性。属性。*创建类选择符创建类选择符首先是首先是p p选择选择符。符。然后一个然后一个“.”“.”来指定一个类。来指定一个类。最后是类的最后是类的名称。名称。这是规则这是规则将绿茶将绿茶类里所有段落的文本类里所有段落的文本设置为绿色设置为绿色这个选择符选择绿这个选择符选择绿茶类里的所有段落。茶类里的所有段落。*进一步了解类进一步了解类只需添加另一个选择符来处理绿只需添加另一个选择符来处理绿茶类里的茶类里的。现在这。现在这个规则将适用于绿茶类里的个规则将适用于绿茶类里的元素和元素和元素元素如果你省略所有的元素名称，而

12、如果你省略所有的元素名称，而用一个句点并且后接一个类名，用一个句点并且后接一个类名，那么这个规则将会适用于该类内那么这个规则将会适用于该类内的所有成员。的所有成员。*一个元素可以加入多个类一个元素可以加入多个类将每个类名赋给将每个类名赋给“class“class属性值，属性值，类名之间用一个空类名之间用一个空格隔开。顺序无关格隔开。顺序无关紧要。紧要。*应用样式的原则应用样式的原则*首先，是否有选择符选择你的元素。首先，是否有选择符选择你的元素。*其次，继承来的属性。其次，继承来的属性。*还是没有找到，那么使用默认值。还是没有找到，那么使用默认值。*如果有多个选择符选择一个元素呢？如果有多个选

13、择符选择一个元素呢？*我们称之为我们称之为“冲突冲突”。哪个规则能胜出呢？如果。哪个规则能胜出呢？如果一个规则比另一个规则更具体，那它将胜出。一个规则比另一个规则更具体，那它将胜出。*如果还是无法确定，则用最靠后的规则起作用。如果还是无法确定，则用最靠后的规则起作用。*举例举例这是选择所有段落元素的规则。这是选择所有段落元素的规则。这条规则选择了绿茶类这条规则选择了绿茶类的所有成员。此规则比的所有成员。此规则比前一条稍微具体点。前一条稍微具体点。这条规则只选择了绿茶类这条规则只选择了绿茶类的段落。比前一条更具体。的段落。比前一条更具体。这些规则只选择了某个特这些规则只选择了某个特定类里的段落。因此它们定类里的段落。因此它们的具体性与的具体性与p.greenteap.greentea相相同。同。发生冲突时，如果规则的具体性发生冲突时，如果规则的具体性相同，最靠后的规则起作用。相同，最靠后的规则起作用。*要点：要点：*CSS中简单的表达式，称为规则？*每个规则为选定的HTML元素提供样式。*一个典型的规则包括一个选择符、若干属性和属性值。*选择符指定对哪些元素应用规则。*每个属性声明以一个分号结束。*一个规则里的所有属性和属性值包含在括号之间。*你可以用元素名作为选择符来选择任意元素。*你可以一次选择多个元素，只需要用逗号把那些元素名隔开就可以了。*在HTM