2. 使用层叠当有多个样式表时, 有一个层次来定义将这些样式表应用到 (X)HTML 的顺序同时, 针对不同的应用方法, 同样存在一个顺序, 这个顺序就是层叠下 : 对于应用 CSS 的不同方法内联内嵌外部和导入, 其层叠顺序描述如浏览器首先执行内联规则, 然后执行所有的内嵌规则,

Size: px

Start display at page:

Download "2. 使用层叠当有多个样式表时, 有一个层次来定义将这些样式表应用到 (X)HTML 的顺序同时, 针对不同的应用方法, 同样存在一个顺序, 这个顺序就是层叠下 : 对于应用 CSS 的不同方法内联内嵌外部和导入, 其层叠顺序描述如浏览器首先执行内联规则, 然后执行所有的内嵌规则,"

仇案项
5 years ago
Views:

1 2. 使用层叠当有多个样式表时, 有一个层次来定义将这些样式表应用到 (X)HTML 的顺序同时, 针对不同的应用方法, 同样存在一个顺序, 这个顺序就是层叠下 : 对于应用 CSS 的不同方法内联内嵌外部和导入, 其层叠顺序描述如浏览器首先执行内联规则, 然后执行所有的内嵌规则, 最后再查找外部文件来完全理解所创建的 CSS 另外一种层叠的方法是使用多个外部样式表,eg. <link rel= stylesheet media= screen type= text/css href= one.css /> <link rel= stylesheet media= screen type= text/css href= two.css /> <link rel= stylesheet media= screen type= text/css href= three.css /> 浏览器认为最后一个样式表最为重要, 并且优先执行它所包含的所有规则层次性也体现在导入样式表上它与样式表给定的顺序相关,eg:

