HTMLCSS相关（2）

【CSS常用文本属性】
1，字体、字号类：
① font-weight:字体粗细。 bold-加粗 noemal-正常 lighter-细体
也可以使用100-900数值，400表示normal，700表示bold。
② font-style： 字体样式。italic表示倾斜，normal-正常
③ font-size： 字号.可以写px单位，也可以写%
200%表示浏览器默认大小（16px）的两倍=32px。
④ font-family:字体系列（字体族），
>>>可以直接写字体名，也可以写字体系列名，
>>>常用字体系列有 ：serif-衬线体 sans-serif 非衬线体；
>>>font-family可以接受多个值，用逗号分隔。表示优先使用第一个，如果没有这个字体一次向后使用，
通常，最后一个放字体系列名。
font-family: "微软雅黑",sans-serif;
⑤ font缩写形式：
>>>顺序必须是 style weight font-size/line-height font-family
>>>不同属性之间用空格分隔
>>>size/line-height 必须一组，斜线分隔。
>>>font-family多个字体之间，用逗号分隔
eg:font:bold italic 32px/50px "微软雅黑";
2,字体颜色
① color:字体颜色。可以是单词、十六进制，RGB等。
② opcity: 透明度。可选值0-1。
[opcity和rgba的区别]
>>>rgba本身可以设置颜色，而opcity必须配合其他颜色属性来用；
>>>rgba仅仅是让当前元素设置的颜色透明；
而opcity，会让当前元素里面的而所有文字，背景，子元素都透明。
3，行距、对齐类
① line-height:行高。可以写px单位、可以直接写数字（表示默认行距的几倍）、也可以写百分比（默认行距的百分比）
>>>行高重要作用：让单行文字在div中垂直居中，设置行高等于div的高度,即可设置让单行文字垂直居中。
② text-align: 设置区域内的行级元素水平对齐方式。left center right
③ letter-spacing:：字符间距。字与字之间的距离。
④ text-decoration:文本修饰
underline-下划线 overline-上划线 、line-through-删除线、none.
⑤ overflow:设置超出区域文字显示方式。
使用overflow样式可以设置文字超出区域的显示方式
>>> overflow:hidden;超出区域的文字隐藏不显示
>>> overflow:scroll;无论文字多少都会显示水平垂直滚动条
>>> overflow:auto;自动，文字多显示滚动条，文字少不显示滚动条。
>>>overflow-y; overflow-x;单独修改两个方向的滚动条
overflow-y:auto; overflow-x: hidden;
⑥ text-overflow:设置行末多余文字的显示方式，
>>> clip：多余文字裁剪掉 ellipsis-多余文字省略号显示
>>>显示省略号，需要配合white-space: nowrap;使用
>>>【设置行末显示省略号】
overflow: hidden;（超出区域文字隐藏）
white-space: nowrap;（不断行）
text-overflow: ellipsis;（显示省略号）
⑦ white-space: nowrap;设置中文行末，不断行显示。
⑧ text-indent: 首行缩进
⑨ -webkit-text-stroke:文字描边
-webkit-：表示只有webkit内核的浏览器生效，常见的有chrome、safari（苹果浏览器）
⑩ text-shadow:文字阴影有四个属性值，空格分隔。
>>>水平阴影距离 正数表示阴影右移，负数左移
>>>垂直阴影距离 正数表示阴影下移，负数上移
>>>阴影模糊距离 0表示阴影一点不模糊
>>>阴影的颜色

【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单位时:* 水平方向：正数右移，负数左移
 垂直方向：正数下移，负数上移
 （左负右正，上负下正）
 ③ 当写百分数时，一般只能是正数。表示的是，去掉图片的宽高，剩余空白区域的分布比例。例如：background-position:30% 表示的是
 水平方向去掉图片宽度，剩余区域3:7分。

负边距

【1、实现块级元素在父容器中水平垂直居中】
① 设置子元素为定位元素
left: 50%; margin-left: -width/2px;
top: 50%; margin-top: -height/2px;

【2、使用负边距增大元素的宽度】
① 子容器的宽度不指定，指指定高度，或者由内容撑开高度
② margin:0px -50px; 可以使左右两边均超出父容器50px

HTML-CSS相关（2）