CSS美化网页

、字体样式

font-family：设置字体类型，可以同时声明多种字体，字体之间用英文逗号分隔开；
font-size：设置字体大小，常用单位为px，还有其他如in、cm、mm、pt、pc等单位；
font-style：设置字体风格，有三个属性值，分别是normal(标准字体样式)、italic(斜体字体样式)、oblique(倾斜字体样式)；
font-weight：设置字体粗细，属性值有normal(默认)、bold(粗体)、bolder(更粗)、lighter(更细)，还可以用100到900定义由细到粗的字体，400等同于normal，700等同于bold；
font：设置字体多种属性，可以同时设置；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
 p{
 font-family:"宋体";
 font-size:14px;
 }
 .p2{
 font-style:italic;
 }
 .p3{
 font-weight:bold;
 }
 .p4{
 font-family:"微软雅黑";
 }
 .p5{
 font-size:36px;
 }
 
</style>
</head>
<body>
 <p class="p1">这是第一行(样式为：标签选择器p中的样式)</p>
 <p class="p2">这是第二行(样式为：斜体)</p>
 <p class="p3">这是第三行(样式为：加粗)</p>
 <p class="p4">这是第四行(样式为：字体变成微软雅黑)</p>
 <p class="p5">这是第五行(样式为：字体大小为36px)</p>
</body>
</html>

效果演示图如下所示：

1.png

二、使用CSS排版网页文本

color：设置文本颜色，统一采用RGB格式，也就是“红绿蓝”三原色模式；
text-align：设置元素水平对齐方式，属性值有left(左对齐，默认)、right(右对齐)、center(中间对齐)、justify(两端对齐)；
line-height：设置文本行高，单位也是px，也可以不加单位，按倍数表示；
text-indent：设置文本的首行缩进，单位是em或者px，em是相对单位，表示长度相当于文本中字符的倍数，可以根据字体大小自适应改变；
text-decoration：设置文本的装饰，属性值有none(默认值)、underline(下划线)、overline(上划线)、line-through(删除线)；
vertical-align：垂直对齐，属性值有top、middle、bottom；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.div1{
 width:500px;
 border:1px solid #000;
 padding:20px; 
 }
.p1{
 color:red;
 } 
.p2{
 text-align:center;
 } 
.p3{
 line-height:50px;
 }
.p4{
 text-indent:2em;
 }
.p5{
 text-decoration:line-through;
 }
.div2{
 border:1px solid red;
 padding:20px;
 }
