css文本样式（一）：css字体样式
用户投稿 学习笔记 11阅读
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;} .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能够对网页中的对象的位置排版进行像素级的精确控制，几乎支持所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。css能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</p><div>css目前最新版本为css3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统的HTML的表现而言，css能够对网页中的对象的位置排版进行像素级的精确控制，几乎支持所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。css能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</div><!-- 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> <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="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>效果图：
标签：