1. 定义文字颜色

在 css 样式中，多使用 color属性定义颜色；

例子1 ：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>3-1</title><style type="text/css">body {color: blue;}h1{color: #ff6600;}p.c2{color: hsl(0, 0%, 0%);}p.c3{color: hsla(250, 50%, 50%, 1);}p.c4{color: rgba(255, 10, 45, 0.5);}</style></head><body><h1>标题1的效果</h1><p>这是一段普通的段落效果。显示的默认颜色为蓝色。</p><p class="c1">这段落定义了 class="c1"。该段落中的文本颜色是蓝色。</p><p class="c2">此处使用了 HSL 函数，构建颜色。</p><p class="c3">此处使用了 HSLA 函数，构建颜色。</p><p class="c3">此处使用了 RGBA 函数，构建颜色。</p></body>
</html>

# 2. 定义文字的字体
font-family 属性用于指定文字字体类型，即在网页中展示字体不同的形状；
语法如下所示：

{font-family:name}
{font-family:cursice | fantasy | monspace | serif | sans-serif}

font-family有两种声明方式；第一种为使用 name字体名称，按优先顺序排列，以逗号隔开，若字体名称包含空格，则应使用引号括起；
第二种声明方式使用所列出的字体序列名称，若使用 fantasy序列，将提供默认字体序列；
CSS 3 中常使用使用第一种声明方式；

例子2：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">p{font-family: 宋体;font-size: 40px;}</style></head><body><p align=center>不积跬步无以至千里。</p></body>
</html>

注意： 在字体显示时，若指定一种特殊字体类型，而在浏览器或操作系统中该类型不能正确获取，可通过 font-faily预设多种字体类型；
font-faily属性能预置多个供页面使用的字体类型，其中每种字形之间使用逗号隔开；
若前的字体类型不能正确显示，则系统自动选择后一种字体类型，依此类推；

p{font-family:华文楷体，华文彩云，黑体，仿宋;
}

3. 定义文字的字号

在 CSS 3 中，常使用 font-size设置文字大小；
语法格式如下：

{font-size:数值 | inherit | xx-small | x-small | small | medium | large | x-large | xx-large | largr | smller | length}

例子 3：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>字体大小</title></head><body><div style="font-size: 50px;">上级标记大小<p style="font-size: small;">小字体效果</p><p style="font-size: larger;">大字体效果</p><p style="font-size: x-small;">小字体效果</p><p style="font-size: x-large;">大字体效果</p><p style="font-size: 80%;">标记效果</p><p style="font-size:25pt ;">标记效果</p></div></body>
</html>

CSS 3之文字样式相关推荐

css设置流光文字样式
css设置流光文字样式主要属性:-webkit-background-clip:text 表示元素的背景保留在前景内容中(文字) 和其形状大小相同 -webkit-text-fill-color:t ...
HTML5+CSS网页设计——文字样式属性
1.font-size : 用于设置文字的字号 <!doctype html> <html> <head> <meta charset="utf-8 ...
CSS a控制超链接文字样式
超链接的代码 <a href="http://www.divcss5.com/" target="_blank" title="关于div cs ...
CSS/Compass修改placeholder的文字样式
在HTML5中,<input>与<textarea>标签支持placeholder属性,用来定义无任何输入时的默认文字. 可以通过CSS修改placeholder的文字样式: ...
字体系列之文字样式(CSS、HTML)
字体系列之文字样式(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta char ...
css常用样式（文字样式、边框样式、背景样式）
CSS常用样式 CSS常用文字样式 color: brown; /*文字颜色*/ /*color: #333333;这样的也可以,这种颜色的表示方法是RGB的方式,没两位数表示一种颜色的度数, 一般情 ...
php css下划线,css如何添加文字下划线样式？（代码详解）
css如何添加文字下划线样式?本篇文章就给大家介绍css添加文字下划线样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来了解一下css添加文字下划线样式的方法有哪 ...
前端学习：用css设置文字样式
转自:微点阅读 http://www.weidianyuedu.com/ 相信大家已经基本了解了前端最基本的一些规则了: html搭建结构,承载内容 css则可以利用选择器,来为相应的html标签设置 ...
html怎么设置下划线形状,科技常识：CSS如何给文字添加下划线样式
今天小编跟大家讲解下有关CSS如何给文字添加下划线样式 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS如何给文字添加下划线样式的相关资料,希望小伙伴们看了有所帮助. 在css中可以 ...

CSS 3之文字样式

文字样式

1. 定义文字颜色

3. 定义文字的字号

CSS 3之文字样式相关推荐

最新文章

热门文章