CSS--字体|垂直居中|background
一,字体的设置
二,垂直居中
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
给外层父标签添加背景图。子标签会显示在图片上
CSS--字体|垂直居中|background的更多相关文章
- 顽石系列:CSS实现垂直居中的五种方法
顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...
- 五种方法让CSS实现垂直居中
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...
- CSS字体属性大全
文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...
- CSS实现垂直居中的5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...
- CSS水平垂直居中总结
行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...
- 转: css实现垂直居中的方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中 ...
- 纯CSS实现垂直居中的7种方法
今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法.为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益! 在CSS中实现水平居中 ...
- css 完美垂直居中解决方案兼容ie8以上等其他浏览器
css 完美垂直居中解决方案兼容ie8以上等其他浏览器 <pre><!DOCTYPE html><html><head> <title>DI ...
- DataGrid 字体垂直居中
如果用DataGridTextColumn作为DataGrid的列,字体垂直居中需要这样设置: <Style x:Key="Body_Content_DataGrid_Centerin ...
- Winform Textbox控件字体垂直居中
项目中遇到要求Textbox内的字体垂直居中的问题,在网上找一直没有理想的解决方案.后来发现可以通过设置控件的字体来达到预期的效果. 默认的Textbox的Font属性为 “宋体, 9pt”,效果如下 ...
随机推荐
- CentOS 7 安装 Jenkins
准备工作 首选需要安装JAVA环境 https://www.cnblogs.com/stulzq/p/9286878.html 如果你的系统没有自带git,那么也需要安装一个 yum install ...
- redis 系列17 持久化 AOF
一.概述 除了上篇介绍的RDB持久化功能之外,Redis还提供了AOF(Append Only File)持久化功能.与RDB保存数据库中的键值对来记录数据库状态不同,AOF是通过保存redis服务器 ...
- mac用户丢失管理员身份急救
用了这么久mac,发现居然还存在这么大一个bug.就是如果你曾经编辑mac电脑默认用户资料,比如试图改用户名.试图改HOME路径之类的,有很高比率可能导致该用户丧失管理员权限. 随后悲剧就开始了,所有 ...
- Error: Cannot fit requested classes in a single dex file (# methods: 149346 > 65536)
引用第三方库的jar文件,都有可能会触发这个错误.解决方案如下: 参考<[Android]Cannot fit requested classes in a single dex file. T ...
- Vimtutor(中文版)学习笔记各章小结
在Bash中直接输入 vimtutor 打开新世界!通常阅读完需要25-30分钟不等,像玩游戏一样学会vim,然后爱不释手 里面设置了很多例子通过实践操作来学,这里仅把vimtutor上的每一章小结记 ...
- 【C#加深理解系列】(一)反射
什么是反射 反射是.NET中的重要机制,通过反射,可以在运行时获得程序或程序集中每一个类型(包括类.结构.委托.接口和枚举等)的成员和成员的信息.有了反射,即可对每一个类型了如指掌.另外我还可以直接创 ...
- 使用 curl 进行 ssl 认证
目录 SSL 认证 认证实现 问题解决 curl不支持 https SSL certificate problem, verify that the CA cert is OK curl: (60) ...
- [三]基础数据类型之Integer详解
Integer 基本数据类型int 的包装类 Integer 类型的对象包含一个 int 类型的字段 属性简介 值为 2^31-1 的常量,它表示 int 类型能够表示的最大值 @N ...
- 痞子衡嵌入式:飞思卡尔i.MX RT系列MCU启动那些事(8)- 从Raw NAND启动
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RT系列MCU的Raw NAND启动. 前面铺垫了七篇启动系列文章,终于该讲具体Boot Device了,我们知道i. ...
- Mybatis环境配置学习
Mybatis的使用环境配置步骤主要分为以下三步 1.导入jar包 2.创建mybatis的全局配置文件,并编写 3.创建mapper的配置文件 一.导入jar包 --- (踩坑:这一步中的导入mys ...