css-styl

CSS - 样式

1. HTML中引入CSS样式的三种方法

   css:Cascading Style Sheet层叠样式表

   • 行内样式:使用style属性引入CSS样式:style=“color:red;”

   • 内部样式表:CSS代码写在的

   • 外部样式表:CSS代码保存在扩展名为.css的样式表中

     • 链入式:

       <link href="style.css" rel="stylesheet" type="text/css" />
       

     • 导入式(放在style里): @import url(“style.css”);

     注意:链接式与导入式的区别

     • link标签属于XHTML，import是属于CSS2.1
     • 使用link链接的CSS文件先加载到网页当中，再进行编译显示
     • 使用import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
     • import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的。

     以防出现覆盖或者效果不显示的情况发生,应该写上/* table begin*/ /* table end*/的标志性注释

2. 字体样式

   color:字体颜色

   font-style:设置字体风格,italic斜体,oblique倾斜,inhert从父元素继承字体样式,normal标准字体样式

   font-family:设置字体类型(sans-serif亚洲字体,可以同时设置多个字体类型备用)

   font-weight:设置字体的粗细(font:weight:600&bold)

   font:字体风格→字体粗细→字体大小/行高→字体类型(font:oblique bold 12px/20px “楷体”?

3. 文本属性

   text-align:控制行内元素的水平位置

   text-indent:设置首行文本的缩进

   line-height:设置文本的行高

   text-decoration:设置文本的装饰

   vertical-align:middle用在表格里,或者用display:table-cell强行变为单元格

4. 鼠标样式

   cursor:pointer

5. 列表样式

   list-style:None 去掉列表前样式

   list-style-image,list-style-type

6. 背景样式

   background-color,background-image:url(图片路径)

   background-repeat(repeat-x/y:只沿水平/垂直方向平铺,no-repeat:不平铺)

   background-position:x,y 水平偏移向右为正，向左为负数;垂直偏移向下为正，向上为负数

   background-size:cover,contain,50%(用object-fit:cover图片不变形)

   background-orign:默认content-box(有边框时占不占边框)

   background-clip:background-orign用border-box时可以用background-clip切下多出去的

7. 元素透明度

   opacity:x,x值为0~1，值越小越透明

   filter:alpha(opacity=x):x值为0~100，值越小越透明->针对ie浏览器

8. 边框样式

   1. 边框圆角

      圆角半径方向性，左上角顺时针转动;简写时：先写X，再写Y

      border-top-left-radius:10px

      border-top-left-radius:20px 10px; 左上角以上边20px,左边10px画圆截弧

      border-radius:50% 20px 25% 5em/25% 15px 40px 55%; 四个角,第一个角上边50%,左边25%画圆以此类推

   2. 边框图像

      border-image-source

      border-image-slice:50% 50%;图像边框的向内偏移。

      border-image-width

      border-image-repeat

      border-image：border-image:url(“border.png”) 15 / 15px repeat

   3. 阴影样式应用

      box-shadow：hoffset(水平偏移量,正数往右,负数往左) voffset(垂直偏移量，正数往下，负数往上) blur(模糊值，数值越大越模糊。默认为0，边界清晰) spread(阴影的延伸半径) color inset(阴影内嵌到盒子内部)

      box-shadow: 0px 0px 10px 10px #3812ff inset,0px 0px 0px 20px black inset;

9. 文本样式

   text-shadow：hoffset voffset blur color

   text-overflow:clip(超出宽度的部分不使用省略号作为结尾),elllipsis(使用省略号作为结尾)

   white-space:nowrap,必须不换行

   text-stroke:width color 描边

10. CSS前缀

    样式属性成为通用标准之前，还不够完善，需要使用厂商前缀。

    用于检索浏览器兼容性的网站:http://www.caniuse.com

    选择器类型	说明
    Chrome、Safari	-webkit-
    Firefox	-moz-
    Opera	-o-
    IE	-ms-

    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    -webkit-border-radius: 20px;
    -ms-border-radius: 20px;
    border-radius: 20px;
    

11. 自定义字体

    @font-face{
    	font-family: "webfont";
    	src: url('../fonts/webfont.eot'); /* IE9*/
                    src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                    url('../fonts/webfont.woff') format('woff'), /* chrome、firefox */
                    url('../fonts/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
                    url('../fonts/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
    }
    div{
        font-family:webfont ;
        font-size: 20px;
    }
    

12. 颜色渐变

    1. 用线性渐变创建图像

       background：linear-gradient(方向，#ff9000 0%,#ff5000 100%)；

       方向参数可以省略，默认从底部往上渐变,可以好几种颜色从小到大

       方向类型包括to bottom、to top、to right、to left、to bottom right等，也可以通过角度来设置

    2. 用径向渐变创建图像

       background：radial-gradient(位置，类型，#fb3 50%, rgba(85, 136, 170, 0) 20%)；

       渐变生成工具:http://www.colorzilla.com/gradient-editor/

       类型参数可以省略，默认是椭圆ellips，可以设置为圆circle,类型也可以设置中心点位置

    3. 重复渐变

       background-image：repeating – 线性渐变或径向渐变；

       background-image: repeating-linear-gradient(135deg,black,black 10%,white 0,white 20%);
       background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
       

13. 变形

    将元素进行平移、缩放和旋转，也称为变换

    transform: rotate(30deg) scale(1,1) skew(0deg,0deg);

    rotate旋转,scale缩放(以1为基准),skew倾斜

    transform-origin: center center;改变变换的基准点,默认在中心,center,left,right

    使用纯CSS3电影海报示例的3d动画:http://demo.marcofolio.net/3d_animation_css3/

14. 动画

    1. 过渡动画

       transition：控制的属性1 动画持续时间 动画效果 延迟时间；

       transition: width 1s,background 1s,box-shadow 1s,border 1s;
       transition：color 1s linear(规定以相同速度开始至结束的过渡效果) 1.0s；
       transition：all 1s ease(规定慢速开始，然后变快，然后慢速结束的过渡效果) 0s；

       input{
            width: 100px;
            height: 50px;
            border: solid 1px #bcd8d8;
            outline: none;
            transition: width 1s linear 300ms,border 1s linear 300ms;
       }
       
       input:focus{
            width: 300px;
            border: solid 1px red;
        }
       

    2. 关键帧动画
       利用类似于Flash的关键帧进行控制的动画方式，比过渡动画功能更加强大

       • 动画原理
         利用@keyFrames创建关键帧动画;利用animation调用关键帧动画

       @keyframes moveon {  /*需要浏览器前缀时，加在@和keyframes之间*/
            0%   {background: red}
            25%  {background: yellow}
            50%  {background: blue}
            100% {background: green}
       }
       .div01-css{
            width: 500px;
            height: 300px;
            border: solid 1px gray;
            animation: moveon 3s;
       }