CSS学习总结

• 语法：
  • 选择器{ 属性:值; }
  • 选择器.类名{ 属性:值; }
• 选择器：
  • id选择器：#ID{}
  • 类选择器：.类名{}
  • 标签选择器：标签名{}
  • 后代选择器：标签名1 标签名2{} 所有标签名1中的所有标签名2（可以是间接孩子）
  • 子元素选择器：标签名1 > 标签名2{} 所有标签名1中的所有标签名2（必须是直接孩子）
  • 相邻兄弟选择器：标签名1+标签名2{} 所有标签名1后的第一个标签名2
  • 后续兄弟选择器：标签名1~标签名2{} 所有标签名1后的所有标签名2
  • 包含选择器：
    • [属性名]{} 包含属性名的所有元素
    • [属性名=值]{} 包含属性名=值的所有元素
• 伪类：
  • 选择器:伪类{}
  • 选择器.类名:伪类{}
  • a:link：未访问的链接
  • a:visited：已经访问的链接
  • a:hover：鼠标滑过的链接
  • a:active：已经选中的链接
  • p:frist-child{} 任何元素的第一个子p元素
  • p>frist-child{} p元素的第一个子i元素
  • p:frist-child i{} 任何元素的第一个子p元素中的所有i元素
• 伪元素：
  • p:frist-line{}：p元素的第一行文本进行格式化
  • p:first-letter： p元素的首字母进行格式化
  • p.article:first-letter： 所有class为article的p元素的首字母进行格式化
  • h1:before{content:url{xxx.gif}}： 在每个h1前插入图片
  • h1:after{content:url{xxx.gif}} ：在每个h1后插入图片

背景

div{ 
	background-color:#ff0000;
	background-image:url('image.gif'); 
	background-repeat:repeat-x(水平平铺) repeat-y(垂直平铺) no-repeat(不平铺); 
	background-position:right top; //位置
	background-attachment:scroll(随页面滚动)/local(随元素滚动)/fixed(固定);
	background:#ff0000 url('') no-repeat right top; //简写
}

文本

p{ 
	color:#ff0000/red/rgb(255,0,0);
	text-align:center/right/justify;//对齐
	
	text-decoration:none;//无修饰
	text-decoration:overline;//上划线
	text-decoration:line-through;//中划线
	text-decoration:underline;//下划线

	text-transform:uppercase;//大写
	text-transform:lowercase;//大写
	text-transform:capitalize;//驼峰

	text-indent:50px; //缩进
}

边框

p{ 
	border-style:dotted;//点线
	border-style:solid;//实线
	border-style:double;//双线
	border-style:dashed;//虚线
	
	//单独设置
	border-top-style:solid;
	border-right-style:solid;
	border-bottom-style:solid;
	border-left-style:solid;

	border-width:5px;
	border-color:red;

	border:5px solid red;//简写
}

轮廓

边框边缘外围的一条线。

p{
	outline-color:red;
	outline-style:dotted;
	outline-width:10px;
	
	outline:#00FF00 dotted thick;//简写
}

外边距

auto	效果依赖浏览器
length	长度（px、pt、em）
%	百分比

p{
	margin-top:10px;
	margin-bottom:10px;
	margin-right:10px;
	margin-left:10px;
	
	margin:50px 50px 50px 50px;//上 右 下 左 
}

内边距

length	长度（px、pt、em）
%	百分比

p{
	padding-top:10px;
	padding-bottom:10px;
	padding-right:10px;
	padding-left:10px;
	
	padding:50px 50px 50px 50px;//上 右 下 左 
}

Display

none	不显示（不占据空间）
inline	改为内联元素
block	改为块元素
inline-block	改为内联块元素 （同行，可以修改宽高内外边距）

Position

static	正常文档流（没有top、bottom、left、right）
relative	相对其正常位置
fixed	相对浏览器窗口
absolute	相对最近的已经定位的父元素，如果没有就相对于html
sticky、-webkit-sticky	滚动超过一定范围时就固定不动了（可以通过top等设置固定位置）
z-index	堆叠顺序

Overflow

overflow 属性用于控制内容溢出元素框时显示的方式。

visible	默认值，内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

对其

• div水平居中：

div{
	margin:auto;
	width:50%;//如果不设置width对其将不起作用
}

• 文本居中：

div{ text-align: center; }

• 图片居中：

div{
	display: block;
    margin: auto;
    width: 40%;
}

• 垂直居中：

div{
	padding: 70px 0;
    border: 3px solid green;
}

浮动

元素会向左或向右移动，知道它的外边缘碰到包含框或者另一个浮动框为止，浮动元素之后的元素会围绕它，之前的元素不会受到影响

div{
	float:left;
	float:right;
	clear:left;//元素左侧不能出现浮动
	clear:right;//元素右侧不能出现浮动
	clear:both;//元素两侧不能出现浮动
}

动画

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}
//动画1
@keyframes或者@-webkit-keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
//动画2
@keyframes或者@-webkit-keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}