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小時內與您取得聯系。

整合營銷服務商