CSS3-基础

1.  结构标记
  <section>  定义一个区域                              <article> 定义独立的内容
  <aside>  定义页面内容之外的内容                  <nav>定义导航链接
  <header> 定义一个页面或者一个区域的头部    <footer>定义一个页面或者一个区域的底部
  <hgroup> 标签用于对网页或区段（section）的标题进行组合
  <figure> 定义一组媒体内容以及它们的标题      <figcaption> 定义figure元素的标题
例如：一个网页上中间是广告和正文组成，那么此时这个整体就可以使用
<section>
   <div>这边可以用div来加广告</div>
   <article>   
       <header>
           <h1>标题</h1>
           <p><time>20:25</time></p>

       </header>      
       <p>今年的<time datetime="2016-09-14">中秋节</time>没有博饼了<p>

</article>
</section>

<aside>作用是用于网页两边
<nav> 顾名思义就是导航作用的，例如
<nav>
      <a href="超链接的url"  target=“_blank代表点击超链接后是用新页面跳转，self是在本页跳转”> PHP</a>
     <a href="javascript=void(0);">JAVA</a>
     <a href="javascript=void(0);">iOS</a>
</nav>

<figure>
     <h1>图片标题</h1>
     <img scr="../../source/play.png">
</figure>

2. div、section、article区别
  div、section、article，语义是从无到有，逐渐增强。
 div无任何语义，仅仅用作样式化或者脚本的钩子，对于一段主体性的内容，则就适用section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用article。
  原则上来说，能适用article的时候，也是可以适用section的，但是实际上，假如使用article更合适，那么就不要使用section。 nav和aside的使用也是如此，这两个标签页是特殊的section在使用nav和aside更适合的情况下，也不要适用section。

3.  audio标记
  audio标签用于定义声音，支持MP3音频。

例：

<audio controls="controls">
           <source src="tian.mp3">
</audio>

4.  video标记
  用于标记定义视频

5.  font字体
font的属性表现只有两种情况，一种是类似于background：属性，但是前提是得把字体所有属性一并写上去才能有效果，另一种是，需要用的属性需要一个个单独写。如：font-style：normal； font-variant：small-caps等。

字体font的属性有：
  a. font-style：正常（normal），斜体（italic，比较斜点），oblique（斜体）

  b. font-variant:用于变化字母，原本大写的字母不变，原本小写的字母变成大写，但是此时由小写变成大写的这些字母会比原本就大写的字母小。它的属性有normal、small-cap，设置文本为小型的大写字母。

c. font-weight:设置文本字体的粗细。 normal、bold（最粗）、bolder、light。

d. font-size ：设置对象中的字体尺寸。有绝对值（small、large等），相对值（smaller，lager）、length，百分比。

e. font-family ：设置字是什么字体，如：宋体，黑体等等。（注意：有字体是有版权的，注意查询）

6.  背景background

    属性有：
    a.     background-color  : 设置背景颜色。
    b.     background-image : 设置渐变色。
    c.      background-repeat : 

 7. 表格table

  table-layout：auto|fixed; 
  默认是auto:列宽度由单元格内容设定。
  fixed：列宽由表格宽度和列宽度设定。
  比如table的width为200，而td的width设置为80px，使用fixed时，当td的内容   超过了80px后那么第二个td的内容就会叠加在从81px开始。 若使用auto，则它会根据内容的大小来确定第二个td需要放的位置。

border-collapse :设置table的每个cell边框
separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

collapse如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

 caption-side:设置表头的位置，可以为top、bottom、left、right，设置表头的标签为<table><caption>标题</caption></table>

 empty-cells:hide、show（默认），设置表格单元格无内容时是否显示，这个一般不常用。
 

8. list列表
list-style-type设置列表项标记的类型。例如默认的无序列表的标记类型是实心黑色。这个属性有参数：
ul.a {list-style-type:circle;} 圆形空心

ul.b {list-style-type:square;} 方块

ol.c {list-style-type:upper-roman;} 大写罗马数字

ol.d {list-style-type:lower-alpha;} 小写罗马数字

list-style-position设置在何处放置列表项标记。

list-style-image使用图像来替换列表项的标记。

list-style: url(地图路径)，

9.  CSS盒子模型

margin ： 边距，例如一个电脑屏幕上放着一个div。此时设置margin即设置div与屏幕的间距。margin有四个属性，top，right，bottom，left。

boder：边框，引用上面的例子。border即是div的边框。

padding：内边距，如div里边有正文，则设置这个即是正文距离div内边距的距离。

10. 背景background

a. background-position：设置背景对象的位置，top，left，top, bottom, center;

b. background-origin: border-box/padding-box/content-box; 默认值：padding-box；
例如：border：20px solide #000；此时边框的宽度为20；

border-box：设置的背景图片左边与边框重合。即图片的左边与边框的最左边重合。
padding-box： 设置的背景图片的左边与边框的右边重合。
content-box: 设置的背景图片与文本重合。

