CSS 学习笔记

• CSS：Cascading Style Sheets，层叠样式表。
• 样式定义如何显示 HTML 元素，样式通常存储在样式表中。把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题。
• 外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。
• 样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

 

• CSS规则：由选择器，以及一条或多条声明组成。
  selector {declaration1; declaration2; ... declarationN }
• 选择器：选择器通常是需要改变样式的 HTML 元素。
• 声明：每条声明由一个属性和一个值组成。属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

 

• 除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：
  p { color: #ff0000; }
  
  为了节约字节，我们可以使用 CSS 的缩写形式：
  p { color: #f00; }
  
  我们还可以通过两种方法使用 RGB 值：
  p { color: rgb(255,0,0); }
  p { color: rgb(100%,0%,0%); }
• 如果值为若干单词，则要给值加引号。
• 如果要定义不止一个声明，则需要用分号将每个声明分开。最后一条规则是不需要加分号的。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。
• 你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：
  p {
    text-align: center;
    color: black;
    font-family: arial;
  }
• CSS 对大小写和空格不敏感。不过存在例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。不要在属性值与单位之间留有空格。

 

• 你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。
  在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。
  h1,h2,h3,h4,h5,h6 {
    color: green;
  }
• 分组提供了一些有意思的选择。例如，下例中的所有规则分组都是等价的，每个组只是展示了对选择器和声明分组的不同方法：
  /* group 1 */
  h1 {color:silver; background:white;}
  h2 {color:silver; background:gray;}
  h3 {color:white; background:gray;}
  h4 {color:silver; background:white;}
  b {color:gray; background:white;}
  
  /* group 2 */
  h1, h2, h4 {color:silver;}
  h2, h3 {background:gray;}
  h1, h4, b {background:white;}
  h3 {color:white;}
  b {color:gray;}
  
  /* group 3 */
  h1, h4 {color:silver; background:white;}
  h2 {color:silver;}
  h3 {color:white;}
  h2, h3 {background:gray;}
  b {color:gray; background:white;}

 

• 派生选择器：通过依据元素在其位置的上下文关系来定义样式。
• 在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器。
• 例如：
  比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
  li strong {
      font-style: italic;
      font-weight: normal;
  }
  
  请注意标记为 <strong> 的蓝色代码的上下文关系：
  <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
  <ol>
  <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
  <li>我是正常的字体。</li>
  </ol>

 

• id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。
• 例如：
  下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
  #red {color:red;}
  #green {color:green;}
  
  下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
  <p id="red">这个段落是红色。</p>
  <p id="green">这个段落是绿色。</p>
• 在现代布局中，id 选择器常常用于建立派生选择器。
  即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：
  #sidebar p {
      font-style: italic;
      text-align: right;
      margin-top: 0.5em;
      }
  #sidebar h2 {
      font-size: 1em;
      font-weight: normal;
      font-style: italic;
      margin: 0;
      line-height: 1.5;
      text-align: right;
      }
  在这里，与页面中的其他 p 元素明显不同的是，sidebar 内的 p 元素得到了特殊的处理，同时，与页面中其他所有 h2 元素明显不同的是，sidebar 中的 h2 元素也得到了不同的特殊处理。

 

• 类选择器：
  下面表示所有拥有 center 类的 HTML 元素均为居中。
  .center {text-align: center}
  
  在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
  
  <h1 class="center">
  This heading will be center-aligned
  </h1>
  
  <p class="center">
  This paragraph will also be center-aligned.
  </p>
• 和 id 一样，class 也可被用作派生选择器。
• CSS 多类选择器：在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：
  <p class="important warning">
  This paragraph is a very important warning.
  </p>
  这两个词的顺序无关紧要，写成 warning important 也可以。
  
  我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作：
  .important {font-weight:bold;}
  .warning {font-style:italic;}
  .important.warning {background:silver;}

 

• 类选择器还是 ID 选择器？
  在类选择器这一章中我们曾讲解过，可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素，而且它还可以应用到更多元素。
  ①只能在文档中使用一次：与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
  ②不能使用 ID 词列表：不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
  ③ID 能包含更多含义：类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。

 

• 外部样式表：
  当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：
  <head>
  <link rel="stylesheet" type="text/css" href="mystyle.css" />
  </head>
  
  浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
  外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
• 内部样式表：
  当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。
• 多重样式：
  如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
  
  例如，外部样式表拥有针对 h3 选择器的三个属性：
  h3 {|
    color: red;
    text-align: left;
    font-size: 8pt;
    }
  而内部样式表拥有针对 h3 选择器的两个属性：
  h3 {
    text-align: right; 
    font-size: 20pt;
    }
  假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
  color: red; 
  text-align: right; 
  font-size: 20pt;

 

• CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
• 背景色：可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
• 背景图像：要把图像放入背景，需要使用 background-image 属性。该属性的默认值是 none，表示背景上没有放置任何图像。
  如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
  body {background-image: url(/i/eg_bg_04.gif);}
• 背景重复：如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
  属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
• 背景定位：可以利用 background-position 属性改变图像在背景中的位置。
  background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
• 背景关联：如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。可以通过 background-attachment 属性防止这种滚动。
  通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响。
  background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。

 

• CSS 文本属性可定义文本的外观。通过文本属性，可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
• 缩进文本：把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。
  CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。
  通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
