博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS--字体|垂直居中|background
阅读量:6886 次
发布时间:2019-06-27

本文共 1320 字,大约阅读时间需要 4 分钟。

一,字体的设置

二,垂直居中

2.1,单行文本垂直居中

2.2,多行文本垂直居中

2.3,绝对定位元素垂直居中

三、颜色的表示法

四、background

---------------------------------------------------------

一,字体的设置

font-size:20px;     (px像素;rem 和 em用在移动端的网页)

font-weight: bold: 粗体  lighter:细体  100-900设置具体粗细

text-align:  center;  居中

text-decoration: underline 有下划线; none 无下划线;

text-decoration: underline blue; 蓝色下划线

cursor: pointer;  鼠标放上去变成手掌

text-indent:2em;  缩进(2个em是两个字的距离,比如段落的前面缩进2em)

font-family:

英文的(例如“Microsoft YaHei”)能识别文本里的英文和中文, 中文的(例如"微软雅黑")只能识别中文字体

二,垂直居中

2.1,单行文本垂直居中

line-height: xx px ;   如果行高等于盒子高度就垂直居中了,只适用于单行文本

2.2,多行文本垂直居中

假设一共有4行,高度200,行高30

 

width: 300px; height: 200px; border:1px solid red; line-height: 30px;

行高占 padding-top=(200-30*4)/2=40  再修改高度height=200-40=160

width: 300px; height: 160px; border:1px solid red; line-height: 30px; padding-top: 40px;

2.3,绝对定位元素垂直居中

方式一、

div{    width:300px;    height:300px;    top:50%;    left:50%;    margin-left:-150px;    margin-top:-150px;            }

方式二、

div{    width:300px;    height:300px;    top:50%;    left:50%;    transform: translate(-50%, -50%);     }

 

三、颜色的表示法

1、使用英文名:red 、green、blue 等

2、使用rgb(): 例如红色为rgb(255, 0, 0)    还有rgba(0, 0, 0, 0.2) 表示黑色透明度为0.2

3、十六进制表示法:例如红色为#ff0000 是根据rgb表示法换算成16进制出来的

 

四、background

给外层父标签添加背景图。子标签会显示在图片上

 

 

posted on
2018-12-16 23:31 阅读(
...) 评论(
...)

转载于:https://www.cnblogs.com/staff/p/10129161.html

你可能感兴趣的文章
error Infos
查看>>
PL/sql配置相关
查看>>
Linux 查询服务数据
查看>>
【Luogu 2014】选课
查看>>
CSS 的介绍
查看>>
Latex自定义文档纸张大小
查看>>
2018QBXT刷题游记(23)
查看>>
函数递归
查看>>
android框架Java API接口总注释/**@hide*/和internal API
查看>>
20175318 2018-2019-2 《Java程序设计》第七周学习总结
查看>>
比特币:一种点对点的电子现金系统
查看>>
Android - 按钮组件详解
查看>>
MEF简单学习笔记
查看>>
Srping - bean的依赖注入(Dependency injection)
查看>>
工作中 Oracle 常用数据字典集锦
查看>>
SFB 项目经验-12-为某上市企业的Skype for Business购买Godday证书
查看>>
[C#基础知识]专题十三:全面解析对象集合初始化器、匿名类型和隐式类型
查看>>
大数据虚拟化零起点-2基础运维第一步-环境规划和准备
查看>>
Skype for Business Server 2015-04-前端服务器-3-安装-管理工具
查看>>
docker入门指南(转载)
查看>>