六.控制字体的样式
控制字体的样式包括控制字体类型、字体大小、字体风格、字体粗细四个部分。
1.字体类型
平时在使用WORD之类的字处理软件的时候,经常需要调整字体的显示,比如说“Arial”、“Impact”、“Verdana”等字体都是笔者使用的较多的。
基本格式如下:
font-family: 字体名称
如果在font-family后加上多种字体的名称,浏览器回按字体名称的顺序逐一在用户的计算机里寻找已经安装的字体,一旦遇到与要求的相匹配的字体,就按这种字体显示网页内容,并停止搜索;如果不匹配就继续搜索,直到找到为止,万一样式表里的所有字体都没有安装的话,浏览器就会用自己默认的字体来替代显示网页的内容。
注意:
当指定多种字体时,用“,”分隔每种字体名称。
当字体名称包含两个以上分开的单词时,用“”把该字体名称括起来。
当样式规则外已经有“”时,用'’代替“”。
2.字体大小
基本格式如下:
font-size: 字号参数
字号的取值范围:
以Point为单位:点单位在所有的浏览器和操作平台上都适用
以Em为单位:指字母要素的尺寸,和Point相同距离
以Pixes为单位:像素可以使用于所有的操作平台,但可能会因为浏览者的屏幕分辨率不同,而造成显示上的效果差异
以in(英寸)为单位
以cm(厘米)为单位
以mm(毫米)为单位
以pc(打印机的字体大小)为单位
以ex(x-height)为单位
smaller:比当前文字的默认大小更小一号
larger:比当前文字的默认大小更小大号
使用比例关系
xx-small
x-small
small
medium
large
x-large
xx-large
3.字体风格
字体风格只能控制各种斜体字的显示。
基本格式如下:
font-style: 斜体字的名称
4.字体粗细
字体粗细控制粗体字的显示,取值范围从数字100~900,浏览器默认的字体粗细为400。另外可以通过参数lighter和bolder使得字体在原有基础上显得更细或更粗些。
基本格式如下:
font-weight: 字体粗细
实用CSS教程:从基础开始(三)
时间: 2024-10-26 05:58:38
实用CSS教程:从基础开始(三)的相关文章
经典实用CSS教程详细讲解
css|教程 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一.使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,大大减少了重复劳动的工作量.尤其是当你面对的是有数百个网页的站点时,CSS简直象是神对我们的恩赐! 前言 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具
实用CSS教程:从基础开始(二)
三.层叠样式表的格式 一般来说,样式表的声明分为选择符(selector)和块{}(block),块里包含属性(properties)和属性的取值(value),基本格式如下: 选择符 {属性:值} 其它格式1: 选择符1,选择符2,选择符3 {属性1:值1:属性2:值2:属性3:值3} 有时候多个选择符将使用相同的设置,为了简化代码,我们可以一次性为它们设置样式,并在多个选择符之间加上","来分隔它们. 当有多个属性的时候,必须在两个属性之间用":"来分隔. 其
css li应用基础实例教程
代码如下 复制代码 <!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"> <head> <meta http-equiv=&qu
实用ExtJS教程100例-001:开天辟地的Hello World
ExtJS功能繁多,要想彻底的了解确实很困难.作为初学者,如何能找到一条快速的通道呢?我觉得,如果你有Javascript的基础,那就不要惧怕ExtJS的复杂,从动手开始,遇到问题,解决问题,积累经验,这是一条非常快速的学习途径. 从今天开始我将完成一系列ExtJS使用中常常用到的功能,并通过例子的形式告诉大家如何一步一步的完成,相信我,ExtJS并不可怕! 本系列教程以代码演示为主,代码讲解相结合,尽量将ExtJS的学习难度降到最低. 要学习本系列教程,你需要具有以下知识: 熟悉Javascr
分享六个基于Bootstrap的实用开发教程和模板演示
中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 关于Bootstrap,相信大家一定不陌生,它已经成为现在主流产业的一个重要工具,Bootstrap提供了优雅的HTML和CSS规范,它基于jQuery框架开发的,它在jQuery框架的基础上进行了更为个性化和人性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件.今天,我们带来6款Bootstrap实现的几款小应用,希望可以
CSS教程—元素的定位
css|教程 1. position:static|无定位position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位example: 以下是引用片段:>#div-1 { position:static; }2. position:relative|相对定位使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置.如果要让div-1层向下移动20px,左移40px:example: 以下是引用片
强烈推荐:非常不错的样式表CSS教程(4)
css|教程|样式表 ●Specificity 本节讲述的是用来判断样式优先权的是"specificity"."specificity"和选择符selector中元素的数目以及元素的属性有关,"specificity"高的优先应用. 怎样计算选择符的"specificity"值呢?涉及到三项内容: 1.选择符中ID标识符属性的数目A 注意:一个匹配ID的属性选择符不能算作一个ID,它仅能当作一个属性选择符.例如"id
强烈推荐:非常不错的样式表CSS教程(3)
css|教程|样式表 ■继 承 和 层 叠 CSS规则影响元素的显示形态,但是如果没有样式匹配或者存在多种样式规则同时匹配该元素时,元素显示的形态到底是遵循哪个规则呢?本节论述的内容涉及到样式的继承和层叠方面的知识. ●继 承 有些样式通过默认的样式设置而"继承",也就是说,子元素继承父元素的样式规则,包括color.font和text-align等等. 例如: p { color: red } ... <p>Sample paragraph with <b>b
强烈推荐:非常不错的样式表CSS教程(2)
css|教程|样式表 元素的属性(Attribute)也可以用于selector.下面的列表中例举了几种模式: Attribute Selector Patterns 模式 说明 E[attr] Attribute selector属性选择器.匹配任何含有该属性的E元素,不必考虑它的值的大小 E[attr="value"] Attribute selector,属性选择器.匹配任何具有该属性的元素E,条件是属性的值必须与设定的值相等. E[attr~="value"