CSS(不包含css3)

CSS

CSS注释 (在<style内部)

添加CSS

外部CSS(最常用,控制多个页面)
在<head部分的link定义

<link rel="stylesheet" href=".css">

内部CSS(常用,控制一个页面)
在<style内定义

内联CSS(少用,控制一个标签)
添加相关元素 在style中添加css属性

<h1 style="color:...;text-align:.."></h1>

字体

font-size ：字号(px) (字号/行高)

font-family ：字体

font-weight ：字体粗细(加粗700 or bold 不加粗 normal or 400 只用数字不用单位)

font-style ：字体样式 ( 倾斜 italic 不倾斜normal)

速记 顺序: style-weight-size-family (size,family必须同时出现)

常用

body {
    font::12px/1.5 Microsoft YaHei;
}

文本

text-align : 对齐方式
left 左对齐(默认) right右对齐 center居中

text-decoration : 文本装饰
none 默认 underline 下划线 overline 上划线(几乎不用) line-through 删除线(不常用)

text-indent : 文本缩进(指定第一行,通常为2em)

line-height : 行间距(包含上间距,下间距,文本高度)

背景

background-color: … ; 背景色

opacity : 透明度0.0~1.0 越低越透明

background-image: url(" .jgp") 背景图片
如果背景图像小于元素，图像将在水平和垂直方向重复，直到到达元素的末尾：
为避免背景图像自身重复，请将该 background-repeat属性设置为no-repeat
如果想让背景图片覆盖整个元素，可以设置属性background-size为cover
确保始终覆盖整个元素，请将background-attachment属性设置为fixed
这样，背景图像将覆盖整个元素，没有拉伸（图像将保持其原始比例）
如果希望背景图像拉伸以适合整个元素，将属性设置background-size为100% 100%

background-repeat: repeat-x 仅水平重复 (y 仅垂直重复)
background-repeat : no-repeat; 不重复(只显示一次)
background-position: x y; 指定背景图片位置
left right top center bottom (也可以是精确单位) 若混合,则第一个值是x,第二个值是y
background-attachment
指定背景图片是滚动还是固定 (fixed固定(固定在屏幕上) scroll滚动)
速记 顺序:color-image-repeat-attachment-position;

background: #ffffff url("img_tree.png") no-repeat right top;

盒子

控制上下用margin，左右用padding

border : 边框，会影响盒子实际大小
border-radius: length; 圆角边框
border-width : 定义4个边框的宽度(上，右，下，左)
border-style : solid 实线边框 dashed 虚线边框 dotted 点线边框
border-color : transparent(透明)

速记 顺序:width-style(必须的)-color

border: 5px solid red;

外边距（控制盒子与盒子的距离）
用于在任何定义的边界之外的元素周围创造空间

margin: 外边距 : -top -right -bottom -left

边框速记 顺序: top-right-bottem-left

 margin: 25px 50px 75px 100px;

如果只有3个值，则 top-right,left-bottem
如果只有2个值，则 top,bottem-right,left

典型应用：块级盒子水平居中对齐
盒子设置width 盒子左右外边距设置为auto
{ width:96px; margin: 0 auto;}

外边距合并 (使用margin定义块元素的垂直外边距时可能会出现)

解决方法：1.可以为父元素定义上边框 border : 1px solid transparent
2.可以为父元素定义上内边距
3.可以为父元素添加overflow:hidden

内外边距合并（网页会自带内外边距）

* {
    padding:0; 	//清除内边距
    margin:0;	//清除外边距
}

填充（内边距）
用于在任何定义的边框内围绕元素的内容创建空间

会影响盒子实际大小 解决方法：盒子width/hieght减去padding大小

padding: 填充 -top -right -bottom -left

速记 顺序: top-right-bottem-left
eg. padding: 25px 50px 75px 100px;
如果只有3个值，则 top-right,left-bottem
如果只有2个值，则 top,bottem-right,left

常用:不给盒子width/height，可以直接用padding撑开

表格

添加双线边框 border: 1px solid black;

单线边框 在上面的基础上加入 border-collapse = collapse

