CSS 侧重点

第一章：字体与文本相关样式

一.字体相关样式属性

1. font-family 设置文字的字体，该属性可以设置多个显示字体，浏览器按该属性指定多个指定多个显示字体，多个属性之间以英文（，）隔开。

2.font-size-adjust  用于控制对不同字体的尺寸进行微调，属性可以指定为none或用一个数值代表调整比例

3.font-strech  用与改变文字的横向拉伸 narrow横向压缩，wider横向拉伸

4.font-style      改变字体风格     italic（斜体） oblique  （倾斜体）

5.font-variant 该属性用于设置文字的大写字母格式  small-caps（小型大写字母字体）

6.text-shadow  该属性用于设置文字是否有阴影效果

7.text-transform  该属性用于设置文字大小写 capitalize（首字母大写） upperease（全部大写）

lowerease(全部小写）

8.letter-spacing 用于设置字符之间的间隔

9.word-soacing 用于设置单词之间的间隔

二.颜色表示方式

三.文本相关样式属性

1.text-indent  文本缩进不改变盒子大小

2.text-elipsis 当文本溢出时由（。。。）表示

3.vertical-align 垂直方式对齐   text-align 水平方式对齐

4.white-space 用于设置目标元素对文本内容的空白处理方式

1>pre:保留文本里所有空白

2>nowrap:文本不会换行，文本会在同一行继续，直到遇到<br../>标签为止

3>pre-wrap:保留空符序列，但可以正常的进行换行

4>pre-line:合并空白序列符，但保留换行

5.word-break

keep-all:只会在半角空格或连字符处进行换行

break-all:设置在单词中间进行换行

6.word-wrap

nomal:靠浏览器默认进行换行

beark-word允许在单词中间进行换行

四.服务器字体

1.服务器字体的定义

使用服务器字体时，需要使用@font-face定义服务器字体即可。

2.服务器字体的使用方式

3.搜索字体网站：qiuziti

4.优先使用客户端字体 ：

第二章 背景，边框，边距相关样式属性

一.背景

background 复合定义属性  image 图片  repeat  背景图片是否平铺  attachment 图片是随对象滚动还是固定（scroll 随内容滚动而滚动 ，fixed 背景图片固定）position 背景图片位置固定（加横纵两个坐标）clip (背景覆盖的范围）  

  背景渐变色

linear-gradient(方向，颜色列表）

二.边框

1.边框样式：dotted 点边框  dashed 虚线边框 solid 实线边框 double 双线边框

2.圆角边框：border-radius 该属性用于圆角边框的圆角半径（指定2个长度，则第一个长度左上角右下角的半径，第二个长度作为右上角左下角的半径）（大于等于三个时则依次左上，右上，右下，左下） border-top-left-radius: 左上角圆角半径

3.透明度   opacity    从0到1

第三章：表格，列表，鼠标，响应式布局相关属性

 1.表格相关属性

border-collapse:  该属性控制两个单元格的边框是合并在一起的，还是按标准样式分开（seperate(边框分开，使用单元格的分割线为双线） collapse(边框合并，使得单元格的分割线为单线）

border-spacing  设置两个单元格边框的间距

caption-side 设置表格标题位于表格哪边

empty-cells  该属性控制单元格没有内容时是否显示单元格

table-layout  设置表格宽度布局的方法 （auto 和 fixed固定布局）

2.鼠标相关属性

3.响应式布局方法media query

1>语法  @media not|only 设备类型 [ and ]*

2>设备类型表

3>设备特性（常用宽度）

4.使用范例

<!--html-->
<div id="container">
    <div id="left">
        <h2>sdfkjksd</h2>
        1的开发搭建gdsfgs豆腐干豆腐上公司法定豆腐干豆腐上感受到是大法官
    </div>
    <div id="main">
        <h2>sdfkjksd</h2>
        2的开发搭搭建gdsfgs豆腐干豆腐上公司法定豆腐干豆腐上感受到
    </div>
    <div id="right">
        <h2>sdfkjksd</h2>
        3的开发搭建gdsfgs豆腐干豆腐上公司法定豆腐干豆腐上感受到电饭锅
    </div>      
</div>

<!--css-->
* {
    padding: 0;
    margin: 0;
}

#container {
    text-align: center;
    margin: auto;
    width: 750px;
}

#container>div {
    border: 1px solid #aaf;
    text-align: left;
    box-sizing: border-box;
    border-radius: 12px 12px 0px 0px;
    padding: 5px;
}

div#left {
    width: 300px;
    height: 260px;
    float: left;
}

div#main {
    width: 450px;
    height: 260px;
    float: left;
    clear: right;
}

div#right {
    width: 750px;
    float: left;
}

@media screen and (min-width:1000px) {
    #container {
        text-align: center;
        margin: auto;
        width: 960px;
    }
    #container>div {
        border: 1px solid #aaf;
        box-sizing: border-box;
        border-radius: 12px 12px 0px 0px;
        padding: 5px;
    }
    div#left {
        width: 240px;
        height: 260px;
        float: left;
    }
    div#main {
        width: 460px;
        height: 260px;
        float: left;
        clear: none;
    }
    div#right {
        width: 260px;
        float: left;
        height: 260px;
    }
}

@media screen and (max-width:480px) {
    #container {
        text-align: center;
        margin: auto;
        width: 450px;
    }
    #container>div {
        border: 1px solid #aaf;
        box-sizing: border-box;
        border-radius: 12px 12px 0px 0px;
        padding: 5px;
    }
    div#left {
        width: 450px;
        height: 150px;
        float: left;
    }
    div#main {
        width: 460px;
        height: 260px;
        float: left;
        clear: both;
    }
    div#right {
        width: 450px;
        float: left;
        height: 170px;
    }
}

5>.在使用时需设置viewport

将浏览器宽度设置为与手机屏幕宽度相同

<meta name="viewport" content="width=device-width,initial-scale=1.0">

第四章.变形与动画相关属性

一.变形相关属性

transform:用于设置变形。支持一个或多个变形函数

transfrom(tx,ty)  朝x轴运动距离tx,朝y轴运动距离ty(若ty没写则默认为零）

translateX(tx):沿着X轴运动tx距离

scale（sx,sy):   沿着X轴缩放比例为sx, 沿着Y轴缩放比例为sy(若sy没写则默认sx=sy)

scaleX(sx):

rotate(angle):  绕Z轴顺时针旋转angle角度

rotateX(angle):

skewX(sx) 沿着X轴倾斜角度

二.同时使用多种变形时要注意用空格隔开

三.3D效果及相关属性

使用3D效果时需调用函数perspective ： (这个值越小3D效果越明显）

四.3D嵌套效果

必须设置transfrom-style属性

flat 不保留子元素的3D位置

preserve -3d 保留子元素的3D位置

五.3D背面是否可见

需设置backface-visibility：

visible  背面是可见的

hidden 背面是隐藏的

六.动画及其相关属性

1.transition动画相关属性 其属性值包括四个部分（transition-property 平滑渐变处理比如颜色，宽和高）（transition-duration 平滑渐变的持续时间）（transition-timing-function指定渐变的速度）

2.transition 同时变化多个属性

transition: transform 3.5s ease, background 3.5s ease, width 3.5s ease;

3.animation 动画相关属性

3.无限次循环动画

animation-iteration-count:infinite