![18.png](https://upload-images.jianshu.io/upload_images/3260639-668445cd70292382.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
.img1{
 width:70px;
 height:70px;
 vertical-align:middle;
 } 
 
</style>
</head>
<body>
 <div class="div1">
 <p class="p1">这是第一行(样式为: 字体红色)</p>
 <p class="p2">这是第二行(样式为：居中)</p>
 <p class="p3">这是第三行(样式为：行高50px)</p>
 <p class="p4">这是第四行(样式为：缩进2em)</p>
 <p class="p5">这是第五行(样式为：删除线)</p>
 <div class="div2">
 <img src="tu24.png" alt="" class="img1">这是第六行(样式为：垂直居中)
 </div>
 
 </div>
</body>
</html>

演示效果如图所示：

2.png

三、cursor设置鼠标形状

cursor属性可以用来设置鼠标指针样式；
default：默认光标，箭头；
pointer：超链接的指针，手型；
wait：指示程序正在忙；
help：指示可用的帮助；
text：指示文本；
crosshair：鼠标呈现十字状；

四、背景样式

background-color：背景颜色；
background-image：背景图像；
background-repeat：背景平铺，属性值有repeat(沿水平和垂直方向平铺)、no-repeat(不平铺)、repeat-x(沿水平方向平铺)、repeat-y(沿水质方向平铺)；
background-position：设置图像在背景中的位置；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.div1{
 width:500px;
 height:500px;
 background-color:#F1CCE8; //背景颜色
 }
.div2{
 width:100%;
 height:100%;
 background-image:url(tu24.png); // 插入背景图片
 background-repeat:no-repeat; //图片不平铺
 background-position:center center; //背景图片垂直水平居中
 }
</style>
</head>
<body>
 <div class="div1">
 <div class="div2">
 </div>
 </div>
</body>
</html>

演示效果图：

3.png

五、列表样式

list-style-type：设置列表项标记的类型，属性值有none(无标记符号)、disc(实心圆，默认类型)、circle(空心圆)、square(实心正方形)、decimal(数字)；
list-style-image：使用图片替换列表的标记项；
list-style-position：设置在何处防止列表标记项，属性值有inside(放在文本以内)、outside(放在文本左侧)；
list-style：简写属性，可以设置所有列表属性；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.div1{
 width:300px;
 height:300px;
 background-color:#F1CCE8;
 padding:20px;
 }
.ul1{
 }
.ul2{
 list-style-type:none;
 }
.ul3{
 list-style-image:url(person02.png);
 list-style-position:outside;
 
 } 
</style>
</head>
<body>
 <div class="div1">
 <ul class="ul1">
 <li>第一队</li>
 <li>第一队</li>
 <li>第一队</li>
 </ul>
 <ul class="ul2">
 <li>第二队</li>
 <li>第二队</li>
 <li>第二队</li>
 </ul>
 <ul class="ul3">
 <li>第三队</li>
 <li>第三队</li>
 <li>第三队</li>
 </ul>
 </div>
</body>
</html>

演示效果图为：

4.png

行代码就能让我的网站支持代码高亮的工具库，也支持在 Vue 中使用，强烈推荐给大家。

关于 highlight.js

highlight.js 是一款使用 javascript 开发代码高亮工具库，能够让网页上的代码显示接近我们使用的代码编辑器的高亮样式，从而看起来更舒服，增强阅读体验。

highlight.js 官网截图

highlight.js 的技术特性

支持 197 种开发语言和 246 种代码高亮风格主题
自动开发语言检测
支持多种语言混合代码同时高亮
支持任何 HTML 标签，不仅仅是<code></code>
支持 npm 安装，可以在 Vue.js 中使用，也可以在 node.js 中使用
无依赖，与任何 js 框架兼容

为什么要用 highlight.js

常来我网站的小伙伴都知道，我的文章有一个栏目是“前端”，主要推荐一下实用的前端开源项目或者组件库，写技术类文章免不了要贴代码，我的网站基于 wordpress 搭建，此前我一直为找一款代码高亮插件烦恼，但大部分 wordpress 的代码高亮插件实在太臃肿，出来的样式又不美观。大多时候是截图 VsCode 的代码界面，甚至还用过 codepng 这个工具把代码变成图片贴在文章中，但这样做是美观了，但也存在2个问题：

长代码图片会缩放，阅读体验不佳
搜索引擎不识别，对 SEO 不友好

最终还是找到了 highlight.js，完美解决了上面两个问题，而且配置简单，演示漂亮，定制化简单。不禁感叹：用纯前端的方式解决，才能精准控制，实现想要的效果。

使用教程：为我的网站添加代码高亮功能

下面以我的网站为例，展示将 highlight.js 用在我们的项目上的方法。首先 highlight.js 支持 cdn 直接引入和 npm 安装，我的网站基于 wordpress 开发，主题是自己写的，最简单的方式就是在文章详情页引入 highlight.js 和主题样式。

虽然 highlight.js 支持几百种开发语言，但为了将文件体积控制到最小，我们可以点击“get version”按钮进入下载页，通过勾选我们需要的开发语言，来构建最轻量的库。

下载解压后得到的 highlight.min.js 就是我们需要引入的 js 文件，主题样式都在 style 文件夹里，我选择了一个比较喜欢的 monokai-sublime 主题，只需要一个 css 文件，然后初始化：

<link href="/js/monokai-sublime.min.css" rel="stylesheet" type="text/css">
<script src="/js/highlight.min.js"></script>
<script>
   hljs.highlightAll();
</script>

就是这么简单，highlight.js 会自动将文章中的 <pre><code></code></pre> 代码进行识别语言并且高亮，一切就是这么简单。为了让代码显示更协调，我用几行 css 控制了包裹层的圆角以及背景颜色、字体大小等，大功告成。

.post-content .wp-block-code {
   background-color: #F6F8FF;
   border-radius: 16px;
   font-size: 16px;
   padding: 22px 22px 22px 38px;
   margin-top: 22px;
   margin-bottom: 22px;
}
.post-content .wp-block-code {
   line-height: 1.2;
   font-size: 15px;
   padding: 10px;
   overflow-x: auto;
}
.post-content .wp-block-code code {
   position: relative;
   background-color: unset !important;
}

当然 highlight.js 也能在 vue 项目中使用，安装：

npm install highlight.js

在 Vue 文件中使用 (通过 highlight.js for Vue ) ：

<div id="app">
  <!-- bind to a data property named `code` -->
  <highlightjs autodetect :code="code" />
  <!-- or literal code works as well -->
  <highlightjs language='javascript' code="var x = 5;" />
</div>

需要注意的是，自动识别模式不能100%识别出代码所属的开发语言，识别错误会导致高亮样式是别的语言的，这种情况下可以手动设置一个 class 来精准控制：

<pre><code class="language-javascript">...</code></pre>

官网提供了详尽的使用文档，有更多代码高亮的控制，但不足的就是 highlight.js 没有显示行号的支持，需要通过再引入一个库 (highlightjs-line-numbers.js) 或者自行实现。

免费开源说明

highlight.js 是一款基于 BSD 许可证开源的 javascript 工具库，任何个人和公司都可以免费下载用于自己的项目，包括商用项目。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点击查看本次分享的网址以及代码高亮效果

highlight.js - 让网页上的代码高亮美化的免费开源工具库｜那些免费的砖

现在我们的表单现在我们的表单实现了跨浏览器一致的功能表现，同时也有一些基本样式。你我都知道，使用 CSS3可以让表单的样式更美观。目前我们的表单样式如下：

#redemption {
width: 100%;
font-family: 'ColaborateThinRegular';
font-weight: 400;
}
#redemption hgroup {
argin-bottom: 20px;
}
#redemption div {
width: 100%;
margin-bottom: 15px;
float: left;
}
#redemption span#range {
float: left;
font-size: 3em;
width: 100%;
color: red;
clear: both; text-align: center;
}
#howYouRateThis,#yearOfCrime {
text-align: right;
}
#redemption legend {
font-style: italic;
color: #434242;
font-size: 0.8em;
margin-bottom: 20px;
float: left; width: 100%;
}
#redemption fieldset {
border: 1px dotted #cccccc;
padding: 2%;
margin-bottom: 20px;
}
#redemption label {
width: 40%;
float: left;
}
#redemption input {
height: 20px;
font-size: 1em;
width: 40%;
float: right;
}
#redemption textarea {
height: 60px;
font-size: 1em;
width: 40%;
float: right;
}
#redemption input#submit {
text-decoration: none;
height: 34px;
font: 1.25em /* 36px ÷ 16 */ 'BebasNeueRegular'; background-color: #b01c20;
border-radius: 8px;
color: white; float: right;
margin-bottom: 10px;
background: linear-gradient(top, rgb(241,92,96) 0%, rgb(17 100%);
margin-top: 10px;
box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);
text-shadow: 0px 1px black;
border: 1px solid #bfbfbf;
.polyfill-important .input-range,.polyfill-important .step-c float: right;
}
.polyfill-important .step-controls {
margin-right: -20px!important;
}

