CSS基础
1 CSS定义
CSS层叠样式表: HTML在浏览器中怎么显示，如文字的大小，颜色，字体加粗等
HTML 标签原本被设计为用于定义文档内容。
样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
2 CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号(;)结束，声明组以大括号({})括起来:
p {color:red;text-align:center;}
CSS注释以 "/*" 开始, 以 "*/" 结束
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它
3 CSS选择器
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用
#para1
{
text-align:center;
color:red;
}
<p id="para1">Hello World!</p>
class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示
类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用
.center{text-align:center;}
<h1 class="center">标题居中</h1>
你也可以指定特定的HTML元素使用class
p.center {text-align:center;}
4 CSS样式
插入样式表的方法有三种:
外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)
外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <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>
多重样式优先级
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
1. 内联样式表的权值最高 1000；
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1
5 CSS 背景
background-color 属性定义了元素的背景颜色
body {background-color:#b0c4de;}
CSS中，颜色值通常以以下方式定义:
十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"
background-image 属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
body {background-image:url('paper.gif');}
background-image 属性会在页面的水平或者垂直方向平铺
background-repeat水平或者垂直方向平铺
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
如果你不想让图像平铺
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
background-position背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
background-attachment设置固定的背景图像。图像不会随着页面的其他部分滚动。
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
背景简写属性
当使用简写属性时，属性值的顺序为：
body {background:#ffffff url('img_tree.png') no-repeat right top;}
background-color
background-image
background-repeat
background-attachment
background-position
6 CSS文本格式
文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
文本对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
文本修饰
text-decoration属性主要是用来删除链接的下划线
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
文本转换
p.uppercase {text-transform:uppercase;} 所有大写
p.lowercase {text-transform:lowercase;} 所有小写
p.capitalize {text-transform:capitalize;} 所有首字母大写
文本缩进
文本缩进属性是用来指定文本的第一行的缩进
p {text-indent:50px;}
字符之间的间隔
h1 {letter-spacing:3px;} 字符间的空间放大
h2 {letter-spacing:-1px;} 字符间的空间减小
行与行之间的空间
p.small {line-height:70%;}
p.big {line-height:200%;}
反书写方式
.ex1 {direction:rtl;}
单词间的空白空间
p{ word-spacing:30px;}
添加文本阴影
h1 {text-shadow:3px 3px #FF0000;}
禁用文字环绕（不换行）
p{white-space:nowrap;}
文本垂直对齐图像
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
所有CSS文本属性。
|
属性 |
描述 |
|
设置文本颜色 |
|
|
设置文本方向。 |
|
|
设置字符间距 |
|
|
设置行高 |
|
|
对齐元素中的文本 |
|
|
向文本添加修饰 |
|
|
缩进元素中文本的首行 |
|
|
设置文本阴影 |
|
|
控制元素中的字母 |
|
|
设置或返回文本是否被重写 |
|
|
设置元素的垂直对齐 |
|
|
设置元素中空白的处理方式 |
|
|
设置字间距 |
7 CSS 字体
CSS字型
在CSS中，有两种类型的字体系列名称：
通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"）
|
Generic family |
字体系列 |
说明 |
|
Serif |
Times New Roman |
Serif字体中字符在行的末端拥有额外的装饰 |
|
Sans-serif |
Arial |
"Sans"是指无 - 这些字体在末端没有额外的装饰 |
|
Monospace |
Courier New |
所有的等宽字符具有相同的宽度 |
font-family 属性设置文本的字体系列。
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
p{font-family:"Times New Roman", Times, serif;}
字体样式
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：
正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
p.oblique {font-style:oblique;}
p.normal {font-style:normal;}
p.italic {font-style:italic;}
字体大小像素
h1 {font-size:40px;}
h2 {font-size:30px;}
em来设置字体大小
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
h1 {font-size:2.5em;} /* 40px/16=2.5em */
IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。
在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比：
body {font-size:100%;}
h1 {font-size:2.5em;}
在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小
设置字体加粗
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
设置字体转变
p.normal {font-variant:normal;}
一个声明中的字体属性
p.ex1
{
font:15px arial,sans-serif;
}
p.ex2
{
font:italic bold 12px/30px Georgia,serif;
}
所有CSS字体属性
|
Property |
描述 |
|
在一个声明中设置所有的字体属性 |
|
|
指定文本的字体系列 |
|
|
指定文本的字体大小 |
|
|
指定文本的字体样式 |
|
|
以小型大写字体或者正常字体显示文本。 |
|
|
指定字体的粗细。 |
8 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后面
背景颜色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
链接示例
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
9 CSS 列表
列表
在HTML中，有两种类型的列表：
无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 - 列表项的标记有数字或字母
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;}
小黑点、小方框；数字或字母
列表项标记的图像
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:20px;
}
例子解释：
ul:
设置列表样式类型为没有删除列表项标记
设置填充和边距0px（浏览器兼容性）
ul中所有li:
设置图像的URL，并设置它只显示一次（无重复）
您需要的定位图像位置（左0px和上下5px）
用padding-left属性把文本置于列表中
简写属性
ul { list-style: square url("sqpurple.gif"); }
可以按顺序设置如下属性：
list-style-type
list-style-position (有关说明，请参见下面的CSS属性表)
list-style-image
所有的CSS列表属性
|
属性 |
描述 |
|
简写属性。用于把所有用于列表的属性设置于一个声明中 |
|
|
将图象设置为列表项标志。 |
|
|
设置列表中列表项标志的位置。 |
|
|
设置列表项标志的类型。 |
10 CSS 表格
表格边框
table, th, td
{
border: 1px solid black;
}
折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
table
{
border-collapse:collapse;
}
表格宽度和高度
Width和height属性定义表格的宽度和高度
table
{
width:100%;
}
th
{
height:50px;
}
表格文字对齐
text-align属性设置水平对齐方式，像左，右，或中心：
td
{
text-align:right;
}
垂直对齐属性设置垂直对齐，比如顶部，底部或中间
td
{
height:50px;
vertical-align:bottom;
}
表格填充
td
{
padding:15px;
}
表格颜色
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
标题的显示位置
caption {caption-side:bottom;}
11 CSS盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
不同部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
12 CSS边框
边框样式：
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>
边框宽度
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin
注意: "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。
边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色：
name - 指定颜色的名称，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"
单独设置各边
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:5px solid red;
CSS 边框属性
|
属性 |
描述 |
|
简写属性，用于把针对四个边的属性设置在一个声明。 |
|
|
用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
|
|
简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
|
|
简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
|
|
简写属性，用于把下边框的所有属性设置到一个声明中。 |
|
|
设置元素的下边框的颜色。 |
|
|
设置元素的下边框的样式。 |
|
|
设置元素的下边框的宽度。 |
|
|
简写属性，用于把左边框的所有属性设置到一个声明中。 |
|
|
设置元素的左边框的颜色。 |
|
|
设置元素的左边框的样式。 |
|
|
设置元素的左边框的宽度。 |
|
|
简写属性，用于把右边框的所有属性设置到一个声明中。 |
|
|
设置元素的右边框的颜色。 |
|
|
设置元素的右边框的样式。 |
|
|
设置元素的右边框的宽度。 |
|
|
简写属性，用于把上边框的所有属性设置到一个声明中。 |
|
|
设置元素的上边框的颜色。 |
|
|
设置元素的上边框的样式。 |
|
|
设置元素的上边框的宽度。 |
13 CSS 轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
轮廓线
outline:green dotted thick;
轮廓样式
<style>
p {border:1px solid red;}
p.dotted {outline-style:dotted;}
p.dashed {outline-style:dashed;}
p.solid {outline-style:solid;}
p.double {outline-style:double;}
p.groove {outline-style:groove;}
p.ridge {outline-style:ridge;}
p.inset {outline-style:inset;}
p.outset {outline-style:outset;}
</style>
</head>
<body>
<p class="dotted">点线轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双线轮廓</p>
<p class="groove">凹槽轮廓</p>
<p class="ridge">垄状轮廓</p>
<p class="inset">嵌入轮廓</p>
<p class="outset">外凸轮廓</p>
<p><b>注意:</b> 如果只有一个 !DOCTYPE 指定 IE 8 支持 outline 属性。</p>
</body>
轮廓颜色
outline-style:dotted;
outline-color:#00ff00;
所有轮廓属性
"CSS" 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。
|
属性 |
说明 |
值 |
CSS |
|
在一个声明中设置所有的轮廓属性 |
outline-color |
2 |
|
|
设置轮廓的颜色 |
color-name |
2 |
|
|
设置轮廓的样式 |
none |
2 |
|
|
设置轮廓的宽度 |
thin |
|
14 CSS外边距
Margin
margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的
margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。
可能的值
|
值 |
说明 |
|
auto |
设置浏览器边距。 |
|
length |
定义一个固定的margin（使用像素，pt，em等） |
|
% |
定义一个使用百分比的边距 |
Margin可以使用负值，重叠的内容。
单边外边距属性
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
margin属性可以有一到四个值
15 CSS填充
当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
Padding属性，可以有一到四个值
padding: 10px; /* 意思是上下左右值全是 10px */
padding:5px 10px; /* 意思是上下为 5px，左右为 10px */
padding:1px 2px 3px 4px; /* 这个写法意思是：上为 1px，右为 2px，下为 3px，左为 4px */
padding:5px 10px 7px; /* 这种写法意思是：上为 5px，左右为 10px，下为 7px */
16 CSS分组和嵌套
分组选择器
h1,h2,p
{
color:green;
}
嵌套选择器
为所有p元素指定一个样式
为所有class="marked"的元素指定一个样式
为所有class="marked"元素内的p元素指定一个样式
17 CSS尺寸
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。
所有CSS 尺寸 (Dimension)属性
|
属性 |
描述 |
|
设置元素的高度。 |
|
|
设置行高。 |
|
|
设置元素的最大高度。 |
|
|
设置元素的最大宽度。 |
|
|
设置元素的最小高度。 |
|
|
设置元素的最小宽度。 |
|
|
设置元素的宽度。 |
18 CSS显示与可见性
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
h1.hidden {visibility:hidden;}
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
h1.hidden {display:none;}
块元素装换为内联元素
li {display:inline;}
内联元素转换为块元素
span {display:block;}
注意：变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
inline-block行内块元素
表格设置为单一的边框
tr.collapse {
visibility: collapse;
}
19 CSS 定位
position 属性的四个值：
static
relative
fixed
Absolute
static 定位
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到 top, bottom, left, right影响。
fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
p.pos_fixed { position:fixed; top:30px; right:5px; }
relative 定位
相对定位元素的定位是相对其正常位置。
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。
相对定位元素经常被用来作为绝对定位元素的容器块。
absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
h2
{
position:absolute;
left:100px;
top:150px;
}
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
重叠的元素
元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
一个元素可以有正数或负数的堆叠顺序。
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
img { position:absolute; left:0px; top:0px; z-index:-1; }
<img src="w3css.gif" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
img
{
position:absolute;
clip:rect(0px,100px,100px,0px);
}
使用滚动条来显示元素溢出的内容
overflow 属性规定当内容溢出元素框时发生的事情
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
属性值：visible, hidden, scroll, 或 inherit
改变光标
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
20 CSS浮动
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
img { float:right; }
彼此相邻的浮动元素会从上到下，从左到右排列
清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
.text_line { clear:both; }
CSS 中所有的浮动属性
"CSS" 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。
|
属性 |
描述 |
值 |
CSS |
|
指定不允许元素周围有浮动元素。 |
left |
1 |
|
|
指定一个盒子（元素）是否可以浮动。 |
left |
|
注意：父块没有设置指定的高宽，当子块设置为浮动后，原本包裹子块的父块的高度塌陷消失，这时给父块设置overflow:hidden就能清除浮动造成的影响，使父块重新包裹子块。
21 CSS 布局
元素水平垂直居中于父元素
父元素：position: relative;
子元素：left: 0; right: 0; bottom: 0;top: 0; margin:auto; position: absolute;
元素居中对齐
要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。
设置到元素的宽度将防止它溢出到容器的边缘。
注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。
文本居中对齐
文本在元素内居中对齐，可以使用
text-align: center;
文本在元素内垂直居中
Line-hight和元素的高度一致
图片居中对齐
img { display: block; margin: auto; width: 40%; }
左右对齐 - 使用定位方式
.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; }
注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。
body { margin: 0; padding: 0; }浏览器兼容
左右对齐 - 使用 float 方式
body { margin: 0; padding: 0; }
.right { float: right; width: 300px; background-color: #b0e0e6; }
垂直居中对齐 - 使用 padding
.center { padding: 70px 0; border: 3px solid green; }
如果要水平和垂直都居中，可以使用 padding 和 text-align: center:
垂直居中 - 使用 line-height
.center p { line-height: 1.5;
display: inline-block;
vertical-align: middle; }
垂直居中 - 使用 position 和 transform
除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中
22 CSS组合选择器
CSS组合选择符包括各种简单选择符的组合方式。
在 CSS3 中包含了四种组合方式:
后代选取器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）
后代选取器
后代选取器匹配值元素所有的后代元素。
div p { background-color:yellow; }
子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能匹配为某元素的子元素。
div>p { background-color:yellow; }
相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
div+p { background-color:yellow; }
后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
div~p { background-color:yellow; }
23 CSS 伪类
CSS伪类是用来添加一些选择器的特殊效果。
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
anchor伪类
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意： 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。
伪类和CSS类
伪类可以与 CSS 类配合使用：
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>
CSS - :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; }
CSS - :lang 伪类
q:lang(no) {quotes: "~" "~";}
lang 类为属性值为 no 的q元素定义引号的类型
CSS-：focus伪类
鼠标焦点在的那个input会显示黄色背景
input:focus{background-color:yellow;}
24 CSS伪元素
CSS伪元素是用来添加一些选择器的特殊效果。
语法
伪元素的语法：
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;}
:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
p:first-line { color:#ff0000; font-variant:small-caps; }
:first-letter 伪元素
p:first-letter { color:#ff0000; font-size:xx-large; }
注意： "first-letter" 伪元素只能用于块级元素。
伪元素和CSS类
伪元素可以结合CSS类：
p.article:first-letter {color:#ff0000;}
多个伪元素
p:first-letter { color:#ff0000; font-size:xx-large; }
p:first-line { color:#0000ff; font-variant:small-caps; }
CSS - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容
h1:before { content:url(smiley.gif); }
CSS - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容
h1:after { content:url(smiley.gif); }
例:形成特殊图形
.menu-top::after {
position: absolute;
content: "";
bottom: 0px;
left: 0px;
width: 0px;
height: 0px;
border-left: 78px solid transparent;
border-right: 78px solid transparent;
border-bottom: 10px solid #fff;
}
所有CSS伪类/元素
|
选择器 |
示例 |
示例说明 |
|
a:link |
选择所有未访问链接 |
|
|
a:visited |
选择所有访问过的链接 |
|
|
a:active |
选择正在活动链接 |
|
|
a:hover |
把鼠标放在链接上的状态 |
|
|
input:focus |
选择元素输入后具有焦点 |
|
|
p:first-letter |
选择每个<p> 元素的第一个字母 |
|
|
p:first-line |
选择每个<p> 元素的第一行 |
|
|
p:first-child |
选择器匹配属于任意元素的第一个子元素的 <]p> 元素 |
|
|
p:before |
在每个<p>元素之前插入内容 |
|
|
p:after |
在每个<p>元素之后插入内容 |
|
|
p:lang(it) |
为<p>元素的lang属性选择一个开始值 |
25 CSS导航栏
熟练使用导航栏，对于任何网站都非常重要。
使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。
ul { list-style-type: none; margin: 0; padding: 0; }
list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
移除浏览器的默认设置将边距和填充设置为0
垂直导航栏
a { display:block; width:60px; }
display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度
激活实例；创建链接；添加边框；固定导航栏
水平导航栏
有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。
这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。
内联列表项
li { display:inline; }可以时列表项水平显示
浮动列表项
li { float:left; } a { display:block; width:60px; }
激活实例；链接右对齐；添加分割线；固定导航条
26 CSS下拉菜单
当鼠标移动到指定元素上（图片，导航栏等）时，会出现下拉菜单。
<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;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
27 CSS图片栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="responsive">
<div class="img">
<a target="_blank"
href="http://static.runoob.com/images/demo/demo1.jpg">
<img src="http://static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div>
28 CSS图片拼合技术
图像拼合就是单个图像的集合。
有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
使用图像拼合会降低服务器的请求数量，并节省带宽。
显示图片img_navsprites.gif的一部分
img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}
父元素设置相对定位，子元素绝对定位，之后显示导航列表上一个个的定位图片
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}
#home{left:0p#x;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}
<ul id="navlist">
<li id="home"><a href="/"></a></li>
<li id="prev"><a href="/css/"></a></li>
<li id="next"><a href="/css/"></a></li>
</ul>
悬停效果
当图片悬停的时候，图片切换到另一个位置
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
29 CSS媒体类型
媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。
浏览器屏幕上显示一个14像素的Verdana字体样式。但是如果页面打印，将是10个像素的Times字体，font-weight在屏幕上和纸上设置为粗体
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
30 CSS属性选择器
具有特定属性的HTML元素样式不仅仅是class和id
属性选择器
把包含标题（title）的所有元素变为蓝色
[title] { color:blue; }
属性和值选择器
[title=runoob] { border:5px solid green; }
属性和值的选择器 - 多值
包含指定值的title属性的元素样式
[title~=hello] { color:blue; }
包含指定值的lang属性的元素样式
[lang|=en] { color:blue; }
表单的属性选择器
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
