|
目录
1. 文字大小2. 加粗、倾斜、颜色、居中、下划线、行高3. 设置文字垂直居中4. 文字缩进5. backgroup背景设置5.1 背景线性渐变
1. 文字大小
每个浏览器的默认文字大小都一样，我们给HTML的body标签设置统一的文字大小
test title
body {
font-size: 50px;
}
4级标题
盒子一
显示效果如下： 
2. 加粗、倾斜、颜色、居中、下划线、行高
test title
.font-set {
font-weight: 700;
font-style: italic;
color: #ff0000;
text-align: center;
text-decoration: underline;
line-height: 50px;
}
.font-style-normal {
font-style:normal
}
盒子一
斜着的文字, 搜索引擎我告诉你, 我很重要
斜着的文字, 搜索引擎我告诉你, 我不重要
font-weight的700等同于bold, 400等同于normalfont-style默认是normalcolor还可以是red、rgb(255, 0, 0)、rgb(100%, 0%, 0%)text-align还可以是left(默认)、righttext-decoration还可以是none、line-through、overlineline-height等于上间距 + 文字高度 + 下间距。值可以是50px，或者是5(表示相对于文字的倍数)
显示效果如下： 
3. 设置文字垂直居中
test title
div {
font-size: 50px;
line-height: 100px;
width: 500px;
height: 100px;
background: red;
}
盒子一
将line-height设置的和盒子一样的高度，则文字垂直居中line-height大于盒子高度，文字偏下；反之
4. 文字缩进
test title
.text-set {
text-indent: 2em;
}
盒子一
盒子二
缩进的单位还可以是px，缩进的值可以是负数
显示效果如下：
5. backgroup背景设置
test title
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(images/baidu.png);
background-repeat: repeat-x;
background-position: 50% center;
background-attachment: fixed;
}
盒子一
参数说明如下：
background-color默认的值是transparent, 表示没有背景颜色background-color位于background-image底下另一种指定backgroup-color的方式是通过: background: rgba(0, 0, 0, 0.3);, 可以通过最后一个参数指定透明度, 参数范围为0-1background-image默认值是nonebackground-repeat默认值是repeat, 表示x和y轴都重复。取值还有no-repeat、repeat-ybackground-position第一个参数表示x的位置, 第二个参数表示y的位置。可以有3种形式, 而且3种形式可以混用
px形式第一个参数值可以是left、center、right, 第二个参数值可以是top、center、bottom百分比：相对于父盒子来说 background-attachment默认值是scroll, 即背景图片会随着屏幕的滚动而滚动, 是正常的现象。当设置为fixed时, 此时background-position的x,y就相对于视口窗口, 而不是父盒子, 随着屏幕滚动, 背景图片固定在视口窗口, 但父盒子是滚动的, 背景图片只有在父盒子中才能显示
显示效果如下： 
5.1 背景线性渐变
语法: background: -webkit-linear-gradient(left, red, blue, black);。必须添加浏览器私有前缀
第一个参数表示起始方法，可以是方位名称或度数，如left，left top。默认是top后面可以添加多个颜色参数
示例：
test title
div {
width: 200px;
height: 200px;
background: -webkit-linear-gradient(left top, red, blue);
}
效果如下。从左上到右下，背景色从红色渐变成蓝色 
|