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://文本缩进

　　direction line-height letter-spacing text-shadow vertical-align white-space word-spacing

　　可用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-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 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 规则：不同的媒体可以设置不同的样式

　　　　@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-top-left-radius; border-top-left-radius; border-top-left-radius; border-top-left-radius;

　　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 按钮

　　https://www.runoob.com/css3/css3-buttons.html自带的按钮样式很好看

7.CSS 分页

　　https://www.runoob.com/css3/css3-pagination.html

8.CSS3 弹性盒子(Flex Box)

　　https://www.runoob.com/css3/css3-flexbox.html

就跟微信小程序开发模式是一样的用的也是Flex Box

css3也有多媒体查询@media

posted @ 2017-04-24 10:15 王吉平阅读(220) 评论(0) 编辑收藏举报

刷新页面返回顶部

小平1993

css

公告