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