CSS常用文本属性

1、字体、字号类：

①font-weight:字体粗细 bold-加粗、normal-正常、lighter-细体,也可以使用100-900数值，400表示normal，700表示b

②font-style:字体样式。italic-倾斜、normal-正常

③font-size:字号。可以写px单位，也可以写%.200%表示浏览器默认大小（16px）的两倍=32px

④font-family:字体系列（字体族）
 >>>可以直接写字体名，也可以写字体系列名。
 >>>常用字体系列：serif-衬线体 sans-serif-非衬纤体；
 >>>font-family可以接受多个值，用逗号分隔。表示优先使用第一个，如果 没有这个字体，依次向后使用。通常，最后一个值放字体系列名；
  eg：font-family:"黑体","微软雅黑",sans-serif;

⑤font缩写形式：
>>>顺序必须是：
 font-weight、font-style、font-size/line-height、font-family
 >>>不同属性之间，用空格分隔；
>>>font-size/line-height必须一组，用/分隔；
 >>>font-family多个字体之间，用逗号分隔
 >>>eg:font: bold italic 32px/50px  "微软雅黑",serif;

 2、字体颜色
 ①color:字体颜色 可以使单词、十六进制、RGB等

②opacity:透明度，可选值0~1
 [opacity和RGBA的区别]
 >>>RGBA本身可以设置颜色，而opacity必须配合其他颜色属性来用；
 >>>rgba仅仅是让当前元素设置的颜色透明；
 而opacity，会让当前元素里面的所有文字、背景、子元素都透明；

3、行距、对齐其他类
①line-height：行高。可以写px单位、可以直接写数字（表示默认行距的几倍）
 、可以写%（表示默认行距的百分比）
 >>>行高重要作用：让单行文字在div中垂直居中
 设置行高等于div的高度，即可让单行文字垂直居中。

②text-align：设置区域内的行级元素水平对齐方式；left/center/right

③letter-spacing：字符间距，字与字之间的距离

④text-decoration：文本修饰；
 underline-下划线、overline-上划线、line-through-删除线、none

⑤overflow：设置超出区域文字的显示方式。
 >>>overflow:hidden；超出区域的文字隐藏不显示；
 >>>overflow:scroll;无论文字多少，都会显示水平垂直滚动条
 >>>overflow:auto;自动，默认效果。文字多显示滚动条，文字少，不显示滚动条。
 >>>可以使用overflow-x和overflow-y单独修改两个方向的滚动条
 overflow-y:scroll;overflow-x:hidden;

⑥text-overflow：设置行末多余文字的显示方式；
 >>>clip-多余文字裁剪掉 ellipsis-多余文字省略号显示
 >>>显示省略号，需要配合white-space：nowrap；使用
 >>>【重点】 设置行末显示省略号（三行代码，缺一不可）
 over-flow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;

⑦white-space：nowrap；设置中文行末，不断行显示

⑧text-indent:首行缩进。

⑨-webkit-text-stroke:0.5px blue;文字描边。
 -webkit-表示只有webkit内核的浏览器生效、常见的有chrome、safa

⑩text-shadow:文字阴影，有四个属性值，空格分隔；
 >>>水平阴影距离，正数表示阴影右移，负数左移；
 >>>垂直阴影距离，正数表示阴影下移，负数上移；
 >>>阴影模糊距离，0表示阴影一点不模糊；
 >>>阴影的颜色；
 >>>eg:text-shadow: 20px -10px 2px blue;

CSS常用背景属性

1、 background-color： 背景色

2、 background-image: 背景图。使用url("")选择背景图片。背景图和背景色同时存在时，背景图覆盖背景色。

3、 background-repeat: 背景图的重复方式。

no-repeat-不平铺、repeat-平铺、repeat-x-x轴平铺、 repeat-y-y轴平铺

4、 background-size： 背景图的大小
 [指定宽度高度]
 >>> 宽度高度的指定，可以写px，也可以写%(父容器宽高的百分比)
 >>> 当写两个属性时，分别表示宽度、高度；
 当写一个属性时，表示宽度，高度将会等比缩放；
 [其他属性值]
 >>> contain: 图片等比缩放，直到宽或高中较大的一边缩放到100%为止。(可能导致较短的一边<100%,图片无法盖住全部区域)
 >>> cover： 图片等比缩放，直到宽或高中较小的一边缩放到100%为止。(可能导致较大的一边>100%,图片超出区域显示不全)