c. background-clip: 裁剪超出指定的范围部分，与iOS中的裁剪类似。有属性：border-box、padding-box；content-box；
例如当你的设置背景图片的background-origin属性为border-box。 再设置background-clip为padding-box。那么展示出来的效果就和background-origin为padding-box效果一样。

d.  background- repeat ：repeat-x/repeat-y/repeat/no-repeat

repeat-x:横向重复，如一张小图片，设置了这个属性，那么效果就是一行全部都是重复了这张图片。
repeat-y: 纵向重复，如一张小图片，设置了这个属性，那么效果就是一例全部都是重复了这张图片。
repeat: 即整个背景全部横向和纵向都重复这张图片。也就是铺满屏幕。
no-repeat: 即是不重复。

e.  background-image：渐变色属性。它有                                                     linear-gradient(red,blue);，background-image:radial-gradient(red,blue);两个属性，linear-gradient 是线性的渐变，radial-gradient是圆圈的渐变。这两个属性至少要有赋值两个颜色。可以有例如：（red，blue）| （red ， blue ， green）|（角度90deg ，red，blue）等。

e.  background-attachment: fixed | scroll | local;设置背景图片是随对象滚动还是固定的。scroll是默认值。 fixed 是不随滚动。

f.  background-size ： auto / cover / contain
auto: 背景图像的真实大小。
cover：将背景图像等比例缩放到完全覆盖容器。背景图像有可能超出容器。
contain： 将背景图像等比例缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

/*background-image: linear-gradient(red, yellow); 线性渐变*/

/*background-image:linear-gradient(left top, red 100px, yellow 200px); 从左上角开始的线性渐变(注意：需要加浏览器前缀,例如：-moz-liner-gradient，-moz-（火狐）、-webkit-（safari）、-0-(Opera)、 -ms-（微软）) */

/*background-image: -moz-linear-gradient(180deg, black 200px, white 300px); 旋转180°的线性渐变*/

/*background-image:radial-gradient( #0033cc, #FF0000); 径向渐变*/

/*background-image: -moz-repeating-linear-gradient(left , #0033cc 100px, #FF0000 150px); 重复线性渐变，使用方向（eg:left,right...）需加浏览器前缀，也可使用角度来设定方向，也可使用坐标值*/

/*background-image: -moz-repeating-radial-gradient( 300px 60px, #0033cc 100px, #FF0000 150px); 重复径向渐变，使用方向（eg:left,right...）需加浏览器前缀，也可使用角度来设定方向，也可使用坐标值*/

11. border边框

border：border-width / border-style / border-color

border-width: 设置边框宽度。
border-style: 设置边框的样式，凹槽，突出，等等
border-color: 设置边框颜色。

12.   文本text

a. text-align: start/end/left/right/center/justify/match-parent/justify-all,默认是start，设置内容的水平方式，如center居中。
b.  text-ident：16px。设置文本首行缩进。
c.  line-height:normal/40px. 设置对象的行高， 与height配合使用，可以设置内容水平垂直居中，如：height = 40px， line-height：= 40px；
e.  word-wrap:   normal/ break-word.设置是否自动换行。

f. word-break : break-word/break-all/keep-all/normal;  /*word-break: break-all;整段结束后才换行,带符号*/

/*word-break: keep-all;整个单词要么在上行要么在下行*/

g. text-decoration:none;设置有无下划线。
h. text-decortation-style: solid/double/dotted/dashed/wavy;设置线条的样式，
 solid是实线， double两条线，dotted点虚线， dashed线虚线，wavy波浪线

i.  text-decoration-corlo: 设置装饰线条的颜色。
j.  text-shadow:设置阴影。text-shadow:3px 3px 5px;/*参数1：向左右偏移，参数2：向上下偏移  参数3：模糊度*/

13. 阴影box-shadow

  box-shawod:(参数1：横向偏移， 参数2：纵向偏移， 参数3：阴影宽度，参数4：阴影模糊度一般不设置，设置该参数会使得这个对象四周都有阴影， 参数5：阴影颜色)

14.   圆角边框

  方法一：  border-radius：左上角水平半径（em）    右上角水平半径（em）   右下角水平半径（em）  左下角水平半径（em） / 左上角垂直半径（em） 右上角垂直半径（em）
右下角垂直半径（em） 左下角垂直半径（em）

方法二：border-radius：设置四个角
border-top-left-radius:200px； 设置左上角
border-top-right-radius:200px；右上角
border-bottom-right-radius:200px; 右下角
border-bottom-left-radius:200px; 左下角。

方法三：border-radius=200px； 即四个角的倒圆角度为200px；

拓展：旋转动画。

<style>

div:nth-child(1){

background: url(../../../resource/images/6.jpg);

background-size: cover;

border-radius: 200px;

animation: rotation linear 3.6s infinite; // 实现animation方法。 rotation是写的方法名   linear是使动画平缓过渡  3.6s 是动画时间，（当然如果设置了一直旋转就不能设置时间了） infinite 设置一直旋转。

}

@keyframes rotation{  // 声明一个旋转函数

0%{

tramsform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

</style>