1、css是什么？
CSS 指层叠样式表 (Cascading Style Sheets)，样式定义如何显示 HTML 元素，样式通常存储在样式表中。外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素，每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute），每个属性有一个值，属性和值被冒号分开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body {background-color:yellow;}
h1 {font-size:36pt;}
h2 {color:blue;}
p {margin-left:50px;}
</style>
</head>
<body>
<h1>这个标题设置的大小为 36 pt</h1>
<h2>这个标题设置的颜色为蓝色：blue</h2>
<p>这个段落的左外边距为 50 像素：50px</p>
</body>
</html>2、在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。
id和class的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>3.插入样式表的方法有三种:外部样式表、内部样式表、内联样式。
外部样式表：当样式需要应用于很多页面时，外部样式表将是理想的选择。每个页面使用 <link> 标签链接到样式表， <link> 标签在（文档的）头部。样式表应该以 .css 扩展名进行保存。
eg：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表：当单个文档需要特殊的样式时，应该使用内部样式表。使用 <style> 标签在文档头部定义。
eg:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联样式:需要在相关的标签内使用样式（style）属性。eg：<p style="color:sienna;margin-left:20px">这是一个段落。</p>
优先级顺序：
!important 规则>内联样式>ID 选择器>伪类>属性选择器>类选择器>元素(类型)选择器>通用选择器（*）
4.css背景属性：
background-attachment：背景图像是否固定或者随着页面的其余部分滚动。
background-color：设置元素的背景颜色。
background-image：把图像设置为背景。
background-position：设置背景图像的起始位置。
background-repeat：设置背景图像是否及如何重复。
eg：
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
或者：
body {background:#ffffff url('img_tree.png') no-repeat right top;}
4.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-设置字间距。
5.css链接
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
a:link - 正常，未访问过的链接；a:visited - 用户已访问过的链接；a:hover - 当用户鼠标放在链接上时；a:active - 链接被点击的那一刻。规则：a:hover 必须跟在 a:link 和 a:visited后面，a:active 必须跟在 a:hover后面。
text-decoration 属性主要用于删除链接中的下划线；值underline指有下划线，值none表没有下划线。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:Georgia, serif;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>将鼠标移至链接上改变样式.</p>
<p><b><a class="one" href="/css/" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/css/" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="/css/" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="/css/" target="_blank">这个链接改变字体类型</a></b></p>
<p><b><a class="five" href="/css/" target="_blank">这个链接改变文字修饰</a></b></p>
</body>
</html>6.css列表
无序列表 - 列表项标记用特殊图形（如小黑点、小方框等），有序列表 - 列表项的标记有数字或字母。
list-style 简写属性在一个声明中设置所有的列表属性。eg：list-style:square url("sqpurple.gif")。
list-style-type属性指定列表项标记的类型，eg：ul.a {list-style-type: circle;}；ol.c {list-style-type: upper-roman;}。
list-style-image将图象设置为列表项标志。
list-style-position 属性，值inside表示列表项目标记放置在文本以内，且环绕文本根据标记对齐；outside默认值，表示保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
7.css 表格
border属性指定CSS表格边框；
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开;
Width和height属性定义表格的宽度和高度。
text-align属性设置水平对齐方式，向左，右，或中心：
vertical-align垂直对齐属性设置垂直对齐，比如顶部，底部或中间
在表的内容中控制空格之间的边框,应使用td和th元素的填充属性padding,eg:padding:15px;
8.css盒子模型
Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。
重要: 当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。
9.css边框属性
border简写属性，用于把针对四个边的属性设置在一个声明。
border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。border-width用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。border-color设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom（bottom、left、right、top）-color分别设置。
10.css轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。属性指定元素轮廓的样式、颜色和宽度。
outline在一个声明中设置所有的轮廓属性，值包含：outline-color、outline-style、outline-width、inherit。
注意：outline是不占空间的，既不会增加额外的width或者heigh。
11.css外边距
margin(外边距)清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。值单位有：像素，pt，em和%。
margin-bottom（left、right、top）指定不同边距。
注意：Margin可以使用负值，重叠的内容。
12.CSS 分组和嵌套选择器
分组选择器：在样式表中有很多具有相同样式的元素，为了尽量减少代码，你可以使用分组选择器，每个选择器用逗号分隔。eg：
h1,h2,p
{
color:green;
}
嵌套选择器：
它适用于选择器内部的选择器的样式。
在下面的例子设置了三个样式：
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
13.CSS 尺寸
CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。
height设置元素的高度；ine-height设置行高；max-height设置元素的最大高度；max-width设置元素的最大宽度；min-height设置元素的最小高度；min-width设置元素的最小宽度；width设置元素的宽度。
14.CSS Display(显示) 与 Visibility（可见性）
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。
visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于：
1、display:none 元素不再占用空间。
2、visibility: hidden 使元素在网页上不可见，但仍占用空间。
然而，visibility 还可能取值为 collapse 。当设置元素 visibility: collapse 后，一般的元素的表现与 visibility: hidden 一样，也即其会占用空间。但如果该元素是与 table 相关的元素，例如 table row、table column、table column group、table column group 等，其表现却跟 display: none 一样，也即其占用的空间会释放。
eg：h1.hidden {visibility:hidden;}，h1.hidden {display:none;}。
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：applet ,button ,del ,iframe , ins ,map ,object , script
CSS中块级、内联元素的应用：利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：display:block -- 显示为块级元素；display:inline -- 显示为内联元素；display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性。我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
488
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
