css

这里是有助于我们复习用的想要了解详情可以查看菜鸟教程

1.选择器

　　p.center{text-align:center;}:所有p元素的class="center"元素

　　属性选择器：[title=runoob]:[属性=值]；[title~=]:属性多选

　　first-child 伪类来选择元素的第一个子元素

　　:lang 伪类使你有能力为不同的语言定义特殊的规则

　　相邻选择器：
　　div p:后台选择器；
　　div>p:子代选择器；
　　div+p:相邻兄弟选择器；
　　div~p:普通相邻选择器；
　　伪类选择器：a:link
　　a.red
　　p:first-child
　　q:lang(no)
　　:first-line文本首行设置样式
　　:first-letter首字符
　　":before" 伪元素可以在元素的内容前面插入新内容
　　":after" 伪元素可以在元素的内容之后插入新内容。
　　list-style-type:none;这是无须列表的
　　display:inline block
　　更多的：:checked;disabled;empty;:first-line:link:visited;hover;focus;:first-letter;first-line;:before;first-child;:lang(language)
　　box-shadow:可以设置div的阴影；

　　对链接的样式设置：

　　　a:link - 正常，未访问过的链接;a:visited - 用户已访问过的链接;a:hover - 当用户鼠标放在链接上时;a:active - 链接被点击的那一刻

　　列表：
　　　　可以设置ul ol 样式通过list-style-type：例如
　　　　ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;}

2.背景色

　　backgroup-color;backgroup-image;backgroup-repeat;backgroup-attachment;backgroup-position 　　

3.修饰文本

　　text-align;text-decoration 属性用来设置或删除文本的装饰;text-transform://文本转换;text-index://文本缩进

　　可用em来控制字体的大小：px/16=em 通常情况是16px;

　　所有浏览器默认字体大小100%；
4.表格设置：
　　border-collapse ：折叠边框；border:设置边框的td{text-align= right};
　　盒子模型：content->padding->border->margin->outline(轮廓)
5.设置边框：
　　border-style;border-width;border-bottom;border-left;border-right
6.设置轮廓：
　　outline-color;outline-style;outline-width
7.分组选择器：
　　h1,h2,p
　　{
　　　　color:green;
　　}
　　尺寸：height,line-height;max-height;max-height;min-height;width
8.响应式相册
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
div.img {
    border: 1px solid #ccc;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max- 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max- 500px){
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
</style>
</head>
<body>

<h2 style="text-align:center">响应式图片相册</h2>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_fjords.jpg">
      <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_forest.jpg">
      <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_lights.jpg">
      <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_mountains.jpg">
      <img src="http://www.runoob.com/wp-content/uploads/2016/04/img_mountains.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">Add a description of the image here</div>
  </div>
</div>

<div class="clearfix"></div>

<div style="padding:6px;">
  
  <h4>重置浏览器大小查看效果</h4>
</div>

</body>
</html>
View Code

9.图像设置：

　　opacity://设置透明度
　　filter:alpha(opacity=40); /* IE8 及其更早版本 */ 　　　　
10.@media 规则：不同的媒体可以设置不同的样式
<style> @media screen { p.test {font-family:verdana,sans-serif;font-size:14px;} }
　　　　@media print { p.test {font-family:times,serif;font-size:10px;} }
　　　　@media screen,print { p.test {font-weight:bold;} }
</style>

-------------------------------------------------CSS3-----------------------------------------------------------------------------------------------------

1.CSS3边框：
　　border-radius://可设圆角了：border-radius=25px;
　　border-image://设图标
　　box-shadow://盒子的阴影
　　border-image: /*IE*/
　　-webkit-border-image: /* Safari 5 and older */
　　-o-border-image: /* Opera */
　　backgroup-image:可以放多个图片了然后通过backgroup-position来设置位置
　　例子： background-image: url(img_flwr.gif), url(paper.gif);
　　background-position: right bottom, left top;//设置多个背景后位置要从新弄下了
　　background-repeat: no-repeat, repeat;
　　background-size:
　　background-origin:content-box//指定了背景图像的位置信息
　　background-clip://背景剪裁保留制定的位置
 
2.渐变：
　　linear-gradient(dir,color1,color2...)
　　radial-gradient(center, shape size, start-color, ..., last-color)
3.文本效果
　　text-shadow;box-shadow;text-overflow;word-wrap;word-break;
　　<style>
　　@font-face:这个可以字体文件直接放在一个位置用的时候再加载就好了 { font-family: myFirstFont; src: url(sansation_light.woff); } div { font-family:myFirstFont; } </style>
4.CSS3 转换
　　有两个属性：transform:设置转换方式的；transform-origin:设置转换位置
　　transform:
　　-ms-transform:
　　-webkit-transform:
　　translate(x,y);//移动
　　translate3d(x,y,z);//3d移动
　　rotate(angle);//旋转的角度
　　rotate3d(x,y,z,angle)
　　scale(x,y);//元素增大增小
　　scale3d(x,y,z)
　　skew(x,y);//元素x，y倾斜
　　matrix(n,n,n,n,n,n)//对旋转，缩放，移动，倾斜的一次设置
　　transform-origin:设置转换对象的那个位置
 
5.CSS3 过渡
　　transition:设置过渡
　　CSS3 动画
　　@keyframes规则可以创建动画
　　使用方式：①创建一个@keyframes规则
　　@keyframes first
　　{
　　　　from{backgrounp:red;}
　　　　to{backgrounp:yellow}
　　}
　　②使用这个规则
　　animation:first 5s;
　　具体到细节：
　　animation-name;animation-durition;animation-time-funtion;animation-delay;
　　animation-iteration-count;animation-direction;animation-play-state;
4.CSS3 多列
对多个文字进行设计
column-count 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-gap 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule-color 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-rule-style 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-rule-width 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-width          
outline-offset ：外形设置
outline:2px solid red
cutline-offset:15px//与border 的距离
5.CSS 图片
　　圆角：border-radius
　　缩略图：用border这个属性就好了
　　定位图片中的文本位置：通过定位属性relation,absolit属性结合使用
　　图片滤镜：filter:grayscale(100%);还有很多种类
6.CSS 按钮
7.CSS 分页
8.CSS3 弹性盒子(Flex Box)
就跟微信小程序开发模式是一样的用的也是Flex Box
css3也有多媒体查询@media
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xiaoping1993/p/6755366.html