CSS基础学习总结

川长思鸟来 2021-12-08 16:57 380阅读 0赞

### 文章目录 ###

*  CSS概述
 *   *  优点
     *  多重样式将层叠为一个
     *   *  层叠次序
 *  CSS 基础语法
 *   *  多重声明
     *  选择器的分组
     *  继承属性
 *  派生选择器
 *  子元素选择器
 *  id选择器
 *   *  id 选择器和派生选择器
     *  单独的选择器
 *  类选择器
 *  属性选择器
 *   *  属性选择器
     *  属性和值选择器
 *  相邻兄弟选择器
 *  css创建
 *   *  如何插入样式表
     *   *  外部样式表
         *  内部样式表
         *  内联样式
     *  多重样式
 *  CSS 背景
 *   *  背景色
     *  背景图像
     *  背景重复
     *  背景定位
     *  背景关联
 *  CSS文本
 *   *  缩进文本
     *  水平对齐
     *  字间隔
     *  字母间隔
     *  字符转换
     *  文本装饰
     *  处理空白符
 *  CSS 字体
 *   *  指定字体系列
     *  字体风格
     *  字体加粗
     *  字体大小
 *  CSS链接
 *   *  设置链接的样式
     *  常见的链接样式
     *   *  文本修饰
         *  背景色
 *  CSS列表
 *   *  列表类型
     *  列表项图像
     *  列表标志位置
 *  CSS表格
 *   *  表格边框
     *  折叠边框
     *  表格宽度和高度
     *  表格文本对齐
     *  表格颜色
 *  CSS导航栏
 *   *  垂直导航栏
     *  水平导航栏

--------------------

# CSS概述 #

*  CSS 指层叠样式表 (Cascading Style Sheets)
 *  样式定义如何显示 HTML 元素
 *  样式通常存储在样式表中
 *  把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
 *  外部样式表可以极大提高工作效率
 *  外部样式表通常存储在 CSS 文件中
 *  多个样式定义可层叠为一

## 优点 ##

样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

## 多重样式将层叠为一个 ##

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

### 层叠次序 ###

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1.浏览器缺省设置  
2.外部样式表  
3.内部样式表（位于 标签内部）  
4.内联样式（在 HTML 元素内部）

# CSS 基础语法 #

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。  
每条声明由一个属性和一个值组成。  
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。  
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

**PS：如果值为若干单词，则要给值加引号：**

p {font-family: "sans serif";}

## 多重声明 ##

如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，但是加上了也不会出错，这样当从现有的规则中增减声明时，会尽可能地减少出错的可能性。

p {
      text-align: center;
      color: black;
      font-family: arial;
    }

## 选择器的分组 ##

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6 {
      color: green;
      }

## 继承属性 ##

根据 CSS，子元素从父元素继承属性。

body {
         font-family: Verdana, sans-serif;
         }

通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。

如果你不希望 “Verdana, sans-serif” 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：

body  {
         font-family: Verdana, sans-serif;
         }
    
    td, ul, ol, ul, li, dl, dt, dd  {
         font-family: Verdana, sans-serif;
         }
    
    p  {
         font-family: Times, "Times New Roman", serif;
         }

# 派生选择器 #

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。

比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong {
        font-style: italic;
        font-weight: normal;
      }

请注意标记为 `<strong>` 的代码上下文关系：

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
    
    <ol>
    <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
    <li>我是正常的字体。</li>
    </ol>

在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。

# 子元素选择器 #

与派生选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。  
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。  
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>

# id选择器 #

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>

请看下面这个选择器：

table.company td > p

上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

## id 选择器和派生选择器 ##

在现代布局中，id 选择器常常用于建立派生选择器。

#sidebar p {
    	font-style: italic;
    	text-align: right;
    	margin-top: 0.5em;
    	}

上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落

## 单独的选择器 ##

id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用：

#sidebar {
    	border: 1px dotted #000;
    	padding: 10px;
    	}

根据这条规则，id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框，同时其周围会有 10 个像素宽的内边距。

# 类选择器 #

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。  
在下面的 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 也可被用作派生选择器：**

.fancy td {
    	color: #f60;
    	background: #666;
    	}

在上面这个例子中，类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。（名为 fancy 的更大的元素可能是一个表格或者一个 div）

**元素也可以基于它们的类而被选择：**

