css3简单介绍

发表于   |   分类于

一、边框

1.radius 弧度

border-radius是向元素添加圆角边框。

使用方法：

border-radius:10px; / 所有角都使用半径为10px的圆角 / 

border-radius: 5px 4px 3px 2px; / 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 / 

实心上半圆：

方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。

心圆：

方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码：

2.阴影

box-shadow

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
参数介绍：

注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。

为元素设置外阴影：

为元素设置内阴影：

添加多个阴影：

3.边框图片
                            

二、颜色

4.颜色 rgba

5.颜色渐变
315deg
线性渐变 background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
径向渐变 background-image:radial-gradient(red,blue);

三、文本

6.text-overflow和word-wrap 控制文本溢出

但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下：

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap; 

同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。

语法：

normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。



7.@font-face
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体
@font-face {
    font-family: “MOOC Font”;
}
.demo {
    width: 340px;
    padding: 30px;    
    color: #566F89;
    background: #000;
    font-size:58px;
    font-family: “MOOC Font”;
}

8.text-shadow文本的阴影效果
<div class=”demo”>IMOOC</div>
<style type=”text/css”>
.demo {
    width: 340px;
    padding: 30px;
    font: bold 55px/100% “微软雅黑”;
    background: #C5DFF8;
    text-shadow: 2px 2px 0 red;
}
</style>  

语法：

text-shadow: X-Offset Y-Offset blur color;

X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；      

Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移；

Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；

Color：是指阴影的颜色，其可以使用rgba色。

比如，我们可以用下面代码实现设置阴影效果。

text-shadow: 0 1px 1px #fff

四、背景

9.background-origin： border-box | padding-box | content-box;
                参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

效果如下：

需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。


10.background-clip将背景图片做适当的剪裁以适应实际需要（和background-origin用法好像）

语法：

background-clip ： border-box | padding-box | content-box | no-clip

参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

效果如下图所示：


11.background-size

设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

语法：

background-size: auto | <长度值> | <百分比> | cover | contain

取值说明：

1、auto：默认值，不改变背景图片的原始高度和宽度；

2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。


12.多背景multiple backgrounds   难！！
    多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。

语法缩写如下：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],…

可以把上面的缩写拆解成以下形式：

background-image:url1,url2,…,urlN;

background-repeat : repeat1,repeat2,…,repeatN;
backround-position : position1,position2,…,positionN;
background-size : size1,size2,…,sizeN;
background-attachment : attachment1,attachment2,…,attachmentN;
background-clip : clip1,clip2,…,clipN;
background-origin : origin1,origin2,…,originN;
background-color : color;

注意：

        1. 用逗号隔开每组 background 的缩写值；
        2. 如果有 size 值，需要紧跟 position 并且用 “/“ 隔开；
        3. 如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
        4. background-color 只能设置一个。


13.综合练习   伪元素用来加大间距，用border来做分割线
<!doctype html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8”>
<title>CSS制作立体导航</title>
<link rel=”stylesheet” href=”http://www.w3cplus.com/demo/css3/base.css"&gt;
<style>
body{
 background: #ebebeb;
}
.nav{
 width:560px;
 height: 50px;
 font:bold 0/50px Arial;
 text-align:center;
 margin:40px auto 0;
     background: #f65f57;
 /制作圆/
          border-radius:10px;
          /制作导航立体风格/
          box-shadow:0px 10px 0px #b64b41 ;
}
.nav a{
 display: inline-block;
 -webkit-transition: all 0.2s ease-in;
 -moz-transition: all 0.2s ease-in;
 -o-transition: all 0.2s ease-in;
 -ms-transition: all 0.2s ease-in;
 transition: all 0.2s ease-in;
}
.nav a:hover{
 -webkit-transform:rotate(10deg);
 -moz-transform:rotate(10deg);
 -o-transform:rotate(10deg);
 -ms-transform:rotate(10deg);
 transform:rotate(10deg);
}

