CSS這樣處理HTML列表，三個簡單的CSS屬性，美化你的頁面

望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。

【技術等級】初級

【承接文章】《CSS實現圖片精靈，原來要這樣使用背景屬性，前端設計師必備知識》

本文小海老師為大家講解利用CSS處理HTML中的列表，也就是CSS有關列表的屬性。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。

列表屬性是指可以對HTML中的<ol></ol>標記對和<ul></ul>標記對進行樣式設置的屬性。這一組CSS屬性包括以下三個：

list-style-type
list-style-image
list-style-position

一、設置列表的項目符號或編號：

CSS技術使用 list-style-type 設置列表的項目符號或編號

在HTML中，主要操作的列表有兩種：

無序列表：用<ul></ul>標記對實現。無序列表項中左側的標識我們把它稱為“項目符號”。
有序列表：用<ol></ol>標記對實現。有序列表項中左側的標識我們把它稱為“編號”。

有序列表與無序列表

CSS技術利用 list-style-type 屬性來設置HTML列表左側標識的樣式。并且在CSS看來，<ul></ul>和<ol></ol>兩個標記對不再進行有序和無序的區分，使用list-style-type屬性設置為哪個取值，就是對應的哪種列表。

該屬性包括以下幾種取值：

none，列表項無標記。
disc，默認值，標記為實心圓。
circle，標記為空心圓。
square，標記為實心方塊。
decimal，標記為數字。
decimal-leading-zero，標記為0開頭的數字（01、02、03 等）。
lower-roman，標記為小寫羅馬數字（i、ii、iii等）。
upper-roman，標記為大寫羅馬數字（I、II、III等）。
lower-alpha，標記為小寫英文字母（a、b、c等）。
upper-alpha，標記為大寫英文字母（A、B、C等）。

二、使用自定義圖片來代替項目符號和編號：

CSS技術利用 list-style-image 屬性來設置列表左側的標識為指定的圖片

CSS技術利用 list-style-image 屬性來設置列表左側的標識為指定的圖片。

格式：list-style-image:url(Image_URL);

例如：ul{list-style-image:url(../images/01.jpg);}

三、設置列表中列表項的縮進：

CSS技術利用 list-style-position 屬性來設置列表項的縮進

CSS技術利用 list-style-position 屬性來設置列表項的縮進。

該屬性包括以下兩種取值：

loutside，默認值，列表項不縮進。
linside，列表項縮進。

這個屬性使用在列表項<li></li>標記對上的，不能用在<ol></ol>或<ul></ul>之上。

文章預告

下一篇文章中，小海老師會繼續為大家向下講解CSS屬性，下一次我們講解CSS中最為重要的一組屬性：定位屬性。這是CSS中非常常用的一組屬性，希望大家千萬不要錯過！

小海教材

如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。

面幾篇文章我們聊了如何解析HTML標簽，這篇文章我們聊一下解析CSS的模塊——css。

安裝

npm install css

parse方法使用

css模塊提供了一個解析css內容的方法parse，它返回css內容的抽象語法樹（AST）。

圖1

圖1執行結果如下：

圖2

parse方法還可以傳入第二個參數，這個參數是個對象，它有兩個屬性，其中一個屬性是source，代表css文件的路徑，如果參數中存在source屬性，在parse方法返回的抽象語法樹結果中或者在解析報錯時的信息中都會帶上文件的路徑。另外一個屬性是silent，如果設置了這個屬性，即使在解析中出錯，parse方法也不會拋出錯誤。

圖3

stringify方法使用

stringify方法的第一個參數是css內容的抽象語法樹對象，返回的結果是css內容，此方法的作用和parse正好相反，如下圖所示。

圖4

stringify方法的第二個參數也是一個對象，對象屬性有indent、compress、sourcemap、inputSourcemaps。

indent代表輸出的css內容的縮進，默認是兩個空格。利用這個屬性就可以做一個css格式化工具。

圖5

compress表示css的內容是否需要被壓縮，壓縮時會移除所有的空格和注釋。

圖6

sourcemap用于生成css的sourceMap。

圖7

圖7紅色區域中sourceMap的json串的原理是什么？不了解的同學可以參考作者之前的一篇文章《深度解析前端代碼打包過程中是如何生成sourceMap的？》，我相信一定難不倒聰明的你，這里就不再熬述了。

inputSourcemaps表示在生成sourcemap時可以讀取已存在的sourcemap引用，默認是true。因為有些打包好的css文件中已經存在了sourcemap的引用，所以在解析時這個模塊會自動讀取map信息。

抽象語法樹AST

在作者看來，AST是前端皇冠上的明珠，就像發動機之于飛機，石油之于工業。有了AST，前端的頁面可以在瀏覽器上渲染出來，有了AST，就可以自由的開發自己的框架。它即很重要，卻也很難掌握，所以這個知識點放在以后講。

總結

