0
点赞
收藏
分享

微信扫一扫

CSS背景,文本与字体

炽凤亮尧 2022-04-03 阅读 114
css前端

背景

背景颜色

backgrounds-color:指定背景颜色。

h1 {background-color:颜色;}

背景图像

background-image:指定背景图像

p {
  background-image: url("图像地址");
}

背景图像的重复

默认情况下,背景图像会进行平铺重复显示以覆盖整个元素实体。
但是有时候平铺重复显示并不是十分的适合当前页面,例如
在这里插入图片描述
当遇到这种情况时,可以使用repeat-x使图像进行水平平铺。
(background-repeat: repeat-x;)
若要进行垂直平铺则使用repeat-y,不平铺使用no-repeat。

背景图像定位

使用background-position可以对背景图像进行定位。
例如;要将图像放在右上角就使用background-position: right top;
还可以使用像素坐标,或百分号来表示。

背景固定

指添加的背景图像应该是滚动的还是固定的。他用background-attachment来固定。
他有三个属性
scroll:默认值。背景图像会随着页面其余部分的滚动而移动。
fixed:当页面的其余部分滚动时,背景图像不会移动。
inherit:规定应该从父元素继承 background-attachment 属性的设置。

背景属性连写

这么多背景属性可以连写在一个background中,如:

 background: #ffffff url("tree.png") no-repeat right top;

顺序是:
color——image——repeat——attachment——position

文本

文本颜色

用来设置文件颜色,直接使用color设置。

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

文本对齐方式

水平对齐

使用text-align;值为center,right,left。当值是justify时每一行的宽度相等。

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

垂直对齐

使用vartical-align。值是top,middle,bottom

img.top {
  vertical-align: top;
}
img.middle {
  vertical-align: middle;
}
img.bottom {
  vertical-align: bottom;
}

文本反排

文本排版方向使用uncode-bidi属性和direction属性

uncode-bidi

bidi-override:严格按照direction的值重排序
normal:表示默认值(与原来方向相同)
embed:作用于inline元素,对象打开附加的嵌入层,在对象内部进行隐式重排序。

direction

他也有三个值:
1.inherit:文本流的值,使用父元素设置
2.ltr:默认值从左到右
3.trl:从右到左。

文本转换

使用text-transform将文本中的大小写字母进行转换。
他的值有:
1.none:表示使用原始值
2.capitalize:表示每个单词第一个字母大写
3.uppercase:表示使每个单词的字母都大写
4.lowercase:表示每个单词的所有字母小写

文本间距

单词间隔

使用word-spacing,控制单词之间的间隔距离

语法
word-spacing:取值;

字符间隔

使用letter-spacing来控制字符间隔

语法
letter-spacing:取值;

字符缩进

使用text-indent来设置段落第一行的文本缩进

语法:
text-indent:取值;

行高

使用line-height设定行间距

语法:
line-height:取值;

空白处理

white-space:用来处理页面内的空白。包括三个值:
1.normal:默认值,即多个空格合并
2.nowrap:强制在同一行内显示所有文本,知道文本结束或遇到
对象
3.pre:源代码中的空格和做进被保留,至少需要IE6才能正确显示

语法:
white-space:取值;

文本修饰

text-decoration:对文本进行修饰,可设置下划线,删除线等
值有:
1.none:默认值不修饰
2.underline:添加下划线
3.overline:添加上划线
4.line-through:添加删除线
5.bink:添加文字闪烁效果

语法:
text-decoration:取值;

文本阴影

text-shadw:用来设置文本阴影

语法:
/*text-shadw:水平阴影值 垂直阴影值 模糊度 颜色;*/
text-show:20px 20px 30px red;
举报

相关推荐

0 条评论