css006 文本格式化

文本格式化:字体(font-family)、颜色(color)、字号(font-size)、

行距(line-height)、粗体(font-weight)、斜体(font-style)、

背景(background)、间距(word-spacing/letter-spacing)、

缩进(text-indent)、对齐(text-align)、大小写(text-transform)、

空白属性(white-space)、装饰(text-direction)

1、           使用字体:font-family

2、           使用web字体:?

@font-face{

fot-family:”league gothic”;

src:url(fpnts/league_gothic-webfont.ttf)

}

添加@font-face指令,告诉浏览器要使用什么字体,并告诉它要去哪里下载。最好放在样式表的最上方,方便开始就下载相应字体。

要考虑浏览器版本的兼容性(IE)

3、           Goole的web字体探秘:?

4、           如何给字体添加颜色:color

Color:#f00;

Color:red;

Color:rgb(255,0,0);

Color:rgba(255,0,0,0.5)  (最后面的.5表示透明度。透明度在0到1之间,0-不透明,1-完全透明)

5、           如何修改字号:font-size

单位:px/keyword/percentage/em

px:任意相应的数值+px;

Keyword:large/small/medium/xx-small/x-small/x-large/xx-large;

Percentage:相对于默认文本(16px)的百分比;

em:和percentage用法类似,也是相对于16px的百分比

6、           如何格式化词语和字母

斜体化:font-style:italic

粗体化:font-weight:bolid;

font-weight:normal;

大写化:text-transform:uppercase;

text-transform:lowercase;

text-transform:capitalize;(首字母大写)

text-transform:none;(不改变文本大小写)

小型大写字母:fong-variant:small-caps;

文本修饰:text-direction:underline;

text-direction:line-through;

text-direction:blink;

text-direction:underline line-through; (可以多个关键字一起使用,达到叠加的效果)

text-direction:none;

字母间距和字间距:letter-spacing:length;

word-spacing:length;

7、     如何给文本添加阴影:text-shadow(在IE9或更早的版本中无效)

text-shadow:3px 4px 5px #000;