2 @import url( default.css url( layout.css url( navigation.css url( forms.css ) 在该例中,forms.css 在层次上是最高,default.css 显然最低注意 : 导入, 那么在层次上, 它将自动处于较低层, 简单地说, 一个样式表总是比调用它的样式表级别更低处于层叠层次最底层的样式表是浏览器自己的默认样式表 3. 分组另一个创建具有良好组织结构 CSS 所需遵守的关键原则是分组 Eg: h1, h2, h3 { font-family: Helvetica, Arial, sans-serif; line-height: 140%; color: #333;

3 如果想让这些标题中的某一个有点小差别的话, 可用如下方法 : h1 { font-style: itatic; 4. 继承继承 (inheritance) 主要描述 (X)HTML 元素从它的父元素继承样式属性的情况如果没有为子元素定义特定的 CSS, 那么在某些情况下, 子元素将继承赋予父元素的特定 CSS 值这些地方 CSS 是层叠的, 因此 (X)HTML 可以继承 Eg. /* Top-level heading*/ h1 { color: #333; 下面来看一段对应的 (X)HTML 代码 : <h1>hello, <em> 阿蜜果 </em></h1> 样式若没有给 <em> 元素定义相应的 CSS 规则, 那么它将从 <h1> 元素中继承

4 在正规的 CSS 设计中, 主样式表都以 <body> 元素声明开始 <body> 元素不仅仅是结构良好的 (X)HTML 文件所必须的, 它同时还是模板中所有可视元素的父元素因此, 每个元素都可以从它继承相关信息 Eg: body { margin: 10px; font-family: Helvetica, Arial, sans-serif; background: #CCC; color: #000; 如果没有特殊给定,CSS 中的其他规则都将继承这些值 5. 上下文选择器上下文选择器 (contextual selector) 由两个或多个更多的选择器组成, 这些选择器之间以空格隔开 Eg: h1 em { color: #F00;

5 上面所构造的上下文选择器表明, 该规则只有当最后一个选择器 (em) 是第一个选择器 (h1) 的直接后代时才起作用 6. CSS 度量 CSS 规则可以控制文本的高度文本的间距边框的宽度以及元素之间的间隔等所有这些都需要定义相应的度量机制 CSS 提供了两套度量机制绝对 (absolute) 和相对 (relative) 前者试图固化设计, 而后者使得用户或者浏览设备能够控制网页 1) 绝对度量绝对值是一个固定的特定单位它能够精确地控制网页的显示绝对单位信息如下 : 单位描述 in cm mm pt pc 绝对单位英寸绝对单位厘米绝对单位毫米绝对单位磅,1 磅等于 1/72 英寸绝对单位 pica,1pica 等于 12 磅, 等于 1/6 英寸事实上, 几乎所有的日常的 CSS 设计, 都不需要绝对度量也照样能正常工作因此, 我们可以直接跳到更有意义的相对度量机制

6 2) 相对度量相对度量没有固定的特定值, 相反, 它们是和继承到的值进行比较后, 通过计算得到如下表所示 : 单位描述 % 相对于另一个值的百分比的单位 ex 相对于 x 高度的单位, 由该字体的小写字母 x 的高度决定 em px 相对于元素字体的高度在屏幕上, 相对度量的像素单位虽然相对度量不允许设计人员实施很多的绝对控制, 但是它们为终端用户创造了更好的体验 3) 像素像素 (pixel) 为用户布局提供了最好的控制基于像素控制文本大小能够提供跨越大多数终端设备的一致性 IE/Win 用户不能使用浏览器中重新设置大小的工具来重新设置用像素描述的文本的大小为了确保所有的终端用户能够基于自己的浏览器偏好来浏览网页, 强烈建议使用 em 单位来声明字号 4) 百分比

7 百分比值总是相对于另外一个值而言的, 如父元素的宽和高等换言之, 百分比只能声明为和前面的规则已经定义的尺寸相关, 或者是和浏览器窗口相关的尺寸需要注意的是, 使用百分比时, 集成将会带来麻烦, 由于像素和 em 保留了一些控制, 通过浏览器计算的百分比值的结果将与你所期望的有所不同 5)em 在 CSS 中, 由于最具灵活性,em 是最容易被错误理解的相对度量它非常适用于终端用户的浏览设备和文本偏好难以预测的设计原则 em 是传统的印刷单位,em 使得样式表具有可伸缩性和传统印刷中的 em 不一样,CSS 的 em 几乎可以用来定义所有的 CSS 属性的长度 em 是等于一个打印字号的单位因此, 在给定的元素中, 字号设为 11 像素, 那么 1em 就等于 11 像素 ; 如果在另外一个元素中字号为 30 像素, 那么 1em 就等于 30 像素下面再来看一个例子 : body { font-family: Helvetica, Arial, sans-serif; font-size: 0.8em; color: #000;

8 CSS 构造块 1.div 部分 (division) <div> 元素, 经常以 div 形式引用是 (X)HTML 的元素, 用于定义 (X)HTML 文件中的区域你可以让 div 包含任何在页面 <body> 部分的一些额外元素, 如文本图形等实际上, 这些元素可以是任何元素, 甚至一些不同区域中的特殊元素, 如页眉页脚导航栏等 Eg. 在 HTML 中构造一个 div 元素 : <div id= container > <p> 这是我们的内容区域 </p> </div> 为 id 为 container 的 div 元素添加 CSS 样式代码如下例 : padding: 20px; border: 1px solid #000; background: #CCC;

9 下面让我们来看一个添加子 div 的例子 : <div id= container > <p> 这是我们的内容区域 </p> <div class= box > <p> 我在盒子中!<p> </div> <div class= box > <p> 我也在盒子中!<p> </div> </div> 定义 box 类的样式如下 :.box { margin: 10px; padding: 20px;

10 border: 1px solid #000; 2. 维度 : 宽度和高度设定值可以使长度百分比或 auto 所有这些值会受到样式表里其他规则的负面影响, 也受到 (X)HTML 中它们包含的元素的影响例如,margin padding border 或者自元素都可能对结果产生连锁反应 3. 外边距外边距 (margin) 属性的功能正如它本身表示的意义, 用于设定 (X)HTML 元素和它外部的元素之间的外边距外边距属性可以为给定的元素设定上外边距下外边距左外边距和右外边距四个属性注意外边距值不从父元素中继承下面来看一个外边距 CSS 定义的例子 : width: 300px; margin-top: 20px; margin-left: auto; margin-right: auto; margin-bottom: 1em;

11 border: 1px solid #000; padding: 20px; background: #CCC; 对外边距可缩写成如下 : margin: 20px auto 1em auto; 属性值的排列顺序为 : 上外边距右外边距下外边距左外边距 CSS 中将元素居中的最好的方法是把元素恶左右外边距属性值设定为 auto 对于常用的浏览器, 这只需要设定 width 规则, 左外边距话和右外边距都为给定的 auto 值 4. 内边距内边距 (padding) 是 (X)HTML 元素的边框与元素之间的距离, 适用于任何元素 Eg.

12 width: 300px; padding-top: 20px; padding-left: 10% padding-right: 1em; padding-bottom: 0; background: #CCC; 可以将它缩写成如下代码 : padding: 20px 1em 0 10%; 与 margin 属性一样, 数值的排列顺序为 : 上右下和左下面来讨论一下 :border-width border-top-width border-right-width border-bottom-width 和 border-left-width Eg.

13 width: 400px; margin: 10px auto 10px auto; padding: 20px; border-style: dashed dotted solid ridge; border-top-width: thin; border-right-width: 20px; border-bottom-width: medium; border-left-width: thick; 设置边框颜色的属性设置如下 : border-color: #000 #999 #333 #CCC; 用 border border-top border-right border-bottom 和 border-left 属性可以将给定的 border-style border-width 和 border-color 属性的值集中到一个属性中,eg.

14 width: 400px; margin: 10px auto 10px auto; padding: 20px; border-top: #000 thin dashed; border-right: #999 20px dotted; border-bottom: #333 medium solid; border-left: #CCC thick ridge; ***

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05