CSS格式化排版

最新推荐文章于 2025-05-13 17:44:16 发布

大华1号

最新推荐文章于 2025-05-13 17:44:16 发布

阅读量462

点赞数

分类专栏： web基础文章标签： css 格式化

web基础专栏收录该内容

15 篇文章

订阅专栏

Ⅰ.文字排版
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;
}

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