font-size:设置文本的大小h1{font-size:40px;}
font-weight 设置文本的粗细
font-style设置文本样式 normal:标准样式默认值 italic:斜体样式
font-family 直接包含样式,属性之间逗号分开
颜色取值:(1)关键字:red blue
- 十六进制;包含0-9 a-f不区分大小写
例如#000000(黑色) #ffffff(白色)
- rgb(255,255,255)白色 rgb(255,0,0)红色
- rgba()
a表示透明度 取值0-1
rgba(0,0,0,.5)
文本属性-继承性:
- 元素内容的水平对齐方式 text-align:left/right/center;
- 文本装饰:text-decoration;underline/none;
Underline:下划线 none;不显示
- 英文字母大小写转换
text-transform:;
capitalize 每个单词首字母大小写
uppercase 全部大写
lowercase 全部小写
首行缩进:text-indent:;
单位: px像素 绝对单位
em 相对单位 1em=16px
背景图片:background-image:url(“”);
当背景图片小于容器时,水平垂直平铺
当背景图片大于容器时,显示不完全
背景图片是否平铺:background-repeat:;
取值:repeat 默认值,平铺
no-repeat不平铺 repeat-x 水平方向平铺 repeat-y 垂直方向平铺
背景图片的大小:background-size:水平方向大小 垂直方向大小;
取值;px 当只取一个值,等比例缩放 % 当只取一个值,等比例缩放
cover 背景图片会覆盖整个背景区域,但是背景图片可能是显示不完全,图片等比例缩放
contain 背景图片现实完全,扩展至最大,但是背景区域可能覆盖不完全,图片等比例缩放
背景图片定位:background-position:水平方向的位置 垂直方向的位置;
默认在左上角 当只取一个值时,第二个值默认居中
取值;px % left right center top bottom
例子:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 1000px;
height: 500px;
background-color: red;
background-image: url(tt.png);
background-repeat: no-repeat;
background-size: cover;
background-position: 100px 100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
背景图片固定:background-attachment:scroll(默认值) fixed(固定);