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

CSS中简单的表达式，称为规则？ 每个规则为选定的HTML元素提供样式。 一个典型的规则包括一个选择符、若干属性和属性值。 选择符指定对哪些元素应用规则。 每个属性声明以一个分号结束。 一个规则里的所有属性和属性值包含在括号{}之间。 你可以用元素名作为选择符来选择任意元素。 你可以一次选择多个元素，只需要用逗号把那些元素名隔开就可以了。 在HTML中引入一个样式的最简单的方法是用style标记。 你应当给HTML和复杂的站点链接一个外部样式表。 link元素用来引入一个外部样式表。 许多属性可以被继承。 你可以给你要修改的元素创建一个更具体的规则，来覆盖继承的属性。 用Class属性将元素加入到一个类中。 在元素名和类名之间加“.”来选择类里的某个元素。 用“.classname”来选择类里的所有元素。 一个元素可以属于多个类，只需在class属性里放置许多类名，并用空格把它们隔开。 教师： Tel： 我们在装修房子 这是卧室的设计…… bedroom{ drapes:blue; carpet:wool shag; } 浴室也需要好好设计一下 bathroom{ tile:line white; drapes:pink; } p{ background-color:red; } 你要做的第一件事是选择你要添加样式的元素，比如p元素。注意，在CSS中，元素名称的两边不加。 接着你应指定你所添加样式的属性，比如说p元素的背景颜色。 你要将背景颜色设置为红色。 将p元素的所有样式置于{ } 内。 在属性和它的值之间有一个冒号。 最后加一个分号。 我们称整个过程为一个规则。 p{ background-color:red; border: 1px solid gray; } p元素将有一个边框。 ……宽度为一个像素，实绩，灰色。 你要做的就是再添加一个属性并给它赋值。 每一个p元素都拥有相同的样式吗？或者说，我可以把两个段落设置成不同的颜色吗？ 可以在一个元素上设置什么属性呢？ 为什么要用另一种语言定义这些样式，而不用HTML呢？既然我们用HTML编写元素，那为什么不直接用HTML写样式呢？ !doctype html html head titleHead First Lounge/title style /style /head body ...... /body /html 为了在HTML中直接添加CSS样式，必须在head元素里添加样式开始和结束标记：style/style。 你的CSS规则放在这个位置。 style p{ color:maroon; } /style 用来改变字体颜色的属性称为 “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; } 这个样式适用于选择符(此时，为h1元素)选择的元素。 另一个选择符，这个样式适用于h1元素和h2元素。 h1, h2 { font-family: sans-serif; color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; } 你的“loung.css”文件应该像这样，记住，没有style标记。 html head titleHead