900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 前端进阶之——CSS背景 字体和文本样式

前端进阶之——CSS背景 字体和文本样式

时间:2022-12-15 03:37:05

相关推荐

前端进阶之——CSS背景 字体和文本样式

目录

目录

一、CSS背景

二、字体和文本样式

三、每日面试题

一、CSS背景

background-color

background-image:url(地址),便于控制位置

background-repeat:背景平铺

<style>div {/* 可自定义颜色 */background-color: transparent;/* 设置背景图片 */background-image: url(图片地址);/* 背景平铺 no-repeat:不平铺,repeat:平铺,repeat-x:横向平铺,repeat-y:纵向平铺*/background-repeat: no-repeat;}</style>

background-position:背景图片位置

可以改变图片在背景中的位置

有x和y两个坐标,可以使用方位名词或精确单位

参数说明:

length:百分数,由浮点数和单位标志符组成的长度值position:top/center/bottom/left/center/right 方位名词参数是方位名词:如果两个值都是方位名词,则前后顺序无关指定了一个,另一个默认居中参数如果是精确坐标,则按x,y顺序写如果精确单位和方位名词混用,第一个是x坐标,第二个是y坐标

background-attachment:背景图像固定,设置背景图像是否固定或随页面滚动,制作视差滚动效果

scroll:默认值,滚动

fixed:背景图像固定

背景复合写法:写在background中,没有特定顺序,

一般为:背景颜色、图片地址、平铺、滚动、图片位置 用空格隔开

背景半透明:background:rgba(0,0,0,0.3),最后一个参数是alpha透明度,取值范围在0-1

二、字体和文本样式

1.字体属性:

<style>div {/* 可写多个字体,字体间用逗号隔开;多单词组成的字体用引号,尽量用系统字体 */font-family: '微软雅黑';/* 单位:px, 尽量给明确大小,谷歌默认16px,标题标签较特殊,需单独指定大小,可以给body指定整个页面字体大小*/font-size: 16px;/* 若字体大小为具体值,值后面不加单位 */font-weight:400;}</style>

字体复合属性:将以上属性综合来写,节约代码

语法:

标签名 {

font-style font-weight font-size font-family

} 注意顺序不能乱,size和family必须有

2.文本属性:外观

<style>div {/* 十六进制(最常用)、rgb、预制色都可以 */color: yellow;/* text-align:文本水平对齐方式,center:居中对齐,left:左对齐,right:右对齐 */text-align: center;/* text-decoration:装饰文本 none:默认(最常用)underline:下划线(常用)overline:上划线line-through:删除线*/text-decoration: none;/* text-indent:文本缩进 指定文本第一行的缩进,通常将段落的首行缩进em:相对当前元素1个文字大小缩进*/text-indent: 2em;/* line-height:行间距,行间距:上间距+文本高度+下间距 */line-height: 20px;}/* 取消a默认的下划线: */a {text-decoration: none;}</style>

三、每日面试题

一、如何实现元素水平居中

行内元素:text-align:center

块元素: margin: 0 auto

position: left: 50%; transform: translate(-50%)

二、如何实现元素垂直居中

height = line-height

verticle-align: middle

position: top: 50%;

transform: translate(0,-50%)

人生无根蒂,飘如陌上尘。分散逐风转,此已非常身。---陶渊明

本期到这里就结束了,感谢阅读!有问题留言,及时回复

下期:元素显示模式、CSS三大特性点赞加关注,持续更新实用技巧、热门资源、软件教程等有任何 软件 影视 教程资源 考证资料等需求留言即可

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。