(3px为水平偏移量:正在右,负在左;4px为垂直偏移量:正在下,负在上。 5px为模糊度,数值越大越模糊。 最后为阴影的颜色

8、  如何格式化整个段落:p{……}

调整行间距:line-height(设置行高)

可用px/em/percentage表示行间距

可以用数字直接表示行高,不需要单位,和百分比效果一样

如:line-height:1.5;表示行高为字号的1.5倍

行高属性是继承的,但是继承的不是百分比,而是算出来后的行高,所以谨慎使用

对齐文本:text-align:center;

text-align:left;

text-align:right;

text-align:justify;(两端都对齐)

首行缩进并去除边距:text-indent和margin

text-indent:px/em;   (em值是以当前字母大小问基准)

控制段落之间的距离:margin-top 和 margin-bottom

如果直接用font来定义文本的各种属性,最后两个属性必须是:font-size(或 font-size/line-height)和font-family 。其他的属性顺序随便。

问题:如果文本的设置没有font-size(或 font-size/line-height)和font-family呢?怎么办?其他的属性还是可以随意顺序吗

格式化段落的首字母和首行:first-letter 和 first-line

如:p first-letter{ color:red; }

9、   如何给列表定义样式:?

列表的类型:有序列表(<ol>) 和 无序列表(<ul>)

list-style-type:circle;(空心圆形)

list-style-type:squar;(实心方块)

list-style-type:disc;(实心原点)

list-style-type:decimal;(十进制)

list-style-type:decimal-leading-zero;(十进制前面置零)

list-style-type:upper-alpha; /lower-alpha(大写/小写  字母)

list-style-type:upper-roman;/lower-roman (大写/小写 罗马字母)

list-style-type:none; (没有任何装饰)

ntn-of-type选择器

如:li{list-style-type:square;}

li:nth-of-type(odd){list-style-type:circle;}

方块和圆,交替使用

list-style-type:none;

给项目符号和项目序号定位

list-style-t-position:outside;/inside;

图形项目符号

list-style-image:url(……);

注:黑色问号是指在看目录时,自己什么东西都想不起来,不知道那个标题是什么东西的。

红色字体的问号是看完书后还不懂的东西。

css006 文本格式化的更多相关文章

  1. HTML的文本格式化

    文本格式化:<html> <body> <b>This text is bold</b> <br /> <strong>This ...

  2. HTML 文本格式化实例

    一,文本格式化:此例演示如何在一个 HTML 文件中对文本进行格式化. <html> <body> <b>This text is bold</b> & ...

  3. HTML 文本格式化

    HTML 可定义很多供格式化输出的元素,比如粗体和斜体字. 下面有很多例子,您可以亲自试试: HTML 文本格式化实例 文本格式化 此例演示如何在一个 HTML 文件中对文本进行格式化 预格式文本 此 ...

  4. HTML文本格式化

    文本格式化标签: 标签 描述 <b> 定义粗体文本. <big> 定义大号字. <em> 定义着重文字. <i> 定义斜体字. <small> ...

  5. HTML学习(三)文本格式化

    HTML文本格式化HTML 可定义很多供格式化输出的元素,比如粗体和斜体字.例1:此例演示如何在一个 HTML 文件中对文本进行格式化<html> <body> <b&g ...

  6. HTML 文本格式化实例 超链接

     HTML 文本格式化实例 1.文本格式化 <b>加粗文字</b> <strong>加重语气</strong> <big>dingyi< ...

  7. 【回顾】html属性、标题、段落、文本格式化

    1.HTML 属性 HTML 元素可以设置属性 属性可以在元素中添加附加信息 属性一般描述于开始标签 属性总是以名称/值对的形式出现,比如:name="value". HTML 提 ...

  8. HTML文本格式化与HTML 超链接

    文本格式化<b>加粗文本</b><i>斜体文本</i><code>电脑自动输出</code><sub> 下标< ...

  9. CSS-背景-渐变-文本格式化

    1.背景 1.背景色 属性:background-color 取值:合法的颜色值 注意:背景颜色和背景图片默认都从边框位置处开始填充 2.背景图片 属性:background-image 取值:url ...

随机推荐

  1. 检测IE浏览器方法

    var isIE=function(){ var b=document.createElement("b"); b.innerHTML="<!--[if IE]&g ...

  2. 远程登录服务器执行cmd的Python脚本

    import paramiko,os,sys ip = raw_input("input ip address :>>>") password = raw_inp ...

  3. 求割点 poj 1523

    给你一些双向边 求有多少个割点 并输出去掉点这个点 去掉后有几个联通分量 Tarjan #include<stdio.h> #include<algorithm> #inclu ...

  4. 稻壳图文模块调不出html代码

    <?php doc_article('1',20,0,0,0,266,true,true,'id',0)?> 图文调用,倒数第三个参数,官方说是是否显示html代码,但是实测是没用的,不过 ...

  5. iOS 蓝牙开发(二)iOS 连接外设的代码实现(转)

    转载自:http://www.cocoachina.com/ios/20150917/13456.html 原文作者:刘彦玮 上一篇文章介 绍了蓝牙的技术知识,这里我们具体说明一下中心模式的应用场景. ...

  6. java代码运行linux shell操作

    1.Java调用shell  Java语言以其跨平台性和简易性而著称,在Java里面的lang包里(java.lang.Runtime)提供了一个允许Java程序与该程序所运行的环境交互的接口,这就是 ...

  7. js 对象 copy 对象

    function clone(myObj) { if (typeof (myObj) != 'object') return myObj; if (myObj == null) return myOb ...

  8. 【BZOJ-1031】字符加密Cipher 后缀数组

    1031: [JSOI2007]字符加密Cipher Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 5504  Solved: 2277[Submit ...

  9. sbin/hadoop-daemon.sh: line 165: /tmp/hadoop-hxsyl-journalnode.pid: Permission denied

    原来在logs下 该权限,还是不行,以root登陆可以了,但是其他节点是普通用户啊,还会出其他问题,仔细看是/tmp,就是linux根目录下的tmp,改他的权限吧,不知道重启会不会变化.

  10. oracle mini project

    oracle pl/sql mini project 1.解一元二次方程 (x2+4x+3=0) set serveroutput on declare a number ; b number; c ...