5、 background-position： 背景图偏移量
 >>> 指定位置： left/center/right top/center/bottom
 当，只写一个值时 ，另一个默认居中。
 >>> 指定坐标： 两个属性分别表示 ：水平位移 垂直位移
 ① 坐标的值，可以是px单位，也可以是百分数
 ② 当写px单位时：
 水平方向：正数右移 负数左移 ； 垂直方向： 正数下移 负数上移；
 (左负右正 上负下正)
 ③ 当写%百分数时：
 一般只能是正数。表示的是，去掉图片的宽高，剩余空白区域的分布比例。 eg：background-position:30%; 水平方向去掉图片宽度，剩余区域3:7分。

CSS新增属性

1、display属性
可以设置元素以何种状态显示，可选值：
none:隐藏元素；
block：显示为块级元素；
inline：显示为行级元素；
inline-block：显示为内联块级元素。本身将是一个 行级元素，但是，拥有块级元素的所有属性。比如宽度、
高度、margin、padding等。。。

2、常见的inline-block级别的标签
<img/> <input/> <textarea></textarea>
<td></td>

3、隐藏一个元素的方式

① 宽度或高度设为0px；配合overflow：hidden；属性
 ② display：none； 显示为display：block；
 ③ opacity：0；设为全透明。但是元素的空间会占据；
 ④ visibility：hidden；隐藏元素，但是元素所在空间依然
 会占据。与opacity：0；效果很像；
 显示visibility隐藏的元素，visibility：visible；

4、CSS3新增的属性前缀
①  -webkit-：Chrome/Safari浏览器；
②  -moz- ：火狐浏览器；
③  -ms- ：IE浏览器；
④  -o- ： Opera欧朋浏览器

5、CSS3 背景属性
① background-clip:设置背景图或背景色的裁切显示区域。
 >>>mborder-box从边框外缘开始显示；
 >>>padding-box从边框内缘开始显示；
 >>>content-box从文字内容区域开始显示；
 >>>如果不在却与的背景图或者背景色，会被裁切掉不显示；

② background-origin：设置背景图从哪开始定位。
 >>>border-box：背景图左上角从边框外缘开始；
 >>>padding-box：背景图左上角从边框内缘开始；
 >>>content-box：背景图左上角从文字内容区开始；

③ background-origin不会改变背景图显示区域的大小，只是决定背景图的左上角从哪里开始定位；
 background-clip：只负责裁切出显示区域，但是并不关心背景图定位在哪。

④ background-attachment: 背景图的附着方式；
 >>>scroll：背景图跟随区域滚动。默认效果；
 >>>fixed：背景图充满整个区域，并且背景图是固定的，不随滚动条滚动；

⑤ background 缩写形式：
 background：background-color、background-image、
 background-repeat、background-atachment、background-position；

⑥ transition:过渡属性，接受四个属性值
 （1）设置哪个CSS属性， 参与过渡；可以直接指定all/none
 （2）过渡多少时间完成。通常.3s .5s
 （3）过渡的样式效果。通常选ease；
 （4）过渡延时几秒后再开始。可以省略不写；
 transition属性可以同时定义多个过渡效果，用逗号隔开。
 eg：transition：width .5s ease,height 1.5s ease;

7、transform 定义变换属性
① 常用的变换函数：
 >>>transform(10px,10px)平移，第二个不写默认为0
 >>>scale（1.1）缩放，第二个不写，默认等于第一个
 >>>rotate（90deg）旋转，默认绕Z轴转 可以使用rotateX（）等
 >>>skew（20deg，30deg）扭曲，水平、垂直方向扭曲多少度；

② transform可以同时实现多种变换，用空格分隔
 eg：transform:skew(20deg) scale(1.3) translate(100px);

③ transform-origin:定义变换起点，常用于旋转变换。
 可选值：left/center/right bottom/center/top
 也可以直接指定X、Y轴坐标点，第一个数为X轴；
 例如：transform:rotate(90deg);
 transform-origin:right bottom;
 表示：绕右下角旋转90度。

8、CSS3动画的使用
① 声明一个关键帧（动画）：
@keyframes name{
     from{
     to{}
    }

② 在CSS选择器中，使用animation调用声明好的动画；
Animation-name:动画名称
Animation-duration：动画持续时间
Animation-timing-function：动画速度曲线
Animation-delay：动画开始的时间，延迟
Animation-iteration-count：动画播放次数，默认为1.无限次数表示infinite
Animation-direction：动画在下一个是否逆向播放，默认为normal表示不进行逆向播放，alternate
表示下一次将逆向播放（[email protected]到）
Animation-fill-mode：规定对象动画时间之外的状态。表示动画结束后，停留在何种状态。要使用这个属性，
动画的执行次数必须是有限次。（forwards：表示动画停留在结束状态；backwarks：表示动画停留在初始状态
，默认效果）