HTML5和CSS3权威指南-读书笔记（CSS3部分）

这本书的h5部分的总结写了很久，原因是对H5某些新的东西用得少，这次把以前不熟悉的地方好好的敲了一下代码，总结了一下，也有了很大的收货，现在来总CSS3篇

---

一.CSS3选择器

1.CSS3中的属性选择器

1.[att*=val] (表示若att的属性值包含val则该元素使用这个样式)

[id*=section1]{
    background-color:#000;
}

2.[att^=val] (表示若att的属性值的开头字符为val则该元素使用这个样式)
3.[att$=val] (表示若att的属性值的结尾字符为val则该元素使用这个样式)

2.结构伪类选择器

• 伪类选择器：a:link{....},a:visited{....}.....
• 伪元素选择器：

p:first-line{},
p:first-letter{....}
p:before{}
p:after{}

• 选择器 root，not，empty，target

  • root选择器将样式绑定到页面的根元素，在html页面中就是html元素
  • not选择器用来排除元素body*:not(h1){...}
  • empty选择器来指定当元素内容为空白时使用的样式:empty{...}
  • target选择器来对页面某个target元素（该元素id被当做页面超链接来使用）指定样式。target{....}

• 选择器 first-child，last-child，nth-child，nth-last-child

li:nth-child(2){....}//正数第二个子元素
li:nth-last-child(2){....}//倒数第二个子元素
li:nth-child(odd){....}//正数第偶数个子元素
li:nth-last-child(even){....}//倒数第奇数个子元素
li:nth-child(4n+1){....}//循环使用样式

• 选择器 nth-of-type，nth-last-of-type

h2:nth-of-type(odd){...} // 只针对h2判断
li:nth-child(odd){....} // 针对li的所有子元素判断

• only-child 选择器匹配属于其父元素的唯一子元素的每个元素。

3.UI元素状态伪类选择器

• 11种状态伪类选择器

E:hover,E:active,E:focus,E:enabled,E:disabled,E:read-only,
E:read-write,E:checked,E:default,E:indeterminate,E::selection

4.使用选择器在页面插入内容

• 主要用content属性进行插入

h2:before{
  content:'hhhh'
}
h2:before{
  content:none
}
h2:before{
  content:url(mark.png)
}
img:after{
   content:attr(alt)
}

二.字体相关样式

2.1给文字添加阴影-text-shadow

// 阴影离开文字的横向距离3px,纵向4px,阴影模糊半径5px,颜色灰色,
div {
 text-shadow:3px 4px 5px gray
}
// 偏移距离可为负值
div {
 text-shadow:-3px -4px 5px gray
}
//支持多个阴影
div {
 text-shadow:-3px -4px 5px gray,
             5px 7px 3px gray
}

2.2让文本自动换行-word-break

div{
    word-break:normal;//使用浏览器默认换行规则
    word-break:keep-all;//只能在半角空格或连字符处
    word-break:break-all;//允许在单词内换行
}

2.3让长单词与URL地址自动换行——word-wrap属性

div{
    word-wrap:break-word;
    word-wrap:normal;
}

2.4使用服务器端字体——Web Font与@font-face属性

// 由于.otf是OpenType文件格式，所以要format('opentype')
// 若使用.ttf文件为TrueType文件格式，则format('truetype')
// 若使用.rot文件则不需指定format

@font-face{
  font-family:WebFont;
  src:url('font/Fontin-Sans_R_45b.otf') format('opentype');
  font-weight:normal;

}

2.5显示客户端本地字体

@font-face{
  font-family:Arial;
  src:local('Arial')
}

• 修改字体种类而保持字体尺寸不变——font-size-adjust属性

// 0.46为Time New Roman字体的aspect值
div{
   font-size:16px;
   font-family:Time New Roman;
   font-size-adjust:0.46;
}

三.盒相关样式

3.1.盒类型主要是display属性的值,下面列举常用的

inline
block
inline-block
list-item
none
flex
table
inline-table

3.2对盒中容纳不下内容的显示

overflow
overflow-x
overflow-y
text-overflow
div{
   overflow:hidden
   text-overflow:elipsis;//超出部分显示省略号
}

3.3盒阴影——box-shadow

// 和文字阴影类似
div{
  box-shadow:10px 10px 10px gray;
}

3.3指定针对元素宽度和高度的计算方法 —box-sizing属性

box-sizing:content-box;//标准盒模型
box-sizing:border-box;//怪异盒模型
box-sizing:padding-box;//firefox浏览器可以使用

四.背景边框相关样式

4.1与背景相关的新增属性

// background-clip：指定背景的显示范围
div1{
  background-clip:border;
}
div2{
  background-color:#000;
  background-clip:padding; //div2的背景色不包含边框
}

// background-origin：指定绘制背景图像的绘制起点（默认从内部padding区域的左上角开始）
div1{
  background-origin:border;// 从边框的左上角开始
  background-origin:padding;//从内部补白的左上角开始
  background-origin:content;// 从内容的左上角开始
}

// background-size：指定背景图像的尺寸
div1{
  background-size:40px 20px;// 背景宽为40px,高为20px
  background-size:auto 20px;// 背景宽为自适应,高为20px
  background-size:20px;// safari3中背景宽高都为20px，其他宽为20px,高为auto
  background-size:auto 50% 50%;// 不同浏览器处理方式不一样
}

