HTML&CSS基础篇之十：CSS基础

来源：互联网发布：工资考勤软件验厂编辑：程序博客网时间：2024/05/20 11:51

代码：

body {    font-family: sans-serif;}h1, h2 {    color: gray;}h1 {    border-bottom: 1px solid black;}p {    color: maroon;}em {    font-family: serif;}p.greentea {    color: green;   }p.blueberry {    color: purple;}p.raspberry {    color: blue;}

CSS设计

CSS里面的每个语句包括一个场所（就像卧室），一个属性（就像窗帘或地毯）和一个提供给属性的样式（就如蓝色，或者一寸的瓷砖）。

使用CSS设计XHTML

p {    background-color:red;}

整个过程为规则
1. 选择你要添加样式的元素（场所） p元素
2. 指定所添加样式的属性（属性）background-color 属性
3. 在属性和它的值之间有一个冒号。red值前添加冒号
4. 最后添加一个分号。
5. 所有样式置于大括号内。

可以在每个CSS规则里添加若干属性和值。

p {    background-color: red;    border:1px solid gray;}

为什么需要CSS

为什么要用另一种语言定义这些样式，而不是XHTML呢，既然我们用XHTML编写元素，那为什么不直接用XHTML写样式呢？

CSS比XHTML更合适指定样式的信息。使用一个小的CSS部件，就能对XHTML的设计产生明显的效果。你还会发现CSS适合于处理多页面网页的样式。

引入CSS

在XHTML中引入CSS

<style type="text/css"></style>

在<head>元素里添加样式开始和结束标记。
在标记中添加CSS规则

若想为多一个元素写统一个规则，只需要选择符之间加逗号，如h1, h2。

给一个元素写多个规则的原则：
大体上，试着把元素之间共有的样式组合在一起，就如我们对<h1>和<h2>所做的那样，而把特定于一个元素的样式写在另一个规则里面，如给主标题添加下划线样式。

Q&A：

为什么不把每个元素分开设计？
如果把共有的样式结合在一起，如果要改动，只需要修改一个规则。如果把它们拆开，那你就不得不修改每一个规则，这样反而容易出错。
为什么不用已有的下划线样式，而用底部边框的方式加下划线
显示效果有区别，如果是底部边框，那么标题下的线将延伸到网页边沿，而下划线样式只在文本下方显示
下划线样式：属性 text-decoration 值underline。

选择符工作方式
CSS允许定义各种选择符来决定你的样式使用与哪些元素。
以页面XHTML的结构图为切入点。

提取XHTML中的CSS规则到单独的CSS样式表文件

在XHTML页面中引入外部样式表

<link rel="stylesheet" type="text/css" href="lounge.css">

link 使用link元素来链接外部信息

type=”text/css” 信息的类型是”text/css”也就是一个CSS样式表。

rel 指明XHTML文件和要链接的东西之间的关系。要链接到一个样式表，设置属性值为”stylesheet”

href 定位样式表，可以使用相对链接，也可以使用完整的URL

不再需要<style>元素了，删除掉
<link>是一个空元素

了解继承

当像”p”选择符添加font-family属性时，存在与<p>元素中的元素的字体也受到影响。

<p>中的元素从<p>元素继承了font-family样式
元素从它的父母那儿继承样式（不是所有样式都可以被继承，只是一部分，如字体）。
<a>,<em>元素继承了font-family样式，而<p>元素是它们的父亲。
通过XHTML树状结构了解继承如何起作用。将字体属性上移到body。

继承的覆盖

在子元素中提供一个具体的规则来覆盖它的继承属性。
例子：
font-family属性上移到了body从而设置了整个网页的字体。
但如果你不想子所有的元素中都使用sans-serif字体呢？比如，想在<em>元素中使用serif字体。
那就为<em>元素提供一个具体的规则来覆盖它继承的属性。

在CSS里，被应用的规则总是最具体的。因此，如果<body>元素由一个规则，<em>元素也有一个更具体的规则，那么浏览器一般会执行更加具体的规则。

那些CSS属性可被继承，哪些不能被继承！

大体上，
影响文本外观的样式：
字体颜色（颜色属性）
字体
还有其他和字体有关的属性：
字体大小
字体宽度
字体样式
都可以被继承

其他的属性（如边框）不被继承

很多情况下你可以根据自己的理解（或者验证一下），随着对各种属性的作用越来越熟悉，就能掌握这方面的知识。

注释

只需要在首尾分别添加/* 和 */
注意，一个注释可以跨越多行。你可以在CSS周围添加注释、而浏览器将忽略它。

类

比喻成俱乐部，如果加入了这个俱乐部，就可以获得相应的权利和责任。

<p class="greentea">      <img src="../images/green.jpg" alt="Green Tea Cooler" />      Chock full of vitamins and minerals, this elixir      combines the healthful benefits of green tea with      a twist of chamomile blossoms and ginger root.</p>

要把元素添加到一个类中，只需添加一个带有类名的“class”属性。

类的选择符

p.greentea {    color: green;   }

首先是P选择符
然后用一个”.”来指定一个类
最后是类的名称

