14 ,CSS 文字与文本

1.CSS 中长度与颜色

2.CSS 中的文字属性

3.CSS 中的文本属性

14.1 CSS 中长度与颜色

长度单位 说明

in 英寸

cm 公分

mm 公里

cm 以目前字体高度为单位

ex 以小写字母高度为单位(大部分不支持)

pt 1pt/72英寸

pc 1pc/12pt

px 像素(推荐使用)

颜色单位: 说明

十六进制 如:color:#ff0000

颜色名称 如:color:red

三原色单位 如:rgb(255,0,0)

一般最常用的是十六进制,三原色单位的原理【红(r,绿(g,(b)】混合而成。。

每个值域在0255之间

14.2 CSS 中的文字属性

属性名称 属性值 说明

font-style normal 正常显示

italic 斜体

font-variant normal 正常显示

small-caps 将英文大小写字母写调为同宽

font-weight normal 正常显示

bold 粗体

font-size 像素 字体大小

百分比 字体大小

font-family 字体名称 设置字体名称

font属性简化的使用方法:

font:是否斜体 是否同宽 是否粗体 大小 字体名称

例如:font:italic bold 200 隶书;

14.3 CSS中的文本属性

属性名称 属性值 说明

color 十六进制 颜色

英文名称 颜色

三原色单位 颜色

letter-spacing normal 正常显示

长度 文本间隔

word-spacing normal 正常显示

数字 单词间距

white-space normal 文本自动处理换行

pre 换行和空白受保护

nowrap 强制在同一行显示

text-align left 文字靠左

right 文字靠右

center 文字靠中

text-decoration none 正常显示

underline 加上下划线

overline 加顶线

line-through 加删除线

text-indent 长度 首行缩进

百分比 同上

line-height 像素 行高

数字/百分比 行高

text-transform none 正常显示可以包含大,小字符

capitalize 字符串第一个字符大写

uppercase 设置大写字符

lowercase 设置小写字符

vertical-align sub 设置文字为下标。

super 设置文字为上标。

top 元件往上端靠齐。

middle 设置文字是在中线位置。

bottom 元件往下端靠齐。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

ul li{
	font-style:italic;	
	}

	p{
		font-weight:bold;
		color: #D82326;
		
}
	span{
		font-size:26px;
		font-family:Consolas, Andale Mono, Lucida Console, Lucida Sans Typewriter, Monaco, Courier New, monospace
}
	ol{
		font:italic bold 200 隶书;
	}
	h1{
		letter-spacing: 20px;
	}
	h2{
		word-spacing:30px;
	}
	h3{
		white-space:pre;
	}
	h4{
		text-align: center;
	}
	h5{
		text-decoration:line-through;
}
	img{
		vertical-align:-50px;
	}
	</style>
</head>

<body>
<pre>
	1 CSS 中长度与颜色
长度单位 说明
in 英寸
cm 公分
mm 公里
cm 以目前字体高度为单位
ex 以小写字母高度为单位(大部分不支持)
pt 1pt/72英寸
pc 1pc/12pt
px 像素(推荐使用)
颜色单位: 说明
十六进制 如:color:#ff0000
颜色名称 如:color:red
三原色单位 如:rgb(255,0,0)
一般最常用的是十六进制,三原色单位的原理【红(r),绿(g),蓝(b)】混合而成。。
每个值域在0-255之间
</pre>
<ul>
	<li>italic 斜体</li>
	<li>italic 斜体</li>
	
</ul>

<p>bold 粗体,color,颜色</p>
<span>font-size 像素 百分比 字体大小,font-family,字体名称 设置字体名称</span>
<ol>
	<li>font属性简化的使用方法:是否斜体 是否同宽 是否粗体 大小 字体名称</li>
	<li>font属性简化的使用方法:是否斜体 是否同宽 是否粗体 大小 字体名称</li>
</ol>
<h1>letter-spacing字间距,文本间隔</h1>
<h2>单词间距,汉字无效,zhe shi yige laoshi </h2>
<h3>pre 换行和空白受保护  nowrap 强制在同一行显示,
pre 换行和空白受保护  nowrap 强制在同一行显示
pre 换行和空白受保护  nowrap 强制在同一行显示
</h3>
<h4>文本居中</h4>
<h5> none 正常显示
underline 加上下划线
overline 加顶线
line-through 加删除线</h5>
<p>text-indent 长度 首行缩进
百分比 同上</p>
<p>line-height 像素 行高数字/百分比 行高</p>
<Pre>text-transform none 正常显示可以包含大,小字符
					capitalize 字符串第一个字符大写
					uppercase 设置大写字符
					lowercase 设置小写字符
 vertical-align sub 设置文字为下标。
					super 设置文字为上标。
					top 元件往上端靠齐。
					middle 设置文字是在中线位置。
					bottom 元件往下端靠齐。</Pre>
<P><img src="images/pic7.jpg"/>设置文字是在中线位置</P>

</body>
</html>

  

猜你喜欢

转载自www.cnblogs.com/liu-zhijun/p/10628124.html