目录

CSS 简介

CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何显示 HTML 元素,样式通常存储在样式表中,外部样式表通常存储在 CSS 文件中(多个样式定义可层叠为一个）。

CSS中，颜色值通常以以下方式定义:

  • 十六进制 - 如："#ff0000"
  • RGB - 如："rgb(255,0,0)"
  • 颜色名称 - 如："red"

CSS 语法

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

  • 选择器通常是需要改变样式的 HTML 元素，参考CSS 选择器
  • 每条声明由一个属性和一个值组成，属性（property）是您希望设置的样式属性（style attribute），参考CSS 属性
  • 每个属性有一个值，属性和值被冒号分开。
  • CSS声明总是以分号(;)结束，声明总以大括号({})括起来。
  • 注释是用来解释代码，CSS注释以 /* 开始, 以 */ 结束。
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>教程</title>

<style>

body {background-color:tan;}

h1   {color:maroon;font-size:20pt;}

hr   {color:navy;}

p    {font-size:11pt;margin-left:15px;}

a:link    {color:green;}

a:visited {color:yellow;}

a:hover   {color:black;}

a:active  {color:blue;}

</style>

</head>

<body>

<h1>这是标题</h1>

<hr>

<p>你可以看到这个段落是被设定的 CSS 渲染的。</p>

<p><a href="https://www.cnblogs.com/" target="_blank">这是一个链接</a></p>

</body>

</html>

Id 和 Class

如果要在HTML元素中设置CSS样式，需要在元素中设置"id" 和 "class"选择器。

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="para1":

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>教程</title>

<style>

#para1

{

	text-align:center;

	color:red;

}

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p>这个段落不受该样式的影响。</p>

</body>

</html>



注：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>教程</title>

<style>

.center

{

	text-align:center;

}

</style>

</head>

<body>

<h1 class="center">标题居中</h1>

<p class="center">段落居中。</p>

</body>

</html>

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>教程</title>

<style>

p.center

{

	text-align:center;

}

</style>

</head>

<body>

<h1 class="center">这个标题不受影响</h1>

<p class="center">这个段落居中对齐。</p>

</body>

</html>

注：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

CSS 创建

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

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。

每个页面使用 <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");}

注：不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是 "margin-left: 20px" 。

内部样式表

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

<head>

<style>

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">这是一个段落。</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）会被内部样式表中的规则取代。

多重样式优先级

样式表允许以多种方式规定样式信息：

  • 在单个的 HTML 元素中；
  • 在 HTML 页的头元素中；
  • 在一个外部的 CSS 文件中；
  • 在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式。

<head>

    <!-- 外部样式 style.css -->

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

    <!-- 设置：h3{color:blue;} -->

    <style type="text/css">

      /* 内部样式 */

      h3{color:green;}

    </style>

</head>

<body>

    <h3>测试！</h3>

</body>

注：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

背景（background）

CSS 背景属性用于定义HTML元素的背景：

Property 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。

背景颜色

background-color 属性定义了元素的背景颜色，以下实例中body、h1、p和 div 元素拥有不同的背景颜色:

body {background-color:#b0c4de;}

h1 {background-color:#6495ed;}

p {background-color:#e0ffff;}

div {background-color:#b0c4de;}

背景图像

background-image 属性描述了元素的背景图像，默认情况下背景图像进行平铺重复显示以覆盖整个元素实体，页面背景图片设置实例:

body {background-image:url('paper.gif');}

background-repeat

设置如何平铺对象的 background-image 属性：

值 说明
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image不会重复
inherit 指定background-repea属性设置应该从父元素继承

background-position

background-position属性设置背景图像的起始位置：

值 描述
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom		 如果仅指定一个关键字，其他值将会是"center"
x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％，右下角是100％100％。如果仅指定了一个值，其他值将是50％，默认值为：0％0％
xpos ypos 第一个值是水平位置，第二个值是垂直。左上角是0，单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％，可以混合使用％和positions
inherit 指定background-position属性设置应该从父元素继承

background-attachment

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动：

值 描述
scroll 背景图片随着页面的滚动而滚动，这是默认的。
fixed 背景图片不会随着页面的滚动而滚动。
local 背景图片会随着元素内容的滚动而滚动。
initial 设置该属性的默认值， 阅读关于 initial 内容
inherit 指定 background-attachment 的设置应该从父元素继承，阅读关于 inherit 内容

简写属性

为了简化页面的背景属性的代码，可以将这些属性合并在同一个属性中，**背景的简写属性为 "background":

body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时，属性值的顺序为（无需全部使用）：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

文本格式

所有CSS文本属性：

属性 描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距

文本颜色（color）

一个网页的背景颜色是指在主体内的选择：

body {color:red;}

h1 {color:#00ff00;}

h2 {color:rgb(255,0,0);}

注：对于W3C标准的CSS，如果你定义了颜色属性，你还必须定义背景色属性。

对齐方式（text-align）

text-align属性指定元素文本的水平对齐方式：

值 描述
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。

文本修饰（text-decoration）

text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等：

值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。

文本转换（text-transform）

ext-transform 属性控制文本的大小写：

值 描述
none 默认，定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。

文本缩进（text-indent）

text-indent 属性规定文本块中首行文本的缩进：

值 描述
length 定义固定的缩进，如50px，默认值：0。
% 定义基于父元素宽度的百分比的缩进。
inherit 规定应该从父元素继承 text-indent 属性的值。

字体属性

CSS字体属性定义字体，加粗，大小，文字样式，所有CSS字体属性如下：

Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本
font-weight 指定字体的粗细

字体系列

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

  • 通用字体系列：拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
  • 特定字体系列：一个特定的字体系列（如 "Times" 或 "Courier"）

font-family 属性设置文本的字体系列，应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，它将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。

多个字体系列是用一个逗号分隔指明：

p{font-family:"Times New Roman", Times, serif;}

字体样式

font-style 主要是用于指定斜体文字的字体样式属性，这个属性有三个值：

  • 正常 - 正常显示文本
  • 斜体 - 以斜体字显示的文字
  • 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

字体大小

font-size 属性设置文本的大小,不要通过调整字体大小使段落看上去像标题或者使标题看上去像段落，请务必使用正确的HTML标签。

字体大小的值可以是绝对或相对的大小。

绝对大小：

  • 设置一个指定大小的文本
  • 不允许用户在所有浏览器中改变文本大小
  • 确定了输出的物理尺寸时绝对大小很有用

相对大小：

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

注：如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。

设置字体大小像素

设置文字的大小与像素，让您完全控制文字大小：

h1 {font-size:40px;}

h2 {font-size:30px;}

p {font-size:14px;}

用em来设置字体大小

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。em的尺寸单位由W3C建议，1em和当前字体大小相等，在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px，可以通过下面这个公式将像素转换为em：px/16=em

h1 {font-size:2.5em;} /* 40px/16=2.5em */

h2 {font-size:1.875em;} /* 30px/16=1.875em */

p {font-size:0.875em;} /* 14px/16=0.875em */

使用百分比和EM组合

在所有浏览器的解决方案中，设置 <body> 元素的默认字体大小的是百分比，可以显示相同的文本大小并允许所有浏览器缩放文本的大小：

body {font-size:100%;}

h1 {font-size:2.5em;}

h2 {font-size:1.875em;}

p {font-size:0.875em;}

链接样式

链接的样式可以用任何CSS属性（如颜色，字体，背景等），特别的链接可以有不同的样式，这取决于他们是什么状态，这四个链接状态是：

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻
a:link {color:#000000;}      /* 未访问链接*/

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 列表

CSS 列表属性作用如下：

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项标记为无序列表
  • 设置列表项标记为图像

在 HTML中，有两种类型的列表：

  • 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
  • 有序列表 ol - 列表项的标记有数字或字母

使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。

不同的列表项标记（list-style-type）

list-style-type属性指定列表项标记的类型是：

ul.a {list-style-type: circle;}

ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}

ol.d {list-style-type: lower-alpha;}

作为列表项标记的图像（list-style-image）

要指定列表项标记的图像，使用列表样式图像属性 list-style-image：

ul

{

    list-style-image: url('sqpurple.gif');

}

浏览器兼容性解决方案（ul li）

如果想在所有的浏览器放置同样的图像标志，就应使用浏览器兼容性解决方案，下面的例子会显示相同的图像标记：

ul

{

    list-style-type: none;

    padding: 0px;

    margin: 0px;

}

ul li

{

    background-image: url(sqpurple.gif);

    background-repeat: no-repeat;

    background-position: 0px 5px;

    padding-left: 14px;

}

例子解释：

ul:

  • 设置列表类型为没有列表项标记
  • 设置填充和边距 0px（浏览器兼容性）

ul 中所有 li:

  • 设置图像的 URL，并设置它只显示一次（无重复）
  • 需要的定位图像位置（左 0px 和上下 5px）
  • 用 padding-left 属性把文本置于列表中

列表项目标记的位置（list-style-position）

list-style-position 属性指示如何相对于对象的内容绘制列表项标记，属性定义及使用说明如下：

值 描述
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值，保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit 规定应该从父元素继承 list-style-position 属性的值。 
<h2>Outside:</h2>

<ul style="list-style-position:outside;width:25%;">

<li style="border:1px solid #000000">Coffee</li>

<li style="border:1px solid #000000;border-top:0">Tea</li>

<li style="border:1px solid #000000;border-top:0">Coca-cola</li>

</ul>

<h2>Inside:</h2>

<ul style="list-style-position:inside;width:25%;">

<li style="border:1px solid #000000;">Coffee</li>

<li style="border:1px solid #000000;border-top:0;">Tea</li>

<li style="border:1px solid #000000;border-top:0;">Coca-cola</li>

</ul>

列表 - 简写属性（list-style）

在单个属性中可以指定所有的列表属性，就是所谓的简写属性。

为列表使用简写属性，列表样式属性设置如下：

ul

{

    list-style: square url("sqpurple.gif");

}

可以按顺序设置如下属性：

  • list-style-type
  • list-style-position
  • list-style-image

如果上述值丢失一个，其余仍在指定的顺序，就没关系。

移除默认设置

list-style-type:none 属性可以用于移除小标记，默认情况下列表 <ul> 或 <ol> 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除:

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

}

CSS 表格

表格边框（border）

使用border属性指定CSS表格边框，下面的例子指定了一个表格的Th和TD元素的黑色边框：

table, th, td

{

    border: 1px solid black;

}

折叠边框（border-collapse）

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

table

{

    border-collapse:collapse;

}

table,th, td

{

    border: 1px solid black;

}

表格宽度和高度(Width和height)

Width和height属性定义表格的宽度和高度，下面的例子是设置100％的宽度、50像素的th元素的高度的表格：

table

{

    width:100%;

}

th

{

    height:50px;

}

表格文字对齐（text-align、vertical-align）

text-align属性设置水平对齐方式，向左，右，或中心：

td { text-align:right; }

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

td

{

    height:50px;

    vertical-align:bottom;

}

表格填充（padding）

如果要在表中控制内容和边框之间的空格，应使用td和th元素的填充属性：

td {padding:15px;}

表格颜色（background-color）

下面的例子指定边框的颜色和th元素的文本和背景颜色：

table, td, th

{

    border:1px solid green;

}

th

{

    background-color:green;

    color:white;

}

盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素，下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

元素的宽度和高度

当指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度，完整大小的元素还必须添加内边距、边框和外边距。

下面的例子中的元素的总宽度为300px：

div {

    width: 300px;

    border: 25px solid green;

    padding: 25px;

    margin: 25px;

}

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

上图的宽度：300px (宽)+ 50px (左 + 右填充)+ 50px (左 + 右边框)+ 50px (左 + 右边距)= 450px

浏览器的兼容性问题

根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。IE5.X 和 6 在怪异模式中使用自己的非标准模型， width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

目前最好的解决方案是回避这个问题：不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性，在HTML页面声明 即可。

边框（border）

CSS边框属性允许指定一个元素边框的样式和颜色：

属性 描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

边框样式（border-style）

边框样式属性（border-style）用来定义边框的样式，指定要显示什么样的边界：

宽度（border-width）、颜色（border-color）

可以通过border-width属性为边框指定宽度，为边框指定宽度有两种方法：

  • 指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)
  • 使用 3 个关键字之一（CSS 没有定义 3 个关键字的具体宽度）：thick 、medium（默认值） 和 thin

border-color属性用于设置边框的颜色，可以设置的颜色：

  • name - 指定颜色的名称，如 "red"
  • RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
  • Hex - 指定16进制值, 如 "#ff0000"
  • 还可以设置边框的颜色为"transparent"
p.one

{

    border-style:solid;

    border-width:5px;

    border-color:red;

}

p.two

{

    border-style:solid;

    border-width:medium;

    border-color:#98bf21;

}

注：border-width、border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

单独设置各边

在CSS中，可以指定不同的侧面不同的边框：

p

{

    border-top-style:dotted;

    border-right-style:solid;

    border-bottom-style:dotted;

    border-left-style:solid;

}

上面的例子也可以设置一个单一属性：

border-style:dotted solid;

border-style属性可以有1-4个值，按照顺序分别是：

  • 上边框、右边框、底边框、左边框
  • 上边框、左右边框、底边框
  • 上底边框、右左边框
  • 四面边框

    上面的例子用了border-style，border-width 、 border-color也是同理。

简写属性

可以在一个"border"属性中设置：border-width、border-style (required)、border-color。

border:5px solid red;

轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度，不会增加额外的width或者height。

属性 说明
outline 在一个声明中设置所有的轮廓属性
outline-color 设置轮廓的颜色
outline-style 设置轮廓的样式
outline-width 设置轮廓的宽度

外边距、填充

margin(外边距)

**margin(外边距)属性定义元素周围的空间，清除周围的（外边框）元素区域，没有背景颜色、是完全透明的。

margin可以单独改变元素的上、下、左、右边距，也可以一次改变所有的外边距属性。

边距属性：

属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

值的类型：

值 说明
auto 设置浏览器边距。
这样做的结果会依赖于浏览器
length 定义一个固定的margin（使用像素，pt，em等）
% 定义一个使用百分比的边距

padding（填充）

padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

padding可以单独改变元素的上、下、左、右填充，也可以一次改变所有的填充属性。

填充属性：

属性 说明
padding 使用简写属性设置在一个声明中的所有填充属性
padding-bottom 设置元素的底部填充
padding-left 设置元素的左部填充
padding-right 设置元素的右部填充
padding-top 设置元素的顶部填充

值的类型：

值 说明
length 定义一个固定的填充(像素, pt, em,等)
% 使用百分比值定义一个填充

简写属性

所有边距属性的简写属性是 margin ，所有的填充属性的简写属性是 padding ，可以有一到四个值。

  • 上、右、下、左
  • 上、左右、下
  • 上下、左右
  • 上下左右
margin:25px 50px 75px 100px;

padding:25px 50px 75px 100px;

分组和嵌套选择器

分组选择器

在样式表中有很多具有相同样式的元素：

h1 { color:green; }

h2 { color:green; }

p  { color:green; }

为了尽量减少代码，可以使用分组选择器，每个选择器用逗号分隔。

对以上代码使用分组选择器：

h1,h2,p { color:green; }

嵌套选择器

它可能适用于选择器内部的选择器的样式，在下面的例子设置了四个样式：

  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class="marked" 的元素指定一个样式。
  • .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
p { color:blue; text-align:center; }

.marked { background-color:red; }

.marked p { color:white; }

p.marked{ text-decoration:underline; }

元素尺寸

尺寸 (Dimension) 属性允许控制元素的高度和宽度，允许增加行间距：

属性 描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

Display(显示) 与 Visibility（可见性）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"，两种方法会产生不同的结果：

  • visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，仍然会影响布局。
  • display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间，该元素原本占用的空间也会从页面布局中消失。
h1.hidden {visibility:hidden;}

h1.hidden {display:none;}

Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符，如：h1、p、div等。

内联元素只需要必要的宽度，不强制换行，如：span、a等。

display 属性规定元素应该生成的框的类型，可以更改为内联元素和块元素，使页面看起来是以一种特定的方式组合。

下面的示例把列表项显示为内联元素、把span元素作为块元素：

li {display:inline;}

span {display:block;}

html代码：

<style>

   li{display:inline;}

   span{display:block;}

</style>

<p>链接列表水平显示：</p>

<ul>

<li><a href="/html/" target="_blank">HTML</a></li>

<li><a href="/css/" target="_blank">CSS</a></li>

<li><a href="/js/" target="_blank">JavaScript</a></li>

<li><a href="/xml/" target="_blank">XML</a></li>

</ul>

<h2>Nirvana</h2>

<span>Record: MTV Unplugged in New York</span>

<span>Year: 1993</span>

<h2>Radiohead</h2>

<span>Record: OK Computer</span>

<span>Year: 1997</span>

结果如下：

定位属性

所有的CSS定位属性：

属性 说明 值 CSS
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
clip 剪辑一个绝对定位的元素
cursor 显示光标移动到指定的类型
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
设置当元素的内容溢出其区域时发生的事情。
指定如何处理顶部/底部边缘的内容溢出元素的内容区域
指定如何处理右边/左边边缘的内容溢出元素的内容区域
position 指定元素的定位类型
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
z-index 设置元素的堆叠顺序

Position(定位)

position属性指定了元素的定位类型，属性的五个值：

  • static：HTML元素的默认值，即没有定位，遵循正常的文档流对象，静态定位的元素不会受到 top、bottom、left、right影响。
  • relative：相对定位元素的定位是相对其正常位置，移动相对定位元素，但它原本所占的空间不会改变，相对定位元素经常被用来作为绝对定位元素的容器块。
  • fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。元素的位置与文档流无关，不占据空间，定位的元素和其他元素重叠。
  • absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html。定位使元素的位置与文档流无关，不占据空间，定位的元素和其他元素重叠。
  • sticky：粘性定位，基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。未滚动时，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top、right、bottom 或 left 之一，指定四个阈值其中之一才可使粘性定位生效，否则其行为与相对定位相同。

元素可以使用的顶部、底部、左侧和右侧属性定位，然而必须先设定position属性。

重叠的元素(z-index)

元素的定位与文档流无关，可以覆盖页面上的其它元素。z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面），一个元素可以有正数或负数的堆叠顺序，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

img

{

    position:absolute;

    left:0px;

    top:0px;

    z-index:-1;

}

布局 - Overflow

overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条，overflow属性有以下值：

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

注：overflow 属性只工作于指定高度的块元素上，默认情况下overflow 的值为 visible， 意思是内容溢出元素框。

浮动属性

所有的浮动属性：

属性 描述 值
clear 指定不允许元素周围有浮动元素。 left 、right、both、none、inherit
float 指定一个盒子（元素）是否可以浮动。 left、right、none、inherit

float(浮动)

float（浮动）会使元素向左或向右移动，其周围的元素也会重新排列。

float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素按如下方式浮动：

  • 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
  • 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
  • 浮动元素之后的元素将围绕它，浮动元素之前的元素将不会受到影响。

彼此相邻的浮动元素：把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性——指定元素两侧不能出现浮动元素。

布局 - 水平 & 垂直对齐

元素居中对齐（margin: auto）

要水平居中对齐一个元素(如 div), 可以使用 margin: auto;：

  • 设置到元素的宽度将防止它溢出到容器的边缘。
  • 元素通过指定宽度，并将两边的空外边距平均分配。
.center { margin: auto; width: 60%; }

注: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

文本居中对齐（text-align: center）

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;：

.center { text-align: center; }

图片居中对齐（margin: auto）

要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:

img {

    display: block;

    margin: auto;

    width: 40%;

}

左右对齐

使用定位（position）方式

可以使用 position: absolute; 属性来对齐元素：

.right {

    position: absolute;

    right: 0px;

    width: 300px;

    border: 3px solid #73AD21;

    padding: 10px;

}

注：绝对定位元素会被从正常流中删除，并且能够交叠元素。

使用浮动（float）方式

可以使用 float 属性来对齐元素：

.right {

    float: right;

    width: 300px;

    border: 3px solid #73AD21;

    padding: 10px;

}

注：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候可以使用 "clearfix(清除浮动)" 来解决该问题。

.clearfix {overflow: auto;}

垂直居中对齐

使用 padding

简单方式就是头部顶部使用 padding（要水平和垂直都居中可以使用 padding 和 text-align: center）：

.center {

    padding: 70px 0;

    border: 3px solid green;

    text-align: center;

}

使用 line-height

.center {

    line-height: 200px;

    height: 200px;

    border: 3px solid green;

    text-align: center;

}

/* 如果文本有多行，添加以下代码: */

.center p {

    line-height: 1.5;

    display: inline-block;

    vertical-align: middle;

}

使用 position 和 transform

还可以使用 transform 属性来设置垂直居中：

.center {

    height: 200px;

    position: relative;

    border: 3px solid green;

}

.center p {

    margin: 0;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

组合选择符

组合选择符包括各种简单选择符的组合方式，在 CSS3 中包含了四种组合方式:

  • 后代选择器（以 空格分隔）
  • 子元素选择器（以 大于 > 号分隔）
  • 相邻兄弟选择器（以 加号 + 分隔）
  • 普通兄弟选择器（以 波浪号 ～ 分隔）

后代选择器

后代选择器用于选取某元素的后代元素，选取所有插入到 div 元素中的 p 元素:

div p { background-color:yellow; }

子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素，选择 div元素中所有直接子元素 p ：

div>p { background-color:yellow; }

相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素，选取所有位于 div 元素后的第一个 p 元素：

div+p { background-color:yellow; }

后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素，选取所有 div 元素之后的所有相邻兄弟元素 p :

div~p { background-color:yellow; }

伪类(Pseudo-classes)

伪类是用来添加一些选择器的特殊效果，可以看作以选中元素为基准点此元素的一些状态或属性。

伪类选择元素基于的是当前元素处于的状态（当前所具有的特性），由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。

语法

伪类的语法：

selector:pseudo-class {property:value;}

伪类也可以使用伪类：

selector.class:pseudo-class {property:value;}

anchor伪类

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示：

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 之后才是有效的，伪类的名称不区分大小写。

伪类和CSS类

伪类可以与 CSS 类配合使用：

a.red:visited {color:#FF0000;}

<a class="red" href="css-syntax.html">CSS 语法</a>

first-child 伪类

可以使用 :first-child 伪类来选择父元素的第一个子元素。

  • 选择器匹配作为任何元素的第一个子元素的 p 元素：
p:first-child { color:blue; }
  • 匹配所有 p 元素中的第一个 i 元素：
p > i:first-child { color:blue; }
  • 匹配所有作为第一个子元素的 p 元素中的所有 i 元素：
p:first-child i { color:blue; }

lang 伪类

:lang 伪类可以为不同的语言定义特殊的规则，为属性值为 no 的q元素定义引号的类型：

q:lang(no) {quotes: "~" "~";}

伪元素

伪元素是对元素中的特定内容进行操作，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

语法

伪元素的语法：

selector:pseudo-element {property:value;}

CSS类也可以使用伪元素：

selector.class:pseudo-element {property:value;}

:first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式，对 p 元素的第一行文本进行格式化：

p:first-line

{

    color:#ff0000;

    font-variant:small-caps;

}

注："first-line" 伪元素只能用于块级元素。

:first-letter 伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式：

p:first-letter

{

    color:#ff0000;

    font-size:xx-large;

}

注："first-letter" 伪元素只能用于块级元素。

伪元素和CSS类

伪元素可以结合CSS类，使所有 class 为 article 的段落的首字母变为红色：

p.article:first-letter {color:#ff0000;}

<p class="article">文章段落</p>

多个伪元素

可以结合多个伪元素来使用，下面段落的第一个字母将显示为红色（字体大小为 xx-large），第一行中的其余文本将为蓝色（以小型大写字母显示），段落中的其余文本将以默认字体大小和颜色来显示：

p:first-letter

{

    color:#ff0000;

    font-size:xx-large;

}

p:first-line

{

    color:#0000ff;

    font-variant:small-caps;

}

:before 伪元素

":before" 伪元素可以在元素的内容前面插入新内容，在每个 h1 元素前面插入一幅图片：

h1:before { content:url(smiley.gif); }

:after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容，在每个 h1 元素后面插入一幅图片：

h1:after { content:url(smiley.gif); }

导航栏

使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。

导航栏=链接列表

作为标准的HTML基础一个导航栏是必须的，下面的例子将建立一个标准的HTML列表导航栏。

导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素：

<ul>

  <li><a href="#home">主页</a></li>

  <li><a href="#news">新闻</a></li>

  <li><a href="#contact">联系</a></li>

  <li><a href="#about">关于</a></li>

</ul>

从列表中删除边距和填充：

ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

}

上面的例子中的代码是垂直和水平导航栏使用的标准代码：

  • list-style-type:none - 移除列表前小标志，一个导航栏并不需要列表标记。
  • **移除浏览器的默认设置将边距和填充设置为0。

垂直导航栏

上面的代码只需要 <a>元素的样式，建立一个垂直的导航栏：

a {

  display: block;

  width: 60px;

}
  • display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度。
  • width:60px - 块元素默认情况下是最大宽

垂直导航条实例

创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色：

ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

    width: 200px;

    background-color: #f1f1f1;

}

li a {

    display: block;

    color: #000;

    padding: 8px 16px;

    text-decoration: none;

}

/* 鼠标移动到选项上修改背景颜色 */

li a:hover {

    background-color: #555;

    color: white;

}

激活/当前导航条实例

在点击了选项后，可以添加 "active" 类来标准哪个选项被选中：

li a.active {

    background-color: #4CAF50;

    color: white;

}

创建链接并添加边框

可以在 <li> or <a> 上添加text-align:center 样式来让链接居中。

可以在 border <ul> 上添加 border 属性来让导航栏有边框。如果要在每个选项上添加边框，可以在每个 <li> 元素上添加border-bottom :

ul { border: 1px solid #555; }

li {

    text-align: center;

    border-bottom: 1px solid #555;

}

li:last-child { border-bottom: none; }

全屏高度的固定导航条

接下来创建一个左边是全屏高度的固定导航条，右边是可滚动的内容：

ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

    width: 25%;

    background-color: #f1f1f1;

    height: 100%; /* 全屏高度 */

    position: fixed;

    overflow: auto; /* 如果导航栏选项多，允许滚动 */

}

水平导航栏

有两种方法创建横向导航栏，使用内联(inline)或浮动(float)的列表项。

这两种方法都很好，但如果想链接到具有相同的大小，必须使用浮动的方法。

内联列表项

构建水平导航栏的一种方法是，除了上面的“标准”代码外，还要将 <li> 元素指定为 inline：

li

{

    display:inline;

}
  • display:inline; -默认情况下，<li>元素是块元素，这里删除换行符之前和之后每个列表项，以显示一行。

浮动列表项

创建水平导航栏的另一种方法是浮动 <li> 元素，并为导航链接规定布局：

li { float:left; }

a

{

    display:block;

    width:60px;

    background-color: #dddddd;

}

例子解释：

  • float: left; - 使用 float 使块元素滑动为彼此相邻
  • **display: block; **- 将链接显示为块元素可以使整个链接区域都可单击（不仅是文本），而且允许指定填充（如果需要，还可以指定高度，宽度，边距等）
  • padding: 8px; - 使块元素更美观
  • background-color: #dddddd; - 为每个元素添加灰色背景色

如需全宽的背景色，请将 background-color 添加到 <ul> 而不是每个 <a> 元素：

ul {  background-color: #dddddd; }

水平导航栏实例

创建具有深色背景色的基础水平导航栏，并在用户将鼠标移到链接上方时改变链接的背景色：

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

  background-color: #333;

}

li {

  float: left;

}

li a {

  display: block;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}

/* 当鼠标悬停时把链接颜色更改为 #111（黑色） */

li a:hover {

  background-color: #111;

}

活动/当前导航链接

向当前链接添加 "active" 类，这样用户就知道他/她在哪个页面上：

.active { background-color: #4CAF50; }

链接右对齐

将导航条最右边的选项设置右对齐 (float:right;)：

<ul>

  <li><a href="#home">主页</a></li>

  <li><a href="#news">新闻</a></li>

  <li><a href="#contact">联系</a></li>

  <li style="float:right"><a class="active" href="#about">关于</a></li>

</ul>

添加分割线

<li> 通过 border-right 样式来添加分割线:

/* 除了最后一个选项(last-child) 其他的都添加分割线 */

li { border-right: 1px solid #bbb; }

li:last-child { border-right: none; }

固定导航条

可以设置页面的导航条固定在头部或者底部：

/*固定在头部*/

ul {

    position: fixed;

    top: 0;

    width: 100%;

}


/*固定在底部*/

ul {

    position: fixed;

    bottom: 0;

    width: 100%;

}

灰色水平导航栏

带有细灰色边框的灰色水平导航栏的实例：

ul {

  border: 1px solid #e7e7e7;

  background-color: #f3f3f3;

}

li a {  color: #666; }

下拉菜单

基础的下拉菜单

创建当用户将鼠标移到元素上时出现的下拉框：

<style>

.dropdown {

  position: relative;

  display: inline-block;

}

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  padding: 12px 16px;

  z-index: 1;

}

.dropdown:hover .dropdown-content {

  display: block;

}

</style>

<div class="dropdown">

  <span>Mouse over me</span>

  <div class="dropdown-content">

    <p>Hello World!</p>

  </div>

</div>

HTML代码：

  • 使用任何元素打开下拉菜单内容，例如 或 元素。
  • 使用容器元素（如
    ）创建下拉内容，并在其中添加任何内容。
  • 用 <div> 元素包围这些元素，使用 CSS 正确定位下拉内容。

CSS代码：

  • .dropdown 类使用 position:relative，当希望将下拉内容放置在下拉按钮的正下方（使用 position:absolute）时，需要使用该类。
  • .dropdown-content 类保存实际的下拉菜单内容。默认情况下它是隐藏的，并将在悬停时显示。如果您希望下拉内容的宽度与下拉按钮的宽度一样，请将宽度设置为 100％（设置 overflow:auto 可实现在小屏幕上滚动）。

用了 CSS box-shadow 属性，而不是边框，这样下拉菜单看起来像一张“卡片”。

当用户将鼠标移到下拉按钮上时，:hover 选择器用于显示下拉菜单。

下拉菜单

创建下拉菜单，并允许用户选取列表中的某一项。本例与上例相似，除了在下拉框内添加链接并为其设置了样式，以此匹配下拉按钮的样式：

<style>

/* 设置下拉按钮的样式 */

.dropbtn {

  background-color: #4CAF50;

  color: white;

  padding: 16px;

  font-size: 16px;

  border: none;

  cursor: pointer;

}

/* 容器 <div> - 需要放置下拉内容 */

.dropdown {

  position: relative;

  display: inline-block;

}

/* 下拉内容（默认隐藏） */

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}

/* 下拉链接 */

.dropdown-content a {

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

}

/* 悬停时更改下拉链接的颜色 */

.dropdown-content a:hover {background-color: #f1f1f1}

/* 悬停时显示下拉菜单 */

.dropdown:hover .dropdown-content {

  display: block;

}

/* 显示下拉内容时，更改下拉按钮的背景颜色 */

.dropdown:hover .dropbtn {

  background-color: #3e8e41;

}

</style>

<div class="dropdown">

  <button class="dropbtn">Dropdown</button>

  <div class="dropdown-content">

    <a href="#">Link 1</a>

    <a href="#">Link 2</a>

    <a href="#">Link 3</a>

  </div>

</div>

右对齐的下拉菜单内容：如果希望下拉菜单从右到左而不是从左到右，请添加 right: 0;。

.dropdown-content { right: 0; }

提示工具(Tooltip)

当用户将鼠标指针移到元素上时，工具提示通常用于提供关于某内容的额外信息：

基础的工具提示

创建一个鼠标移到元素上时显示的工具提示：

<style>

/* Tooltip 容器 */

.tooltip {

    position: relative;

    display: inline-block;

    border-bottom: 1px dotted black; /* 悬停元素上显示点线 */

}

/* Tooltip 文本 */

.tooltip .tooltiptext {

    visibility: hidden;

    width: 120px;

    background-color: black;

    color: #fff;

    text-align: center;

    padding: 5px 0;

    border-radius: 6px;

    /* 定位 */

    position: absolute;

    z-index: 1;

}

/* 鼠标移动上去后显示提示框 */

.tooltip:hover .tooltiptext {

    visibility: visible;

}

</style>

<div class="tooltip">鼠标移动到这

  <span class="tooltiptext">提示文本</span>

</div>

HTML代码：

  • 使用容器元素（例如 <div>）并向其添加 "tooltip" 类。当用户将鼠标悬停在此 <div> 上时，会显示工具提示文本。
  • 工具提示文本位于 class="tooltiptext" 的嵌入式元素（如 <span>）中。

CSS代码：

  • tooltip 类使用 position:relative，用于放置工具提示文本（position:absolute）。
  • tooltiptext 类保存实际的工具提示文本，默认情况下它是隐藏的，并会在鼠标悬停时可见。
  • 还为其添加了一些基本样式：120 像素的宽度、黑色背景、白色文本、文本居中以及 5px 的上下内边距（padding）。
  • border-radius 属性用于向工具提示文本添加圆角。
  • 当用户将鼠标移到 class="tooltip" 的 <div> 上时，:hover 选择器用于显示工具提示文本。

定位提示工具

显示在右侧：

.tooltip .tooltiptext {

    top: -5px;

    left: 105%;

}

显示在左侧：

.tooltip .tooltiptext {

    top: -5px;

    right: 105%;

}

*注：top:-5px 同于定位在容器元素的中间，使用数字 5 因为提示文本的顶部和底部的内边距（padding）是 5px。

显示在头部：

.tooltip .tooltiptext {

    width: 120px;

    bottom: 100%;

    left: 50%;

    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */

}

显示在底部：

.tooltip .tooltiptext {

    width: 120px;

    top: 100%;

    left: 50%;

    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */

}

注：如果想要提示工具显示在头部和底部，需要使用 margin-left 属性，并设置为 -60px（使用宽度的一半来居中对齐），即： width/2 (120/2 = 60)。

添加箭头

可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框。

顶部提示框/底部箭头：

.tooltip .tooltiptext::after {

    content: " ";

    position: absolute;

    top: 100%; /* 提示工具底部 */

    left: 50%;   /*用于居中对齐箭头*/

    margin-left: -5px;

    border-width: 5px;

    border-style: solid;

    border-color: black transparent transparent transparent;

}

* **border-width** 属性指定了箭头的大小，如果修改它，也要修改 margin-left 值。这样箭头在能居中显示。

* **border-color** 用于将内容转换为箭头，设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。

底部提示框/顶部箭头：

```css

.tooltip .tooltiptext::after {

    content: " ";

    position: absolute;

    bottom: 100%;  /* 提示工具头部 */

    left: 50%;

    margin-left: -5px;

    border-width: 5px;

    border-style: solid;

    border-color: transparent transparent black transparent;

}

右侧提示框/左侧箭头：

.tooltip .tooltiptext::after {

    content: " ";

    position: absolute;

    top: 50%;

    right: 100%; /* 提示工具左侧 */

    margin-top: -5px;

    border-width: 5px;

    border-style: solid;

    border-color: transparent black transparent transparent;

}

左侧提示框/右侧箭头：

.tooltip .tooltiptext::after {

    content: " ";

    position: absolute;

    top: 50%;

    left: 100%; /* 提示工具右侧 */

    margin-top: -5px;

    border-width: 5px;

    border-style: solid;

    border-color: transparent transparent transparent black;

}

淡入效果

可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果:

.tooltip .tooltiptext {

    opacity: 0;

    transition: opacity 1s;

}

.tooltip:hover .tooltiptext { opacity: 1; }

属性选择器

可以设置带有特定属性或属性值的 HTML 元素的样式。

属性选择器

把包含标题（title）的所有元素变为蓝色：

[title] { color:blue; }

属性和值选择器

改变标题title='runoob'元素的边框样式：

[title=runoob] { border:5px solid green; }

属性选择器 ~=, |=, ^=, $=, *= 的区别

attribute 属性中包含 value:　

  • [attribute~=value] 属性中包含独立的单词为 value：
[title~=flower]  -->  <img src="/i/eg_tulip.jpg" title="tulip flower" />
  • [attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行：
[title*=flower]   -->  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

attribute 属性以 value 开头:

  • [attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：
[lang|=en]     -->  <p lang="en">  <p lang="en-us">
  • [attribute^=value] 属性的前几个字母是 value 就可以：
[lang^=en]    -->  <p lang="ennn">

attribute 属性以 value 结尾:

  • [attribute$=value] 属性的后几个字母是 value 就可以：
a[src$=".pdf"]

Dreamweaver基础教程：学习CSS的更多相关文章

  1. .Net程序员之Python基础教程学习----列表和元组 [First Day]

    一. 通用序列操作: 其实对于列表,元组 都属于序列化数据,可以通过下表来访问的.下面就来看看序列的基本操作吧. 1.1 索引: 序列中的所有元素的下标是从0开始递增的. 如果索引的长度的是N,那么所 ...

  2. objective-c基础教程——学习小结

    objective-c基础教程——学习小结   提纲: 简介 与C语言相比要注意的地方 objective-c高级特性 开发工具介绍(cocoa 工具包的功能,框架,源文件组织:XCode使用介绍) ...

  3. Python基础教程学习笔记：第一章 基础知识

    Python基础教程 第二版 学习笔记 1.python的每一个语句的后面可以添加分号也可以不添加分号:在一行有多条语句的时候,必须使用分号加以区分 2.查看Python版本号,在Dos窗口中输入“p ...

  4. SpringCloud基础教程学习记录

    这个学习记录是学习自翟永超前辈的SpringCloud的基础教程. 自己写这个教程的目的主要是在于,想要更凝练总结一些其中的一些实用点,顺便做个汇总,这样自己在复习查看的时候更加方便,也能顺着自己的思 ...

  5. jascript基础教程学习总结(2)

    摘自:javascript基础教程 用链接对用户进行重定向: js001.html 这个HTML页面基于链接对用户进行重定向 <!DOCTYPE html PUBLIC "-//W3C ...

  6. javascript基础教程学习总结(1)

    摘自javascript基础教程 开始: 1.将脚本放在哪里: 1.1 放在html和<html>之间 范例: <!DOCTYPE html PUBLIC "-//W3C/ ...

  7. css 基础教程学习

    css基础语法 css语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 如果要定义不止一个声明,则 ...

  8. 【学习笔记】Python基础教程学习笔记

    教程视频网盘共享:http://pan.baidu.com/s/1hrTrR5E 03-python基础.if判断 print 输出数据 print("hahahah")----- ...

  9. .Net程序员之Python基础教程学习----函数和异常处理[Fifth Day]

       今天主要记录,Python中函数的使用以及异常处理. 一.函数:    1.函数的创建以及调用. def Add(val1,val2): return val1+val2; print Add( ...

  10. .Net程序员之Python基础教程学习----判断条件与循环[Fourth Day]

        今天学习Python的判断条件与循环操作. 一. 布尔变量: 在学习判断条件之前必须的了解bool变量,在Python中bool变量与C语言比较类似,与.net差别比较大,其中下面集中情况需要 ...

随机推荐

  1. C/C++ 内存转储与获取DLL加载

    CREATE_PROCESS_DEBUG_EVENT 创建进程的调试事件.CREATE_PROCESS_DEBUG_INFO结构体描述了该类调试事件的详细信息 OUTPUT_DEBUG_STRING_ ...

  2. Java 运算符 - 除法

    1. 除法运算符 Java中的除法运算符是"/"符号,表示将左侧操作数除以右侧操作数. 2. 整数除法 在Java中,整数除法的结果是一个整数,即只保留除法的整数部分,舍去小数部分 ...

  3. Spring 与 Mybatis 中的 @Repository 与 @Mapper

    @Repository.@Service.@Controller,它们分别对应存储层Bean,业务层Bean,和展示层Bean.如果使用@Repository则需要使用@MapperScan(&quo ...

  4. SuperObject 的创建类型重大发现

    原来每当到自己创建数组加对象的时候就很头疼,原来是这样搞的,这次是清晰了 向数组里增加对象就用这个了: MySo.AsArray.Add(SO('{"爱好":["编程&q ...

  5. Linux离线安装MySQL（5.7.22）

    1.下载tar包 (1)Window PC下载(PC需要联网) MySQL官网地址:https://www.mysql.com/ MySQL社区版下载地址: https://dev.mysql.com ...

  6. Linux 环境下使用 sqlplus 访问远程 Oracle 数据库

    自己最近需要在 Oracle 生产环境检查一些数据,但是目前大多数的生产环境,出于安全考虑,不会提供图形界面让你使用类似 Navicat 工具让你直接访问数据库,网上找了很多资料,大部分都比较过时或者 ...

  7. 回顾复习之背包DP

    \(\small{(本文统一将c[i]视作cost,w[i]视作worth,下面的代码用这两个变量表示费用和价值)}\) \(\Large\textbf{1. 01背包}\) \(\large\tex ...

  8. NEMU PA 4 实验报告

    一.实验目的 在前面的PA123中,我们分别实现了基本的运算单元,实现了各种指令和程序的装载,实现了存储器的层次结构.而在PA4中,为了让NEMU可以处理异常情况以及和外设交互,我们要做的事情有以下: ...

  9. 斐讯K3C改散热

    斐讯K3C改散热 斐讯K3C日常使用还是不错的,就是日常的温度还是比较高的,不过冬天用来当暖手宝还是不错的. 这个改散热的方法是跟贴吧老哥学的,不得不说贴吧老哥还是牛皮,原贴在这,我当时拍的照片不够, ...

  10. Java设计模式-外观模式Facade

    介绍 外观模式(Facade),也叫"过程模式:外观模式为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子系统更加容易使用 外观模式通过定义一个一致的接口, ...