p.greentea
这个选择符选择绿茶类里的所有段落

想要对所有<blockquote>进行相同的操作

blockquote.greentea, p.greentea {     color: green;}

只需要另一个选择符来处理绿茶类里的<blockquote>现在这个规则将适用于绿茶类里的<p>元素和<blockquote>元素。

在XHTML里，修改

<blockquote class="greentea">

想让greentea类里的所有元素拥有同一样式，

.greentea {    color: green;   }

省略所有的元素名称，而用一个句点并且后接一个类名，那么这个规则将会使用于该类内的所有成员。

一个元素可以加入多个类

定义一个属于greentea、raspberry、blueberry类的<p>元素
<p class="greentea raspberry blueberry">

将每个类名赋给”class”属性值，类名之间用一个空格隔开。顺序无关紧要。

如果想让一个元素拥有不同类中定义的样式，可以让它同时加入多个类。

比如现在的情形，与商品类关联的<h1>元素都有一个特定样式，但不是所有的产品都同时降价销售。在另一个类中设置了”specials”颜色，就可以很容易地把降价销售的商品添加到”specials”类中，使它们拥有你想要的红色。

样式应用的最快捷最小巧手册

如果一个元素属于多个类，而这些类定义的是相同的属性，那么那个类定义的属性会被应用呢？？？

首先，是否有选择符选择你的元素

假设你想知道一个元素的font-family属性值，你首先要核实的是：在你的CSS文件里是否有选择符选择你的元素？如果有，确定它有font-family属性和值，而这值就是用来修饰你的元素的。

那么继承呢？

如果没有选择符与你的元素匹配，那么你就得依赖继承了。观察该元素的父母，父母的父母，依次上推，直到你找到被定义的属性。如果你找到了，那就是你要找的值。还是没有找到？那么使用默认值。如果你的元素没有从你的任何祖先那里继承属性值，那么你将使用浏览器定义的默认值。事实上这种情况比我们现在描述得要复杂。

如果有多个选择符选择一个元素呢？
<p class="greentea raspberry blueberry">

多个选择符匹配一个元素并且都定义了同一属性，称为冲突。如果一个规则比其他的更具体，那它将胜出。确定一个选择符的具体性。

是否还没有一个明显的胜出者？

如果你让一个元素值属于greentea类，那么将有一个明显的胜出:p.greentea选择符是最具体的，因此文本将会是绿色。但如果你让一个元素属于所有的三个类：greentea, raspberry和blueberry。那么p.greentea、p.raspberry和p.blueberry都会选择这个元素，并且它们具有相同的具体性。现在该怎么办呢，选择CSS文件里最靠后的规则。如果因为两个选择符具有相同的具体性而无法解决冲突。可以使用你样式表里的规则排序来解决冲突。也就是，使用CSS文件里最靠近（最接近底部）的规则。而在上面的例子中将选择p.blueberry规则。

如果你的CSS有错误，通常错误后面的所有规则都会被忽略。因此，要通过做这个练习，养成检错的习惯。

CSS校验器

http://jigsaw.w3.org/css-validator/

CSS属性大杂烩

color 用来设置文本元素的字体颜色。

font-weight 这个属性用来控制文本的粗细，用它把文字加粗。

left 用它告诉元素如何放置它的左侧。

line-height 这个属性用来设置文本元素的行间距。

top 控制元素顶部的位置。

letter-spacing 这个属性用来设置字母之间的间距。

background-color 这个属性用来控制元素的背景颜色。

border 这个属性用来在元素周围加边框，可以设置成实心边框，虚线边框。

margin 如果想在元素的边缘和内容之间有一些空间。就用边界。

font-size 把文字变大或变小。

text-align 用这个属性让文本左对齐，右对齐或居中。

font-style 用这个属性得到斜体文本

list-style 这个属性用来设置列表项的样式。

background-image 用这个属性把一个图像放到元素后面。

要点

CSS中简单的表达式，称为规则。
每个规则为选定的XHTML元素提供样式。
一个典型的规则包括一个选择符、若干属性和属性值。
选择符指定对哪些元素应用规则。
每个属性声明以一个分号结束。
一个规则里的所有属性和属性值包含在括号{}之间。
你可以用元素名作为选择符来选择任意的元素。
你可以一次选择多个元素，只需要逗号把那些元素名隔开就可以了。
在HTML中引入一个样式的最简单的方法使用<style>标记。
你应当给XHTML和复杂的站点链接一个外部样式表。
<link>元素用来引入一个外部样式表。
许多属性可以被继承。举个例子，如果给<body>元素设置一个可被继承的属性，那么<body>的所有子孙元素将继承这个属性。
你可以给你要修改的元素创建一个更具体的规则，来覆盖继承的属性。
用class 属性将元素加入到一个类中。
在元素名和类名”.”来选择类里的某个元素。
用”.classname”来选择类里的所有元素。
一个元素可以属于多个类，只需要在class属性里放置许多类名，并用空格把它们隔开。
在http://jigsaw.w3.org/css-validator上，你可以用W3C验证器验证你的CSS。

整理自Head First HTML

阅读全文

0 0