CSS3学习笔记

1、私有前缀

   -webkit-是针对Webkit 核心浏览器

   -ms-是微软的私有前缀所以针对的是Internet   Explorer

    -moz-是针对FireFox的

     随着对CSS3 研究的不断深入，我衷心建议大家去看看这个网站http://

caniuse.com

2、CSS3 小技巧

   （1）CSS3 多栏布局

         column-width 设定栏位宽度

         column-count 设定栏位数量

         column-gap：设定栏位间隙

         column-rule：设定栏位分隔线

   （2）文字换行

          word-wrap: break-word;

3、CSS3 属性选择器

    1）. CSS3 的子字符串匹配属性选择器

         (1)“匹配开头”的属性选择器。

“匹配开头”的属性选择器语法如下：

Element[attribute^="value"]

        (2)“匹配包含内容”的属性选择器。

“匹配包含内容”的属性选择器语法如下：

Element[attribute*="value"]

(3)“匹配结尾”的属性选择器。 

“匹配结尾”的属性选择器语法如下：

Element[attribute$="value"]

4、CSS3 结构伪类

  1）. :last-child 选择器

CSS2.1 中已经有一个针对列表中第一项的选择器：

li:first-child

CSS3 又增加了一个选择器用以匹配最后一项：

li:last-child

display: table   该元素使用table布局

     display: table-row;

     display: table-cell;

display: inline-block 一行显示

2）. nth-child 选择器

   交替使用不同的文字颜色

nav ul li:nth-child(even) a {

color: #fe0208;

}

3）. 理解nth 规则的作用

    包括：nth-child(n)、:nth-last-child(n)、:nth-of-type(n)以及:nth-last-oftype(  n)

     n的值：    

=odd：奇数

=even：偶数

=整数

=表达式

    child 和last-child 的区别在于，last-child 是从文档节点树的末尾开始算。

    :nth-last-of-type 则可以指定你想选择的元素类型

    

4）. 否定（:not）选择器

   另一个便利的选择器是否定伪类选择器，用于选择不满足某些条件的元素。

   p:first-line 会选中<p>标签的第一行内容，p:first-letter 会选  中其中的第一个字母。

5、自定义网页字体

     text-indent 规则将实际的

       文本移出视口范围

     1）@font-face 规则

          Embedded OpenType（EOT）字体是Internet Explorer 的首选格式（其他浏览器都不支持）

          其他浏览器更钟爱常见的TrueType 格式（TTF），还有Scalable Vector Graphics (SVG)以  及Web Open Font Format (WOFF)

          @font-face {

font-family: 'BebasNeueRegular';

src: url('BebasNeue-webfont.eot');

src: url('BebasNeue-webfont.eot?#iefix') format('embeddedopentype'),

url('BebasNeue-webfont.woff') format('woff'),

url('BebasNeue-webfont.ttf') format('truetype'),

url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');

font-weight: normal;

font-style: normal;

}

6、新的CSS3 颜色格式和透明度

    nav ul li:nth-child(odd) a {

color: rgb(254, 2, 8);

    }

 HSL（色相、饱和度、亮度）

   HSL 模式基于一个360°的色相环，第一个数字代表色相，60°时为黄色，120°时为绿  色，180°时为青色，240°时为蓝色，300°时为洋红色，360°时为红色。

   其  后的两个值分别表示饱和度和亮度，值为百分比，用于改变基础的色相。如果想要更加  饱满的颜色，则第二个值使用一个高一点的百分比即可。最后一个值控制亮度，可在0%  的全黑到100%的全白之间变化。

   nav ul li:nth-child(odd) a {

       color: hsl(359, 99%, 50%);

    }

版本9 以下的IE 浏览器不支持RGB 和HSL。

透明通道

   background-color: hsla(0, 0%, 100%, 0.8);  设置背景透明度

   background-color: rgba(255, 255, 255, 0.8);

 为什么不使用opacity

CSS3 还允许通过opacity 声明来设置元素的透明度。该透明度的值也

是一个介于0 到1 之间的小数（如将opacity 设置为0.1 表示为10%透

明）。但是这种透明度与RGBA 及HSLA 有所不同，这种方式设置的透

明度会对整个元素产生影响（元素的内容都会透明）。反之，使用HSLA

