设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的,它们的字体需要单独设置。

  1. <html>

    <head>

    <style type="text/css">

    body

    {

    font-family : 微软雅黑,宋体;

    font-size : 1em;

    color : #f00;

    }

    </style>

    </head>

    <body >

    <h1>设置字体的类型、大小、颜色</h1>

    <p>

    CSS设置字体的类型、大小、颜色

    </p>

    </body>

    </html>

  2. 设置字体的类型
 
  1. 1

    字体的类型通过下面这段代码设置:

    font-family : 微软雅黑,宋体, 'New York';

    font-family翻译为中文是“字体家族”,就是告诉浏览器,优先使用哪一种字体,谁排在最前面,就先使用这种字体,这里是“微软雅黑”;

  2. 2

    多种字体使用逗号间隔,字体名中带有空格或#、$的,需要加单引号或双引号。

  3. 3

    如果操作系统中“微软雅黑”,XP系统中就没有这种字体,那么就会使用“宋体”,如果没有“宋体”,就会再使用系统中默认的字体,不过操作系统中一般都是有“宋体”的,而且,如果没有给网页设置字体类型,网页就会按照操作系统中默认的字体来显示。

    END

设置字体的大小

 
  1. 1

    字体大小通过下面这段代码设置:

    font-size : 1em;

    font-size 翻译为中文是“字体尺寸”,它的单位一般是px(像素)或em(字体高度)。

  2. 2

    中国的许多网站的默认字体是12px,而且很多人使用的是IE浏览器,像IE6,用户是不能改变网页字体大小的,而现在主流的浏览器,只需要按住Ctrl后,滚动滑轮就可以放大缩小网页了。

  3. 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. 4

    很多人都推荐使用em作为网页字体单位,有2点好处,不过我的实践告诉我,似乎并不太重要。

    (1)当对IE6设置了字体更大或更小后,所有字体都可以按照比例放大缩小。不过,使用IE6的人越来越少了,现在主流的浏览器,按住Ctrl,滑动滑轮,就可以放大缩小了。

    (2) 通过修改body的大小,就能按比例修改所有字体大小,因为body是其他字体的基准。这个一般是先设置body大小,然后设置其他标签大小,此时,若是修改了body的大小,其他标签的大小就会跟着变了。

    END

设置字体颜色

 
  1.  

    设置字体的颜色通过下面的代码:

    color : #f00;

    color是颜色的意思,color用来设置一个标签的前景色,表现出来也就是元素文本的颜色。

    它的值,一般都是使用#加16进制的颜色值来表示。

CSS如何设置字体的类型、大小、颜色的更多相关文章

  1. 我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体

    一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体 ...

  2. ios 设置UITextField的placeholder大小颜色

    需求:产品嫌弃placeholder的字体太大,颜色太明显,要求跟正常输入时的字体及颜色不同 方法:设置placeholder的大小和颜色,实际上是设置placeholder的label的大小和颜色, ...

  3. CSS中设置字体样式

    <style type="text/css"> body{ font-family: SimHei,"微软雅黑",sans-serif; } < ...

  4. 超链接字体颜色设置(通过html/css的设置方法)

    超链接字体颜色设置是通过css来设置,a链接的颜色设置常用的有以下两种,1.超链接a的初始状态颜色,2.超链接字体的鼠标滑过颜色,还有两种病不常用:3.超链接字体的已访问颜色,4.超链接字体在按下鼠标 ...

  5. 设置一个label显示多种颜色,多种字体大小

    UILabel* label = [[UILabel alloc] init]; label.frame = CGRectMake(0, 100, 200, 100); label.textColor ...

  6. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  7. Android代码中设置字体大小,字体颜色,显示两种颜色.倒计时效果

    Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 <TextView android:id="@+id/uppaid_time" an ...

  8. python设置图片背景和设置字体颜色大小

    # -*- coding: utf-8 -*- """ Created on Wed Dec 11 22:37:30 2019 @author: Dell "& ...

  9. 【转】CSS3的REM设置字体大小

    rem 长度单位   在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: ...

随机推荐

  1. python线程间数据共享(示例演示)

    ``` import threading data_list = [] def task(arg): data_list.append(arg) print(data_list) def run(): ...

  2. Jquery 实现跨域处理

    JS部分代码: $.ajax({ url:url, dataType:'jsonp', data:{title:title}, jsonp:'callback', success:function(l ...

  3. Maven项目settings.xml的配置

    原文地址 http://www.cnblogs.com/DreamDrive/p/5571916.html 在Maven中提供了一个settings.xml文件来定义Maven的全局环境信息.这个文件 ...

  4. scc

    CSS简介 CSS介绍 CSS(cascading style sheet,层叠样式表)是一种制作网页的新技术,现在已经为大多数浏览器所支持,成为网页设计必不可少的工具之一 CSS语法 CSS实例 每 ...

  5. JVM内存杂记1

    大多数 JVM 将内存区域划分为 Method Area(Non-Heap)(方法区) ,Heap(堆) , Program Counter Register(程序计数器) ,   VM Stack( ...

  6. ASC转换BCD,ASC2BCD(转)

    int ASC2BCD(const char* szASC,byte* szBDC)   {   int szASCLen=strlen(szASC);   byte * bpBCD = new by ...

  7. Spark机器学习3·推荐引擎(spark-shell)

    Spark机器学习 准备环境 jblashttps://gcc.gnu.org/wiki/GFortranBinaries#MacOS org.jblas:jblas:1.2.4-SNAPSHOT g ...

  8. C语言单元测试框架--EmbedUnit

    1.简介 Embedded Unit是个纯标准c构建的单元测试框架,主要用在嵌入式c的单体测试上,其主要特点是不依赖于任何C的标准库,所有的对象都是静态分配. 最早这个项目托管在SourceForge ...

  9. Kali更新源,亲测目前可用的源

    kali更新的时候老是无法定位软件包,网络上大部分中科大.阿里云kali源都不可用,都千篇一律,最后找了这个,网易的,还不错,贴出来大家看看: # 源 deb http://mirrors.163.c ...

  10. python3给socket模块设置代理

    最近需要在公司学习socket编程,但是不能直接连接外网,需要设置一个代理才能正常访问.报错示例: import socket def blocking(wd): sock = socket.sock ...