CSS总结

CSS是什么？　

　CSS(Cascading Style Sheets)层叠样式表:用于表现HTML或XML等文件样式的计算机语言。 

CSS核心要点是属性、选择器和盒子模型。

文字属性

Font-size:大小

font-family:字体类型选择器和盒子模型 

color:颜色
text-decoration:下划线
属性值：none underline
text-align:对齐方式
属性值：left center right

背景属性

background-color:背景颜色
background-image:背景图片
属性值：url(“图片地址”);
background-repeat:平铺方式
属性值：默认横向纵向平铺
repeat:横向纵向平铺
no-repeat:不平铺
repeat-y：纵向
repeat-x：横向

列表属性

list-style-type:列表项前的小标志
属性值：非常多，可以通过eclipse的提示查看
list-style-image:列表项前的小图片
属性值：url(“图片地址”);

尺寸属性

宽度
height:高度

选择器：

基本选择器：

优先级id>class>元素

元素选择器：span {color:red;font-size:88px; }

id选择器:#id{ color:red;font-size:88px; }

类选择器:.class1{ color:red;font-size:88px; }

伪元素选择器:

A标签：

静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}

层级选择器：#id .class1 span{}   选择id内class1内span元素的对象

 盒子模型：boder、padding和margin

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

1、边框特性

CSS3对网页中的边框进行了一些改进，主要包括支持圆角边框、多层边框、边框色彩与图片等。

/*圆角边框*/
div{
  border:2px solid;
  border-radius:25px;
}

2、多背景图

CSS3允许使用多个属性（比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等）在一个元素上添加多层背景图片。

/*多图背景*/
#example1 { 
  background-image: url(img_flwr.gif), url(paper.gif); 
  background-position: right bottom, left top; 
  background-repeat: no-repeat, repeat; 
}
/*或*/
#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
} 

3、颜色与透明度

CSS3颜色模块的引入，实现了制作Web效果时不再局限于RGB和十六进制两种模式。CSS3增加了HSL、HSLA、RGBA几种新的颜色模式。

4、多列布局与弹性盒模型布局

flex box（弹性盒子）

CSS3多列布局属性可以不使用多个div标签就能实现多列布局。CSS3中的多列布局模块描述了如何像报纸、杂志那样，把一个简单的区块拆成多列，并通过相应属性来实现列数、列宽、各列之间的空白间距。

/*多列布局*/
.newspaper{
  column-count:3;
  column-gap:40px;
  column-rule-style:outset;
  column-rule-color:#ff0000;
  column-rule- 1px;
}
h2{
  column-span:all;
}

/*弹性盒子*/
<style> 
.flex-container {
  display: flex;
  justify-content: center;
   400px;
  height: 250px;
  background-color: lightgrey;
}
.flex-item {
  background-color: cornflowerblue;
   100px;
  height: 100px;
  margin: 10px;
}
</style>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div> 

5、盒子的变形

在CSS2.1中，想让某个元素变形必须要借助JavaScript写大量的代码实现，在CSS3中加入了变形属性，该属性在2D或3D空间里操作盒子的位置和形状，来实现例如旋转、扭曲、缩放或者移位。

/*2D转换*/
/*移动*/
div{
  transform: translate(50px,100px); 
}
/*旋转*/
div{
  transform: rotate(30deg);
}
/*改变宽高*/
div{
  transform: scale(2,3);
}
/*倾斜*/
div{
  transform: skew(30deg,20deg);
}
/*使用六个值的矩阵实现转换*/
div{
  transform: matrix(0.866,0.5,-0.5,0.866,0,0);
}


/*3D转换*/
/*围绕X轴旋转*/
div
{
  transform:rotateX(120deg);
}
/*围绕Y轴旋转*/
div
{
  transform:rotateY(130deg);
}
/*围绕Z轴旋转*/
div
{
  transform:rotateZ(140deg);
}
/*围绕Z轴旋转*/
div
{
  transform:rotateZ(140deg);
}
/*改变被转换元素的位置*/
#div2
{
  transform: rotate(45deg);
  transform-origin:20% 40%;
}
/*让转换的子元素保留3D转换*/
<style>
#div1
{
  padding:50px;
  position: absolute;
  border: 1px solid black;
  background-color: red;
  transform: rotateY(60deg);
  transform-style: preserve-3d;
}
#div2{
  padding:40px;
  position: absolute;
  border: 1px solid black;
  background-color: yellow;
  transform: rotateY(-60deg);
}
</style>
<div id="div1">HELLO
  <div id="div2">YELLOW</div>
</div>
/*透视效果及规定其底部位置*/
div{
  perspective:150;
  perspective-origin: 10% 10%;
}
/*定义元素在不面对屏幕时是否可见*/
div{
  backface-visibility:hidden;/*可见为visible*/
} 

6、过渡与动画

CSS3的“过渡”（transition）属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果，让某些效果变得更加具有流线性与平滑性。CSS3的“动画”（animation）属性能够实现更复杂的样式变化以及一些交互效果，而不需要使用任何Flash或JavaScript脚本代码。过渡与动画的出现，使CSS在Web前端开发中不再仅仅局限于简单的静态内容展示，而是通过简单的方法使页面元素动了起来，实现了元素从静到动的变化 [31]  。

/*过渡*/
div{
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: 2s;
}
/*或*/
div
{
  transition: width 1s linear 2s;
}

/*动画*/
div{
  100px;
  height:100px;
  background:red;
  animation:myfirst 5s;
}
@keyframes myfirst{
  0%   {background:red;}
  25%  {background:yellow;}
  50%  {background:blue;}
  100% {background:green;}
} 

7、Web字体

CSS3中引入了@font-face，@font-face是链接服务器字体的一种方式.

/*引入字体*/
@font-face{
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}
div{
  font-family:myFirstFont;
}
 

8、媒体查询

CSS3中引入媒体查询（mediaqueries），可为不同分辨率的设备定义不同的样式。  

/*媒体查询判定屏幕可视窗口尺寸*/
body {
    background-color: pink;
}
@media screen and (min- 480px) {
    body {
        background-color: lightgreen;
    }
} 

9、阴影

阴影主要分为两种：文本阴影（text-shadow）和盒子阴影（box-shadow）。

/*文本阴影*/
h1{
  text-shadow: 5px 5px 5px #FF0000;
}

/*盒子阴影*/
div{
  box-shadow: 10px 10px 5px #888888;
}