您的位置：首页 > Web前端 > CSS

CSS格式化排版

2015-09-15 16:47 507 查看
Ⅰ.文字排版

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;
}


为块状元素中的文本、图片设置居中/左/右样式
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 格式化
相关文章推荐
新的分享
章节导航