.nav li{
 position:relative;
 display:inline-block;
 padding:0 16px;
 font-size: 13px;
 text-shadow:1px 2px 4px rgba(0,0,0,.5);
 list-style: none outside none;
}
/使用伪元素制作导航列表项分隔线/
        .nav li:after{
           
        }
        /删除第一项和最后一项导航分隔线/
        .nav li:after{
            content:”  ”;         
            height:13px;            
            border:1px solid #bd4a40;            
            position:absolute;            
            top:18px;right:0px;
}

        /删除第一项和最后一项导航分隔线/

     .nav li:last-child::after {
            border:none;

            }
.nav a,
.nav a:hover{
      color:#fff;
      text-decoration: none;
}
</style>
</head>
<body>
<ul class=”nav”>
    <li><a href=””>Home</a></li>
    <li><a href=””>About Me</a></li>
    <li><a href=””>Portfolio</a></li>
    <li><a href=””>Blog</a></li>
    <li><a href=””>Resources</a></li>
    <li><a href=””>Contact Me</a></li>
</ul>
</body>
</html>

五、选择器  大部分为伪类、伪元素选择器

14.属性选择器
a[class^=haha]  class名开头匹配haha
a[title$=xixi] title结尾匹配xixi
a[href=hehe] href全文匹配hehe

15.结构性伪类元素：root  和html标签一个意思，根都是html   
    注意：伪类前不需要元素 ，直接:root 

16.伪类：not
input:not([type=”submit”]){
  border:1px solid red;
}

17.伪类：empty
选择那些内容为空的（空格不算空）

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

示例显示：

比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。


18.伪类：target
:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

分析：

1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand

2、：target就是用来匹配id为“brand”的元素（id=”brand”的元素）,上面代码中是那个div元素。


19.伪类：first-child  
注意：选的是选择器父元素的第一个子元素，要先找父元素，然后找第一个子元素。而且，是子元素，不是后代元素

20.伪类和伪元素
伪类： 
伪元素 ：：
实际上伪类可以通过增加一个类来实现，伪元素可以通过增加一个元素来实现
伪类种类

伪元素种类


21.伪类nth-child(n)  注意，从1开始
“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
奇数odd，偶数even，也可是是n，2n+1，5等等
ol > li:nth-child(even){
  background: green;
}

22.伪类：nth-last-child(n)  与上面类似，从后往前

23.伪类：first-of-type
“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
.wrapper > div:first-of-type {
  background: orange;
}

24.伪类：nth-of-type
.wrapper > div:nth-of-type(odd),
.wrapper > p:nth-of-type(2n){
  background: orange;

25.last-of-type
26.nth-last-of-type
27.伪类：only-child
“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

28.伪类：only-of-type
“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

29.伪类：enabled选择器 ：disabled选择器
input[type=”text”]:enabled {
  border: 1px solid #f36;
  box-shadow: 0px 0px 0 5px #f36;
}
input[type=”text”]:disabled{
  box-shadow: none;
}

30.伪类：checked
在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。

31.使用label 标签 input前面或后面的文字，能够分离文字和组件


32.伪元素：：selection选择器
用来突出选定的文本，选中某些文字后，背景变色
   尝试添加别的样式没有用。。。比如font-size就没用

33.伪类：read-only 只读元素
“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”
    注意！：伪类伪元素，和前面的选择器之间不要有空格，紧跟其后

34.伪类：read-write
“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。

35.伪元素：：before 和 ：：after
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和”content”配合使用，使用的场景最多的就是清除浮动。
.clearfix::before,
.clearfix::after {
    content: “.”;
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

还可以增加阴影效果


36.这个编程课好垃圾。。。。。。

六、旋转、变换

37.旋转
transform: rotate(45deg);

38.扭曲
transform:skew() transform:skew(-45deg);
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

Skew()具有三种情况：

1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；

2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；

3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）


39.缩放
transform:scale()
1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
2、scaleX(x)元素仅水平方向缩放（X轴缩放）
3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）
  -webkit-transform:scale(2);
  -moz-transform: scale(2);
  transform: scale(2);

40.变形-位移 translate()
translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。
1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
2、translateX(x)仅水平方向移动（X轴移动）
3、translateY(Y)仅垂直方向移动（Y轴移动）

  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
 竟然还可以这样！

41.矩阵变换 transform ：matrix(a,b,c,d,e,f)
a为元素的水平伸缩量，1为原始大小；
b为纵向扭曲，0为不变；
c为横向扭曲，0不变；
d为垂直伸缩量，1为原始大小；
e为水平偏移量，0是初始位置；
f为垂直偏移量，0是初始位置
transform: matrix(0,1,1,1,50,500);

42.变形-原点改变
transform-origin
transform-origin: left top;


43.动画、过渡属性
早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。
transition: all 3s ease-in-out .8s;(所有属性，持续3秒，先加速再减速变化，延迟0.8秒再执行变化，对于零可以省略)
1）transition-duration
transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。
2)transition-timing-function
transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况   【然而经测试，并没有感觉到什么不同

3）transition-delay
transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。
ransition: property duration timing-function delay
例如：a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

44.keyframes关键帧

Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}

