CSS进阶

一、文字样式

font-weight ：指定字体粗细 -blod normal

font-style ：指定字体倾斜 -normal italic(斜体) oblique(倾斜)

font-family ：指定字体

        字体可以是列表的形式，一般英语字体放到前面，后面的字体是前面的字体的后备字体

        字体名称中有空格，必须要用引号来包裹

word-wrap ： 允许长的内容可以自动换行（英文）

        break-word：在长单词或 URL 地址内部进行换行 （短单词不换行）

word-break ： 属性指定非 CJK 脚本的断行规则。（英文）

        break-all：允许在单词内换行 （无差别强制换行，不会留有空白）

        只能在半角空格或连字符处换行

  p{
            font-weight: bold;
            font-style: italic;
            font-family: '楷书','行书';
            text-shadow: 4px 2px 2px pink;
            word-wrap: break-word;
            word-break: break-all;
            word-spacing: 20px;
            letter-spacing: 20px;
            white-space: pre;
        }

二、line-height 和 vertical-align 

1、

font-size:同一行顶线和底线之间的距离

行距：上行的底线和下一行的顶线之间的距离，即控制两行文字垂直的距离

基线：并不是汉字文字的下端沿，而是英文字母“X”的下端沿

行高：是指文本行基线间的垂直距离

2、 font-size 与 line-height之间的距离        

        font-size等于line-height时，行距 = line-height - font-size = 0；

        当font-size 大于 line-height 时，则会出现行距为负值，则两行重叠

        当font-size 小于 line-height时，行距会变大。

3、vertical-align

 三、css背景

1. 元素的背景属性

background 简写属性，作用是将背景属性设置在一个声明中。

background-attachment 背景图像是否固定或者随着页面的其余部分滚动。scroll 默认

值。/fixed 当页面的其余部分滚动时，背景图像不会移动。

background-color 设置元素的背景颜色。

background-image 把图像设置为背景。

background-position 设置背景图像的起始位置。

left/right/center/bottom/top 这几个属性值可以两两组合使用，如果只规定了一个关键词，

那么 第二个值将时"center"

x% y% 第一个值是水平位置，第二个值是垂直位置。

左上角是 0% 0% 右上角是 100%100%

如果仅规定 了一个值，另一个值是 50

background-repeat 设置背景图像是否及如何重复。

repeat/repeat-x/repeat-y/no-repeat

2. css3新增的背景属性

background-size 规定背景图片的尺寸。

像素/百分比设置宽高。

cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域

contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

五、css元素的边框属性

border 简写属性，用于把针对四个边的属性设置在一个声明

border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度

常用单位为像素(px)、em。

thin 细的边框。/medium 默认/thick定义粗的边框。

border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

none 定义无边框。

dotted 定义点状边框。

dashed 定义虚线。

solid 定义实线。

groove定义点状边框。

ridge定义 3D 垄状边框。

inset 定义 3D inset 边框。

outset 定义 3D outset 边框

border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。

border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。

border-bottom-color 设置元素的下边框的颜色。

border-bottom-style 设置元素的下边框的样式。

border-bottom-width 设置元素的下边框的宽度。

border-left 简写属性，用于把左边框的所有属性设置到一个声明中。

border-left-color 设置元素的左边框的颜色。

border-left-style 设置元素的左边框的样式。

border-left-width 设置元素的左边框的宽度。

border-right 简写属性，用于把右边框的所有属性设置到一个声明中。

border-right-color 设置元素的右边框的颜色。

border-right-style 设置元素的右边框的样式。

border-right-width 设置元素的右边框的宽度。

border-top 简写属性，用于把上边框的所有属性设置到一个声明中。

border-top-color 设置元素的上边框的颜色。

border-top-style 设置元素的上边框的样式。

border-top-width 设置元素的上边框的宽度。

border-radius 设置所有四个 border-radius 属性的简写属性。

border-top-left-radius 左上角圆角边框。

border-top-right-radius 右上角圆角边框。

border-bottom-right-radius 右下角圆角边框。

border-bottom-left-radius 左下角圆角边框。

值 描述

border-image-source 用在边框的图片的路径

border-image-slice 图片边框向内偏移。

border-image-width 图片边框的宽度

border-image-outset 边框图像区域超出边框的量。

border- image-repeat(stretched) 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸

* 同时设定四个角的圆角。

** 分别设定左上 右下、左下 右上圆角。

*** 分别设定左上 、左下 右上、右下圆角。

**** 分别设定左上 、右上、右下、左下圆角。

border-image 设置所有 border-image 属性的简写属性