前端进阶之——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三大特性
- 点赞加关注,持续更新实用技巧、热门资源、软件教程等
- 有任何 软件 影视 教程资源 考证资料等需求留言即可
前端进阶之——CSS背景、字体和文本样式相关推荐
- 前端笔记之CSS基础 - 字体和文本样式
目录 1.字体样式 1.1.字体大小 1.2.字体粗细 1.3.文字样式(是否倾斜) 1.4.字体 1.5.层叠性 1.6.字体font相关属性的连写 2.文本样式 2.1.文本缩进 2.2.文本水平 ...
- 05使用CSS设置字体和文本样式
使用CSS设置字体和文本样式: 1.定义字体类型font-family 用法: font-family:name; font-family:ncursive|fantasy|monospace|ser ...
- 【前端学习笔记】(三)(CSS基础、选择器、字体和文本样式)
目录 一.基础认知 1.1 CSS介绍 1.2 CSS语法规则 1.3 CSS常见属性 1.4 CSS引入方式 1.5 CSS常见三种引入方式的区别 二.基础选择器 1.标签选择器 2.类选择器 3. ...
- HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
- CSS基础:基础选择器、字体和文本样式
CSS基础 Date: August 31, 2022 Summary: 基础选择器.字体和文本样式 基础认知 学习路径: CSS初识 CSS引入方式 CSS初识 CSS介绍 CSS:层叠样式表(Ca ...
- 前端HTML字体和文本样式
前端HTML字体和文本样式 文章目录 前端HTML字体和文本样式 1.字体样式 1.1字体大小 1.2 字体粗细 1.3 字体样式(是否倾斜) 1.4字体类型 1.5 样式层叠问题 1.6 字体复合属 ...
- css笔记一-CSS简介、基础选择器、字体和文本样式
一 一.CSS简介 1.1.什么是CSS? CSS(Cascading style sheets):层叠样式表 CSS作用:给页面中的HTML标签设置样式 1.2.CSS语法规则 写在哪里? css写 ...
- 4.CSS -- 字体及文本样式
字体及文本样式 1.文本属性 1.1 颜色属性 1.1.1 取值: 1.1.1.1 英文单词 1.1.1.2 rgb 1.1.1.3 rgba 1.1.1.4 十六进制 1.2 `font-style ...
- CSS基础选择器、字体和文本样式
一.CSS简介 美化网页.布局页面 CSS(层叠样式表Cascading Style Sheets)(CSS样式表或级联样式表) 主要用于设置HTML中的文本内容(字体.大小.对齐方式等).图片的外形 ...
- CSS字体、文本样式
字体样式 front-family 字体类型 front-size 字体大小 front-weight 字体粗细 front-style 字体风格 文本样式 颜色 color rgb(颜色) R ...
最新文章
- 使用指针给矩阵除主对角线外的元素赋值为0
- TCP系列48—拥塞控制—11、FRTO拥塞撤销
- [react] React为什么要搞一个Hooks?
- 安卓项目之微信公众好---初体验
- transformer学习
- 跟人合作人工智能,方案没有,钱又不出,这怎么合作?
- 计算机硬件系统三个子系统,硬件:计算机的体系结构3.ppt
- 免费遥感图像数据共享网汇总
- 计算机信息资源管理岗位,信息资源管理专业的可以报考公务员的哪些职位?
- 第一篇:阿里数据中台之数据中台顶层设计
- Linux du命令(du -h ,du -s)
- Eclipse Error - Error notifying a preference...
- (3)数据链数层——计算机网络复习笔记
- 《宣州谢眺楼饯别校书叔云》 李白诗两首
- Android OkHttp 源码解析 - 拦截器
- 求求你,商用项目不要再使用jsdelivr的CDN服务了
- 2020算法面经问题汇总
- 如何提高本地文件上传至百度云的速度_【软件推荐】满速下载软件,说出来你可能不信最高速度达到150m/s...
- swing入门教程(五) Swing概念
- 电脑启动不起来,英文提示Reboot and select proper boot device or Insert Boot Media in selected Boot