或RGBA 则可以仅让元素的某些部分有透明效果。这样，一个元素可以

带有HSLA 透明背景，但内部的文字仍然不透明。

-prefix-free  是一个 JavaScript 工具库，用于帮助你从 CSS 前缀的地狱中解脱出来。你编写的 CSS 代码无需填写浏览器前缀，在需要的时候，-prefix-free 会帮助你自动添加当前浏览器需要的前缀。

引用地址：

      https://raw.githubusercontent.com/LeaVerou/prefixfree/gh-pages/prefixfree.min.js

  

7、文字阴影

  文字阴影的基本语法：

.element {

    text-shadow: 1px 1px 1px #cccccc;

}

     记住，阴影值的速记规则永远是先向右再向下。因此，第一个值指的是右侧阴影的大小，  第二个值指的是下方阴影的大小,第三个值指的是模糊距离（即阴影从开始变淡到完全  消失的距离），最后一个值是阴影颜色。

    HEX、HSL 或RGB 颜色都可以

       text-shadow: 4px 4px 0px hsla(140, 3%, 26%, 0.4);

    px、em 或rem 都行

       text-shadow: .039215686em .039215686em 0em #dad7d7; /* 4 ÷ 102 */目标元素尺寸÷上下文元素尺寸=百分比尺寸

       text-shadow: none;//取消文字阴影

      左上方阴影:text-shadow: -4px -4px 0px #dad7d7;

  制作浮雕文字阴影效果

       nav ul li a {

height: 42px;

line-height: 42px;

text-decoration: none;

text-transform: uppercase;

font-family: 'BebasNeueRegular';

font-size: 1.875em; /*30 ÷ 16 */

color: #000000;

text-shadow: 0 1px 0 hsla(0, 0%, 100%, 0.75);

     }

多重文字阴影

   text-shadow: 0px 1px #ffffff,4px 4px 0px #dad7d7;

8、盒阴影

   盒阴影的语法与文字阴影完全一样：水平偏  移距离、垂直偏移距离、模糊半径，以及阴影颜色：

       box-shadow: 0px 3px 5px #444444;

   内阴影：

      box-shadow 属性可以用来制作内阴影——出现在元素内部，而不是外部。内阴影可用  来制作光晕效果，如下所示： 

            box-shadow:inset 0 0 40px #000000;

   多重阴影

      和文字阴影一样，盒阴影也可以有多重阴影效果。语法也类似，即将两组值用逗号分开， 这样两组阴影就会按照代码中的先后顺序从上到下应用到元素上。换句话说，就是代码 中先声明的规则，在浏览器中会覆盖下面的规则。

       box-shadow: inset 0 0 30px hsl(0, 0%, 0%),

                              inset 0 0 70px hsla(0, 97%, 53%, 1);

 9、背景渐变

      在没有 CSS3 的时候，如果想做一个背景渐变效果，就得使用一个很细的渐变切片进行水  平/垂直平铺。对于使用图片而言，这确实是一种很好的折中方案。一张仅有一两像素宽  的图片，不会给宽带造成太大负担，而且它可以用在网站的多个元素上。

     aside {

border-right-color: #e8e8e8;

border-right-style: solid;

border-right-width: 2px;

margin-top: 58px;

padding-left: 1.5%;

padding-right: 1.0416667%;

margin-left: 1.0416667%;

float: left;

width: 20.7083333%;

background: url(../img/sidebarBg2.png) 50% repeat-x;

    }

