CSS格式化排版

来源：互联网发布：js阻止超链接跳转编辑：程序博客网时间：2024/05/26 20:21

Ⅰ.文字排版
1.字体，字号，颜色

body{    font-family:"宋体";    font-size:12px;    color:#666}

2.粗体

p span{font-weight:bold;}

3.斜体

p a{font-style:italic;}<p>哈哈哈<a>你好，骚年！</a>啊哈哈</p>

4.下划线

p a{text-decoration:underline;}<p>哈哈哈<a>你好，骚年！</a>啊哈哈</p>

5.删除线

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>删除样式</title><style type="text/css">.oldPrice{    text-decoration:line-through;}</style></head><body><p>原价：<span class="oldPrice">300</span>元 现价：230 元</p> </body></html>

Ⅱ.段落排版
1.缩进

p{text-indent:2em;}<p>中国是世界四大文明古国之一，有着悠久的历史，距今约5000年前，以中原地区为中心开始出现聚落组织进而成国家和朝代，后历经多次演变和朝代更迭，大一统的朝代有夏、商、周、秦、汉、晋、隋、唐、元、明、清等。</p><p>中原王朝历史上不断与北方游牧民族交往、征战，众多民族融合成为中华民族。20世纪初辛亥革命后，中国的君主政体退出历史舞台，取而代之的是共和政体。</p>

中文文字中的段前习惯空两个文字的空白，而2em的意思就是文字的2倍大小
2.行间距（行高）

p{line-height:2em;}

3.字间距
中文，字母间距：

h1{letter-spacing:50px;}<h1>你好</h1>

单词间距：

h1{ word-spacing:50px;}...<h1>hello world</h1>

4.对齐（left,center,right）

div{    text-align:left;}

为块状元素中的文本、图片设置居中/左/右样式

0 0