CSS进阶

CSS进阶内容

1.文本与字体样式

		font-weight：字体加粗
            100~300       更细
            400，500，normal    正常
            600~900，bold，bolder（强调，同<strong>）   加粗
        font-style：字体倾斜
                normal  正常
                italic  斜体
                oblique 倾斜（强制倾斜）
        font-family：字体
                可写多个值，后者为备用（当字体库没有对应字体时）
        text-shadow：文本阴影
                第一个参数：横向偏移量
                第二个参数：纵向偏移量
                第三个参数：模糊程度
                第四个参数：阴影颜色
        word-spacing：段落间隔，用于中文字，英文单词
        letter-spacing：字间隔，用于中文字和英文字母
    	 white-space：空白间隔，处理元素内空白
                pre：保留空白
                nowrap：限制不换行，直到遇到<br>
                pre-wrap：保留空白符，正常进行换行
                pre-line：合并空白符，保留换行符
        word-wrap：允许长的内容自动换行（英文）
                break-word：在长单词或url地址内部进行换行
        word-break：允许非cjk脚本的断行规则（英文）
                break-all：允许在单词内换行（无差别强制换行，不会留有空白）

2.line-height和vertical-align

		line-height：行高
        vertical-align：
                baseline：默认，元素放在父元素基线上
                sub：垂直对齐文本的下标
                super：垂直对齐文本的上标
                top：元素顶端与行内最高元素顶端对齐
                text-top：元素顶端与父元素字体的顶端对齐
                middle：将元素放置在父元素中部
                bottom：元素底端与行内最低元素底端对齐
                text-bottom：元素底端与父元素字体的底端对齐

3.css背景

		background-repeat：平铺
                repeat：默认，平铺
                repeat-x：横向平铺
                repeat-y：纵向平铺
                no-repeat:不平铺
        background-position：背景起始位置
                （1）left/right/center/bottom/top 这几个属性值可以两两组合使用，如果只规定了一个关键词，那么第二个值将是"center"
                （2）x% y% 第一个值是水平位置，第二个值是垂直位置。
                （3）左上角是 0% 0% 右上角是 100%100%
                （4）如果仅规定了一个值，另一个值是50
        background-attachment：背景图像是否固定或者随着页面的其余部分滚动
                scroll 默认值
                fixed 当页面的其余部分滚动时，背景图像不会移动。
        background-size：背景图片大小
                cover：将图像扩展到足够大，以图片覆盖整个背景区域
                contain：横向或纵向其中一边值为100%时，停止覆盖

4.边框

        border-width：边框宽度
                thin    细的边框
                medium  默认
                thick   粗的边框
        border-style:边框样式
                none：无
                dotted：点状
                dashed：虚线
                solid：实线
                groove：槽线
                ridge：3D垄状
                inset/outset
        border-color：颜色
                与margin和padding相同可以多个值，顺序也相同
        border-radius：圆角
                一个值：全部
                两个值：左上，右下  左下，右上
                三个值：左上，左下 右上，右下
                四个值：左上，右下，右下，左下（顺时针）
        border-image：边框图片
                stretch：拉伸图片以填充边框
                repeat：平铺图片以填充边框
                round：平铺图像。当不能整数次平铺时，根据情况放大或缩小图像
                space：平铺图像。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）
        box-shadow：向方框添加一个或多个阴影
                第一个值：横向偏移量
                第二个值：纵向偏移量
                第三个值：阴影模糊程度
                第四个值：阴影外延值
                第五个值：阴影颜色
                第六个值：阴影朝向（inset/outset）