td.fancy {
    	color: #f60;
    	background: #666;
    	}

在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。

# 属性选择器 #

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

## 属性选择器 ##

下面的例子为带有 title 属性的所有元素设置样式：

[title]
    {
    color:red;
    }

## 属性和值选择器 ##

下面的例子为 title=“W3School” 的所有元素设置样式：

[title=W3School]
    {
    border:5px solid blue;
    }

下面的例子为包含指定值的 title 属性值的所有元素设置样式。适用于由空格分隔的属性值：

[title~=hello] { color:red; }

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

[lang|=en] { color:red; }

例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style type="text/css">
    [lang|=en]
    {
    color:red;
    }
    </style>
    </head>
    
    <body>
    <h1>可以应用样式：</h1>
    <p lang="en">Hello!</p>
    <p lang="en-us">Hi!</p>
    <hr />
    
    <h1>无法应用样式：</h1>
    <p lang="us">Hi!</p>
    <p lang="zh">Hao!</p>
    </body>
    </html>

# 相邻兄弟选择器 #

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。  
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

# css创建 #

## 如何插入样式表 ##

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：

### 外部样式表 ###

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 `<link>` 标签链接到样式表。`<link>` 标签在（文档的）头部：

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。  
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color: sienna;}
    p {margin-left: 20px;}
    body {background-image: url("images/back40.gif");}

### 内部样式表 ###

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 `<style>` 标签在文档头部定义内部样式表，就像这样:

<head>
    <style type="text/css">
      hr {color: sienna;}
      p {margin-left: 20px;}
      body {background-image: url("images/back40.gif");}
    </style>
    </head>

### 内联样式 ###

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。  
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color: sienna; margin-left: 20px">
    This is a paragraph
    </p>

## 多重样式 ##

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。  
例如，外部样式表拥有针对 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;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

# CSS 背景 #

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。

## 背景色 ##

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。  
这条规则把元素的背景设置为灰色：

p {background-color: gray;}

如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：

p {background-color: gray; padding: 20px;}

**background-color 不能继承**

## 背景图像 ##

要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。  
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

大多数背景都应用到 body 元素，不过并不仅限于此。  
下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：

p.flower {background-image: url(/i/eg_bg_03.gif);}

甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：

a.radio {background-image: url(/i/eg_bg_07.gif);}

**background-image 也不能继承。事实上，所有背景属性都不能继承。**

## 背景重复 ##

如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。  
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。  
默认地，背景图像将从一个元素的左上角开始。请看下面的例子：

body
      { 
      background-image: url(/i/eg_bg_03.gif);
      background-repeat: repeat-y;
      }

## 背景定位 ##

可以利用 background-position 属性改变图像在背景中的位置。  
下面的例子在 body 元素中将一个背景图像居中放置：

body
      { 
        background-image:url('/i/eg_bg_03.gif');
        background-repeat:no-repeat;
        background-position:center;
      }

为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。

## 背景关联 ##

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。  
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body 
      {
      background-image:url(/i/eg_bg_02.gif);
      background-repeat:no-repeat;
      background-attachment:fixed
      }

ackground-attachment 属性的默认值是 scroll，在默认的情况下，背景会随文档滚动。

# CSS文本 #

CSS 文本属性可定义文本的外观。  
通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

## 缩进文本 ##

把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。  
CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。  
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。  
这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：

p {text-indent: 5em;}

text-indent 属性可以继承，请考虑如下标记：

div#outer {width: 500px;}
    div#inner {text-indent: 10%;}
    p {width: 200px;}
    
    <div id="outer">
    <div id="inner">some text. some text. some text.
    <p>this is a paragragh.</p>
    </div>
    </div>

以上标记中的段落也会缩进 50 像素，这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。

## 水平对齐 ##

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。  
值 left、right 、center 和justify会导致元素中的文本分别左对齐、右对齐、居中和两端对齐。

## 字间隔 ##

word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。  
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：

p.spread {word-spacing: 30px;}
    p.tight {word-spacing: -0.5em;}
    
    <p class="spread">
    This is a paragraph. The spaces between words will be increased.
    </p>
    
    <p class="tight">
    This is a paragraph. The spaces between words will be decreased.
    </p>

## 字母间隔 ##

letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。  
与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量：

## 字符转换 ##

