css基础知识
CSS的样式PPT课件
知识点精讲
知识点分析 CSS文字样式的常用属性 设置字体： 基本语法为font-family:字体1，字体2，字体3。 例如：h1{font-family:宋体，楷体，隶书;}。 设置文字大小 基本语法为font-size:尺寸|百分比|关键字。 设置斜体 基本语法为font-style:normal|italic|oblique。 设置文字粗细 基本语法为font-weight:normal|bold|bolder|lighter|number。 设置变体 基本语法为font-variant:normal|small-caps。
网站建设与管理
CSS的样式
考纲解读
1 掌握CSS的基础知识。 2 掌握CSS的属性。
考点解读
重难点分析：CSS样式表、样式选择器及CSS的属性。
知识点精讲
知识点1 CSS的基础知识 例题精讲 请输入正确的代码
【解析】外部链接样式表的声明方法为<link rel=″stylesheet″ type=″text/css″ href=″样式 表文件的地址″>
知识点精讲
巩固提高
在Dreamweaver软件中，给网站首页设置“页面属性”的具体要求如下:
网站首页中文字大小设置为12 px，文字颜色设置为“#000”。
设置网页背景颜色为“#CCC”。 设置“链接（CSS） ”中“下划线样式”为“始终无下划线”。 设置“链接（CSS）”中“链接颜色”为“#000”。 下面是网站首页的部分源代码，请从选项A~N中将正确的内容填入相应位置。
知识点精讲
CSS段落和其他文字样式属性 修饰文字 基本语法为text-decoration:underline|overline|line-through|blink|none。 设置段落的水平对齐方式 基本语法为text-align:left|right|left|justify。 颜色及背景 设置文字颜色 基本语法为color：颜色的名称|RGB值|十六进制数。 设置背景 基本语法为background:背景颜色|背景图像|背景重复|背景附件|背景位置。 设置背景颜色属性 基本语法为background-color:颜色|transparent（透明）。 设置背景图像属性 基本语法为background-image:url（背景图片的路径和名称）。
手把手教你学习HTML和CSS的基础知识
手把手教你学习HTML和CSS的基础知识第一章：HTML基础知识HTML，全名为超文本标记语言（HyperText Markup Language），是用于创建网页的标准标记语言。
学习HTML是学习网页开发的第一步。
本章将介绍HTML的基础知识。
1.1 HTML的起源与发展HTML最早由蒂姆·伯纳斯-李（Tim Berners-Lee）于1990年创造，并在1993年发布了HTML 2.0的第一个正式规范。
随着时间的推移，HTML不断发展，现在最新的版本是HTML5。
1.2 HTML文档的结构HTML文档由HTML标签组成，标签用于定义文档的结构和呈现内容。
一个HTML文档通常包含<head>、<body>和</html>等标签。
1.3 HTML标签的基本语法HTML标签由尖括号包围，并以起始标签和结束标签的形式出现。
例如，<p>是一个起始标签，</p>是一个结束标签。
还有一些标签是没有结束标签的，如<br>标签。
1.4 HTML元素与属性元素是指由起始标签、内容和结束标签组成的整体。
属性提供了关于元素的额外信息，如元素的样式、链接地址等。
HTML元素和属性中的内容是由标签和值组成的。
1.5 常用的HTML标签HTML有很多常用的标签，本章只介绍一些基础的标签。
如<h1>到<h6>标签用于定义标题；<p>标签用于定义段落；<a>标签用于创建超链接等。
第二章：CSS基础知识CSS，全名为层叠样式表（Cascading Style Sheets），是用于网页设计的样式表语言。
学习CSS可以为HTML文档添加样式和布局。
本章将介绍CSS的基础知识。
2.1 CSS的起源与发展CSS最早由赖耶斯博士（Håkon Wium Lie）和贝尔纳斯·卡尔（Bert Bos）于1996年创造，并在1997年发布了CSS1的第一个正式规范。
什么是 CSS
什么是CSS？CSS（Cascading Style Sheets）是一种用于描述网页样式和布局的样式表语言。
它与HTML结合使用，为网页提供外观和样式的控制。
CSS通过选择器和属性来选择和定义网页中的元素，使得开发人员可以轻松地改变网页的外观、布局和交互效果。
以下是CSS的一些关键概念和特点：1. 样式表：CSS是一种样式表语言，用于定义网页元素的外观和布局。
样式表由一系列的规则组成，每个规则由选择器和一组样式属性构成。
2. 选择器：CSS使用选择器来选择网页中的元素，并将样式应用于这些元素。
选择器可以根据元素的标签名、类名、ID、属性等进行匹配。
例如，选择器`p`选择所有的段落元素，选择器`.class`选择所有具有特定类名的元素。
3. 样式属性：CSS使用属性来描述元素的外观和布局。
属性定义了元素的颜色、字体、大小、边框、间距等方面的样式。
例如，属性`color`定义了元素的文本颜色，属性`font-size`定义了元素的字体大小。
4. 层叠和继承：CSS的名称中包含了"层叠"（Cascading）一词，表示样式的层叠和优先级规则。
当多个样式规则应用于同一个元素时，CSS使用层叠规则来确定最终的样式。
此外，CSS 中还存在继承的概念，某些样式属性可以从父元素继承到子元素。
5. 盒模型：CSS中的盒模型用于描述元素的布局。
每个元素都被视为一个矩形盒子，其包括内容区域、内边距、边框和外边距。
开发人员可以通过设置盒模型相关的属性来控制元素的大小和间距。
6. 响应式设计：CSS可以用于实现响应式设计，即根据不同设备和屏幕尺寸自动调整和适应网页的布局和样式。
通过使用CSS媒体查询或CSS框架，可以根据设备的特性和屏幕尺寸应用不同的样式。
7. CSS预处理器：CSS预处理器是一种将类似编程语言的语法引入CSS的工具。
它们增加了变量、嵌套规则、函数、导入等功能，使得CSS的编写更加灵活和可维护。
css常用语法
1、页面中，所有的CSS代码，需要写入到<style></style>标签中。
style标签的type属性应该选择text/css2、CSS 注释CSS修改页面中的所有标签，必须借助选择器选中。
选择器中，可以写多对CSS属性，用{}包裹：每个属性名与属性值之间用:分隔，多对属性之间，必须用;分隔。
3、【CSS常用选择器】①标签选择器写法：HTML标签名{}作用：可以选中页面中，所有与选择器同名的HTML标签。
②类选择器(class选择器)写法：.class名{}调用：在需要调用选择器样式的标签上，使用class="class 名"调用选择器优先级：>标签选择器③ID 选择器写法：#ID名{}调用：需要调用样式的标签，起一个id="ID名"优先级：ID选择器>class选择器注意：一个页面中，不能出现同名ID【Class选择器与ID选择器的区别】写法不同:class选择器用.声明，ID选择器用#声明；优先级不同：ID选择器>class选择器作用范围不同：class选择器可以多次调用，ID选择器只能使用一次。
【选择器的命名规范】只能有字母、数字、下划线、减号组成；开头不能是数字。
也不能是只有一个减号。
一般，起名要求有语义，使用英文单词与数字的组合。
④通用选择器写法：*{}作用：可以选中页面中所有的HTML标签。
优先级：最低！！！⑤并集选择器写法：选择器1,选择器2,……,选择器n{}生效规则：多个选择器取并集，只要标签满足其中任意一个选择器，样式即可生效。
⑥交集选择器写法：选择器1选择器2……选择器n{} 所有选择器紧挨着，没有分隔生效规则：多个选择器取交集，则必须满足所有选择器的要求，才能生效⑦后代选择器写法：选择器1 选择器2 ……选择器n{} 选择器之间空格分隔生效规则：只要满足，后一选择器是前一个选择器的后代，即可成效。
css教程菜鸟
css教程菜鸟CSS（层叠样式表）是一种用于描述网页上的元素布局和样式的语言，它能够使网页更加美观和易于阅读。
本文将介绍一些CSS的基础知识和常用属性，以帮助菜鸟入门。
首先，让我们了解一下CSS的基本语法。
CSS由选择器和声明块组成。
选择器指定了要应用样式的HTML元素，而声明块则包含了一系列属性-值对，用于描述要应用到元素上的样式。
下面是一个简单的示例：```p {color: red;font-size: 20px;}```上述代码中，选择器“p”表示要应用样式的HTML段落元素。
声明块中的属性-值对指定了段落的文本颜色为红色，字体大小为20像素。
接下来，我们将介绍一些常用的CSS属性。
1. 字体属性：用于设置文本的字体样式，如字体大小、字体族等。
例如：```p {font-size: 16px;font-family: Arial, sans-serif;}```上述代码将段落的字体大小设置为16像素，字体族为Arial或者sans-serif。
2. 背景属性：用于设置元素的背景样式，如背景颜色、背景图片等。
例如：```body {background-color: lightblue;background-image: url("bg.jpg");}```上述代码将页面的背景颜色设置为浅蓝色，背景图片为名为“bg.jpg”的图片。
3. 边框属性：用于设置元素的边框样式，如边框宽度、边框颜色等。
例如：```div {border: 1px solid black;}```上述代码将`<div>`元素的边框宽度设置为1像素，边框颜色为黑色。
4. 盒模型属性：用于调整元素的尺寸和定位，如元素的宽度、高度、外边距等。
例如：```img {width: 200px;height: 150px;margin-top: 10px;}```上述代码将图片的宽度设置为200像素，高度设置为150像素，并且向上外边距10像素。
CSS知识点总结
CSS知识点总结⼀．Css分类1.替代replaced elements:img input(radio button, checkbox, text)不可替代nonreplaces elements:html,xhtml,span,a,div,body,form,p,em,strong,2.block-level and inline-level:(block可以包含inline 元素，反过来是不可以的！) block-level:p div li ulinline-level: a span strong em b i u⼆．选择器2.元素选择器：P{}3. Grouping Selectors(分组)eg:h2, p {color: gray;}4.The universal selector（通配选择器）eg:* {color: red;}5. Grouping Declarationseg:h1 {font: 18px Helvetica; color: purple; background: aqua;}6.类选择器：.ddd7.ID选择器：#ddd8.属性选择器简单属性选择h1[class] {color: silver;}根据具体属性值p[class="warning"] {font-weight: bold;}根据部分属性值选择p[class~="warning"] {font-weight: bold;}⼦串匹配属性选择器[foo^="bar"][foo$="bar"][foo*="bar"]特定属性选择类型*[lang|="en"] {color: white;}9.使⽤⽂档结构后代选择器blockquote b, p b {color: gray;}选择⼦元素h1 > strong {color: red;}选择相邻兄弟元素h1 + p {margin-top: 0;}10.伪类选择器静态伪类：a:visited{}a:link{}(好像⽤不了)动态伪类：a:focus{}(常⽤于input元素)a:hover{}a:active{}选择第⼀个⼦元素：Li:first-child{}根据语⾔选择（）*:lang(fr){}结合伪类：link:hover:active {color: orange;}伪元素选择器：设置⾸字母样式li:first-letter{ color:Red;设置第⼀⾏的样式：.aa:first-line{ color:Purple;}设置之前和之后元素的样式：a:before{ content:"{}"; color:Silver;}a:after{ content:"end"; color:Aqua;}三．结构和层叠1.特殊性：重要性：!Important (最强悍！) eg: p.dark {color: #333 !important; background: white;}内联样式特殊性：1000 ID选择器：0100 li#answer {color: navy;} /* 0,1,0,1 (winner) */类属性值，属性选择或伪类：0010 h2.grape{color: purple;}/* 0,0,1,1 (winner)*元素和伪元素：0001 h1 {color: red;} /* 0,0,0,1 */通配选择器：0000结合符:⽆继承：⽆（0特殊性⽐⽆特殊性的更强）Eg: * {color: gray;} (（当h1中有其他元素时win）h1#page-title {color: black;}2.继承a)Border：没有继承b)Body:可以向上继承到html,其他的都是向下继承3.层叠：具有相同特殊性的靠后的权重⼤按权重和来源排序：（p79）读者的重要声明>创作⼈员的重要声明>创作⼈员的正常声明>读者正常>⽤户代理声明按特殊性排序按顺序排序Lvha顺序⽐较重要：即live visited hover active四．值和单位1.数字2.百分数3.颜⾊命名颜⾊：blue green white red black maroon ...⽤GRB指定颜⾊函数式RGB颜⾊(百分数法：0%-100%，数字法：0-255)Eg:rgb(100%,100%,100%)rgb(0%,0%,0%)rgb(255,255,255)rgb(0,0,0)灰度表：p.one {color: rgb(0%,0%,0%);}p.two {color: rgb(20%,20%,20%);}p.three {color: rgb(40%,40%,40%);}p.four {color: rgb(60%,60%,60%);}p.five {color: rgb(80%,80%,80%);}p.six {color: rgb(0,0,0);}p.seven {color: rgb(51,51,51);}p.eight {color: rgb(102,102,102);}p.nine {color: rgb(153,153,153);}p.ten {color: rgb(204,204,204);}25%*255=63.75=64⼗六进制RGB颜⾊Web颜⾊：rgb值20%和52和33（⼗六进制）整除4.长度单位a)绝对长度单位：in,cm,mm,pt(点),pc（派卡）1in=2.54cm 1cm=0.3394in1 in=72pt 1 in=6pcB) 相对长度单位Em和ex:Px:1em=14px 1em=2exEm最好的度量单位5.URL绝对URL相对URL注意：url和开始括号之间不能有空格6.关键字None:不同于0，Inherit:它的属性值和⽗元素相同7.css2单位：p(110)a)⾓度值：deg, grad 和 radb)时间值：s,ms 1000ms=1sc)频率值：hz,mhz五．字体1.字体系列制定字体系列：p {font-family: TimesNR,serif;}p {font-family: Times,TimesNR,'New Century Schoolbook',Georgia,'New York',serif;} 有空格、包括“#”和”$”的时候加“单引号”Cursive必须加“双引号”2.字体加粗a)Font-weight:bold bolder mormal 100 --900 lighterb)相对⼤⼩关键字:Bolder 是相对于⽗级字体粗细⽽⾔3.字体⼤⼩a)Font-size:xx-small x-small small medium large x-large xx-large smaller larger inheritb)相对⼤⼩关键字：larger smallerc)绝对⼤⼩：xx-small x-small small medium large x-large xx-larged)百分数：根据⽗元素继承的⼤⼩来计算strong {font-weight: lighter; font-size:larger;}strong b {font-weight:lighter; font-size:200%;}4.风格和变形a)字体风格：Font-style:italic oblique normal inheritb)字体变形：font-variant:small-caps normal inherit（只对英⽂有⽤，对汉语没有影响）c)转换⼤⼩写：p{ text-transform:uppercase;}5.拉伸和调整字体a)字体拉伸：font-stretch:normal| wider | narrower | ultra-condensed | exTRa-condensed| condensed| semi-condensed| semi-expanded| expanded| exTRa-expanded| ultra-expanded | inheritb)我的浏览器不⽀持（可以忽略）6.Font属性a)等价：h1{ font-style:inherit; font-weight:bold; font-variant:small-caps; font-size：20px; font-family:Candara,Corbel;}h1{ font:inherit bold small-caps20px Candara,Corbel; }b)注意;前两个可以互换，后两个不可以，normal 可以省略c)增加⾏⾼：line-height,Eg：body {font-size: 12px;}h1 {font: bold italic200%/1.2Verdana,Helvetica,Arial,sans-serif;}7.字体匹配六．⽂本属性1.缩进和⽔平对齐a)缩进⽂本：(只能⽤于块级元素！)text-indent:3em 10%b)⽔平对齐：(只能⽤于块级元素！)text-align:left center right justify(两端对齐⽂本) inherit2.垂直对齐：元素中⽂本基线之间的最⼩距离a)Line-height:”line-height”减去“font-size”等于⾏间距i.Line-height:18px,0.33in,150%,1.5emii.适⽤于所有元素iii.⾏⾼和继承：Line-height值从⽗元素继承时，要从⽗元素计算，⽽不是⼦元素上计算。
ch_10网页设计- CSS的基础知识091
CSS 是 Cascading Style Sheet 的缩写.译 的缩写. 层叠样式表单」. 作「层叠样式表单」. 是用于控制网页元素的显示方式 是用于控制网页元素的显示方式 样式表的宗旨就是将结构(内容 和格式分 样式表的宗旨就是将结构 内容)和格式分 内容 离 CSS也是一种标记语言,有很多属性来源 也是一种标记语言, 也是一种标记语言 于HTML,它也需要通过浏览器解释执行. ,它也需要通过浏览器解释执行.
例10-1:建立一个简单的样式表 : <html> <head><title>简单的样式表 简单的样式表</title> 简单的样式表 <style type="text/css"> <!-h1{color:red;font-size:35px;font-family:黑体 黑体} 黑体 p{background:yellow;color:blue;font-size:25px;font-family:隶书 隶书} 隶书 --> </head> <body bgcolor=lightblue> <center><h1>样式表 样式表</h1> 样式表 <p>这是一个简单的样式表 这是一个简单的样式表</p> 这是一个简单的样式表 </center> </body></html> </style>
10.3.1内联样式 10.3.1内联样式
样式可以使用STYLE属性内联. 属性内联. 样式可以使用 属性内联 STYLE属性可以应用于任意 属性可以应用于任意BODY内的 内的 属性可以应用于任意 HTML元素 包括 元素(包括 本身), 元素 包括BODY本身 ,除了 本身 BASEFONT,PARAM和SCRIPT. , 和 . 其语法如下: 其语法如下: <HTML标签名称 style="样式属性 属性 标签名称 样式属性:属性 样式属性 样式属性:属性值 属性值..."> 值;样式属性 属性值
第12讲、CSS基础知识及设置
七、小结
•
本章主要介绍层叠样式表的概念、样 式表的种类及样式的应用。
练习
• 利用CSS样式对4.3.2.html内容进行格式化 使得到如4.3.2(result).html效果。
• 使用外部(Extenal)样式表，相对于内嵌(Inline)和 内部式 (Internal)的，有以下优点： • CSS的最大特点就是将内容和格式分离。一个外 部CSS文件，可以被很多网页共用。 • 便于修改。如果要修改样式，只需要修改CSS文 件，而不需要修改每个网页。 • 显示示例，有以下优点：提高网页显示的速度。 如果样式写在网页里。 • 提高网页显示的速度。如果样式写在网页里，会 降低网页显示的速度，如果网页引用一个CSS文 件，这个CSS文件多半已经在缓存区(其它网页 早已经引用过它)，网页显示的速度就比较快。
• • • • • • • • • •
然后你建立一个网页，代码如下： <HTML> <HEAD> <link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <H1 class="mylayout"> 这个标题使用了Style。</H1> <H1>这个标题没有使用Style。</H1> </BODY> </HTML>
• 2）打开并设置“链接页面属性”选项窗口。
• • • •
字体 指定链接文本使用的默认字体。 大小 指定链接文本使用的默认的字体大小。 链接颜色 指定应用于链接文本的颜色。 已访问链接的颜色 指定应用于访问过的链接的颜 色。 • 鼠标经过时链接的颜色 指定当鼠标（或指针）位 于链接上时应用的颜色。 • 活动链接的颜色 指定当鼠标（或指针）在链接上 单击时应用的颜色。 • 下划线样式 指定scading Style Sheet),中文译为层叠样 式表，它是用于控制网页样式并允许将样式信息 和网页内容分离的一种标记性语言。 • CSS是1996年由W3C审核通过，并且推荐使用的。 简单的说，CSS的引入就是为了使HTML语言更好 地适应页面的美工设计。它以HTML为基础，提供 了更丰富的格式化功能，如字体、颜色、背景和 整体排版等。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
什么是CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示HTML 元素
样式通常存储在样式表中
把样式添加到HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
为什么使用CSS？
CSS允许您针对HTML元素应用特定的样式。
CSS的主要好处在于，它允许你将样式与页面内容进行分离。
仅使用HTML，样式将和页面内容格式混杂在一起，这样的页面将会变得难以维护。
所有的web页面样式都可以（也应该）从HTML文档中分离出来，建立成一个单独的CSS 文件再进行引用。
内联CSS
在web文档中直接插入一个CSS是内联样式的使用方法之一。
使用内联样式，将CSS应用于单个元素。
为了使用内联样式，将CSS属性直接添加到相关标签中。
下面的例子展示了如何创建一个灰色背景和白色文本的段落：
外部引用CSS
通过这种方法将所有的CSS样式保存在同一个后缀名为.css的拓展文件中。
然后通过html标签<link>在HTML页面的<head>部分将CSS文件引入。
如下例子所示：
HTML部分：
CSS部分：
CSS语法
CSS是由浏览器解释的样式规则,然后应用于文档中相应的元素。
样式规则有三个部分：选择器，属性和值。
例如，标题颜色可以定义为：
详解：
选择器要指向需要设置样式的HTML元素。
声明块包含一个或多个用分号分隔的声明。
每个声明都包含一个由冒号分隔的属性名称和值。
例如：
类型选择器
最常见和易于理解的选择器是类型选择器。
该选择器以页面上的元素类型为目标。
例如，要定位页面上的所有段落：
CSS注释
注释用于解释您的代码，并可能在您稍后编辑源代码时为您提供帮助。
浏览器会自动忽略注释。
CSS的注释如下所示：
例子：（将原先设置红色背景色的CSS样式注释掉）
CSS级联
网页的最终外观是不同的样式结合的结果。
通过样式的三个主要来源形成一个级联：
由页面的作者创建的CSS样式
浏览器的默认CSS样式
浏览页面的用户自定义CSS样式
CSS继承
继承是指属性在页面中流动的方式。
除非另有定义，子元素通常会采用父元素的特征。
例子：
元素选择器
元素选择器：就是对已选中的HTML元素符号设置CSS样式（例如：div、p、a、ul、li等元素符号）。
如下图所示，就是为div元素设置CSS样式的width和height属性。
参考代码片段：
class选择器
class选择器（类型选择器）：是最常见和易于理解的。
该选择器通过绑定HTML
后代选择器
后代选择器：选中某个父级下对应的所有子级，并针对该子级设置CSS样式。
•后代选择器设置的CSS样式不会影响到父级。
•父级和子级之间需要用空格隔开。
•后代选择器可以存在多层级父级，并不局限在单一父子级之间，层级越深所设置的CSS样式优先级越高。
参考代码片段：
子元素选择器
子元素选择器：子元素选择器与后代选择器较为类似。
相对于后代选择器，子元素选择器所涉及的范围会更小。
•后代选择器可以跨层级影响，而子元素选择器要求父元素和子元素一定为上下级关系，中间如果隔着其他元素则会失效。
•父元素和子元素之间需要用> (子结合符) 隔开。
参考代码片段：
相邻选择器
相邻选择器：选中对应元素的下一个兄弟元素。
•所涉及的相邻兄弟元素必须是该元素的同级元素。
•所涉及的相邻兄弟元素必须是相邻兄弟元素，中间若有其他元素隔开也将导致失效。
•元素A和对应的相邻兄弟元素之间需要用+隔开。
参考代码片段：
属性选择器
属性选择器：检索HTML页面中符合所设置的属性条件的元素。
属性选择器通过[ ]设置被选元素的属性条件。
如下图所示，将选择HTML页面中所有包含了alt属性的img元素并为其设置CSS样式。
参考代码片段：
设置页面上所有含有class属性并且属性值的词列表的某个词等于w3cschool的div元素。
(适用于针对设置了多个class名称的元素使用)
选择器分组
选择器分组：当需要多个元素同时使用同一套CSS样式时，可以使用选择器分组，这样可以避免为每个元素单独设置样式而照成不必要的冗余。
选择器分组通过, （逗号）将需要复用同一套样式的多个元素进行分隔。
参考代码片段：
font-family属性
font-family属性指定元素的字体。
有两种字体系列名称：
•字体系列：特定的字体系列（如Times New Roman或Arial）
•通用族：一组具有相似外观的字体族（如Serif或Monospace）
以下是不同字体样式的示例：
HTML代码：
font-family属性
font-family属性应该包含几个字体名称作为备选。
在CSS样式中指定Web字体时，请添加多个字体名称，以避免意外的行为。
如果客户端计算机出于某种原因没有您选择的字体时，则会尝试下一个字体。
指定通用字体系列是一个很好的做法，如果没有其他字体可用，让浏览器在通用系列中选择相似的字体。
如果浏览器不支持Arial字体，则会尝试下一个字体（Helvetica Neue，Helvetica）。
如果浏览器没有任何一个，它会尝试通用的sans-serif。
font-size属性
font-size属性
font-size属性用于设置字体的大小。
设置网页字体大小的其中之一方法是使用关键字。
例如xx-small, small, medium, large, larger, etc等。
HTML代码：
CSS代码：
您还可以使用像素(px)或相对尺寸单位(em)数值来操纵字体大小。
当您需要像素精度时，以像素值(px)设置字体大小是一个不错的选择，它可以让您完全控制文本大小。
em尺寸单位是设置字体大小的另一种方式（em是相对尺寸单位）。
它允许所有主流浏览器调整文本的大小。
如果您没有在页面上的任何位置设置字体大小，那么这是浏览器的默认大小，即16px。
要计算em大小，只需使用以下公式：em = px / 16，即1em = 16px。
例如：
font-style属性
font-style属性通常用于指定斜体文本。
HTML代码：
CSS代码：
font-style属性有三个值：normal，italic和oblique。
oblique非常类似于italic，但浏览器的支持较少。
HTML代码：
CSS代码：
font-weight属性
font-weight控制文本的粗细。
值可以设置为normal (默认)，bold，bolder，和lighter。
HTML代码：
CSS代码：
根据文本的厚度，也可以使用从100（细）到900（粗）的数字来定义字体粗细。
400与normal相同，700与bold相同。
HTML代码：
CSS代码：
font-variant属性
font-variant属性允许您将字体转换为所有小型大写字母。
值可以设置为normal，small-caps，和inherit。
HTML代码：
CSS代码：
color属性
color属性用于指定文本的颜色。
指定文本颜色的其中一种方法是使用颜色名称：如red, green, blue等
以下是更改字体颜色的示例。
HTML代码：
CSS代码：
定义color的其他方法是使用十六进制值和RGB。
十六进制形式是一个井号(#)，最多6个十六进制值(0-F)。
RGB定义了红色，绿色和蓝色的各个值。
在下面的示例中，我们使用十六进制值将标题颜色设置为蓝色，使用RGB形式将段落设置为红色。
HTML代码：
CSS代码：。