增加字体和颜色样式-------CSS
通过使用CSS,控制文本的字体,风格和颜色
1.基本操作:
body{
font-family: Verdana, Geneva, Tahoma, sans-serif
} body{
font-size: 14px
} body{
color: silver
} body{
font-weight: bold
} body{
text-decoration: underline
}
注释:
- font-family:定制页面中使用的字体
- font-size:控制字体大小
- color:为文本设置颜色
- font-weight:影响字体的粗细
- text-decoration:为文本增加更多风格
2.字体系列:
系列分类:
- sans-serif
- serif
- monospace
- cursive
- fanstasy
- 衬线:是字母末端的装饰性的小线
示例:
- sans-serif:没有衬线,适合阅读
- Serif:有衬线,看起来传统,多出现在报纸
- Monospace:字体包含固定宽度的字符,例如:一个“i”水平的宽度和一个“m”相同,主要用于显示软件代码示例
- Cursive:有些看似手写,有时会在标题上使用
- Fantasy:含有某种风格的装饰性字体:
总结特点:
- serif字体看起来很高雅,传统。
- sans-serif字体外观清晰,可读性好
- monospace 像打字机打出来的
- Cursive和fantasy字体给人有趣或者很有分格的感觉
3.使用CSS指定字体系列:
浏览器的幕后工作:
body{
font-family: Verdana, Geneva, Tahoma, sans-serif
}
注释:
- 我们为body指定了4个候选字体
- 浏览器会从左往右进行选择
- 如果浏览器检查到用户没有定制的第一个字体,会接着检查第二个
- 直到查找到用户有的字体
- 如果前面3种特定的字体都没找到,浏览器就会使用默认的sans-serif字体
示图:
4.Wed字体的使用
我们都会有这样一个想法,
自己辛苦设计的页面,有很酷的字体,
不希望到了用户手里,却全都变成了默认。。。
因此:有了@font-face规则
使用步骤:
- 找到一个字体,可以是自己所有的,也可以使用提供字体网站授权给你使用的
- 确保有所需字体的格式,一般建议使用web开放字体格式(.woff)
- 把字体文件放在web上,或者利用在线字体服务为你托管这些文件。但无论哪种,你都需要字体文件的URL
- 在CSS中增加@font-face属性
- 在CSS中使用@font-face属性
示例代码:
@font-face{
/*我们为我们的字体设立一个名字*/
font-family: "JJStyle One";
/*浏览器会加载src指定的字体文件,直到找到他能支持的一个文件*/
src: ur1("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff")
ur1("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf")
} h1{
/*使用我们指定的字体名*/
font-family: "JJStyle One",sans-serif;
}
注意:
- 可以定制多个字体,但需要保证服务器上有相应的字体文件,
- 而且要分别创建一个单独的@font-face规则,且名字唯一
5.调整字体大小
大多数默认的字体都不太美观,
为此,作为设计者,
都需要知道如何指定字体大小。
指定font-size的一些方法:
- PX
- %
- em
- 关键字
示例代码:
body{
/*字体的高度为14像素*/
font-size: 14px
} h1{
/*字体大小为相对于另一个字体大小的150%,这里是相对于body字体的大小*/
font-size:150%
} h2{
/*相对于另一个字体1.2倍*/
font-size: 1.2em;
} h3{
font-size: small
/*关键字有:xx-small,x-small,small,medium,large,x-large,xx-large*/
}
指定字体大小的建议:
- 选择一个关键字(推荐samll或mediun),指定它为body规则的字体大小。相当于页面默认大小
- 使用em或百分数,相对于body字体大小指定其它元素的字体大小(使用em还是百分数由你决定,因为效果都一样)
body{
font-family: Verdana, Geneva, Tahoma, sans-serif;
/*字体的高度为14像素*/
font-size: small
} h1{
font-family: sans-serif;
/*字体大小为相对于另一个字体大小的150%,这里是相对于body字体的大小*/
font-size:150%
} h2{
/*相对于另一个字体1.2倍*/
font-size: 1.2em;
}
示图:
6.改变字体粗细:
- font-weight:bold
- font-weight:normal
7.为字体增加风格:
斜体:
- not italic
- italic(文本向右倾斜,另外衬线还有弯曲)
倾斜:
- not oblique
- oblique(普通文本向右倾斜)
注意:
- 一般来说,不论你指定什么风格,结果都不确定,有时是斜体,有时是倾斜。
- 所以,除非真的对你很重要,不然完全可以就用斜体,不用担心差别
8.颜色样式:
指定颜色的方法:
- 颜色名
- 按红绿蓝对百分比指定
- 十六进制码
1.按名字指定
body{
background-color: silver;
}
2.用红绿蓝值指定颜色
body{
/*rgb:红绿蓝 颜色的缩写*/
background-color: rgb(80%, 40%, 0%);
}
h1{
background-color: rgb(204,102,0);
}
3.用16进制码指定
h2{
background-color: #cc6600
}
注释:
- 十六进制码以#开头
- 前两位数字表示红色的分量,中间两位是绿色,后面两位是蓝色
- 上图代码的“CC”的分量的计算步骤与解释如下图
文本装饰:
em{
/*使<em>元素有一个从文本中间穿过的横线*/
text-decoration: line-through;
} em{
/*使<em>元素有一个上画线和下划线*/
text-decoration: underline overline;
} em{
/*使<em>元素没有任何装饰*/
text-decoration: none;
} h1,h2{
color: #cc6600;
/*在下滑框上加一条细的虚线*/
border-bottom:thin dotted #aabbcc;
}
The end--
增加字体和颜色样式-------CSS的更多相关文章
- Android 系统字体和颜色样式
Android 字体和颜色 对于能够显示文字的控件(如TextView EditText RadioButton Button CheckBox Chronometer等等),你有时需要控制字体的大小 ...
- Css3:选择器、字体和颜色样式
1.私有前缀及其用法 在CSS3模块标准尚未被W3C批准或者标准所提议的特性尚未被浏览器完全实现时,浏览器厂商会使用所谓的私有前缀来测试“试验性的”CSS特性.看看CSS3中实现圆角的代码: .rou ...
- CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、
与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...
- CSS样式----CSS属性:字体属性和文本属性(图文详解)
本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...
- CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
- NPOI.dll 用法。单元格,样式,字体,颜色,行高,宽度。读写excel
NPOI.dll 用法.单元格,样式,字体,颜色,行高,宽度.读写excel 转载:http://yuncode.net/code/c_531e679b3896495 view source prin ...
- 自定义orgmode中加粗字体的颜色
自定义orgmode中加粗字体的颜色 Table of Contents 1. orgmode中加粗字体的默认处理 2. 设置设置加粗字体的颜色 1 orgmode中加粗字体的默认处理 在orgmod ...
- CSS3——背景 文本 字体 链接 列表样式 表格
背景 background-color rgb(255,0,0,1) 最后一个值表示透明度,范围是 0--1 background-image 默认平铺重复显示 background-rep ...
- Java读取word文件,字体,颜色
在Android读取Word文件时,在网上查看时可以用tm-extractors,但好像没有提到怎么读取Word文档中字体的颜色,字体,上下标等相关的属性.但由于需要,要把doc文档中的内容(字体,下 ...
随机推荐
- javascript的函数传参(没有引用传递只有值传递)
var v1 = [] var v2 = {}; var v3 = {}; function foo(v1, v2, v3){ v1 = [1]; v2 = [2]; v3 = {a ...
- algorithms中计算时间的渐近表示
1.大写Ο符号大写Ο符号给出了函数f的一个上限. 定义[大写Ο符号]:f(n)=Ο(g(n)),当且仅当存在正的常数c和n0,使得对于所有的n≥n0,有 f(n)≤c*g(n) 上述定义表明,函数f至 ...
- videojs 动态加载视频
VideoJS dynamic source change via RESTful API 'Undefined' issue with changing RTMP source on compres ...
- c#检测端口是否被占用的简单实例
c#检测端口是否被占用的简单实例. 当我们要创建一个Tcp/Ip Server connection ,我们需要一个范围在1000到65535之间的端口 . 但是本机一个端口只能一个程序监听,所以我们 ...
- C#学习笔记13:静态方法、方法重载和ref、out参数
静态方法 调用:如果你写的方法和Main()方法在同一个类中,直接写方法名. 如果不在一个类中,需要类名.方法名(); 非静态方法: 调用:创建一个类的对象 对象名.方法名(); Person pe ...
- ###学习《C++ Primer》- 4
点击查看Evernote原文. #@author: gr #@date: 2014-10-16 #@email: forgerui@gmail.com Part 4: STL关联容器(第11章) 一. ...
- ios 兼容IPV4和IPV6网络通信
前言: 苹果官方出了新的规定,要求新上架的app都必须单独支持ipv6-only的网络. 准备工作: 搭建IPV6测试环境:http://blog.csdn.net/potato512/article ...
- 在 Eclipse 中使用 JSHint 检查 JavaScript 代码
JSHint Home: http://www.jshint.com/ JSHint Options: http://www.jshint.com/options/ JSHint For Eclips ...
- 2016ACM竞赛训练暑期课期末考试 a题
描述 给出n个正整数,任取两个数分别作为分子和分母组成最简真分数,编程求共有几个这样的组合. 输入 第一行是一个正整数n(n<=600).第二行是n个不同的整数,相邻两个整数之间用单个空格隔开. ...
- mysql innodb 数据打捞(四)innodb 簇不连续页扫描提取(试验)
一,用winhex把正常页有意做成不连续的两部分,把后8K向后移动4K,中间隔开4K,启动第一次扫描; 扫描结果是,没有提取到有效页面,但在输出目录生成两个文件:upper.pages和upper.l ...