CSS如何设置字体的类型、大小、颜色
设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的,它们的字体需要单独设置。
<html>
<head>
<style type="text/css">
body
{
font-family : 微软雅黑,宋体;
font-size : 1em;
color : #f00;
}
</style>
</head>
<body >
<h1>设置字体的类型、大小、颜色</h1>
<p>
CSS设置字体的类型、大小、颜色
</p>
</body>
</html>
- 设置字体的类型
- 1
字体的类型通过下面这段代码设置:
font-family : 微软雅黑,宋体, 'New York';
font-family翻译为中文是“字体家族”,就是告诉浏览器,优先使用哪一种字体,谁排在最前面,就先使用这种字体,这里是“微软雅黑”;
- 2
多种字体使用逗号间隔,字体名中带有空格或#、$的,需要加单引号或双引号。
- 3
如果操作系统中“微软雅黑”,XP系统中就没有这种字体,那么就会使用“宋体”,如果没有“宋体”,就会再使用系统中默认的字体,不过操作系统中一般都是有“宋体”的,而且,如果没有给网页设置字体类型,网页就会按照操作系统中默认的字体来显示。
END
设置字体的大小
- 1
字体大小通过下面这段代码设置:
font-size : 1em;
font-size 翻译为中文是“字体尺寸”,它的单位一般是px(像素)或em(字体高度)。
- 2
中国的许多网站的默认字体是12px,而且很多人使用的是IE浏览器,像IE6,用户是不能改变网页字体大小的,而现在主流的浏览器,只需要按住Ctrl后,滚动滑轮就可以放大缩小网页了。
- 3
单位em是一种相对的字体高度,一般的浏览器都默认为16px,需要注意的是,em会继承父元素的字体大小。
比如设置body字体大小为1em,p的字体大小为0.8em,那么换算为像素,p标签的实际单位是 1 * 0.8 * 16px = 12.8px。
不过,为了简化em和px的换算,一般设置body的font-size为62.5%,然后使用em设置其他标签的字体大小,这样,em换算为px只需要乘以10就行了,比如1em = 1 * 62.5% * 16px = 10 px
- 4
很多人都推荐使用em作为网页字体单位,有2点好处,不过我的实践告诉我,似乎并不太重要。
(1)当对IE6设置了字体更大或更小后,所有字体都可以按照比例放大缩小。不过,使用IE6的人越来越少了,现在主流的浏览器,按住Ctrl,滑动滑轮,就可以放大缩小了。
(2) 通过修改body的大小,就能按比例修改所有字体大小,因为body是其他字体的基准。这个一般是先设置body大小,然后设置其他标签大小,此时,若是修改了body的大小,其他标签的大小就会跟着变了。
END
设置字体颜色
设置字体的颜色通过下面的代码:
color : #f00;
color是颜色的意思,color用来设置一个标签的前景色,表现出来也就是元素文本的颜色。
它的值,一般都是使用#加16进制的颜色值来表示。
CSS如何设置字体的类型、大小、颜色的更多相关文章
- 我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体
一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体 ...
- ios 设置UITextField的placeholder大小颜色
需求:产品嫌弃placeholder的字体太大,颜色太明显,要求跟正常输入时的字体及颜色不同 方法:设置placeholder的大小和颜色,实际上是设置placeholder的label的大小和颜色, ...
- CSS中设置字体样式
<style type="text/css"> body{ font-family: SimHei,"微软雅黑",sans-serif; } < ...
- 超链接字体颜色设置(通过html/css的设置方法)
超链接字体颜色设置是通过css来设置,a链接的颜色设置常用的有以下两种,1.超链接a的初始状态颜色,2.超链接字体的鼠标滑过颜色,还有两种病不常用:3.超链接字体的已访问颜色,4.超链接字体在按下鼠标 ...
- 设置一个label显示多种颜色,多种字体大小
UILabel* label = [[UILabel alloc] init]; label.frame = CGRectMake(0, 100, 200, 100); label.textColor ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- Android代码中设置字体大小,字体颜色,显示两种颜色.倒计时效果
Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 <TextView android:id="@+id/uppaid_time" an ...
- python设置图片背景和设置字体颜色大小
# -*- coding: utf-8 -*- """ Created on Wed Dec 11 22:37:30 2019 @author: Dell "& ...
- 【转】CSS3的REM设置字体大小
rem 长度单位 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: ...
随机推荐
- Python时间获取详解,Django获取时间详解,模板中获取时间详解(navie时间和aware时间)
1.Python获取到的时间 import pytz from datetime import datetime now = datetime.now() # 这个时间为navie时间(自己不知道自己 ...
- Python高级教程-高阶函数
Higher-order function(高阶函数) 变量可以指向函数 以Python内置的求绝对值的函数abs()为例,调用该函数用以下代码: >>> abs(-10) 10 但 ...
- spring 整合mybatis找不到${jdbc.driverClass}
1.检查是否设置了mapper扫描org.mybatis.spring.mapper.MapperScannerConfigurer类 在spring里使用org.mybatis.spring.map ...
- 从微观到宏观,遍历网络安全这幅有向图——By Me
“可视化”是网络安全领域的前沿技术与可靠保障.笔者所在的西电捷通是一家领先的网络安全基础技术国际研究机构.一直从事网络安全基础技术研发与技术转移.笔者在2011年底入职典型技术之上的西电捷通公司,那时 ...
- (转) latch 入门
原链接:http://www.itpub.net/thread-1424719-1-1.html (入门1)一直想点文章关于Latch的,又一直没写,一是因为懒,二是一直觉得现在关于Latch的书那么 ...
- CRM项目问答总结
1. 通过ChangeList封装好多数据 DA: 在stark组件中,有五个封装的大类: class FilterOption(object): ----用于封装组合搜索的配置信息(数据库字段,是否 ...
- SHELL —— BASH环境
一 .什么是SHELL shell一般代表两个层面的意思,一个是命令解释器,比如BASH,另外一个就是shell脚本.本节我们站在命令解释器的角度来阐述shell 二 .命令的优先级 命令分为: == ...
- UEditor文本编辑器
Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点.Ueditor基于BSD开源协议,除了具有代码精简.加载迅速的轻量级特质 外,还采用了分层理念,使开 ...
- $git学习总结系列(4)——gitignore文件
有时候工作区中会有我们创建的一些密码配置文件,或者自动生成的一些临时文件,比如python代码编译产生的.pyc文件和java代码编译产生的.class文件等,我们在提交代码的时候没有必要把这些文件也 ...
- 关于git bash的问题,pull不下来(登录之后,git帮你记住了,想切换其他用户)
参考博客: https://www.jianshu.com/p/8a7f257e07b8 从某个项目地址pull代码下来,老是报错 fatal: Authentication failed for ' ...