CSS文字相关设置(大小、加粗、倾斜、颜色、居中、下划线、行高)和background背景设置 | 您所在的位置:网站首页 › 目录文字加粗怎么弄 › CSS文字相关设置(大小、加粗、倾斜、颜色、居中、下划线、行高)和background背景设置 |
目录
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); }效果如下。从左上到右下,背景色从红色渐变成蓝色 |
CopyRight 2018-2019 实验室设备网 版权所有 |