唯一需要注意的地方是最后两个样式只在相应的补丁脚本运行时发挥作用。首先，我想让每个 fieldset都有一个好看的渐变背景，相互之间稍微空开一点。下面是针对 fieldset修改后的 CSS 代码：

#redemption fieldset {
border: 1px dotted #cccccc;
padding: 2%;
margin-bottom: 20px;
background: #ffffff; background: linear-gradient(top, #ffffff 77%,#f2f2f2 100%);
border-radius: 4px;
box-shadow: 2px 2px 5px hsla(0, 0%, 16.6667%, 0.3);
}

除了圆角和背景渐变效果，我们唯一需要做的就是再加一点点阴影（box-shadow）效果。此处省略了各种 CSS3声明的浏览器私有前缀。

在整个示例代码中，你可以看到我混用了各种颜色值。有时是 red 这样的颜色名称，有时是十六进制、RBG 或 HSL。在支持这些颜色模式的浏览器中这样做没什么问题。但在实际生产环境中，为保持一致性和兼容性，你应该只选用一两种颜色模式。

CSS3不仅能轻松地追加样式，而且也能有效阻止在不需要的元素上追加样式。

在线咨询

上一篇：网页的结构是什么？网页结构示例
下一篇：很酷的CSS Loading动画，让网页加载更有趣

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商