// 在一个元素中显示多个背景图像
div1{
  background-image:url(flower-red.png), url(flower-green.png)
  background-repeat:no-repeat,repeat-x,no-repeat;
  background-position:3% 98%, 85%,center center,top;
  width:300px;
  padding:90px 0px;
}

4.2圆角边框的绘制

// border-radius
div{
  border:solid 5px blue;
  border-radius:40px 20px;//水平方向半径为40px,垂直方向为20px;
  border-radius:40px 20px 10px 5px;//border-top-left-radius为40px,border-top-right-radius为20px,border-bottom-right-radius为10px,border-bottom-left-radius为5px;
}
// 若使用了border-radius属性但是把边框设定为不显示的时候，浏览器将把背景的四个角绘制为圆角

// border-image属性，使用图片边框
border-image:url(图像文件的路径) A B C D
border-image:url(图像文件的路径) A B C D/border-width
border-image:url(图像文件的路径) A B C D/border-width topbotton leftright
1.border-image属性值至少必须指定5个参数，A B C D四个参数表示当浏览器自动把边框图像分割时的上边距，右边距，下边距及左边距。
2.topbotton表示元素的上下两条边中图像的显示方式，leftright表示左右两条边中的显示方式，可为repeat，stretch,round三种。

五.CSS3中的变形处理

5.1transform实现旋转，缩放，倾斜以及移动

div{
   transform:scale(0.5)//整个元素缩小50%
   transform:scale(0.5,2)//水平缩小50%。垂直放大一倍

   transform:rotate(30deg)//顺时针旋转30度

   transform:skew(30deg)//水平倾斜30度。垂直不倾斜
   transform:skew(30deg,20deg)//水平倾斜30度。垂直倾斜30度 

   transform:translate(50px)//水平向上移动50px。垂直不动
   transform:translate(50px,50px)//水平向上移动50px。垂直向上移动50px   
}

// 对一个元素使用多种变形方法
div{
   transform:scale(0.5)，skew(30deg)，translate(50px,50px);
}

5.2指定变形基准点（默认基准点是元素中心）

div{  
   transform:rotate(30deg)//顺时针旋转30度
   // 改变基准点为左下
   transform-origin:left bottom
   // 水平方向为left,垂直方向为bottom,水平方向还可以为center,right.垂直方向还可以为：top center

六.CSS3中的动画功能

6.1transition功能：支持从一个属性值平滑过渡到另一个属性值

// 单独使用
transition-property:background-color;//表示对哪个属性进行平滑过渡
transition-duration:1s;//示在多长时间内完成属性值的平滑过渡
transition-timing-function:linear;//表示通过什么方法来进行平滑过渡

// 简写
transition：property duration timing-function

// 示例
div{
  background-color:#ffff00;
  transition:background-color 1s linear
}
div:hover{
  background-color:#00ff00;
}


// 同时过渡多个属性值
div{
  background-color:#ffff00;
  color:#000000;
  transition:background-color 1s linear,color 1s linear
}
div:hover{
  background-color:#00ff00;
  color:#00ff00;
}

6.2Animation功能（通过定义多个关键帧，以及每个关键帧中的属性实现负责动画）

div{
  background-color:red;
}
@-webkit-keyframes mycolor{
  0%{
    background-color:red;
  }
  40%{
    background-color:darkblue;
  }
  70%{
    background-color:yellow;
  }
  1000%{
    background-color:red;
  }
}
div:hover{
  -webkit-animation-name:mycolor;
  -webkit-animation-duration:5s;
  -webkit-animation-timing-function: linear;
}

// 多个属性值同时改变
div{
  background-color:red;
}
@-webkit-keyframes mycolor{
  0%{
    background-color:red;
    transform:rotate(0deg)
  }
  40%{
    background-color:darkblue;
    transform:rotate(30deg)
  }
  70%{
    background-color:yellow;
    transform:rotate(-30deg)
  }
  1000%{
    background-color:red;
    transform:rotate(0deg)
  }
}
div:hover{
  -webkit-animation-name:mycolor;
  -webkit-animation-duration:5s;
  -webkit-animation-timing-function: linear;
}

七.布局相关样式

7.1多栏布局

column-count:2;  // 分为两栏
column-width:20em;  // 两栏的总宽度
column-gap:2em;  // 两栏之间的间隔
column-rule:1px solid red;  // 两栏之间增加间隔线

7.2盒布局弹性盒布局

八.其他重要样式和属性

8.1颜色相关样式

// 利用alpha通道来设定颜色
// 1.对RGB颜色设定alpha通道
background-color:rgba(255,0,0,0.5)
// 2.对HSL颜色设定alpha通道,HSL指色调（H）,饱和度（s）,亮度（l）
background-color:hsla(255,0,0,0.5)

8.2用户界面相关样式

//1.outline属性，用来在元素周围绘制一条轮廓线，起到突出元素的作用
outline:thin solid red;
//2.outline-offset属性可以让outline轮廓线往外偏离
//3.resize属性，允许用户通过拖动的方式来修改元素的尺寸
div{
  overflow:auto;
  resize:both;//可以修改元素宽度和高度
  width:150px;
  height:150px;
}
// initial属性值取消对元素的样式指定