9 个电商商家必须掌握的 CSS 代码

尽管 CSS 代码 比 HTML 更复杂，但它为商家在网站格式和样式方面提供了更高的灵活性。只需掌握层叠样式表的基础知识，就能拓展文本与图片的呈现方式，例如嵌入照片、添加链接或按钮、制作表格等。

习惯使用 HTML 的用户可能会觉得 CSS 较为复杂，但这种复杂性正是实现网站精致外观的关键。

以下是九个可增强大多数网站的实用 CSS 代码示例：

1. 嵌入图片

使用以下代码嵌入背景图片，并根据需求调整参数：

<html>
<style type="text/css">
body {
    background-image:url('http://photography.naturestocklibrary.com/orca-stock-photo.jpg');
    background-repeat:no-repeat;
    background-position:center;
    margin-right:200px;
}
</style>
</html>

• background-image:url：指定要嵌入的图片路径（本例为虎鲸库存照片）。
• background-repeat:no-repeat：设置图片仅显示一次，不重复平铺。
• background-position:center：将图片置于网页正中央；也可设为“right top”（右上）或“left bottom”（左下）等值来调整位置。
• margin-right:200px：设定图片右侧与其他对象的间距为 200 像素。

2. 在文本周围添加边框

通过以下代码为特定段落添加边框：

<html>
<style type="text/css">
p.one {
    border-style:solid;
    border-width:5px;
}
</style>
</head>
<body>
<p class="one">Sample border one.</p>
</body>
</html>

• 本例创建了一个厚度为 5 像素的边框。
• p.one 引用底部的 <p class="one"> 标签，在该标签内输入需加边框的文本。
• border-style:solid：定义边框类型为实线；还可选择 dotted（点状）、double（双线）、inset（内嵌）、hidden（隐藏）或 dashed（虚线）等样式。
• border-width:5px：设定边框粗细为 5 像素，可根据需要调整数值。

此代码创建的边框效果如下：

3. 制作图片画廊

使用以下代码构建基础图片画廊：

<html>
<style type="text/css">
div.img {
    margin: 2px;
    border: 1px solid blue;
    height: auto;
    width: auto;
    float: left;
    text-align: center;
}
div.img img {
    display: inline;
    margin: 3px;
    border: 1px solid blue;
}
div.img a:hover img {
    border: 1px solid yellow;
}
div.desc {
    text-align: center;
    font-weight: normal;
    width: 120px;
    margin: 2px;
}
</style>
</head>
<body>
<div class="img">
    <a target="_blank" href="http://photography.naturestocklibrary.com/orca-stock-photo.jpg"><img src="http://photography.naturestocklibrary.com/orca-stock-photo.jpg" alt="Orca" width="110" height="90" /></a>
    <div class="desc">Orca Test Text</div>
</div>
<div class="img">
    <a target="_blank" href="http://fc08.deviantart.net/fs44/f/2009/059/f/a/BG_Green_Woods_by_Eirian_stock.jpg"><img src="http://fc08.deviantart.net/fs44/f/2009/059/f/a/BG_Green_Woods_by_Eirian_stock.jpg" alt="Trees" width="110" height="90" /></a>
    <div class="desc">Trees Test Text</div>
</div>
<div class="img">
    <a target="_blank" href="http://www.freestockimages.org/wp-content/uploads/2009/05/free-stock-images-stone-texture-10.jpg"><img src="http://www.freestockimages.org/wp-content/uploads/2009/05/free-stock-images-stone-texture-10.jpg" alt="Rocks" width="110" height="90" /></a>
    <div class="desc">Rocks Test Text</div>
</div>
</body>
</html>

• div.img 属性：定义画廊容器的边距、蓝色边框、自适应宽高、左浮动及居中对齐。
• div.img img：设定图片本身的边距及蓝色边框样式。
• div.img a:hover img：实现鼠标悬停时，图片边框变为 1 像素宽的实心黄色。
• div.desc：控制图片下方描述文字的居中、字重、宽度及边距。
• 后续部分为单张图片的代码结构，包含超链接与图片标签，复制并替换图片路径及名称即可扩展画廊。

