正如咱们在上一章中解说的那样,HTML元素使页面规划者能够对文档的构造进行符号。HTML标准列出了浏览器应该怎么显现这些元素的攻略。例如,您能够合理地保证强元素的内容将显现粗体。此外,您能够非常信赖大多数浏览器将运用大字体巨细显现H1元素的内容…最少大于P元素,大于H2元素。可是除了信赖和期望之外,你没有任何操控你的文字呈现。
CSS改变。CSS把规划师放在驾驶座上。咱们致力于本书的其余有些解说你能够用CSS做什么。在本章中,咱们将向您介绍怎么编写款式表的基本知识以及CSS和HTML怎么一起描绘文档的构造和外观。
规矩和款式表
要开端运用CSS,你乃至不用写款式表。第16章将告诉您怎么指向Web上现有的款式表。
有两种办法创立我国。您能够运用一个一般的文本修改器和“款式表”手艺编写,也能够运用专用工具例如页面规划应用程序,它支撑CSS。专用工具答应您在不学习CSS语言语法的情况下创立款式表。可是,在很多情况下,规划师将要修正款式表的手以后,咱们引荐你学习的手艺编写和修改系统。那咱们就开端吧。
H1 {色彩:绿色}
上面看到的是一个简略的CSS规矩,包含一条规矩。规矩是对于一个或多个元素的一个文体方面的句子。款式表是应用于HTML文档的一组或多个规矩集。上面的规矩设置一切榜首级标题的色彩(H1)。让咱们来看看规矩的可视成果是什么:
图2.1
[图像]
咱们如今开端解剖规矩。
规矩的解剖
规矩由两有些构成:
挑选器-左曲括号前有些
声明-卷括号内的有些
[图像]
挑选器是HTML文档和款式之间的连接。它指定了哪些元素受声明的影响。该声明是该规矩的一有些,论述了影响将。在上面的比如中,挑选器是H1,声明是“色彩:绿色”。因而,一切H1元素都会遭到声明的影响,也就是说,它们将变成绿色。(色彩特色只是影响远景文本色彩,还有别的特色的布景,边框等)
上面的挑选器是根据元素的类型:它挑选一切类型的元素“H1”这种挑选器被称为类型挑选器。任何HTML元素类型都能够用作类型挑选器。类型挑选器是最简略的挑选器。咱们将在CSS挑选器中评论别的类型的挑选器。,“CSS挑选器。”
誓言的解剖
声明由冒号分隔成两有些:
特色-冒号之前的那一有些
值-冒号后的那一有些
[图像]
产业是某物所具有的品质或特性。在前面的比如中,它是色彩。CSS2(拜见独自的盒子)界说了大概120功能,咱们能够将值分配给一切的人。
CSS标准
层叠款式表是由W3C两种标准描绘:CSS1和CSS2。CSS1于1996十二月发行,描绘了一个简略的格式化模型大多是根据屏幕的演示。CSS1大概有50的特色(如色彩和字体巨细)。CSS2于1998五月完结,建立在CSS1。CSS2包含一切CSS1功能和增加自个的70,如特色来描绘听觉演示和分页符。在这本书中,咱们不要企图差异CSS1和CSS2和运用术语“CSS”之间的差异很重要,除非。最具特色的前四章中描绘了有些CSS1。假如你想阅览CSS标准自身,你能够找到他们:

该值是该特色的准确标准。在这个比如中,它是“绿色”,但它能够很简单地是蓝色,赤色,黄色,或别的一些色彩。
下图显现了规矩的一切成分。卷括号({)和冒号(:)使浏览器能够差异挑选器、特色和值。
图2.2规矩图。
[图像]
分组挑选器和规矩
在规划CSS时,简练是一个方针。咱们以为,假如咱们能够减少款式表的巨细,咱们能够让规划人员编写和修改款式表“手”。CSS因而包含几种机制,经过分组挑选器和声明来缩短款式表。
例如,考虑这三条规矩:
字体分量:粗体
H2 {字体分量:粗体}
H3字体分量:粗体}

一切这三个规矩有完全一样的声明-他们设置字体是斗胆的。(这是运用字体权重特色,咱们在字体中评论。由于一切三个声明是一样的,咱们能够将挑选器组合成一个逗号分隔的列表,只列出一次声明,像这么:
H1,H2,H3 {字体款式:粗体}
此规矩将发生与前三个一样的成果。
挑选器可能有多个声明。例如,咱们能够用这两个规矩编写款式表:
H1 {色彩:绿色}

H1文本对齐:基地}
在这种情况下,咱们都企图要绿色、要以帆布。(这是运用文本对齐特色,在第5章评论。)
可是咱们能够经过将同一挑选器有关的声明分组到分号分隔的列表中来完结相同的作用,例如:
h1 {
色彩:绿色;
文本对齐:基地;
}
一切声明有必要包含在一对大括号内。分号分隔声明,但可能不需求也会呈如今最终声明的结束。此外,为了使您的代码更简单阅览,咱们建议您把每个声明自个的行,由于咱们在这里。(浏览器不会在乎,他们会忽略一切剩余的空格和换行符。)
如今你已经把握了怎么创立CSS规矩和款式表的基础知识。可是,你还没有完结。为了使款式表有任何作用,您有必要将款式表“粘贴”到HTML文档中。

