CSS，层叠样式表(Cascading Style Sheets)，为HTML提供样式描述，定义元素显示方式。
CSS语法规则由选择器以及一条或多条声明构成，每条声明由一个属性和一个值组成。
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器，CSS中id选择器以"#"定义。
#para {text-align: center;}
class选择器
class选择器用于描述一组元素的样式，class可以在多个元素中使用。class选择器在HTML中以class属性表示，在CSS中，类选择器以"."定义。
.center {text-align: center;}
插入样式表的方法
外部样式表(External style sheet)
<link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表(Internal style sheet)
<style>
hr {color: red;}
p {margin-left: 20px;}
body {background-image: url("images/bg.jpg");}
</style>
内联样式(Inline style)
<p style="color: blue; margin-left: 20px"></p>
优先级：内联样式 > 内部样式 > 外部样式 > 浏览器默认样式
CSS背景
background-color
background-image
background-repeat
body {background:#ffffff url('img_tree.png') no-repeat;}
CSS文本格式
text-align
.title {text-align: center;}
.date {text-align: right;}
.main {text-align: justify;}
text-decoration
a {text-decoration: none;}
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;}
CSS列表
list-style-type
ul {list-style-type: none;}
CSS盒子模型(Box Model)
Margin(外边距)：清除边框外的区域，外边距是透明的。
Border(边框)：围绕在内边距和内容外的边框。
Padding(内边距)：清除内容周围的区域，内边距是透明的。
Content(内容)：盒子的内容，显示文本和图像。
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
Display(显示)与Visibility(可见性)
.hidden {visibility: hidden;}
visibility: hidden 隐藏元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。即该元素虽然被隐藏了，但仍然会影响布局。
.hidden {display: none;}
display: none 隐藏元素，且隐藏的元素不会占用任何空间。即该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
块元素是一个元素，占用了全部宽度，在前后都是换行符。display: block;
li {display: inline;}
内联元素只需要必要的宽度，不强制换行。display: inline;
span {display: block;}
CSS定位(position)
static：默认值，即无定位，遵循正常文档流对象。
fixed：元素位置相对于浏览器窗口固定。
relative：相对定位元素的定位是相对其正常位置。
absolute：绝对定位元素的位置相对于最近的已定位父元素，若无已定位的父元素，则位置相对于<html>。
{position: static;}
{position: fixed;}
{position: relative;}
{position: absolute};
z-index属性指定元素堆叠顺序。
{z-index: -1;}
CSS Overflow
CSS overflow属性控制内容溢出元素框时在对应的元素区间内添加滚动条。
visible：默认值，内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：若内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit：规定应该从父元素继承overflow属性值。
{overflow: visible;}
{overflow: hidden;}
{overflow: scroll;}
{overflow: auto;}
{overflow: inherit;}
CSS浮动
Float，会使元素向左或向右移动，其周围的元素也会重新排列。
清除浮动(clear)指定元素两侧不能出现浮动元素。
{float: left;}
{float: right;}
{clear: both;}
CSS对齐
元素居中对齐 margin: auto;
.center {margin: auto;}
文本居中对齐 text-align: center;
.center {text-align: center;}
图片居中对齐 margin: auto;
img {margin: auto;}
水平对齐：定位方式、float方式
.right {position: absolute;}
.right {float: right;}
垂直对齐：padding、line-height
.center {padding: 70px 0;}
.center {line-height: 200px;}
DIV+CSS网页布局
DIV+CSS是WEB设计标准，一种网页布局方法，可以实现网页页面内容与表现分离。
网友评论