纯CSS3

    就可以做出和上面一样的渐变，而且不用图片，代码如下：

       background: linear-gradient(90deg, #ffffff 0%, #e4e4e4 50%, #ffffff 100%);

     分解线性渐变语法：

      圆括号中的第一个值（即例子中的90deg，可选）定义了渐变的方向。（top，left，right也可）

      下一个值（例子中的#ffffff 0%）定义的是渐变的“起点”，包括起点的颜色和位置。

      下一个值指的是“过渡颜色点”。如果需要的话，可以在渐变“终点”之前定义更多  的过渡颜色点（使用逗号分隔）。

      圆括号中的最后一个值始终是渐变的“终点”。不论在起点之后放置了多少个过渡颜色  点，最后一个值始终是终点。

      

 径向背景渐变

   径向背景渐变的语法如下所示：

       background: radial-gradient(center, ellipse cover, #ffffff 72%, #dddddd 100%);

   分解径向渐变语法

       第一个值：渐变的位置（center，或者20px（上边距）  25px（左边距）等）

       第二个值：径向渐变的形状和大小

                         circle:圆形

                         ellipse：椭圆形

       closest-side：（渐变形状是圆形时）以距离中心点最近的一边为渐变半径，或者（渐 变形状是椭圆形时）以距离中心点最近的水平或垂直边为渐变半径。

     closest-corner：以距离中心点最近的一角为渐变半径。

     farthest-side：和closest-side 正好相反，（渐变形状是圆形时）以距离中心点 最远的一边为渐变半径，或者（渐变形状是椭圆形时）以距离中心点最远的水平或垂

直边为渐变半径。

     farthest-corner：以距离中心点最远的一角为渐变半径。

     cover：和farthest-corner 完全一样。

    contain：和closest-side 完全一样

      接下来的值依次是渐变起点、过渡颜色点以及终点（这部分和线性渐变是一样的）。

      也可以这样用：

          background: radial-gradient(20px 20px, circle cover,

hsla(9,69%,85%,0.5) 0%,

hsla(9,76%,63%,1) 50%,

hsla(10,98%,46%,1) 51%,

hsla(24,100%,50%,1) 75%,

hsla(10,100%,39%,1) 100%);

         是以距离左边和上边均为20 像素的点为中心点，使用圆形渐变，渐变半  径覆盖整个元素显示区域，并使用了多组HSL(A)的过渡颜色点

      

      重复渐变：

         background: repeating-linear-gradient(90deg, #ffffff 0px, hsla(0, 1%, 50%,0.1) 5px);

         background: repeating-radial-gradient(2px 2px, ellipse,

hsla(0,0%,100%,1) 2px, hsla(0,0%,95%,1) 10px,

hsla(0,0%,93%,1) 15px, hsla(0,0%,100%,1) 20px);

       

10、背景渐变图案

    body {

background-color:white;

background-image:

radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px),

repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0,

hsla(0, 0%, 87%, 0.31) 4px, transparent 5px,

transparent 20px, hsla(0, 0%, 87%, 0.31) 21px,

hsla(0, 0%, 87%, 0.31) 25px, transparent 26px,

transparent 50px);

background-size: 30px 30px, 90px 90px;

background-position: 0 0;

    }

11、CSS3 的响应性

     媒体查询为大视口设定一个具体规则：

   @media screen and (max-width: 768px) {

body {

background-color:white;

background-image:

radial-gradient(hsla(0, 0%, 87%, 0.31) 9px, transparent 10px),

repeating-radial-gradient(hsla(0, 0%, 87%, 0.31) 0,

hsla(0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px,

hsla(0, 0%, 87%, 0.31) 21px, hsla(0, 0%, 87%, 0.31) 25px,

transparent 26px, transparent 50px);

background-size: 30px 30px, 90px 90px;

background-position: 0 0;

}

    }

12、组合使用CSS3 属性

     按钮：

       #content a {

text-decoration: none;

font: 2.25em /* 36px ÷ 16 */ 'BebasNeueRegular';

background-color: #b01c20;

border-radius: 8px;

color: white;

padding: 30px;

float: left;

background: -moz-linear-gradient(90deg, #b01c20 0%, #f15c60 100%);

margin-top: 30px;

box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);

text-shadow: 0px 1px black;

border: 1px solid #bfbfbf;

     }

13、多重背景图片

   语法如下：

      background:

         url('../img/1.png'),

         url('../img/2.png'),

          url('../img/3.png');

      background:

url('../img/1.png'),

url('../img/2.png'),

          url('../img/3.png') left bottom, black;

    背景图片大小：background-size: 100% 50%, 300px 400px, auto;

   auto：使用图片的原始大小；

   cover：按照原始图片的长宽比缩放图片以填充整个元素区域；

   contain：按照原始图片的长宽比缩放图片以使其较长的一边适应元素大小。

    背景图片位置：默认为top left

    背景属性的缩写语法：

          先声明多重背景图片，然后声明背景大小，最  后声明背景位置。