text-transform 属性处理文本的大小写。这个属性有 4 个值：

*  none
 *  uppercase
 *  lowercase
 *  capitalize

默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。

## 文本装饰 ##

text-decoration 有 5 个值：

*  none
 *  underline
 *  overline
 *  line-through
 *  blink

underline 会对元素加下划线，overline会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，blink 会让文本闪烁。none 值会关闭原本应用到一个元素上的所有装饰。例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：

a {text-decoration: none;}

## 处理空白符 ##

white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。  
通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。  
可以用以下声明显式地设置这种默认行为，在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：

p {white-space: normal;}

# CSS 字体 #

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。

## 指定字体系列 ##

在 CSS 中，有两种不同类型的字体系列名称：

*  通用字体系列 - 拥有相似外观的字体系统组合（比如 “Serif” 或 “Monospace”）
 *  特定字体系列 - 具体的字体系列（比如 “Times” 或 “Courier”）

除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

*  Serif 字体
 *  Sans-serif 字体
 *  Monospace 字体
 *  Cursive 字体
 *  Fantasy 字体

使用 font-family 属性 定义文本的字体系列。

body {font-family: sans-serif;}

## 字体风格 ##

font-style 属性最常用于规定斜体文本。  
该属性有三个值：

*  normal - 文本正常显示
 *  italic - 文本斜体显示
 *  oblique - 文本倾斜显示

p.normal {font-style:normal;}
    p.italic {font-style:italic;}
    p.oblique {font-style:oblique;}

## 字体加粗 ##

font-weight 属性设置文本的粗细。  
使用 bold 关键字可以将文本设置为粗体。  
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。  
如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与

p.normal {font-weight:normal;}
    p.thick {font-weight:bold;}
    p.thicker {font-weight:900;}

## 字体大小 ##

font-size 属性设置文本的大小。  
font-size 值可以是绝对或相对值。

绝对值：

*  将文本设置为指定的大小
 *  不允许用户在所有浏览器中改变文本大小（不利于可用性）
 *  绝对大小在确定了输出的物理尺寸时很有用

相对大小：

*  相对于周围的元素来设置大小
 *  允许用户在浏览器改变文本大小

**使用像素来设置字体大小**  
通过像素设置文本大小，可以对文本大小进行完全控制：

h1 {font-size:60px;}
    h2 {font-size:40px;}
    p {font-size:14px;}

# CSS链接 #

## 设置链接的样式 ##

能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态：

*  a:link - 普通的、未被访问的链接
 *  a:visited - 用户已访问的链接
 *  a:hover - 鼠标指针位于链接的上方
 *  a:active - 链接被点击的时刻