轮廓

与边框不同的是，outline绘制于border之外，并且可能和其他内容重叠

outline: 轮廓 -style -color -width -offset

速记 顺序: width-style(必须)-color

outline-offset 轮廓偏移(在元素的轮廓与边框之间添加空间，透明的)

布局

多个块元素纵向排列找标准流，多个块元素横向排列找浮动
先设置盒子大小，之后设置盒子的位置

标准流布局反式

按照规定好的默认方式排列

display
显示/可视性 none(消除) hidden(隐藏)
inline(== span)行内元素尽量只设置左右内外边距
block(==div)
inline-block(可自主调节大小的span)

position 定位
static: 静态,不受top,bottom,left,right的影响
relative: 相对,top,right,bottom,left可将其远离原本位置
fixed: 固定,相对于视野定位,即使页面滚动也始终停留在一个地方
absolute: 绝对,定位于相对里，并随着相对移动
sticky: 相对和固定之间来回切换(粘性,黏住窗口)
z-index: 当元素被定位时，它们可以与其他元素重叠(哪个元素应该放在其他元素的前面或后面)

overflow
当内容太多无法容纳在指定区域时指定是剪裁内容还是添加滚动条(仅适用于具有指定高度的块元素)
visible: 默认,溢出不会剪裁,内容呈现在元素框外
hidden: 溢出被剪掉,其余内容将不可见
scroll: 溢出内容被剪掉,并添加一个滚动条查看其余内容(即使不需要)
auot: 类似于scroll,但它只在必要时添加滚动条

float

特性：1.脱离标准流控制 移动到指定位置
2.浮动的盒子不再保留原先的位置
3.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
典型应用：让块元素在一行中排列
(浮动元素是互相紧贴在一起的，如果父级宽度不够装，多出的盒子会另起一行对齐)
4.浮动元素具有行内块元素特性

指定元素应如何浮动 -left 移动到容器左侧 -right 移动到容器右侧

当使用float时，如果我们想要下一个元素不在左边或右边，使用clear

clear 指定浮动元素旁边的元素应该发生什么
left: 元素被推到左浮动元素的下方
right: 元素被推到右元素的下方
both: 元素被推到左右浮动元素的下方

当你添加一些东西来扩大每个盒子的宽度时（例如填充或边框），盒子就会破裂。该box-sizing属性允许我们在框的总宽度（和高度）中包含填充和边框，确保填充留在框内并且不会中断。

* {
	box-sizing: border-box;
}

居中

中心对其元素 (例如<div)，使用margin: auto;

中心对其文本 使用text-align: center;

居中图像将图像设置成block，再magin -left -right : auto (将左右边距设置为auto)

在border中

垂直居中

padding: 70px 0;
//使用line-height的值=height的值 (文字行高等于盒子高度)

垂直水平居中

padding: 70px 0;
text-align: center;

CSS选择器

后代选择器(空格) 指定元素的所有后代元素

亲儿子选择器(>) 指定元素的最近一级子元素

并集选择器(,) 指定多标签，用于集体声明

相邻兄弟选择器(+) 用于选择紧接在另一个特定元素之后的元素
eg. div + p 指的是选择div元素之后的第一个p元素

通用兄弟选择器(~) 选择指定元素的下一个兄弟的所有元素
eg. div ~ p 指的是选择div元素之后的所有p元素

伪类（用冒号(:)表示）

链接伪类选择器(较多)
a:link 正常未访问
a:visited 用户访问过（常用）
a:hover 用户将鼠标悬停在其上 （常用）
a:active 点击
（a:hover 必须在 a:link 和 a:visited 之后 a:active 必须在 a:hover 之后）

:focus伪类选择器(较少)

用于选取获得焦点的表单元素，一般类表单元素才能获取

 input:focus {}

伪元素

selector::pseudo-element {
 	property: value;
}

CSS透明度

opacity: 指定元素透明度(0.0~1.0)值越低，越透明
透明悬停效果

img {
	opacity: 0.5;
}
img:hover {
	opacity: 1.0;
}