此代码创建的基本画廊效果如下：

4. 更改背景颜色

使用以下代码快速调整网页背景色：

<html>
<style type="text/css">
body {
    background-color:pink;
}
</style>
</html>

• background-color:pink：将整个页面背景设为粉色。支持使用英文颜色名称或十六进制颜色代码，但英文名称可选范围较窄。

5. 更改文本链接样式

CSS 允许动态设置链接在不同状态下的颜色：

<html>
<style type="text/css">
a:link {color:red;} /* 未访问链接 */
a:visited {color:blue;} /* 已访问链接 */
a:hover {color:yellow;} /* 鼠标悬停 */
a:active {color:purple;} /* 点击瞬间 */
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">Link Text</a></b></p>
</body>
</html>

• a:link：未访问链接显示为红色。
• a:visited：已访问链接显示为蓝色。
• a:hover：鼠标悬停时显示为黄色。
• a:active：点击激活瞬间显示为紫色。

6. 文本格式化

通过 CSS 轻松实现普通、斜体和粗体样式：

<html>
<style type="text/css">
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.bold {font-weight:bold;}
</style>
<body>
<p class="normal">Normal style text.</p>
<p class="italic">Italic style text.</p>
<p class="bold">Bold style text.</p>
</body>
</html>

• p.normal：对应 class="normal" 的段落，显示为无样式的纯文本。
• p.italic 与 p.bold：分别对应斜体和粗体段落，逻辑同上。

各种文本样式示例如下：

7. 制作列表

CSS 支持多种项目符号形状、字母或数字样式：

<html>
<style type="text/css">
ul.a {list-style-type:disc;}
ul.b {list-style-type:circle;}
ul.c {list-style-type:square;}
ol.d {list-style-type:decimal;}
</style>
<body>
<ul class="a">
    <li>Example 1</li>
    <li>Exampe 2</li>
    <li>Example 3</li>
</ul>
<ul class="b">
    <li>Example 1</li>
    <li>Example 2</li>
    <li>Example 3</li>
</ul>
<ul class="c">
    <li>Example 1</li>
    <li>Example 2</li>
    <li>Example 3</li>
</ul>
<ol class="d">
    <li>Example 1</li>
    <li>Example 2</li>
    <li>Example 3</li>
</ol>
</body>
</html>

• ul.a/b/c：分别定义无序列表使用 disc（实心圆）、circle（空心圆）、square（实心方块）作为项目符号。
• ol.d：定义有序列表使用 decimal（十进制数字）编号。
• ul class 或 ol class 关联对应的样式规则，<li> 标签标识列表项。

各种项目符号样式示例如下：

8. 制作导航栏

以下代码创建一个包含四个水平按钮的导航栏：

<html>
<style type="text/css">
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
li {
    float:left;
}
a:link,a:visited {
    display:block;
    width:120px;
    font-weight:bold;
    color:white;
    background-color:red;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}
a:hover,a:active {
    background-color:pink;
}
</style>
<body>
<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#products">Products</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>
</body>
</html>

• 导航栏默认为红色背景、白色文字，鼠标悬停时变为粉色。
• margin:0; padding:0;：消除元素间距，使按钮紧密排列形成连续色块。
• float:left;：使列表项左对齐水平排列。
• a:link/a:visited：定义按钮为 120px 宽的块级元素，加粗大写，去除下划线，内边距 4px。
• a:hover/a:active：定义交互状态下的背景色变化。
• 最后部分为导航文本，可根据实际需求修改。

完成后的导航栏效果如下：

9. 制作网页的可打印版本

使用 @media 查询区分屏幕显示与打印输出的样式：

<html>
@media screen {
    p.bodyText {font-family:arial;}
}
@media print {
    p.bodyText {font-family:times;}
}
@media screen, print {
    p.bodyText {font-size:12pt}
}
</html>

• @media screen：屏幕浏览时使用 Arial 字体。
• @media print：打印时使用 Times 字体。
• @media screen, print：两种场景下字号均保持 12pt。