WEB前端第八課——CSS基礎

時間 2020-08-02

標籤 web 前端第八 css 基礎欄目 HTML 简体版

原文原文鏈接

1.CSS用於HTML文檔中元素樣式的定義，實現了將內容與表現分離，提升了代碼的可重用性和可維護性，文件後綴是「.css」css

2.HTML=結構層，CSS=表示層，JavaScript=行爲層html

3.CSS樣式表的引入方式：緩存

　　① 內聯方式（行內樣式），直接把CSS代碼用style屬性添加到開始標籤中，dom

　　　　語法：<p style="color:red;">紅色字體</p>工具

　　② 內部樣式表，直接把CSS代碼添加到頭部<head>的style標籤中，語法：字體

<head>
      <style type="text/css">
             p{color:red;}
      </style>
 </head>

　　③ 外部樣式表，將CSS代碼單獨存放於外部文件，HTML頁面調用fetch

　　　　語法：<link rel="stylesheet" herf=""/>，stylesheet的意思是樣式調用url

　　④ 導入式，相似於第③種方式spa

<head>
    <style>
        @import url(CSSfile.css);
    </style>
</head>

　　優先級：行內樣式>內部樣式＞外部樣式＞導入樣式翻譯

4.CSS加載方式Link和@import的區別，爲何不推薦使用@import

　　① @import只能用於加載CSS，link標籤除了能夠加載CSS外，還能夠作不少其餘事情，好比定義rel鏈接屬性等

　　② 加載順序差異，當一個頁面被加載的時候，link引用的CSS會同時被加載，而@import引用的CSS會等到頁面所有下載完再被加載，因此有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（不斷閃爍），網速慢的時候會比較明顯

　　③ 兼容性差異，@import在IE5以上才能識別，而link標籤無此問題

　　④ 使用dom控制樣式時的差異，當使用JavaScript控制dom去改變樣式的時候，只能用link標籤，由於dom操做元素的樣式時，用@import方式的樣式也許還未加載完成

　　⑤ 使用@import方式會增長HTTP請求，會影響加載速度

5.CSS規則和註釋

　　語法：color:red;

　　　　① css是以屬性和屬性值成對形式出現

　　　　② 屬性和屬性值之間使用冒號（:）鏈接

　　　　③ 多對屬性之間用分號（;）隔開

　　註釋：

① 註釋標識「/* css註釋語句 */」，HTML註釋標識「」

　　　　② 註釋快捷鍵，HTML和CSS都是「 Ctrl+/ 」（單行註釋/取消註釋）、「 Ctrl+shift+/ 」（多行註釋/取消註釋）

6.Chrome調試小技巧

　　① 調試工具打開快捷方式「 F12 或 Ctrl+shift+i 」

　　② 調試界面左邊爲HTML元素結構，右邊爲css樣式

　　③ 在右邊css樣式中能夠直接修改數值和顏色查看更改後的效果

7.CSS基礎選擇器

　　選擇器種類：

　　① 通用選擇器/全局選擇器，用「 * 」表示，可與任何元素匹配，經常使用語設置一些默認樣式，適用範圍最廣但優先級別最低

　　② 元素選擇器，用HTML文檔中的標籤元素表示，如 p、b、div、a、img、body等

　　③ 類選擇器，書寫格式「 . className{ } 」，一個頁面中class名稱能夠重複，要配合標籤的class屬性使用

　　④ ID選擇器，書寫格式「 #idName{ } 」，一個頁面中id相同的id名只能出現一次，要配合標籤的id屬性使用

　　⑤ 合併選擇器，書寫格式「選擇器1,選擇器2,…{ } 」，能夠提取共一樣式，減小重複代碼

　　優先級，ID選擇器＞類選擇器＞元素選擇器＞通用選擇器

　　一般須要重複使用的樣式不適用ID選擇器，由於ID屬性是惟一的

　　選擇器命名規範：

　　① 建議使用字符a-z、A-Z、0-九、鏈接符（-）、下劃線（_），不建議使用中文

　　② 類名不能以數字開頭

　　組合選擇器：

　　① 後代選擇器，以空格分隔，如 div p{ }

　　② 子元素選擇器，以大於號分隔，如 div>p{ }

　　③ 相鄰兄弟選擇器，以加號分隔，如 div+p{ }

　　④ 普通兄弟選擇器，以波浪號分隔，如 div~p{ }

8.CSS樣式表特性

　　繼承性，指被包含在內部的標籤能夠擁有外部標籤的樣式，好比text-*、font-*、line-* 等，但有些屬性不能繼承，如border、padding、margin等

　　層疊性，能夠定義多個樣式

　　優先級，樣式定義衝突時，按照不一樣樣式規則的優先級來應用樣式

9.link，用於在文檔與將要使用的外部資源之間創建聯繫，最多見的用途是連接樣式表，只能存在於<head>部分

　　語法樣式：<link rel="stylesheet" type="text/css" href="items.css">

　　經常使用屬性：

　　　　type，規定被連接文檔的MIME類型，只有設置了href屬性時才能使用該屬性，link標籤經常使用的MIME類型是「text/css」，它規定樣式表

　　　　href，定義被連接文檔的位置地址url

　　　　rel，定義當前文檔與被連接資源之間的關係（必需屬性）

10.rel屬性值

　　alternate，連接到該文檔的替代版本（好比打印頁、翻譯或鏡像）

　　author，連接到該文檔的做者

　　help，連接到幫助文檔

　　icon，導入表示該文檔的圖標

　　license，連接到該文檔的版權信息

　　next，表示該文檔是集合中的一部分，且集合中的下一個文檔是被引用的文檔

　　prefetch，規定應該對目標資源進行緩存

　　prev，表示該文檔是集合中的一部分，且集合中的上一個文檔是被引用的文檔

　　search，連接到針對文檔的搜索工具

　　stylesheet，要導入的樣式表的URL

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。