a:link {color:#FF0000;}		/* 未被访问的链接 */
    a:visited {color:#00FF00;}	/* 已被访问的链接 */
    a:hover {color:#FF00FF;}	/* 鼠标指针移动到链接上 */
    a:active {color:#0000FF;}	/* 正在被点击的链接 */

> 当为链接的不同状态设置样式时，请按照以下次序规则：  
> a:hover 必须位于 a:link 和 a:visited 之后  
> a:active 必须位于 a:hover 之后

## 常见的链接样式 ##

### 文本修饰 ###

text-decoration 属性大多用于去掉链接中的下划线：

a:link {text-decoration:none;}
    a:visited {text-decoration:none;}
    a:hover {text-decoration:underline;}
    a:active {text-decoration:underline;}

### 背景色 ###

background-color 属性规定链接的背景色：

a:link {background-color:#B2FF99;}
    a:visited {background-color:#FFFF85;}
    a:hover {background-color:#FF704D;}
    a:active {background-color:#FF704D;}

# CSS列表 #

## 列表类型 ##

要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。

例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。

要修改用于列表项的标志类型，可以使用属性 list-style-type：

ul {list-style-type : square}

上面的声明把无序列表中的列表项标志设置为方块。

## 列表项图像 ##

有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：

ul li {list-style-image : url(xxx.gif)}

只需要简单地使用一个 url() 值，就可以使用图像作为标志。

## 列表标志位置 ##

CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。

# CSS表格 #

## 表格边框 ##

如需在 CSS 中设置表格边框，请使用 border 属性。

下面的例子为 table、th 以及 td 设置了蓝色边框：

table, th, td
      {
      border: 1px solid blue;
      }

请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。

## 折叠边框 ##

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;
      }

vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：

td
      {
      height:50px;
      vertical-align:bottom;
      }

## 表格颜色 ##

下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色：

table, td, th
      {
      border:1px solid green;
      }
    
    th
      {
      background-color:green;
      color:white;
      }

# CSS导航栏 #

**导航栏 = 链接列表**  
导航栏需要标准的 HTML 作为基础。  
导航栏基本上是一个链接列表，因此使用

*  和
 *  元素是非常合适的：

<ul>
    <li><a href="default.asp">Home</a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>
    </ul>

结果如下图：  
![在这里插入图片描述][20190716104013903.png]  
从列表中去掉圆点和外边距：

ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    }

例子解释：

*  list-style-type:none - 删除圆点。导航栏不需要列表项标记。
 *  把外边距和内边距设置为 0 可以去除浏览器的默认设定。

如图：  
![在这里插入图片描述][20190716104111939.png]

## 垂直导航栏 ##

如需构建垂直导航栏，我们只需要定义 元素的样式，除了上面的代码之外：

a
    {
    display:block;
    width:60px;
    }

例子解释：

*  display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。
 *  width:60px - 块元素默认占用全部可用宽度。我们需要规定 60 像素的宽度。

完整样式的导航栏实例：

<!DOCTYPE html>
    <html>
    <head>
    <style>
    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    }
    a:link,a:visited
    {
    display:block;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#bebebe;
    width:120px;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#cc0000;
    }
    </style>
    </head>
    
    <body>
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    </ul>
    </body>
    </html>

如图：  
![在这里插入图片描述][2019071610425954.png]

## 水平导航栏 ##

有两种创建水平导航栏的方法。使用行内或浮动列表项。  
两种方法都不错，但是如果您希望链接拥有相同的尺寸，就必须使用浮动方法。  
**行内列表项**  
除了上面的“标准”代码，构建水平导航栏的方法之一是将 `<li>` 元素规定为行内元素：

li
    {
    display:inline;
    }

例子解释：  
display:inline; - 默认地，`<li>` 元素是块元素。在这里，我们去除了每个列表项前后的换行，以便让它们在一行中显示。  
完整样式的水平导航栏实例：

<!DOCTYPE html>
    <html>
    <head>
    <style>
    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    padding-top:6px;
    padding-bottom:6px;
    }
    li
    {
    display:inline;
    }
    a:link,a:visited
    {
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:6px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#7A991A;
    }
    
    </style>
    </head>
    
    <body>
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    </ul>
    
    <p><b>注释：</b>如果您只为 a 元素设置内边距（而不设置 ul 元素），那么链接会出现在 ul 元素之外。所以，我们为 ul 元素添加了 top 和 bottom 内边距。</p>
    </body>
    </html>

![在这里插入图片描述][2019071610445365.png]  
对列表项进行浮动  
在上面的例子中，链接的宽度是不同的。  
为了让所有链接拥有相等的宽度，浮动 `<li>` 元素并规定 `<a>` 元素的宽度：

li
    {
    float:left;
    }
    a
    {
    display:block;
    width:60px;
    }

例子解释：

*  float:left - 使用 float 来把块元素滑向彼此。
 *  display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。
 *  width:60px - 由于块元素默认占用全部可用宽度，链接无法滑动至彼此相邻。我们需要规定 60 像素的宽度。

完整样式的水平导航栏实例：

<!DOCTYPE html>
    <html>
    <head>
    <style>
    ul
    {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    }
    li
    {
    float:left;
    }
    a:link,a:visited
    {
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#bebebe;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#cc0000;
    }
    
    </style>
    </head>
    
    <body>
    <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
    </ul>
    </body>
    </html>

如图：  
![在这里插入图片描述][20190716104628860.png]

[20190716104013903.png]: /images/20211209/5bce9488769e47ed8cfd6053cfce594d.png
[20190716104111939.png]: /images/20211209/5f60f78d67d34522a7387a2b082b91cb.png
[2019071610425954.png]: /images/20211209/77c4cbf4a9fb4b679e5fa7e3da2f1baf.png
[2019071610445365.png]: /images/20211209/e3e112f67ce64eafab20f81ebaf3f501.png
[20190716104628860.png]: /images/20211209/9d6b5bdc70464a658adb79270d4fd5dd.png