CSS基础知识学习第三天
- 格式:doc
- 大小:643.00 KB
- 文档页数:19
css基础知识点总结CSS基础知识点总结CSS(Cascading Style Sheets)是一种用于描述网页样式和布局的语言,它可以控制网页的颜色、字体、排版和其他各种外观方面的属性。
在这篇文章中,我们将总结一些CSS的基础知识点,帮助读者理解并掌握CSS的基本概念和用法。
一、选择器(Selectors)选择器是CSS中用来选择要应用样式的HTML元素的部分。
常见的选择器包括元素选择器、类选择器、ID选择器、伪类选择器等。
元素选择器通过元素的标签名选择元素,类选择器通过元素的class 属性选择元素,ID选择器通过元素的id属性选择元素,伪类选择器则用于选择具有特定状态的元素,如:hover用于选择鼠标悬停在元素上的状态。
二、属性(Properties)属性是CSS中用来控制元素外观的部分。
常见的属性包括颜色、字体、背景、边框、尺寸等。
通过为元素指定属性值,可以改变元素的外观样式。
例如,color属性用于设置文本颜色,font-family属性用于设置文本字体,background-color属性用于设置元素背景颜色,border属性用于设置元素边框样式。
三、值(Values)值是属性中可接受的具体数值或关键词。
不同的属性接受不同类型的值。
例如,color属性接受表示颜色的关键词(如red、blue)或十六进制颜色值(如#FF0000、#0000FF),font-size属性接受表示字体大小的数值(如12px、1.5em),background-image属性接受表示背景图片的URL值。
四、盒模型(Box Model)盒模型是CSS中用于布局的基本概念之一。
每个HTML元素都被看作是一个矩形的盒子,由内容区、内边距、边框和外边距组成。
内容区指的是元素的实际内容,内边距指的是内容区与边框之间的空间,边框指的是元素的边界,外边距指的是元素与其他元素之间的空间。
通过设置这些属性的值,可以控制元素的大小和间距。
css3所有知识点CSS3是层叠样式表(Cascading Style Sheets)的最新版本,它为网页设计师提供了更多的样式选项和功能。
本文将介绍CSS3的各个知识点,并从人类的视角出发,以生动的方式描述其特性和用法。
一、选择器选择器是CSS3中的基本概念之一,它用于指定要应用样式的HTML 元素。
常用的选择器有标签选择器、类选择器和ID选择器等。
通过选择器,我们可以轻松地为特定的元素添加样式,使其在页面中展示出独特的风格。
二、盒模型盒模型是CSS3中的重要概念,它用于定义元素的尺寸和边距。
每个HTML元素都可以被看作是一个矩形的盒子,其中包含内容、内边距、边框和外边距。
通过盒模型,我们可以精确控制元素的大小和位置,使页面布局更加灵活和美观。
三、背景和边框CSS3提供了丰富的背景和边框样式选项,使我们可以为元素添加各种视觉效果。
例如,我们可以设置背景图片、背景颜色和背景渐变,以及调整边框的样式、宽度和圆角等。
通过这些属性,我们可以为页面元素增添各种细节和装饰,使其更加吸引人。
四、文本样式CSS3提供了多种文本样式选项,使我们可以调整字体、字号、颜色和对齐方式等。
此外,我们还可以使用文字阴影、文字溢出和文字换行等属性,来增强文本的可读性和美观性。
通过这些样式,我们可以打造出独特的文本效果,使页面内容更加生动有趣。
五、过渡和动画过渡和动画是CSS3中令人兴奋的特性之一,它们可以为元素添加平滑的过渡效果和生动的动画效果。
通过设置过渡属性和动画属性,我们可以控制元素的变化过程,并实现各种炫酷的效果。
这些特性不仅能够提升用户体验,还可以为页面增添活力和趣味性。
六、媒体查询媒体查询是CSS3中的重要特性,它允许我们根据设备的特性和屏幕尺寸来应用不同的样式。
通过媒体查询,我们可以为不同的设备提供最佳的用户体验,使页面在不同的屏幕上呈现出最佳的布局和样式。
这为响应式设计提供了强大的支持,使页面能够适应不同的设备和浏览器。
CSS实训总结在这次CSS实训中,我学到了很多关于CSS的知识和技能。
通过实际操作,我深入了解了CSS的选择器、样式规则、布局和响应式设计等重要概念。
以下是我对这次实训的总结:1. CSS基础知识:在实训开始之前,我重新温习了CSS的基础知识,包括选择器、样式规则、颜色和字体、盒模型等。
这些基础知识对于理解CSS的核心概念非常重要。
2. 选择器:在实训中,我学习了更多的选择器,如类选择器、ID选择器、属性选择器等。
这些选择器让我能够更精确地定位和样式化页面元素。
通过使用不同的选择器,我可以根据需要选择单个元素或一组元素进行样式化。
3. 样式规则:在这次实训中,我学习了更多的CSS样式规则,如背景、边框、阴影、渐变等。
通过这些样式规则,我可以创建更加美观和专业的网页设计。
此外,我还学习了如何使用CSS动画和过渡效果,为网页添加动态效果。
4. 布局:在实训中,我学习了如何使用CSS进行页面布局。
通过使用Flexbox和Grid布局,我可以轻松地创建复杂的页面布局。
这些布局方法使得页面元素的排列和分布更加灵活和可控。
5. 响应式设计:在这次实训中,我学习了如何使用媒体查询和响应式设计。
通过使用媒体查询,我可以根据不同的设备和屏幕尺寸,应用不同的样式规则。
这使得我的网页能够在各种设备和屏幕尺寸上良好地显示和使用。
6. 实际应用:在实训中,我通过实际项目来应用所学的CSS知识。
我为一个虚构的网站设计了样式,并实现了响应式布局。
在这个过程中,我遇到了很多问题,但通过查阅文档和请教老师,我成功地解决了这些问题。
这个过程让我更加深入地理解了CSS的实际应用和技巧。
7. 总结:通过这次CSS实训,我不仅温习了基础知识,还学习了更多的高级技能。
我掌握了如何使用选择器、样式规则、布局和响应式设计来创建美观而专业的网页。
这次实训对我的专业技能的提升非常有帮助,也为我未来的职业发展打下了坚实的基础。
css3学习心得CSS(Cascading Style Sheets)是一种用于描述网页样式和布局的标记语言,可以为HTML文档添加美观的外观和视觉效果。
CSS3是CSS 的最新版本,引入了许多新特性和功能,如圆角、阴影、过渡、动画等,为网页设计师提供了更多的创作可能性。
在学习CSS3的过程中,我有一些心得体会。
1. 了解基础知识在学习CSS3之前,有必要先掌握CSS的基础知识。
熟悉CSS的选择器、盒模型、定位属性等内容是理解和应用CSS3的基础。
可以通过阅读相关书籍、在线教程或参加培训班等途径来学习CSS的基础知识。
2. 进行实践练习实践是学习CSS3最有效的方式之一。
通过编写实际的网页或项目,探索CSS3各种特性的使用方法和效果。
可以创建一个简单的网页,然后逐步应用CSS3的各种属性和效果,观察并调整它们的表现。
3. 多看文档和案例在学习CSS3的过程中,阅读官方文档和查看各种CSS3实例是非常重要的。
官方文档详细介绍了CSS3的各种属性和用法,可以帮助我们理解和掌握这些特性。
同时,通过查看各种CSS3实例,可以从中学习到一些实际应用的技巧和方法。
4. 注意兼容性虽然CSS3提供了许多强大的功能,但在使用时要注意浏览器的兼容性。
不同的浏览器对CSS3的支持程度各不相同,一些较老的浏览器可能无法正确显示CSS3的特性。
因此,在应用CSS3时,可以使用浏览器前缀、检测浏览器版本等方式来保证网页在不同浏览器下的兼容性。
5. 学习与实践相结合学习CSS3不仅仅是理解其各种特性和语法,更重要的是能够在实践中灵活运用。
在实践中遇到问题时,可以通过查找文档、学习他人的代码等方式来解决。
并且要经常进行反思和总结,不断提升自己的CSS3技能。
综上所述,学习CSS3需要打好基础,进行实践练习,并注意兼容性。
不断积累经验和知识,不断学习和创新,才能在网页设计中充分发挥CSS3的优势,打造出令人赞叹的网页效果。
通过学习CSS3,我对网页设计有了更深入的理解和掌握,也在实践中不断提升自己的技能。
手把手整理CSS3知识汇总【思维导图】
手把手收拾CSS3学问汇总【思维导图】
CSS3学问汇总思维导图请见文章底部
这两天总结了一下CSS3中的基本学问点,没有做到很全面,由于之前也记过一些笔记,就没有再收拾成文档。
这里我会把之前的笔记拍照贴出来,基本都是一些很零碎的小学问点,需要大家平常多敲代码,多翻看笔记,以加深记忆,从而对CSS娴熟运用。
前面也收拾几篇关于CSS3104个学问点汇总和55 个提高CSS 开发效率的必备片段,有爱好的小伙伴可以看看:《关于前端CSS写法104个学问点汇总(一)》
《关于前端CSS写法104个学问点汇总(二)》
《手把手教你55 个提高CSS 开发效率的必备片段》
《手把手教你利用CSS控制文本溢出截断省略解决计划合集》CSS3 模块包括:
手把手收拾CSS3学问汇总【思维导图】
第1页共6页。
css3知识点总结CSS3是层叠样式表(Cascading Style Sheets)的第三个主要版本,它在前两个版本的基础上增加了许多新特性和功能。
CSS3的引入使得前端开发变得更加灵活和强大,同时也给设计师和开发者带来了更多的可能性。
在本文中,我将对CSS3的主要知识点进行总结,包括新的选择器、盒模型、文本样式、背景和渐变、过渡和动画、多列布局、媒体查询等方面的内容。
1. 新的选择器CSS3引入了一些新的选择器,使得选择元素更加灵活和方便。
其中包括属性选择器、伪类选择器和伪元素选择器。
属性选择器可以根据元素的属性值来选择元素,常见的属性选择器包括:[attr]、[attr=value]、[attr~=value]、[attr|=value]、[attr^=value]、[attr$=value]、[attr*=value]等。
伪类选择器可以根据元素的状态来选择元素,包括::hover、:active、:visited、:focus、:first-child、:last-child等。
伪元素选择器用于创建虚拟的元素,常见的伪元素选择器包括:::before、::after、::first-letter、::first-line等。
2. 盒模型CSS3对盒模型进行了一些改进,可以使用box-sizing属性来控制盒模型的尺寸计算方式,包括:content-box、border-box和padding-box。
3. 文本样式CSS3引入了一些新的文本样式属性,包括:text-shadow、text-overflow、word-wrap、word-break、white-space、direction、text-orientation等。
4. 背景和渐变CSS3允许使用多背景图像和背景定位,可以通过background-size属性来控制背景图像的尺寸。
同时,CSS3还引入了线性渐变和径向渐变,可以通过background-image属性来实现。
第三天二列和三列布局文章出处:标准之路(/div_css/904.shtml)编辑:杨雨晨思今天学习《十天学会web标准(div+css)》的二列和三列布局,将涉及到以下内容和知识点▪二列自适应宽度▪二列固定宽度▪二列固定宽度居中▪xhtml的块级元素(div)和内联元素(span)▪float属性▪三列自适应宽度▪三列固定宽度▪三列固定宽度居中▪IE6的3像素bug一、两列自适应宽度下面以常见的左列固定右列自适应为例,因为div为块状元素,默认情况下占据一行的空间,要想让下面的div跑到右侧,就需要做助css的浮动来实现。
首先创建html代码如下:<div id="side">此处显示id "side" 的内容</div><div id="main">此处显示id "main" 的内容</div>按照如图所示的创建方法,把两个div都创建出来,或手工写出代码。
div创建完成后,开始创建css样式表,代码如下:#side { background: #99FF99; height: 300px; width: 120px; float: left; }#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }先创建#side的样式,为了便于查看,设置了背景色。
注意,side的浮动设置为向左浮动;然后创建#main样式,注意这里设置#main的左边距为120px。
预览结果如下:三、两列固定宽度居中两列固定宽度居中,需要在两列固定宽度的基础上改进,在学一列固定宽度居中时,我们知道让它居中的方法,所以这里需要在这两个div之外再加一个父div:<div id="content"><div id="side">此处显示id "side" 的内容</div><div id="main">此处显示id "main" 的内容</div></div>操作方法:在源代码里选中这两个div的代码后,点击工具栏上插入div按钮,填写i d后确定,得到如上的代码下面就需要设置#content的样式了,我们知道,#side的宽度为120px,#main 宽度为350px,那么#content的宽度应该为这两者之和,然后设置#content居中,那么整体就居中了:从上图的例子可以看出,块级元素默认占据一行,相当于在它之前和之后各插入了一个换行;而内联元素span没对显示效果造成任何影响,事实也是如此;em只是让字体变成了斜体,也没有单独占据一行。
css学习心得CSS学习心得。
在学习CSS的过程中,我深刻体会到了它在网页设计中的重要性和作用。
CSS(Cascading Style Sheets)是一种用来描述网页样式和布局的标记语言,它可以让我们轻松地控制网页的外观和排版,使得网页更加美观和易于阅读。
通过学习和实践,我对CSS有了更深入的了解,也积累了一些心得体会。
首先,我发现CSS的语法相对简单易懂。
与HTML相比,CSS的语法更加直观和灵活。
它由选择器、属性和值组成,通过选择器来选中HTML元素,然后为这些元素指定样式。
属性用来定义样式的具体内容,比如颜色、字体、大小等,而值则确定了属性的具体取值。
这种直观的语法使得我们能够快速地理解和掌握CSS的用法,也让网页设计变得更加简单和高效。
其次,我学会了如何使用CSS来实现网页布局。
通过CSS的盒模型和浮动等属性,我们可以轻松地控制网页元素的位置和大小,实现各种不同的布局效果。
我学会了如何使用浮动来实现多栏布局,如何使用定位来实现绝对定位布局,以及如何使用弹性盒子布局来实现响应式布局。
这些技能让我能够更加灵活地设计网页,满足不同设备和屏幕尺寸的需求,提升了用户体验和网页的可访问性。
另外,我也学会了如何使用CSS来美化网页。
通过CSS的各种属性和值,我们可以为网页添加背景、边框、阴影等效果,使得网页更加美观和吸引人。
我学会了如何使用字体属性来设置字体的样式和大小,如何使用颜色属性来设置文本和背景的颜色,以及如何使用过渡和动画来为网页添加动态效果。
这些技能让我能够设计出更加独特和个性化的网页,吸引用户的注意力,提升了网页的吸引力和用户体验。
最后,我发现CSS的层叠机制和选择器的灵活运用,让网页设计变得更加高效和便捷。
通过层叠机制,我们可以轻松地管理和组织各种样式,使得网页的样式更加清晰和易于维护。
而选择器的灵活运用,让我们能够精确地选中和控制各种HTML元素,实现更加精细和个性化的样式效果。
这些特性让我在实际的网页设计中能够更加高效地工作,提升了工作的效率和质量。
css3学习心得CSS3是层叠样式表(Cascading Style Sheets)的第三个版本。
它为网页设计师提供了丰富的样式选择和动态交互效果,让网页更加美观和吸引人。
在学习过程中,我积累了一些心得和体会,下面将分享给大家。
一、CSS3的概述CSS3是CSS技术的最新版本,相比于CSS2,具有更多的新特性和增强功能。
它引入了丰富的选择器,可以更精确地选择DOM元素进行样式的设置,如属性选择器、伪类选择器等。
此外,CSS3还支持圆角、阴影、渐变、动画以及响应式布局等功能,让网页设计更具创意和灵活性。
二、CSS3的新特性1. 圆角(border-radius):通过设置元素的border-radius属性,可以使元素的边角呈现圆角效果。
这为网页设计师提供了更多的样式选择,使网页更加柔和和美观。
2. 阴影(box-shadow):利用box-shadow属性,可以为元素添加阴影效果。
通过调整颜色、偏移量和模糊半径等参数,可以实现多种效果,为网页增添了层次感和立体感。
3. 渐变(gradient):CSS3中的渐变功能可以实现元素的背景色或文本颜色的渐变效果。
线性渐变和径向渐变分别适用于不同的场景,可以通过指定起始点和终止点、颜色和中间色等参数,创造出独特的渐变效果。
4. 动画(animation):通过CSS3的animation属性,可以为元素添加动画效果。
设置关键帧、持续时间和动画效果等参数,可以实现元素的平移、旋转、缩放等动态效果。
动画的运动方式还可以通过贝塞尔曲线来定义,使得动画变得更加流畅和自然。
5. 响应式布局(responsive layout):随着移动设备的普及,响应式布局成为了重要的设计要求。
CSS3提供了媒体查询(media query)功能,可以根据设备的不同特性来应用不同的CSS规则。
通过设置不同的布局、图片大小和隐藏元素等方式,可以实现网页在不同设备上的适配,提高用户体验。
CSS基础知识学习第三天CSS 入门概述1.样式定义如何显示HTML 元素2.样式通常存储在样式表中3.把样式添加到HTML4.0 中,是为了解决内容与表现分离的问题4.外部样式表可以极大提高工作效率5.外部样式表通常存储在CSS 文件中6.多个样式定义可层叠为一0.今日课程预览这里写图片描述1.什么是 CSS ?CSS 指层叠样式表(Cascading Style Sheets),或者叫级联样式表,是一组格式设置规则,用于控制web 页面的外观。
-css 特点1页面内容与表相分离2可以将 CSS 单独放在一个文件夹中3布局非常灵活4提高网页的加载速度5降低服务器的维护成本6通过 css 的hank 等技术手段实现浏览器的全兼容1.1 样式解决了一个普遍的问题HTML 标签原本被设计为用于定义文档内容。
通过使用<h1>、<p>、<table>这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。
同时文档布局由浏览器来完成,而不使用任何的格式化标签。
由于两种主要的浏览器(Netscape 和Internet Explorer)不断地将新的HTML 标签和属性(比如字体标签和颜色属性)添加到HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了HTML 标准化的使命,并在HTML 4.0 之外创造出样式(Style)。
所有的主流浏览器均支持层叠样式表。
1.2 样式表极大地提高了工作效率样式表定义如何显示HTML 元素,就像HTML 3.2 的字体标签和颜色属性所起的作用那样。
样式通常保存在外部的.css 文件中。
通过仅仅编辑一个简单的CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局,CSS 可以称得上WEB 设计领域的一个突破。
作为网站开发者,你能够为每个HTML 元素定义样式,并将之应用于你希望的任意多的页面中。
如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。
1.3 多重样式将层叠为一个样式表允许以多种方式规定样式信息。
样式可以规定在单个的HTML 元素中,在HTML 页的头元素中,或在一个外部的CSS 文件中。
甚至可以在同一个HTML 文档内部引用多个外部样式表。
2.CSS 的引入方式2.1 引入方式一般来说,我们的引入方式一般分为三种。
内联样式表:直接在HTML 元素内部进行样式的设置。
内部样式表:在<head>标签内部设置<style>标签,设置样式。
外部样式表:在<head>标签内部设置<link>标签,进入外部CSS 文件。
2.2 不同引入方式的优缺点2.2.1 内联样式表内联样式表优缺点1优先级最高2多余代码多3不利于维护4配合 JS 使用2.2.2 内部样式表内部样式表优缺点1速度快,没有请求压力2相对外部引用代码较少3不宜改版和维护4代码较乱,不方便前后台沟通5主要使用在主页和活动页2.2.3 外部样式表外部样式表优缺点1一个 CSS 样式可以控制多个页面2方便改版和维护外部样式表优缺点3减少代码量,代码简洁,便于分工协作4有效利用缓存机制5相对单页来说,会有垃圾代码,外部引入也会给服务器造成压力6主要使用在内容页和复杂度较高的页面2.3 CSS 引入优先级我们控制样式的精确度越高,它相对于其他控制的优先级也就更高。
(范围越小,精确度越高)也就是内联样式表> 内部样式表= 外部样式表.需要注意,内部样式表和外部样式表其实优先级是相同的,判断他们谁生效,主要是看谁是最后引入的。
3.CSS 语法3.1 CSS 规则一般CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }选择器通常是您需要改变样式的HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。
每个属性有一个值。
属性和值被冒号分开。
selector {property: value}css 结构3.2 值的不同写法和单位除了英文单词red,我们还可以使用十六进制的颜色值#ff0000:p { color: #ff0000; }为了节约字节,我们可以使用CSS 的缩写形式:p { color: #f00; }我们还可以通过两种方法使用RGB 值:p { color: rgb(255,0,0); }p { color: rgb(100%,0%,0%); }请注意,当使用RGB 百分比时,即使当值为0 时也要写百分比符号。
但是在其他的情况下就不需要这么做了。
比如说,当尺寸为0 像素时,0 之后不需要使用px 单位,因为0 就是0,无论单位是什么。
3.3 记得写引号提示:如果值为若干单词,则要给值加引号:p {font-family: "sans serif";}3.4 多重声明:提示:如果要定义不止一个声明,则需要用分号将每个声明分开。
下面的例子展示出如何定义一个红色文字的居中段落。
最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。
然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么做的好处是,当你从现有的规则中增减声明时,会尽可能地减少出错的可能性。
就像这样:p {text-align:center; color:red;}你应该在每行只描述一个属性,这样可以增强样式定义的可读性,就像这样:p{text-align: center;color: black;font-family: arial;}3.5 空格和大小写大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。
多重声明和空格的使用使得样式表更容易被编辑:body{color: #000;background: #fff;margin: 0;padding: 0;font-family: Georgia, Palatino, serif;}是否包含空格不会影响CSS 在浏览器的工作效果,同样,与XHTML 不同,CSS 对大小写不敏感。
不过存在一个例外:如果涉及到与HTML 文档一起工作的话,class 和id 名称对大小写是敏感的。
4 CSS 基础设置4.1 字体的设置-字体的设置1font-family2font-size3font-weight4font-style4.1.1 font-familyfont-family规定元素的字体系列。
font-family 可以把多个字体名称作为一个“回退”系统来保存。
如果浏览器不支持第一个字体,则会尝试下一个。
也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。
浏览器会使用它可识别的第一个值。
有两种类型的字体系列名称:指定的系列名称:具体字体的名称,比如:"times"、"courier"、"arial"。
通常字体系列名称:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"提示:使用逗号分割每个值,并始终提供一个类族名称作为最后的选择。
注意:使用某种特定的字体系列(Geneva)完全取决于用户机器上该字体系列是否可用;这个属性没有指示任何字体下载。
因此,强烈推荐使用一个通用字体系列名作为后路。
p{font-family:"Times New Roman",Georgia,Serif;}值描述family-name,generic-family 用于某个元素的字体族名称或/及类族名称的一个优先表。
默认值:取决于浏览器。
inherit规定应该从父元素继承字体系列。
使用通用字体系列如果你希望文档使用一种sans-serif 字体,但是你并不关心是哪一种字体,以下就是一个合适的声明:body {font-family: sans-serif;}这样用户代理就会从sans-serif 字体系列中选择一个字体(如Helvetica),并将其应用到body 元素。
因为有继承,这种字体选择还将应用到body 元素中包含的所有元素,除非有一种更特定的选择器将其覆盖。
指定字体系列除了使用通用的字体系列,您还可以通过font-family 属性设置更具体的字体。
下面的例子为所有h1 元素设置了Georgia 字体:h1 {font-family: Georgia;}这样的规则同时会产生另外一个问题,如果用户代理上没有安装Georgia 字体,就只能使用用户代理的默认字体来显示h1 元素。
我们可以通过结合特定字体名和通用字体系列来解决这个问题:h1 {font-family: Georgia, serif;}如果读者没有安装Georgia,但安装了Times 字体(serif 字体系列中的一种字体),用户代理就可能对h1 元素使用Times。
尽管Times 与Georgia 并不完全匹配,但至少足够接近。
因此,我们建议在所有font-family 规则中都提供一个通用字体系列。
这样就提供了一条后路,在用户代理无法提供与规则匹配的特定字体时,就可以选择一个候选字体。
如果您对字体非常熟悉,也可以为给定的元素指定一系列类似的字体。
要做到这一点,需要把这些字体按照优先顺序排列,然后用逗号进行连接:p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}根据这个列表,用户代理会按所列的顺序查找这些字体。
如果列出的所有字体都不可用,就会简单地选择一种可用的serif 字体。
使用引号您也许已经注意到了,上面的例子中使用了单引号。
只有当字体名中有一个或多个空格(比如New York),或者如果字体名包括# 或$ 之类的符号,才需要在font-family 声明中加引号。
单引号或双引号都可以接受。
但是,如果把一个font-family 属性放在HTML 的style 属性中,则需要使用该属性本身未使用的那种引号:<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;">...</p>4.1.2 font-sizefont-size 属性可设置字体的尺寸。