CSS背景属性与文本属性

背景属性

背景颜色

background-color:red;

背景图片

background-image:url("../../img/a8.png");

图片填充 no-repeat repeat-x repeat-y

background-repeat:no-repeat;

背景图片大小 cover：图片等比例缩放，直到最小部分填满容器，会出现图片显示不全的效果
contain：图片等比例缩放，直到最大部分填满容器，可能出现图片覆盖不完整

background-size:contain;

复合属性

background:red url("../img/q1.jpg") no-repeat 20px 20px;

当值指定x或y中的一个方向时，另一个方向默认是居中的
数值和名称

background-position:0px -50px;

背景图片开始的位置
border-box：从外边框开始
padding-box：从内边距开始
content-box：从内容处开始

background-origin:padding-box;

背景图片剪切位置
border-box：从外边框开始
padding-box：从内边距开始
content-box：从内容处开始

background-clip:padding-box;

文本属性

font-weight：blod;

/*字体加粗的属性font-weight，属性值
数字：100-900
名称：bold
bolder
light*/
/*背景颜色*/

background-color:#0dfaff;

/*高度*/

height:100px;

/*字体大小*/

font-size:30px;

/*字体粗细*/

font-weight:bold;

/*字体系列*/
衬线体serif
非衬线体sans-serif（常用）
等宽体
手写体和非手写体
符号体

font-family:宋体;

/*字体风格*/

font-style:italic;

/*字体颜色*/

color:red;

/*字体透明度*/

opacity:0.5;

/*行高*/
/*！！！！设置文本的行高等于它的容器高度，可以实现文本的垂直居中！！！！*/

line-height:100px;

/*文本对齐方式*/

text-align:center;

/*字符间距*/

letter-spacing:3px;

/*文本修饰*/

text-decoration:line-through;
text-decoration-color:yellow;
text-decoration-style:dotted;

/*文本溢出*/

overflow:hidden;

/*溢出文本以省略号的形式显示*/

text-overflow:ellipsis;
white-space:nowrap;

/*文本阴影*/
/*水平和阴影位置 垂直阴影位置 模糊距离 阴影颜色*/

text-shadow:2px2px8px black;

/*文本描边*/
/*描边宽度 描边颜色*/

-webkit-text-stroke:1px blue;

/*首行缩进*/

text-indent:2em;
font-size:30px;

<--上标-->

2<sup>3</sup>

<--下标-->

H<sub>2</sub>O