• 水平对齐：text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。
  值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。justify是两端对齐。
• 字间隔：word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
  word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近。
  字母间隔：letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
• 字符转换：text-transform 属性处理文本的大小写。这个属性有 4 个值：none、uppercase、lowercase、capitalize
  默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。
• 文本装饰：text-decoration 属性有 5 个值：none、underline、overline、line-through、blink
  underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。
  none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。

 

• CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。
• CSS 字体系列
  
  在 CSS 中，有两种不同类型的字体系列名称：
  通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
  特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）
  
  除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：
  Serif 字体、Sans-serif 字体、Monospace 字体、Cursive 字体、Fantasy 字体
• 字体风格：font-style 属性最常用于规定斜体文本。
  该属性有三个值：
  normal - 文本正常显示
  italic - 文本斜体显示
  oblique - 文本倾斜显示
• 字体变形：font-variant 属性可以设定小型大写字母。
  小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。
• 字体加粗：font-weight 属性设置文本的粗细。
  使用 bold 关键字可以将文本设置为粗体。
  关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
  如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。
• 字体大小：font-size 属性设置文本的大小。
  有能力管理文本的大小在 web 设计领域很重要。但是，不应当通过调整文本大小使段落看上去像标题，或者使标题看上去像段落。
• font-size 值可以是绝对或相对值。
  ①绝对值：
  将文本设置为指定的大小
  不允许用户在所有浏览器中改变文本大小（不利于可用性）
  绝对大小在确定了输出的物理尺寸时很有用
  ②相对大小：
  相对于周围的元素来设置大小
  允许用户在浏览器改变文本大小
• 设置链接的样式：能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
  链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
  链接的四种状态：
  a:link - 普通的、未被访问的链接
  a:visited - 用户已访问的链接
  a:hover - 鼠标指针位于链接的上方
  a:active - 链接被点击的时刻

 

• 表格边框：如需在 CSS 中设置表格边框，请使用 border 属性。
  下面的例子为 table、th 以及 td 设置了蓝色边框：
  table, th, td
  {
    border: 1px solid blue;
  }
• 折叠边框：border-collapse 属性设置是否将表格边框折叠为单一边框：
  table
  {
    border-collapse:collapse;
  }
  table,th, td
  {
    border: 1px solid black;
  }
• 表格宽度和高度：通过 width 和 height 属性定义表格的宽度和高度。
  下面的例子将表格宽度设置为 100%，同时将 th 元素的高度设置为 50px：
  table
  {
    width:100%;
  }
  th
  {
    height:50px;
  }
• 表格文本对齐：text-align 和 vertical-align 属性设置表格中文本的对齐方式。
  text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中：
  td
  {
    text-align:right;
  }

   

• 表格内边距：如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：
  td
  {
      padding:15px;
  }
• 表格颜色：下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色：
  table, td, th
  {
    border:1px solid green;
  }
  th
  {
    background-color:green;
    color:white;
  }

 

• CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
• CSS框模型：元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
  
• element : 元素。
  padding : 内边距，也有资料将其翻译为填充。
  border : 边框。
  margin : 外边距，也有资料将其翻译为空白或空白边。
• CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
  
  例如，如果希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：
  h1 {padding: 10px;}
  
  还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值（百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变）：
  h1 {padding: 10px 0.25em 2ex 20%;}
• 也可以通过使用下面四个单独的属性，分别设置上、右、下、左内边距：padding-top、padding-right、padding-bottom、padding-left
• 元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许你规定元素边框的样式、宽度和颜色。
• CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。

  值	描述
  none	定义无边框。
  hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
  dotted	定义点状边框。在大多数浏览器中呈现为实线。
  dashed	定义虚线。在大多数浏览器中呈现为实线。
  solid	定义实线。
  double	定义双线。双线的宽度等于 border-width 的值。
  groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
  ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
  inset	定义 3D inset 边框。其效果取决于 border-color 的值。
  outset	定义 3D outset 边框。其效果取决于 border-color 的值。
  inherit	规定应该从父元素继承边框样式。

  例如，可以为把一幅图片的边框定义为 outset，使之看上去像是“凸起按钮”。
• 可以为一个边框定义多个样式，例如：
  p.aside {border-style: solid dotted dashed double;}
  上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。
  或者可以使用下面的单边边框样式属性：border-top-style、border-right-style、border-bottom-style、border-left-style
• 可以通过 border-width 属性为边框指定宽度。
  为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。
• 设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性，它一次可以接受最多 4 个颜色值。
  
  可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：
  p {
    border-style: solid;
    border-color: blue rgb(25%,35%,45%) #909090 red;
    }
  
  如果颜色值小于 4 个，值复制就会起作用。例如下面的规则声明了段落的上下边框是蓝色，左右边框是红色：
  p {
    border-style: solid;
    border-color: blue red;
    }

 

• 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
• 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

 

• CSS 定位 (Positioning) 属性允许你对元素进行定位。
• 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

 

• CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
  除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
• CSS position 属性：通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
  position 属性值的含义：
  ①static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
  ②relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
  ③absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
  ④fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

 

• CSS 相对定位（relative）：相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
• 如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
  #box_relative {
    position: relative;
    left: 30px;
    top: 20px;
  }
  注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
• CSS 绝对定位（absolute）：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
  绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
• CSS浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
• 在 CSS 中，我们通过 float 属性实现元素的浮动。