html字体问题的更多相关文章

  1. 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. Linux 桌面系统字体配置要略

    字体显示效果测试 这一段是为了测试宋体字的显示效果,包括宋体里面自带的英文字体,“This is english,how does it look like?”.这一行是小字.后面几个字是加粗的宋体. ...

  3. 在 Ubuntu 14.10 中借用 Windows 的字体

    在前一篇随笔中,我详细讨论了字体的分类及用途,也以 Fedora 20 为例,展示了字体配置的思路和方法.我在配置 Fedora 20 系统字体的时候,采用的是一种釜底抽薪的方法,完全抛开了系统原有的 ...

  4. TODO:一不顺眼就换字体Go之代码篇

    TODO:一不顺眼就换字体Go之代码篇 image包实现了一个基本的2D图像库,该包中包含基本的接口叫做image,这个里面包含color,这个将在image/color中描述:新增字体font,进行 ...

  5. TODO:一不顺眼就换字体Go之应用篇

    TODO:一不顺眼就换字体Go之应用篇 字体,文字的外在形式特征.就是文字的风格,是文字的外衣.好的字体让人看得舒服,让人更有看.写的欲望哦.2016-11-16 GO官方博客发布了同名Go字体,并没 ...

  6. TODO:Go语言同名Go字体发布

    TODO:Go语言同名Go字体发布 2016-11-16 Go语言官方博客发布了一款同名字体–Go字体.此字体族包括正常.粗体和斜体渲染,支持比例和等宽字体.此字体已经经过用于编程方面的技术测试,使用 ...

  7. Android SearchView 自定义SearchIcon和字体颜色大小

    自定义SearchView的搜索图标和字体属性相对复杂一些,记下来. 一.自定义SearchIcon 1.API版本低于21:版本小于21时,要修改SearchIcon比较复杂,需要先获取到Searc ...

  8. Win10 字体模糊解决(DPI缩放禁用),设置默认输入法英文

    电脑坏了 , 换了新电脑, 但是新电脑,死活不能装win7, 装都不能装!!!郁闷了 好多地方字体模糊了,百般设置都不好看, 后来远程桌面到win2008server, 发现,在远程桌面里面居然很清晰 ...

  9. Mardown字体颜色、背景色

    Markdown字体颜色.背景色 字体颜色表 Markdwon测试 **粗体文字**,或__加文字__ 加粗 Markdown测试 *斜体文字*, 或_斜体_ 斜体 Markdwon测试 列表: 背景 ...

  10. 初学者--bootstrap(六)组件中的字体图标----在路上(9)

    组件---字体图标 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 1.如何使用:        出于性能的考虑,所有图标都需要一个基类和对应每个图标的类.把下面的代码放在 ...

随机推荐

  1. 使用python操作InfluxDB

    环境: CentOS6.5_x64InfluxDB版本:1.1.0Python版本 : 2.6 准备工作 启动服务器 执行如下命令: service influxdb start 示例如下: [roo ...

  2. 基于 Koa平台Node.js开发的KoaHub.js的控制器,模型,帮助方法自动加载

    koahub-loader koahub-loader是基于 Koa平台Node.js开发的KoaHub.js的koahub-loader控制器,模型,帮助方法自动加载 koahub loader I ...

  3. 好多鱼 Java

    牛客网的题目: 链接:https://www.nowcoder.com/questionTerminal/e3dd485dd23a42899228305658457927牛牛有一个鱼缸.鱼缸里面已经有 ...

  4. Maven使用说明

    maven的作用. Maven 是一个项目管理和构建自动化工具.可以方便我们导入jar包. maven的安装. 要想安装maven,首先你需要安装jdk,并且配置jdk环境变量.右键点击计算机,选择属 ...

  5. [C++]现行的试卷封面并获取学生题目得分信息以及学号信息的原型系统

    大二的时候写的一个CV小玩意,最终决定还是把它放出来,也许会帮助到很多人,代码写的很丑,大家多多包涵.附加实验报告主要部分. 课题背景及意义: 本项目主要目标是设计一套能自动分析我校现行的试卷封面并获 ...

  6. 解决ecshop进入后台服务器出现500的问题

    ecshop安装完成以后,前台页面打开正常,但是后台页面大家会出现500错误,看了很多的论坛和网站,删除过top.htm里面的JS代码的,.htaccess文件的修改的,都没有解决,后来找到原因, 原 ...

  7. VMware Ubuntu16.04虚拟机安装MATLAB R2016b

    因为这学期上的模式识别课程需要在Linux环境下使用Matlab,所以就在Windows10主机上的Vmware Workstation上的Ubuntu虚拟机上安装了最新版本的MATLAB. 环境: ...

  8. C#实现不影响当前线程情况下间隔一定的时间执行一段代码

    大家知道C#间隔一定时间去执行一段代码,常用的有 1. Thread.Sleep(多少毫秒); 2. 使用Timer控件间隔一定的时间,设置执行一次 以上两种方法,实现起来不难,弊端在于会阻塞当前线程 ...

  9. vue学习笔记 实例(二)

    var data = {a: 1} var vm = new Vue({ el: '#example', data: data, created: function () { // `this` 指向 ...

  10. CDN,你了解多少?

    大家对CDN并不陌生,工作中或多或少都有所接触,最近也有人问到,在此对CDN相关概念和流程做下总结,希望还能对其他朋友也有所帮助. 一.什么是CDN 维基百科上是这样定义的: CDN:内容分发网络(C ...