在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。

例子：
@keyframes changecolor{
  0%{
    background: red;
  }
  20%{
    background:blue;
  }
  40%{
    background:orange;
  }
  60%{
    background:green;
  }
  80%{
    background:yellow;
  }
  100%{
    background: purple;
  }
}
div {
  width: 300px;
  height: 200px;
  background: red;
  color:#fff;
  margin: 20px auto;
}
div:hover {
  animation: changecolor 5s ease-out .2s;
}

45.调用动画
1）animation-name 
animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。
    animation-name: none | IDENT[,none|DENT];
2）animation-duration    
    animation-duration: <time>[,<time>]
3）animation-timing-function
4）animation-delay
5）animation-iteration-count
6）animation-direction  
    animation-direction:normal | alternate alternate 奇数正常，偶数反方向
7）animation-play-state :running / paused 平时设置paused，hover时设置running
8）animation-fill-mode没懂
例子：
@keyframes around{
  0% {
    transform: translateX(0);
  }
  25%{
    transform: translateX(180px);
  }
  50%{
     transform: translate(180px, 180px); 
  }
  75%{
    transform:translate(0,180px);
  }
  100%{
    transform: translateY(0);
  }
}
div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 20px auto;
}
div span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: orange;
  border-radius: 100%;
  animation-name:around;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count:infinite;
}

46.综合试验  好难！！！！！！！！！    
1）设置3D背景舞台    
        目前浏览器都不支持
           -webkit-perspective: 200px;
          -moz-perspective: 200px;
          -ms-perspective: 200px;
          -o-perspective: 200px;
          perspective: 200px;

七、布局

47.多列
    columns: 200px 2; 列宽、列数
column-gap
    column-gap: 2em;
column-rule
    column-rule: 2px dotted green;
column-span
    column-span:all;横跨


48.盒子模型
从图中可以看出padding属性和content属性层叠background-image属性，层叠background-color属性，这个是存在的，它们四者之间构成了Ｚ轴（垂直屏幕的坐标）多重层叠关系。但是border属性与margin属性、padding属性三者之间应该是平面上的并级关系，并不能构成Ｚ轴的层叠关系。


这块儿这个例子有点儿懵逼

49.flex 伸缩


八、媒体类型

值

设备类型

All

所有设备

Braille

盲人用点字法触觉回馈设备

Embossed

盲文打印机

Handheld

便携设备

Print

打印用纸或打印预览视图

Projection

各种投影设备

Screen

电脑显示器

Speech

语音或音频合成器

Tv

电视机类型设备

Tty

使用固定密度字母栅格的媒介，比如电传打字机和终端

1）link方法：
        <link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen” />
    <link rel=”stylesheet” type=”text/css” href=”print.css” media=”print” />
2）import方法
    @import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。
3）media方法
    @media screen {
    选择器{/你的样式代码写在这里…*/}
  }

这块儿还是百度吧，慕课网的我看不下去了，而且讲的不好