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;}.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>

效果图：

css文本样式（一）：css字体样式相关推荐

css字体 text,css文本样式text、字体样式font
文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...
CSS——美化网页元素（字体样式，文本样式，阴影，超链接伪类，列表，背景，渐变）
为什么要美化网页 1.1有效的传递页面信息 1.2美化网页,页面漂亮,才能吸引用户 1.3凸显页面主题 1.4提高用户体验 span标签:重点要突出的字使用该标签套起来 <!DOCTYPE ht ...
css学习11：font-style字体样式
css使用 font-style 属性设置文本的风格 p { font-style: italic; } 这里说下常用到的属性值: 属性值作 ...
CSS中颜色、样式规则（字体样式、列表样式、表格样式）
目录一.CSS中的颜色设置 1.颜色的表示方式 (1).颜色名 (2).rgb函数 (3).十六进制表示(HEX 值) 二.CSS样式规则 1.字体规则 (1) font-family属性:字体 ...
【转帖】详解CSS网页布局中默认字体样式
转自:http://www.52css.com/article.asp?id=1174 浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如果直接利用默认样 ...
css学习（第一天）（css基础选择器，css字体属性，css文本属性，css引入方式）
CSS第一天 1.css简介 1.1 html的局限性 1.2 css-网页的美容师 1.3 css语法规范 1.4 css代码风格 1.4.1 样式格式书写 1.4.2 样式大小写风格 1.4.3 ...
odoo14 文本字段动态设置字体样式颜色 decoration
简介:我们在实际开发中有时候需要突出显示字段文本,让使用者可以更直观的查看数据,就需要对字段文本进行字体及颜色的设置.odoo自带了一套简单的设置颜色的方式,可以设置列表中某个字段的颜色字体. (一) ...
彻底变换PreferenceFragment样式和全局设置字体样式的解决方案
一.PreferenceFragment样式修改新样式直接上图,原样式为白色样式,即为PreferenceFragment的默认样式: ① 白底黑字:② SwitchPreference开关默认为 ...
android开发EditText的Hint字体默认样式和下载字体样式的适配问题。
紧张了几个月的奋战终于项目到了测试阶段,真是泪奔啊,回想这段时间的地狱生涯真实汗颜啊~~~~,闲话不多说了,看图说话, 问题,相信这张图片已经展示的很明白了下来在来看看我的代码 <EditT ...
oracle修改字体样式,电脑系统字体样式怎么改？电脑字体样式更改方法
喜欢个性化电脑的朋友经常会想更改系统的一些默认设置,比如窗口动画.主题.或字体等等,总之要让我们看电脑时比较符合自己的口味才行哈,这里说明下如何更改系统显示的字体,包括图标下面的字体.右键菜单等等. ...

css文本样式（一）：css字体样式

css文本样式（一）：css字体样式相关推荐

最新文章

热门文章