(前端)html与css,css 5、颜色、字体、字号量取方式、行高
1、颜色:color
色值:十六进制、RGB、rgba、颜色名。
十六进制写法↓
color:#ff0000;
color:#ff0000;红色
实际中用工具吸取(fw,ps等)
颜色使用:背景色、边框色等。
2、字体:font-family
中文:微软雅黑、宋体。
英文:Aroal、Consola
书写方法↓
font-family: "Arial","Microsoft Yahei","SimSun";
3、字号:font-size
书写方法↓
font-size: 20px;
常用字号像素值:12/14/18/20都是一些偶数像素值。
文字大小,自己设置一个字体大小,如果不设置,网页会有一个默认的字体大小。
谷歌浏览器:最小显示12px,如果你设置小于12px,他会自动给你显示成12px
IE浏览器可以随意设置像素。
实际大小看设计图,没有设计图或模仿网站只能测量。
利用fireworks软件吸取,优点:方便快捷。
设置:设置成不消除锯齿。
计算机文字在设计的时候并不是"顶天立地"的,文字大小和字号有一定差距,想其他方法字号。
方法:写两个相同的文字,设置相同的字体和样式去尝试字号是多少,能够全部重合字号就是对的。
首先截图截一段文字图片,然后使用fw文字工具来写两个相同的文字↓
其次将自己的文字拖动到原文字上。
最后一点一点的拖动和调节字号,等到完全与原文字完全重合的时候,这个字号就是最终要的字号。
错误示范:差1px导致与原文字像素不一,原文字露出↓
注意:
一般网站字体颜色不会用纯黑,所以在模仿网站时不要见到黑色就用#000000,要用fw里的颜色吸取工具来确认颜色。
4、行高 line-height
一行文字实际占有的高度
单位:像素或百分比
line-height: 30px; line-height: 200%;
fw量取方法
写两行文字,上下对齐,查看属性↓
行高、字号、字体都是font字体的单独属性。
注意:行高书写时必须在字号的后面↓(复合属性写法)属性和属性之间空格隔开,但是字号和行高例外,用/隔开 (字号/行高 字体)
font:14px/20px "宋体";
特殊用法:让一行文字在盒子里垂直居中,让行高等于盒子高。代码↓
![](/assets/blank.gif)
![](/assets/blank.gif)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}p{width: 300px;height: 40px;font-family: "宋体";border: 2px solid red;color: blue;font-size: 26px;line-height: 28px;}</style> </head> <body><p>这是一段文字</p> </body> </html>
View Code
效果图↓
可以看到这段文字并不是上下居中。
可以将行高设置与盒子高一样↓
line-height: 40px;
将ling-hright的属性值改为40(盒子高度),这段文字就会上下居中。
效果图↓
’
转载于:https://www.cnblogs.com/StevenSunYiwen/p/11025206.html
(前端)html与css,css 5、颜色、字体、字号量取方式、行高相关推荐
- html段落颜色字体字号,(前端)html与css,css 5、颜色、字体、字号量取方式
1.颜色:color 色值:十六进制.RGB.rgba.颜色名. 十六进制写法↓ color:#ff0000; color:#ff0000;红色 实际中用工具吸取(fw,ps等) 颜色使用:背景色.边 ...
- html字体颜色字号,(前端)html与css,css 5、颜色、字体、字号量取方式
1.颜色:color 色值:十六进制.RGB.rgba.颜色名. 十六进制写法↓ color:#ff0000; color:#ff0000;红色 实际中用工具吸取(fw,ps等) 颜色使用:背景色.边 ...
- 前端笔记(4)css,复合选择器,标签的显示模式,行高,css背景,css三大特性
css样式表/层叠样式表(2) (1)css复合选择器 后代选择器 子元素选择器 交集选择器(不常用) 并集选择器 链接伪类选择器 (2)标签的显示模式 块级元素block-level 行内元素inl ...
- CSDN的markdown编辑器使用(含表格背景色、文本颜色字体字号、锚点跳转、表情符号等)
内容介绍 最近在使用csdn的markdown编辑器写东西时发现了一些有趣的东西,下面简单列举一下,希望对看到的小伙伴有所帮助(本文目的为演示编辑效果,目录显示较乱). 一.基础编辑 1.目录 各 ...
- 前端导出 excel ,设置字体,列宽,行高,对其方式,合并单元格等效果
一.先看实现后的图 二.技术 这个表格主要采用了 xlsx-style 来实现 https://www.npmjs.com/package/xlsx-style https://github.com/ ...
- 《精彩绝伦的CSS》——提示(二)无单位的行高值
二.无单位的行高值 行高值即可接受无单位的数值,也可使用带单位的行高值--尽管一般情况下不推荐这么做 那么怎么区别这两者的关系呢? 当一个元素定义了有单位的行高值,例如1em或者100%时,就会将计算 ...
- iOS项目开发实战——Label中字体字号与Label多行显示
我们如何通过OC代码来设置Label中显示的文本呢?代码如下: #import "ViewController.h"@interface ViewController ()@end ...
- 表格通用样式el-table的表头颜色样式,表内边框行高样式,点击行高亮变颜色
1-1,如下代码写在el-table标签上 :height='400' style="width: 100%" :header-cell-style="{'text-al ...
- fastreport字体自适应_FastReport 自动换行与行高自适应及自动增加空行
设定后即可自动换行及行高自适应.版本号5.6.2 1.masterData:属性值:stretched 为True 2.Memo设定wordwrap为True ,stretchMode:smMaxHe ...
最新文章
- python-字符串数据类型内置方法
- 如何在 Ubuntu Linux 16.04上安装开源的 Discourse 论坛
- SAP手工传输TP使用方法
- LightOJ - 1179 Josephus Problem(约瑟夫环)
- linux 备份mbr,MBR的备份与恢复
- 第12讲:Ajax 的原理和解析
- css 图片换行_好程序员web前端学习路线分享CSS浮动-文档流篇
- Gym100917 	A - Abstract Picture
- php wdatepicker,WdatePicker时间控件的使用
- 为机场按上一双“慧眼”消灭飞机的“黑色十分钟”
- 【华为云技术分享】python教程:猴子补丁
- 第三季-第26课-网络并发服务器设计
- 第6篇 熊猫烧香专杀工具编写
- android pie原生壁纸,分享:全新谷歌Pixel 3原生手机壁纸 谷歌亲儿子的最强体验!...
- 不看绝对血亏!Javastream并行不安全
- 复杂性应对之道——维度思维
- Github下载速度慢 提升github下载速度最新解决方案 跟龟速说拜拜(持续更新 保证方案可行 建议收藏)
- 有效缓解眼睛疲劳的小方法网站设置404页面有什么作用
- 360视频质量评估标准:WS-PSNR,S-PSNR,CPP-PSNR
- 解决github官网进不去
热门文章
- CF1311C. Perform the Combo题解
- 2021华为工程师的java自学建议
- 解决Result Maps collection already contains value for...BaseResultMap问题
- 一些Vim有用的配置
- mysql修改数据类型_MySQL修改字段类型
- [转]关于男女两性关系的名言幽默!经典!!
- 基于JSP的超市收银系统
- 红米k50至尊版和k50区别哪个好
- Redmi K50 Pro还没发就被大V安利出去3台,或于3月正式发布
- android虚拟机找不到应用程序,Android Studio中的Android模拟器不显示我的应用程序...