css⽂本样式（⼀）：css字体样式css字体样式
⽂字样式属性:
字体：font-family
⽂字⼤⼩：font-size
⽂字颜⾊：font-color
⽂字粗细：font-weight
⽂字样式：font-style
font-family字体属性：定义元素内⽂字以什么字体来显⽰。
语法：font-family:[字体1][，字体2][,...]
说明：·含空格字体名和中⽂，⽤英⽂引号(“  )括起
·多个字体，⽤英⽂逗号“，”隔开
·
引号嵌套，外使⽤双引号，内使⽤单引号
font-family属性值:  具体字体名，字体集
字体集:
·Serif
·Sans-serif
·Monospace
·Cursive
·Fantasy
<!DOCTYPE html>
<html>
<head>
<title>css⽂字样式</title>
<!-- ⽂字样式属性:
字体：font-family
⽂字⼤⼩：font-size
⽂字颜⾊：font-color
⽂字粗细：font-weight
⽂字样式：font-style
-->
<!-- font-family字体属性：定义元素内⽂字以什么字体来显⽰。
语法：font-family:[字体1][，字体2][,...]
说明：•含空格字体名和中⽂，⽤英⽂引号(“  )括起
•多个字体，⽤英⽂逗号“，”隔开
•引号嵌套，外使⽤双引号，内使⽤单引号
font-family属性值:  具体字体名，字体集
字体集:
•Serif
•Sans-serif
•Monospace
•Cursive
•Fantasy
-->
<style type="text/css">
h1{font-family: "宋体";}
p{font-family: "微软雅⿊","宋体","⿊体",sans-serif；}
/*设置多个字体，浏览器依次查，如果都没有，使⽤浏览器默认样式。*/
.in{font-size: 0.5in;}
.cm{font-size: 0.5cm;}
.mm{font-size: 0.5mm;}
.pt{font-size: 0.5pt;}
.pc{font-size: 0.5pc;}
p{font-size:50px;}
.larger{font-size: larger;}
.larger{font-size: larger;}
.
smaller{font-size: smaller;}
/*.em{font-size: 2em;}
.percent{font-size: 150%;}*/
#fontSize{font-size: 20px;}
.percent{font-size: 150%}
h1{color: red;}/*具体颜⾊名称*/
p{color: rgb(0,0,250);}/*数字：0--255；百分⽐0%--100%；*/
div{color: #008800;}/*⼗六进制：#开头，六位，0~F；*/
.normal{font-weight:normal; }/*默认值，相当于没有设置*/
.bolder{font-weight: bolder;}/*加粗显⽰*/
.bold{font-weight: bold;}/*更粗*/
.
lighter{font-weight:lighter; }/*更细*/
.f100{font-weight: 100;}
.f200{font-weight: 200;}
.f300{font-weight: 300;}
.f400{font-weight: 400;}
.f500{font-weight: 500;}
.f600{font-weight: 600;}
.f700{font-weight: 700;}
.f800{font-weight: 800;}
.f900{font-weight: 900;}
.normal{font-style: normal;}
.
italic{font-style: italic;}
.oblique{font-style: oblique;}
.fontVariant{font-variant: small-caps;
}
</style>
</head>
<body>
<h1> CSS层叠样式表（Cascading Style Sheets）</h1>
<p>css⽬前最新版本为css3，是能够真正做到⽹页表现与内容分离的⼀种样式设计语⾔。相对于传统的HTML的表现⽽⾔，css能够对⽹页中的对象的位置排版进⾏像 <div>css⽬前最新版本为css3，是能够真正做到⽹页表现与内容分离的⼀种样式设计语⾔。相对于传统的HTML的表现⽽⾔，css能够对⽹页中的对象的位置排版进⾏像<!-- font-size⽂字⼤⼩：定义元素内⽂字⼤⼩
语法：font-size: 绝对单位|相对单位
相对单位：
•px 像素⽂字⼤⼩px，受显⽰器分辨率影响
•em/%
-->
<!-- 绝对单位 -->
<p>默认字体⼤⼩</p>
<!-- 1、当不设置字体⼤⼩时，默认为浏览器默认值。
2、浏览器⼀般默认字体⼤⼩16px -->
<p class="in">⽂字⼤⼩是0.5in</p>
<p class="cm">⽂字⼤⼩是0.5cm</p>
<p class="mm">⽂字⼤⼩是5mm</p>
<p class="pt">⽂字⼤⼩是15pt</p>
<p class="pc">⽂字⼤⼩是2pc</p>
<!-- 相对单位 -->
<p>⽂字⼤⼩px，受显⽰器分辨率影响</p>
cssclass属性<p>⽂字⼤⼩<span class="larger">相对⽗元素的⽂字⼤⼩变⼤</span></p>
<p>⽂字⼤⼩<span class="smaller">相对⽗元素的⽂字⼤⼩变⼩</span></p>
<div id="fontSize">
<p>⽂字⼤⼩<span class="em">相对值em</span></p>
<p class="percent">⽂字⼤⼩<span class="percent">相对值%</span></p>
</div>
<!-- HTML中加粗 -->
<p>字体粗细<b>font-weight</b></p>
<p>字体粗细<STRONG>font-weight</STRONG></p>
<!-- 在css样式中加粗 -->
<pc class="normal">字体粗细font-weight:normal</p>
<pc class="normal">字体粗细font-weight:normal</p>
<pc class="bolder">字体粗细font-weight:bolder</p>
<pc class="bold">字体粗细font-weight:bold</p>
<pc class="lighter">字体粗细font-weight:lighter</p>
<!-- 数值 -->
<pc class="f100">字体粗细font-weight:100</p>
<pc class="f200">字体粗细font-weight:200</p>
<pc class="f300">字体粗细font-weight:300</p>
<pc class="f400">字体粗细font-weight:400</p>
<pc class="f500">字体粗细font-weight:500</p>
<pc class="f600">字体粗细font-weight:600</p>
<pc class="f700">字体粗细font-weight:700</p>
<pc class="f800">字体粗细font-weight:800</p>
<pc class="f900">字体粗细font-weight:900</p>
<!-- html中的斜体 -->
<p>正常的字体</p>
<p><em>斜体</em></p>
<p><i>倾斜</i></p>
<!-- css样式中斜体
font-style⽂字样式：为元素内⽂字设置样式;
语法：font-style: normal|italic|oblique
-->
<p class="normal">正常的字体</p>
<p class="italic">斜体</p>
<p class="oblique">倾斜</p>
<p> CSS层叠样式表（Cascading Style Sheets）</p>
<p class="fontVariant"> CSS层叠样式表（Cascading Style Sheets）</p> </body>
</html>
效果图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。