CSS:
边框
border-style 值:
none: 默认无边框
dotted: 点线边框
dashed: 虚线边框
solid: 实线边框
double: 两个边框。 两个边框的宽度和 border-width 的值相同
groove: 3D沟槽边框。效果取决于边框的颜色值
ridge: 3D脊边框。效果取决于边框的颜色值
inset:一个3D的嵌入边框。效果取决于边框的颜色值
outset: 一个3D突出边框。 效果取决于边框的颜色值
border-width：边框宽度 两种设置方法
1 指定长度值，如 2px 或 0.1em(单位为 px, pt, cm, em 等
2 使用 thick 、medium（默认值） 和 thin (关键字)
border-color 边框的颜色，可以设置的颜色：
name - 指定颜色名称，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"
"transparent" 全透明黑色 类似rgb(0,0,0,0) IE8及以下，color属性值为transparent时，文本显示为黑色
* *border-color单独使用不起作用，必须得先使用border-style来设置边框样式。
指定不同的侧面不同的边框：属性有多个参数时按上右下左顺序分配边框属性
border-top-style 上
border-right-style右
border-bottom-style下
border-left-style左
轮廓(outline):
outline 在一个声明中设置所有的轮廓属性
outline-color 外框颜色
outline-style 样式
outline-width 宽
inherit
outline-color 设置轮廓的颜色
color-name
hex-number
rgb-number
invert
inherit
outline-style 设置轮廓的样式
none 无
dotted 点线
dashed 虚线
solid 实线
double 两个边框
groove 沟槽
ridge 脊
inset 嵌入
outset 突出
inherit 继承
outline-width 设置轮廓的宽度
thin
medium
thick
length
inherit
margin(外边距): 定义元素周围的空间。
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。可以使用负值，重叠的内容
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
值：
auto 设置浏览器边距。
length 定义一个固定的margin（使用像素，pt，em等）
% 定义一个使用百分比的边距
指定不同侧面不同的边距 若有多值按上左下右顺序分配
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
padding（填充）:
length 定义一个固定的填充(像素, pt, em,等)
% 使用百分比值定义一个填充
可单个指定 若有多值上左下右 顺序分配
padding-top:
padding-bottom:
padding-right:
padding-left:
嵌套选择器：
它可能适用于选择器内部的选择器的样式。
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
尺寸 (Dimension)属性
height 元素高度
line-height 行高
max-height 元素最大高度
max-width 元素最大宽度
min-height 元素最小高度
min-width 元素最小宽度
width 宽度
Display(显示) none 不显示
display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
Visibility（可见性）: visible hidden collapse
display 设置一个元素应如何显示，visibility 指定一个元素应可见还是隐藏。
Position(定位)
static:HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
relative 相对于定位元素的正常位置
fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>,定位使元素的位置与文档流无关，因此不占据空间。定位的元素和其他元素重叠
sticky 粘性定位的元素依赖于用户滚动，在position:relative 和 position 定位之间切换
CSS所有定位元素
bottom 下边距及其包含块之间的偏移 auto自动 length长度 %百分比 inherit 继承
clip 剪辑绝对性定位的元素 属性 shape auto inherit
cursor 显示光标移动到指定的类型 url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 auto length % inherit
overflow 设置当元素的内容溢出其区域时发生的事情。 auto hidden scroll visible inherit
overflow-y指定如何处理顶部/底部边缘的内容溢出元素的内容区域 auto hidden scroll visible no-display no-content
overflow-x 指定如何处理右边/左边边缘的内容溢出元素的内容区域 auto hidden scroll visible no-display no-content
position 指定元素的定位类型 absolute fixed relative static inherit
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 auto length % inherit
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 auto length % inherit
z-index 设置元素的堆叠顺序 number auto inherit
overflow :用于控制内容溢出元素框时显示的方式
visible 默认 不修剪内容 将溢出部分呈现在元素框外
hidden 修剪内容 其余内容不可见
scroll 修剪内容 浏览器显示滚动条以查看其余内容
auto 若内容被修剪 浏览器则显示滚动条以查看其余内容
inherit 继承父元素overflow属性的值
** overflow 属性只工作于指定高度的块元素上。在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。
CSS 浮动 绝对定位的元素忽略float属性
clear 指定不允许元素周围有浮动元素。 left 左禁止 right 右禁止 both 两边都禁止 none 默认值。允许浮动元素出现在两侧。 inherit 继承父元素clear浮动属性
float 指定一个盒子（元素）是否可以浮动。 left 左浮动 right 右浮动 none 不浮动 inherit 继承父元素float浮动属性
水平垂直居中:
元素居中对齐:
margin:auto 水平居中对齐(上下) 设置宽度防止溢出容器 元素通过指定宽度，并将两边的空外边距平均分配 文字图片均可
text-align: center 文本在元素内居中对齐(上下左右都对齐)
position: absolute 左右对齐
float overflow: auto 设置左右对齐
垂直居中 - 使用 position 和 transform
垂直居中对齐 padding 在头部顶部使用
line-height=height：容器的 height 不变，line-height 是文本的行间距，文本会溢出容器显示；
选择器
后代选择器(以空格分隔) div p
子元素选择器(以大于号分隔） div>p
相邻兄弟选择器（以加号分隔） div+p
普通兄弟选择器（以破折号分隔）div~p
1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
* 语法：#id属性值{}
2. 元素选择器：选择具有相同标签名称的元素
* 语法： 标签名称{}
* 注意：id选择器优先级高于元素选择器
3. 类选择器：选择具有相同的class属性值的元素。
* 语法：.class属性值{}
* 注意：类选择器选择器优先级高于元素选择器
1. 选择所有元素：
* 语法： *{}
2. 并集选择器：
* 选择器1,选择器2{}
3. 子选择器：筛选选择器1元素下的选择器2元素
* 语法： 选择器1 选择器2{}
4. 父选择器：筛选选择器2的父元素选择器1
* 语法： 选择器1 > 选择器2{}
5. 属性选择器：选择元素名称，属性名=属性值的元素
* 语法： 元素名称[属性名="属性值"]{}
6. 伪类选择器：选择一些元素具有的状态
* 语法： 元素:状态{}
* 如： <a>
* 状态：
* link：初始化的状态
* visited：被访问过的状态
* active：正在访问状态
* hover：鼠标悬浮状态
CSS样式：
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
优先级: 内联> 内部 >外部 >浏览器缺省设置
引入外部样式
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
内部样式
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
多重样式：
语法：
选择器:{ 属性：值;属性：值...}
selector {property: value} value为两个单词时加"" 设置多个属性:值 时 用;隔开
CSS 大小写不敏感 class和id 选择器才敏感
选择器分组以,隔开
h1,h2,p{
color:red ;
}
上下文选择器=派生选择器
li strong{
font-style:italic;
font-weight :normal
}
li列表中的strong标签 内容设置为普通粗细斜体.
#id属性值{} id选择器 以#开头
标签名称{} 元素选择器:选择标签相同的元素
.class属性值{} 类选择器 .开头
*{} 所有元素选择器
* 选择器1,选择器2{} 并集选择器
选择器1 选择器2{} 子选择器
选择器1 > 选择器2{} 选择2 的父选择器1
元素名称[属性名="属性值"]{} 选择元素名称 属性名=属性值 的元素
[title]
{
color:red;
}
[title=W3School]
{
border:5px solid blue;
}
元素:状态{} 选择元素具有的状态
<a> * link：初始化的状态
* visited：被访问过的状态
* active：正在访问状态
* hover：鼠标悬浮状态
<a>:visited{
color:gray;
}
背景：
background 将背景属性设置在生命中
background-attachment 背景图固定或随页面滚动
background-color 设置元素背景色
background-image 图片设置为背景
background-position 设置背景图像的起始位置
background-repeat 设置背景图 是否 如何重复
文本
text-indent 属性 缩进
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
