目录
css 简介css 语法id 和 classcss 创建使用百分比和em组合css 列表css 表格表格宽度和高度(width和height)盒子模型(box model)display(显示) 与 visibility（可见性）display – 块和内联元素position(定位)布局 – overflow伪类(pudo-class)伪类和css类伪元素和css类提示工具(tooltip)css 指层叠样式表 (cascading style sheets),样式定义如何显示 html 元素,样式通常存储在样式表中,外部样式表通常存储在 css 文件中(多个样式定义可层叠为一个）。
css中，颜色值通常以以下方式定义:
十六进制 – 如：”#ff0000″rgb – 如：”rgb(255,0,0)”颜色名称 – 如：”red”css 规则由两个主要的部分构成：选择器，以及一条或多条声明：
选择器通常是需要改变样式的 html 元素，参考css 选择器每条声明由一个属性和一个值组成，属性（property）是您希望设置的样式属性（style attribute），参考css 属性每个属性有一个值，属性和值被冒号分开。css声明总是以分号(;)结束，声明总以大括号({})括起来。注释是用来解释代码，css注释以 /* 开始, 以 */ 结束。<!doctype html><html><head><meta chart="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="/d/file/titlepic/" target="_blank">这是一个链接</a></p></body></html>如果要在html元素中设置css样式，需要在元素中设置“id” 和 “class”选择器。
id 选择器可以为标有特定 id 的 html 元素指定特定的样式，html元素以id属性来设置id选择器,css 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=”para1″:
<!doctype html><html><head><meta chart="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 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在html中以class属性表示, 在 css 中，类选择器以一个点”.”号显示。
在以下的例子中，所有拥有 center 类的 html 元素均为居中：
<!doctype html><html><head><meta chart="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 chart="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 中起作用。
当读到一个样式表时，浏览器会根据它来格式化 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>注：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
css 背景属性用于定义html元素的背景：
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-image 属性：
background-position属性设置背景图像的起始位置：
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动：
为了简化页面的背景属性的代码，可以将这些属性合并在同一个属性中，**背景的简写属性为 “background”:
body {background:#ffffff url('img_tree.png') no-repeat right top;}当使用简写属性时，属性值的顺序为（无需全部使用）：
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position所有css文本属性：
一个网页的背景颜色是指在主体内的选择：
body {color:red;}h1 {color:#00ff00;}h2 {color:rgb(255,0,0);}注：对于w3c标准的css，如果你定义了颜色属性，你还必须定义背景色属性。
text-align属性指定元素文本的水平对齐方式：
text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等：
ext-transform 属性控制文本的大小写：
text-indent 属性规定文本块中首行文本的缩进：
css字体属性定义字体，加粗，大小，文字样式，所有css字体属性如下：
在css中，有两种类型的字体系列名称：
通用字体系列：拥有相似外观的字体系统组合（如 “rif” 或 “monospace”）特定字体系列：一个特定的字体系列（如 “times” 或 “courier”）font-family 属性设置文本的字体系列，应该设置几个字体名称作为一种”后备”机制，如果浏览器不支持第一种字体，它将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如font family：”宋体”。
多个字体系列是用一个逗号分隔指明：
p{font-family:"times new roman", times, rif;}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;}为了避免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 */在所有浏览器的解决方案中，设置 <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 列表属性作用如下：
设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像在 html中，有两种类型的列表：
无序列表 ul – 列表项标记用特殊图形（如小黑点、小方框等）有序列表 ol – 列表项的标记有数字或字母使用 css，可以列出进一步的样式，并可用图像作列表项标记。
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：
ul{ list-style-image: url('sqpurple.gif');}如果想在所有的浏览器放置同样的图像标志，就应使用浏览器兼容性解决方案，下面的例子会显示相同的图像标记：
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:
ul 中所有 li:
设置图像的 url，并设置它只显示一次（无重复）需要的定位图像位置（左 0px 和上下 5px）用 padding-left 属性把文本置于列表中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>
在单个属性中可以指定所有的列表属性，就是所谓的简写属性。
为列表使用简写属性，列表样式属性设置如下：
ul{ list-style: square url("sqpurple.gif");}可以按顺序设置如下属性：
list-style-typelist-style-positionlist-style-image如果上述值丢失一个，其余仍在指定的顺序，就没关系。
list-style-type:none 属性可以用于移除小标记，默认情况下列表 <ul> 或 <ol> 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除:
ul { list-style-type: none; margin: 0; padding: 0;}使用border属性指定css表格边框，下面的例子指定了一个表格的th和td元素的黑色边框：
table, th, td{ border: 1px solid black;}border-collap 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
table{ border-collap:collap;}table,th, td{ border: 1px solid black;}width和height属性定义表格的宽度和高度，下面的例子是设置100％的宽度、50像素的th元素的高度的表格：
table { width:100%;}th{ height:50px;}text-align属性设置水平对齐方式，向左，右，或中心：
td { text-align:right; }vertical-align 垂直对齐属性设置垂直对齐，比如顶部，底部或中间：
td{ height:50px; vertical-align:bottom;}如果要在表中控制内容和边框之间的空格，应使用td和th元素的填充属性：
td {padding:15px;}下面的例子指定边框的颜色和th元素的文本和背景颜色：
table, td, th{ border:1px solid green;}th{ background-color:green; color:white;}所有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页面声明 即可。
css边框属性允许指定一个元素边框的样式和颜色：
边框样式属性（border-style）用来定义边框的样式，指定要显示什么样的边界：
可以通过border-width属性为边框指定宽度，为边框指定宽度有两种方法：
指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)使用 3 个关键字之一（css 没有定义 3 个关键字的具体宽度）：thick 、medium（默认值） 和 thinborder-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”属性中设置：border-width、border-style (required)、border-color。
border:5px solid red;
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用保护环境作文400字。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度，不会增加额外的width或者height。
**margin(外边距)属性定义元素周围的空间，清除周围的（外边框）元素区域，没有背景颜色、是完全透明的。
margin可以单独改变元素的上、下、左、右边距，也可以一次改变所有的外边距属性。
边距属性：
值的类型：
padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
padding可以单独改变元素的上、下、左、右填充，也可以一次改变所有的填充属性。
填充属性：
值的类型：
所有边距属性的简写属性是 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) 属性允许控制元素的高度和宽度，允许增加行间距：
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”，两种方法会产生不同的结果：
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，仍然会影响布局。display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间，该元素原本占用的空间也会从页面布局中消失。h1.hidden {visibility:hidden;}h1.hidden {display:none;}块元素是一个元素，占用了全部宽度，在前后都是换行符，如：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定位属性：
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，最后定位在html代码中的元素将被显示在最前面。
img{ position:absolute; left:0px; top:0px; z-index:-1;}overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条，overflow属性有以下值：
注：overflow 属性只工作于指定高度的块元素上，默认情况下overflow 的值为 visible， 意思是内容溢出元素框。
所有的浮动属性：
float（浮动）会使元素向左或向右移动，其周围的元素也会重新排列。
float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素按如下方式浮动：
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它，浮动元素之前的元素将不会受到影响。彼此相邻的浮动元素：把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性——指定元素两侧不能出现浮动元素。
要水平居中对齐一个元素(如 div), 可以使用 margin: auto;：
设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度，并将两边的空外边距平均分配。.center { margin: auto; width: 60%; }注: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。
如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;：
.center { text-align: center; }要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中:
img { display: block; margin: auto; width: 40%;}可以使用 position: absolute; 属性来对齐元素：
.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73ad21; padding: 10px;}注：绝对定位元素会被从正常流中删除，并且能够交叠元素。
可以使用 float 属性来对齐元素：
.right { float: right; width: 300px; border: 3px solid #73ad21; padding: 10px;}注：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候可以使用 “clearfix(清除浮动)” 来解决该问题。
.clearfix {overflow: auto;}简单方式就是头部顶部使用 padding（要水平和垂直都居中可以使用 padding 和 text-align: center）：
.center { padding: 70px 0; border: 3px solid green; text-align: center;}.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;}还可以使用 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 lectors）只能选择作为某元素直接/一级子元素的元素，选择 div元素中所有直接子元素 p ：
div>p { background-color:yellow; }相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素，选取所有位于 div 元素后的第一个 p 元素：
div+p { background-color:yellow; }后续兄弟选择器选取所有指定元素之后的相邻兄弟元素，选取所有 div 元素之后的所有相邻兄弟元素 p :
div~p { background-color:yellow; }伪类是用来添加一些选择器的特殊效果，可以看作以选中元素为基准点此元素的一些状态或属性。
伪类选择元素基于的是当前元素处于的状态（当前所具有的特性），由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
伪类的语法：
lector:pudo-class {property:value;}伪类也可以使用伪类：
lector.class:pudo-class {property:value;}在支持 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 类配合使用：
a.red:visited {color:#ff0000;} <a class="red" href="css-syntax.html">css 语法</a>可以使用 :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 伪类可以为不同的语言定义特殊的规则，为属性值为 no 的q元素定义引号的类型：
q:lang(no) {quotes: "~" "~";}伪元素是对元素中的特定内容进行操作，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。
伪元素的语法：
lector:pudo-element {五风十雨property:value;}css类也可以使用伪元素：
lector.class:pudo-element {property:value;}“first-line” 伪元素用于向文本的首行设置特殊样式，对 p 元素的第一行文本进行格式化：
p:first-line { color:#ff0000; font-variant:small-caps;}注：“first-line” 伪元素只能用于块级元素。
“first-letter” 伪元素用于向文本的首字母设置特殊样式：
p:first-letter { color:#ff0000; font-size:xx-large;}注：“first-letter” 伪元素只能用于块级元素。
伪元素可以结合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” 伪元哈尔滨医科大学素可以在元素的内容前面插入新内容，在每个 h1 元素前面插入一幅图片：
h1:before { content:url(smiley.gif); }“: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>mou 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; }当用户将鼠标指针移到元素上时，工具提示通常用于提供关于某内容的额外信息：
创建一个鼠标移到元素上时显示的工具提示：
<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"]
本文发布于:2023-04-03 21:21:48，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/1869c5e139fc67a55bc110e0e55d2971.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：Dreamweaver基础教程：学习CSS.doc
本文 PDF 下载地址：Dreamweaver基础教程：学习CSS.pdf
| 留言与评论（共有 0 条评论） |
