文本、列表及背景的相关属性

一、文本

字体大小px,em,pt（默认字体大小为16px，字体为微软雅黑，除非自己设置过）

• 1em=16px
• 12pt=16px

字体颜色的三种设置方法

• 自己在color后面写上颜色的英文名字，例如blue，red等等，代码：例如 color: red;
• 十六进制表示法：color: #63cc4e;
• rgb表示法：color: rgb(130, 148, 202);

字体的设置两种设置方法（字体加不加引号都可以）

font-family：

• 后面的字体样式列表中选择
• 自己写上字体样式

font-weight: lighter;/*字体变细*/ 

font-weight: bolder;/*字体加粗*/

font-weight:100-900; 100-500不加粗   600-900加粗

行高

height: 200px;

line-height: 200px;

line-height的数据=height的数据，可以实现单行文本垂直居中

文字水平方向对齐方式

text-align: center;/*文字水平方向居中对齐*/

text-align: justify;/*文字两端对齐，只适用于多行文字 */

设置文字倾斜的2种方法

• font-style: italic;/* 文字倾斜 */
• font-style: oblique; /*文字倾斜 */

首行缩进

text-indent: 2em;/*首行缩进2字符 */

text-indent可以取负值，text-indent属性只对第一行起作用。

text-decoration文本修饰

text-decoration: none; /* 去掉超链接的下划线    */
text-decoration: line-through;/*删除线，横线从文字中间穿过*/
text-decoration: overline;/*上划线，横线在文字上方*/
text-decoration: underline;/*下划线，横线从文字下方*/

对于文字设置的知识总结，见下图所示：

文字缩写的要求

 文字font缩写的例子

 

二、列表

 三、背景

 background-color: blueviolet;  /*背景颜色 */

 background-image: url("pic.jpg"); /*背景图片 */

背景位置的4种设置方法

background-position: top left; /*左上角---两个位置 */
background-position: left; /* 一个方位 */
background-position:50px;  /*一个像素值:垂直方向居中对齐，像素值只在水平方向起作用*/
background-position: 100px 50px;  /*两个像素值 ，第一个是距左侧的距离（x方向的距离），第二个是距上面的距离（y轴方向的距离） */

背景附着

background-attachment:scroll;/* 背景附着：fixed固定 ，scroll滚动 */

背景平铺

background-repeat: no-repeat;  /*repeat-x 背景图片橫铺，  no-repeat不平铺，repeat-y 背景图片纵向平铺，repeat平铺 */  

设置背景大小

background-size: 100% 100%;

/* 设置背景的大小，没有设置background-attachment:fixed;的时候是以设置的div为参照物，而当设置了background-attachment:fixed;的时候背景大小background-size是以屏幕为参照物 */

注意：设置的不同，参照物会不同，显示也就会有所不同

背景相关属性知识点总结