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. swagger-codegen自动生成代码工具的介绍与使用

    一.Swagger Codegen简介 Swagger Codegen是一个开源的代码生成器,根据Swagger定义的RESTful API可以自动建立服务端和客户端的连接.Swagger Codeg ...

  2. spring-cloud-sleuth+zipkin追踪服务实现(三)

    1.前言 在上一篇spring-cloud-sleuth+zipkin追踪服务实现(二)中我们讲述了利用mq的方式发送数据,存储在mysql,实际生产过程中调用数据量非常的大,mysql存储并不是很好 ...

  3. capwap学习笔记——初识capwap（三）（转）

    2.5.6 CAPWAP状态机详解 2.5.6.1 Start to Idle 这个状态变迁发生在设备初始化完成. ¢  WTP: 开启CAPWAP状态机. ¢  AC:  开启CAPWAP状态机. ...

  4. 网络模型 - 每天5分钟玩转 Docker 容器技术（169）

    本节我们讨论 Kubernetes 网络这个重要主题. Kubernetes 作为编排引擎管理着分布在不同节点上的容器和 Pod.Pod.Service.外部组件之间需要一种可靠的方式找到彼此并进行通 ...

  5. 如何在js或者jquery中操作EL表达式的一个List集合

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先说明此篇博客看明白了可以干嘛: 就是在js或者jquery中操作一个EL表达式的一个list集合或者复杂类型 ...

  6. knockout + easyui = koeasyui

    在做后台管理系统的同学们,是否有用easyui的经历.虽然现在都是vue.ng.react的时代.但easyui(也就是jquery为基础)还是占有一席之地的.因为他对后端开发者太友好了,太熟悉不过了 ...

  7. python爬虫的重定向问题

    重定向问题 在使用python爬虫的过程中难免会遇到很多301,302的问题.他们出现时,很大程度的影响到我们的爬虫速度和信息的准确性.下面针对不同的模块给出不同的解决方案. 使用requests模块 ...

  8. Python cmp() 函数

    描述 cmp(x,y) 函数用于比较2个对象,如果 x < y 返回 -1, 如果 x == y 返回 0, 如果 x > y 返回 1. 语法 以下是 cmp() 方法的语法:cmp( ...

  9. maven国内镜像（国内oschina的maven服务器关了）

    Maven是官方的库在国外,连下载速度很慢.国内oschina的maven服务器很早之前就关了.今天发现阿里云的一个中央仓库,亲测可用. 找到E:\maven\apache-maven-3.5.2\c ...

  10. SDOI2017 BZOJ 4820 硬币游戏 解题报告

    写在前面 此题网上存在大量题解,但本人太菜了,看了不下10篇均未看懂,只好自己冷静分析了.本文将严格详细地论述算法(避免一切意会和玄学),因此可能会比其它题解更加理论化一些,希望能对像我一样看了其它题 ...