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)】混合而成。。

每个值域在0－255之间

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="data:images/pic7.jpg"/>设置文字是在中线位置</P>

</body>

</html>

　　

14 ,CSS 文字与文本的更多相关文章

  1. CSS文字，文本常用样式

    CSS文字,文本常用样式 字体属性 font-family 如果电脑没有第一个字体,就切换到下一个 body { font-family: Microsoft YaHei,Helvetica,Aria ...

  2. css文字与文本相关样式

    css文字属性定义文本的字体系列,大小,加粗,风格和变形   font-family          设置字体系列 font-size          设置字体的尺寸 font-style     ...

  3. CSS文字，文本，背景，盒模型等记录

    文字: font-family:" "; /*设置字体*/ font-size:6px;/*设置文字字号*/ color:red;/*设置文字颜色*/ font-weight:bo ...

  4. CSS Text（文本）

    CSS Text(文本) 一.文本颜色 color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0 ...

  5. 大众点评评论数据抓取 反爬虫措施有css文字映射和字体库反爬虫

    大众点评评论数据抓取  反爬虫措施有css文字映射和字体库反爬虫 大众点评的反爬虫手段有那些: 封ip,封账号,字体库反爬虫,css文字映射,图形滑动验证码 这个图片是滑动验证码,访问频率高的话,会出 ...

  6. 奇思妙想 CSS 文字动画

    之前有些过两篇关于字体的文章,是关于如何定义字体的: 你该知道的字体 font-family Web 字体 font-family 再探秘 本文将会和这篇 -- CSS 奇思妙想边框动画类似,讲一些文 ...

  7. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

  8. HTML: css 修飾文本和字體

    因爲這個我認爲不用記,所以關於css 修飾文本&字體的屬性只需要打開css手冊,找到(屬性 > 文本) & (屬性 > 字體)翻看即可. 關於字體屬性: Propertie ...

  9. html,CSS文字大小单位px、em、pt的关系换算

    html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...

随机推荐

  1. DX11 Without DirectX SDK--04 使用DirectX Tool Kit帮助开发

    回到 DirectX11--使用Windows SDK来进行开发 DirectX Tool Kit下载 DirectX Tool Kit是一个包含许多类的集合,用于为公共Windows平台编写Dire ...

  2. js算法初窥01（排序算法01-冒泡、选择、插入）

    排序,我想大家一定经历过或者正在经历着.或许你不懂算法,对排序算法一无所知,但是你一定用过一些第三方库的api来一键排序,那么,在你享受便捷的同时,你是否想过它的底层是如何实现的?这样的算法实现方式是 ...

  3. Java并发之乐观锁悲观锁

    定义 乐观锁和悲观锁这两种锁机制,是在多用户环境并发控制的两种所机制. 悲观锁:假定会发生并发冲突,屏蔽一切可能违反数据完整性的操作.[1]常见实现如独占锁.乐观锁:假设不会发生并发冲突,只在提交操作 ...

  4. Git请求合并说明

    如今公司很多新项目都采取merge request方式来进行code review.非阻塞上线部署,因此掌握merge request很有必要,步骤如下: 1.现在本地用创建一个本地分支, git c ...

  5. What is the best way to handle Invalid CSRF token found in the request when session times out in Spring security

    18.5.1 Timeouts One issue is that the expected CSRF token is stored in the HttpSession, so as soon a ...

  6. Git常用命令解说

    http://blog.csdn.net/hangyuanbiyesheng/article/details/6731629 1. Git概念  1.1. Git库中由三部分组成         Gi ...

  7. Latex 公式换行问题，（换行，等号对齐）

    1. 换行后等式对齐 \begin{equation} \begin{aligned} R(S_2)&= p_2\cdot S_2=\sum_{i\in \mathcal{I}^+(p_2)} ...

  8. Effective Java 第三版——43.方法引用优于lambda表达式

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  9. Grafana简单使用

    下载安装 Grafana也是用GO语言写的,无任何依赖,安装非常简单. 启动 sudo service grafana-server start 运行 直接访问:http://your_ip:3000 ...

  10. BZOJ_2724_[Violet 6]蒲公英_分块

    BZOJ_2724_[Violet 6]蒲公英_分块 Description Input 修正一下 l = (l_0 + x - 1) mod n + 1, r = (r_0 + x - 1) mod ...