目录
1. 文字大小2. 加粗、倾斜、颜色、居中、下划线、行高3. 设置文字垂直居中4. 文字缩进5. backgroup背景设置5.1 背景线性渐变
1. 文字大小
每个浏览器的默认文字大小都一样,我们给HTML的body标签设置统一的文字大小
test title
body {
font-size: 50px;
}
4级标题
盒子一
显示效果如下: ![文字大小](https://img-blog.csdnimg.cn/e02aea26c11847a498d381684b2b9607.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAQnVsdXQwOTA3,size_20,color_FFFFFF,t_70,g_se,x_16)
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(表示相对于文字的倍数)
显示效果如下: ![加粗等设置](https://img-blog.csdnimg.cn/2b3ddb0dd81446988f852314c21f77e4.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAQnVsdXQwOTA3,size_20,color_FFFFFF,t_70,g_se,x_16)
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,缩进的值可以是负数
显示效果如下:
![文字缩进](https://img-blog.csdnimg.cn/13a4917c36704518b109b7ecbe076483.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAQnVsdXQwOTA3,size_20,color_FFFFFF,t_70,g_se,x_16)
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;
}
盒子一
参数说明如下:![请添加图片描述](https://img-blog.csdnimg.cn/2007e677e45e4c8bb1690b757fd86a4d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQnVsdXQwOTA3,size_20,color_FFFFFF,t_70,g_se,x_16)
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就相对于视口窗口, 而不是父盒子, 随着屏幕滚动, 背景图片固定在视口窗口, 但父盒子是滚动的, 背景图片只有在父盒子中才能显示
显示效果如下: ![背景设置效果](https://img-blog.csdnimg.cn/2e0660f842c3400abb3c9ca7e05319ea.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQnVsdXQwOTA3,size_20,color_FFFFFF,t_70,g_se,x_16)
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);
}
效果如下。从左上到右下,背景色从红色渐变成蓝色 ![背景线性渐变效果](https://img-blog.csdnimg.cn/93e41f20e38b44988ad1520b67ea509a.png)
|