本文主要分享了一個css的解析模塊，那它到底有什么用呢？我們平常用的語法校驗、格式校驗、sourcemap等都和它相關，所以如果需要開發一個和css相關的node工具，就可以考慮使用這個模塊。

喜歡我的文章就關注我吧，有問題可以發表評論，我們一起學習，共同成長！

1. 基本要求

前端界面顯示的速度一般要求是：60fps

2. 根據要求 1s / 60 = 16.67ms 即：處理一個界面的時間，除了瀏覽器自己需要的時間，開發者能使用的時間大概10ms

10ms中處理的流程為：

javascript > style > layout > paint > composite

如果JS的操作影響到了界面樣式的變化，則有上面的處理流程

如果style的操作影響到布局，則會進入layout，反之亦然；style改了transform屬性，在blink和edge瀏覽器里面不需要layout和paint

3. 減少渲染堵塞

避免head標簽JS堵塞

異步加載JS: HTML5 的script 屬性 defer

JS寫在body后面

Tips: 可能有時候JS庫，還沒加載完就要執行了，可能會報錯

減少 head 中的 CSS 資源

CSS 會影響到 layout ，寫在Body里面會界面閃爍，但寫在Head里面如果太多會影響渲染

不要寫太多base64，雖然很方便，但會改變文件大小

如果CSS文件沒有達到三位數的大小，可以直接寫到Html界面中，因為如果使用外鏈樣式，則可能會花費更多時間，如DNS解析，建立鏈接，下載等

優化圖片，使用響應式圖片，圖片的srcset 屬性，會有兼容問題

使用picture按需加載，需要寫在HTML中，如果使用JS來調用，則無效

<source srcset='baner_w1000.jpg' media="(min-width:801px)"> # source 還有其它的優化屬性，不過會有兼容問題: type='image/webp'

<img src='baner_w800.jpg' alt=''> # picture 必需有 img 標簽，只有img標簽才會觸發onload事件; picture 與 source 都不觸發 layout

</picture>

判斷瀏覽器是否支持：

var supportSrcset = 'srcset' in document.createElement('img');

var surportPicture = 'HTMLPictureElement' in window;

延遲加載

<img data-src="photo_w350.jpg" src="about:blank" alt=""> # src 寫為此值不會報錯，也對瀏覽器友好

</picture>

監聽Scroll事件

showImage(leftSpace = 500){

var scrollTop = $window.scrollTop(), $containers = this.$imgContainers, scrollPosition = $window.scrollTop() + $window.height();

for(var i = 0; i < $containers.length; i++){

//如果快要滑到圖片的位置了

var $container = $containers.eq(i);

if($container.offset().top - scrollPosition < leftSpace) {

this.ensureImgSrc($container);

}

ensureImgSrc($container) {

var $source = $container.find("source");

if($source.length && !$source.attr("srcset")){

$source.attr("srcset", $source.data("srcset"));

}

var $img = $container.find("img:not(.loading)");

if($img.length && $img.attr("src").indexOf("http://") < 0){

$img.attr("src", $img.data("src"));

this.shownCount++;

}

init(){

//初始化

var leftSpace = 0;

this.showImage(leftSpace);

//滑動

$window.on("scroll", this, this.throttleShow);

}

ensureImgSrc($container){

//如果全部顯示，off掉window.scroll

if(this.shownCount >= this.allCount){

$window.off("scroll", this.throttleShow);

}

指定圖片尺寸，避免 reflow

4. 壓縮與緩存

作用

第一個是把200變成304，避免資源重新傳輸，

第二個是讓瀏覽器直接從緩存取，連http請求都不用了，這樣對于第二次訪問頁面是極為有利的。

開啟壓縮 gzip

server {

gzip on;

gzip_types text/plain application/javascript application/x-javascript text/html text/css text/xml text/javascript

}

緩存 Cache-Control

location ~* \.(jpg|gif|png|webp) {

expires 30d;

}

location ~* \.(css|js) {

expires 1d;

}

此方法會在返回的請求響應頭中添加 Cache-Control: max-age=604800 ，且 max-age 的優先級會大于 last-modified

開啟 nginx last-modified 字段，在響應頭中： last-modified 字段接收nginx的數據，在請求頭中： If-Modified-Since 字段返回給nginx

這個辦法得查手冊

使用etag，在響應頭中是： Etag 字段，在請求頭中會記錄在 If-None-Match 字段

server {

etag on;

}

5. 其它優化

DNS預讀取

HTML優化

刪除注釋、縮進，除了 pre 或 code 這樣的標簽不能刪除，其它的都可以

代碼優化

例如說html別嵌套太多層，否則加重頁面layout的壓力

CSS的選擇器別寫太復雜，不然匹配的計算量會比較大

JS的濫用閉包，閉包會加深作用域鏈，加長變量查找的時間

6. 利用HTML5或CSS3

代替圖片或 LocalStorage、 Offline Storage

在線咨詢

上一篇：Bootstrap 縮略圖
下一篇：通過MQTT將ESP32-CAM圖像流傳輸到多個瀏覽器

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商