字体
p{
font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; /*字体，把范围大的字体放后面，防止前面的字体某些浏览器没有。如果字体带空格，要引起来 */
font-size: 20px; /*字号*/
color: red; /*字体颜色*/
font-style: italic; /*字体样式*/
font-weight: bold /*字体粗细*/
}
文本
p {
/*文本对齐方式，*/
text-align: left; /*左对齐*/
text-align: right; /*右对齐*/
text-align: center; /*居中对齐*/
text-align: justify; /*两端对齐*/
/*文本装饰，也可以直接 text-decoration: underline; */
text-decoration-line: underline;
text-decoration-style: solid; /*默认就是solid*/
text-decoration-color: red;
text-transform: capitalize; /*大小写转换，每个单词的首字母都大写*/
text-indent: 40px; /*首行缩进*/
letter-spacing: 2px; /*字符间距*/
word-spacing: 10px; /*单词间距*/
line-height: 150%; /*行高（行间距）*/
}
/* 文本阴影，常用于实现艺术字 */
text-shadow: 5px 5px 5px #FF0000; /*水平阴影、垂直阴影、模糊的距离、阴影颜色*/
/* 文本的溢出处理。overflow可处理所有的溢出，text-overflow只处理文本溢出 */
text-overflow: clip; /*剪掉溢出的文本*/
text-overflow: ellipsis; /*用省略号...代替溢出的部分来显示，最常用*/
/* 自动换行时换行处的单词处理 */
word-break: break-all; /*如果换行处的单词过长，会拆分单词（以单个字符进行切分），不会加连词线*/
word-break: break-word /*以单词进行切分，保持单词的完整*/
word-break: keep-all; /*如果换行处的单词过长，会转到下一行显示*/
word-break: normal; /*使用浏览器默认的处理方式*/
/* 空白符处理。文本域中的换行会作为\n提交给后端，div、p之类的元素默认不会把\n显示为换行，需要设置 white-space: pre-wrap 才会将\n显示为换行 */
white-space: pre-wrap;
背景
body {
background-color: red; /*背景颜色*/
background-image: url("bg.png"); /*背景图片，url()中的路径可引可不引。可以设置多个url()，逗号隔开即可*/
background-repeat: no-repeat; /*背景填充*/
background-position: left; /*背景图片的位置，这个属性需要和background-repeat: no-repeat搭配使用*/
background-attachment: fixed; /*背景图片是否随内容的上下滚动而滚动*/
background-size: 80px 60px; /*设置背景图片的尺寸，可使用百分比*/
background-origin: content-box; /*设置背景图片填充的范围，只能为背景图片，不能是背景颜色*/
background-clip: content-box; /*设置背景的填充范围，可以是背景图片或颜色*/
/* 可以写成一句 */
background: url("bg.png") no-repeat fixed left;
}
边框
/*同时设置4条边线*/
border: 1px red solid;
/*分开设置4条边线的线宽、线型、线颜色*/
border-width: 1px;
border-style: sold;
border-color: red;
/*设置1条边线，默认没有边线，可以用此来实现分隔线*/
border-bottom: 1px red solid;
/*分开设置1条边线的线宽、线型、线颜色*/
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: red;
/* 圆角边框，需结合border使用 */
border:1px solid red;
border-radius:5px; /*设置圆角大小，数值越大，越圆*/
/*
图片边框，最后一个参数指定图片的填充方式：
stretch 拉伸
repeat 重复，可能会出现残缺图片
round 重复，自动调整，不会出现残缺图片，常用
*/
border-image: url("border.png") 30 30 round;
/* 盒子阴影，需要指定盒子（块级）的宽高 */
width:300px;
height:100px;
box-shadow: 10px 10px 5px #888888; /*水平阴影位置、垂直阴影位置、模糊距离、阴影颜色，前三个参数支持负数*/
padding、margin
div{
/*分别设置4个内边距*/
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
padding: 10px 20px 10px 20px; /*顶右底左*/
padding:10px 20px; /*参数不全时，默认取对边的值，顶=底，左=右*/
padding: 10px; /*4个都是10px*/
}
margin的设置方式和padding相同。
属性值优先级：
css样式 > html属性 > 浏览器默认值
盒子模型
元素 = content（内容）+ padding+border
width、height可以用px，也可以使用百分数（占父容器宽高的百分比）
标准盒子模型
width、hight指的是content的宽、高。
IE盒子模型
IE从 9.0 开始使用标准盒子模型，通常所说的IE盒子模型是指低版本（9.0以下）IE使用的盒子模型。
width、hight要算上padding、border的线宽
width = content的宽 + (padding-left + padding-right) + (border-left-width + border-right-width)
height = content的高 + (padding-top + padding-bottom) + (border-top-width + border-bottom-width)
列表样式
ul>li{
list-style-type: disc; /*列表项标记*/
list-style-image: url("logo.jpg") /*以图片作为列表项标记*/
/*这2个属性是矛盾的，一般只设置其中一个。如果同时设置，后设置的会覆盖前面设置的*/
}
表格样式
th,td{
border: 1px red solid; /* 单元格默认没有边线，可以手动设置边线 */
padding: 20px; /* 调整内容间距 */
}
table{
border-collapse: collapse /*折叠边框（合并多余的边框线），因为给单元格设置border后，会有重复的边框线*/
}
元素的显示方式
div{
display: none; /*不显示元素，不再占据空间*/
display: block; /*作为块级元素显示，前后自动换行，可设置width、height*/
display: inline; /*作为行内元素显示，前后不自动换行，不能设置width、height（设置了无效）*/
display: inline-block; /*行内块方式显示，前后不会自动换行，但可以设置width、height*/
visibility: hidden; /*隐藏元素，元素不可见，但仍然占据空间*/
visibility: visible; /*默认值，元素可见*/
}
- 常见的块级元素比如div、p，常见的行内元素比如 span
- 块级、行内元素均可设置margin、padding，行内元素的宽高根据内容自动确定
- img、input等极少数行内元素 display 默认为 inline-block，可以指定 width、height
溢出处理
div {
overflow: hidden; /*隐藏|剪掉溢出的部分，可能会出现残缺文字*/
overflow: scroll; /*加滚动条，不管溢不溢出，都会出现滚动条*/
overflow: auto; /*这个用得最多，溢出时才出现滚动条*/
/* 可分开设置水平、竖直方向的溢出处理 */
overflow-x: auto; /*水平*/
overflow-y: hidden; /*竖直*/
}
浮动
div{
float:left; /*向左浮动*/
float:right; /*向右浮动*/
}
/* 清除浮动 */
.clear{
clear:left; /* 如果此元素的左边有相邻的浮动元素，会重起一行来显示此元素 */
clear:right; /* 如果此元素的右边有相邻的浮动元素，会重起一行来显示右边的浮动元素 */
clear:both; /* left+right */
}
行内、块级元素均可浮动，浮动是在父容器中浮动，左浮动向左，右浮动向右，直到碰到一个兄弟元素的边缘或达到父容器的边界。
浮动后，周围元素的排列会改变，相邻的不浮动元素会受到影响，相邻的不浮动元素可使用clear清除浮动元素对自己造成的影响。
元素定位
div {
/* static 默认值，正常的文档流显示方式 */
position: static; /*使用static时，left、right、bottom、top无效 */
/* relative 相对定位，相对于正常位置定位 */
position:relative;
left:50px; /*距原来位置左侧50px*/
top:20px; /*距原来位置顶端20px*/
/*
绝对定位，绝对定位是一种特殊的相对定位，相对于关系最近的已定位的祖先元素（父亲、爷爷、...）定位，
已定位指的是使用static之外的方式定位，
如果没有已定位的祖先元素，则相对于<html>（整个页面的顶|底边界、左|右边界）定位。
*/
position:absolute;
left:50px;
top:20px;
/* 以上三种方式，元素均会随着页面的上下滚动而移动 */
/*
相对于浏览器窗口（顶部、左|右边界）定位，顶部指的是书签栏下面。
一直固定在指定位置，不随页面的滚动而移动
*/
position:fixed;
left:50px;
top:20px;
}
css中的坐标系：
支持负数，负数表示朝反方向移动
元素的堆叠顺序
使用relative、absolute、fixed这些定位时，元素可能会堆叠到其它元素上，覆盖掉下面的元素。
可以使用z-index指定元素的堆叠顺序
div {
z-index:1 /* 值为整数（支持负整数），默认为0，数值越大，显示的优先级越高，堆叠在越上面 */
}
元素对齐
div{
/*
将左右margin设置为auto可实现元素在父容器中的水平居中
如果兄弟元素的左右margin都是auto 左右居中，即可实现兄弟元素的垂直对齐
*/
margin:0 auto; /* 0就是0，不需要带单位 */
/* 浮动可实现兄弟元素的水平对齐 */
float: left;
}
img{
/* vertical-align常用于实现父容器中图片、文本的对齐 */
vertical-align: top; /*与行中最高的元素的顶端对齐*/
vertical-align: middle; /*与行的中间线对齐*/
vertical-align: bottom; /*与行中最低的元素的底端对齐*/
vertical-align: text-top; /*与行中文本的顶端对齐*/
vertical-align: text-bottom;/*与行中文本的底端对齐*/
}
透明度
img{
opacity: 0.5;
}
透明度可对所有元素使用，常用于图片。
[0,1]上的小数，0表示完全透明（不可见），1表示完全不透明（最清晰），数值越大越清晰。
默认值设置
应该手动给margin、padding等属性设置初始值，因为各浏览器的属性默认值可能不同，如果不设置初始值，在不同浏览器中页面的显示效果可能会有差异。
可以把属性初始值单独写在一个css文件中，方便复用。
2d、3d变换
/* 2d变换 */
transform: translate(50px,100px); /*平移，参数：水平平移距离、垂直平移距离，支持负数*/
transform: rotate(30deg); /*旋转，以左上角为基点，负数表示逆时针旋转*/
transform: scale(2,3); /* 缩放，参数：水平缩放倍数、垂直缩放倍数，小数形式 */
/* 3d变换 */
transform: translate3d(x,y,z); /*3d平移*/
transform: rotate3d(x,y,z,angle); /*3d旋转*/
transform: scale3d(x,y,z); /* 3d缩放 */
transform 变换，在原位置的基础上进行变换，属性值指定进行哪种变换。
显示的就是变换结果，不显示变换过程。
颜色渐变
#gradient {
/* 线性渐变 */
background: linear-gradient(to right, red , blue, grey); /*从左到右*/
background: linear-gradient(to bottom, red , blue, grey); /*从上到下*/
}
第一个参数指定渐变方向，后面是颜色变化，颜色个数可变。
可缺省渐变方向，缺省时默认为从上到下。颜色可使用rgba()来表示，这样可以使用透明度。
直接显示结果，不形成动画。
过渡
当元素的样式变化时，比如鼠标移入、移出设置不同的样式，样式的变化是瞬时完成，几乎看不到过程。
样式改变、2d|3d变换等，都是这样的。
过渡是给定一个时间，在指定时间内完成样式变化，用户可以看到样式变化的过程，过渡也算一种动画。
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s; /*多个属性参与过渡时，逗号分隔*/
}
div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
一个过渡属性的完整语法：
width 5s linear 2s
属性，完成时间（开始后在多长时间内完成）、过渡速度、开始时间（多长时间后此属性才开始）。
过渡速度常用的值
- linear 匀速
- ease 慢-快-慢
- ease-in 慢-快-匀速
- ease-out 匀速-慢
过渡速度、开始时间均可缺省，缺省时过渡速度默认为linear 匀速，开始时间默认为0 立刻开始。
动画
div{
width:100px;
height:100px;
background:red;
animation:myAnimation 5s; /*指定动画名称、多少秒内完成*/
}
@keyframes myAnimation{ /*动画名称*/
0% {background:red;} /*0%表示动画开始，100%表示动画结束*/
50% {background:yellow;width:200px;height:200px} /*{}中写要变化的属性，有多个属性时分号隔开*/
100% {background:green;width:100px;height:100px}
}
animation: 动画名称 完成时间 变化速度 开始时间;
变化速度、开始时间均可缺省
百分数表示时间点，可以是[0%，100%]上的任意值。
上面的动画是页面加载后自动开始的，一般把动画和用户事件（比如鼠标移入、单击等）绑定在一起，触发事件时开始动画
div{
width:100px;
height:100px;
background:red;
}
div:hover{
animation:myAnimation 5s;
}
@keyframes myAnimation{
0% {background:red;}
50% {background:yellow;width:200px;height:200px}
100% {background:green;width:100px;height:100px}
}
多列
p{
column-count:3; /*将<p>中的内容分为3大列显示，列之间用一竖空白隔开，就像报纸上的多列一样 */
column-gap: 40px; /*指定列之间的间距*/
column-rule: 1px solid lightblue; /*指定列之间的分隔竖线样式，缺省此属性时默认没有竖线分隔*/
}
3286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
