CSS的概述

時間 2019-11-05

標籤 css 概述欄目 CSS 简体版

原文原文鏈接

1.1 CSS的概述
1.1.1 CSS是什麼css

CSS 一般稱爲CSS樣式或層疊樣式表，主要用於設置HTML頁面中的文本內容（字體、大小、對其方式等）、圖片的外形（高寬、邊框樣式、邊距等）以及版面的佈局等外觀顯示樣式。html

CSS能夠是HTML頁面更好看，CSS色系的搭配可讓用戶更舒服，CSS+DIV佈局更佳靈活，更容易繪製出用戶須要的結構。編程

1.1.2 CSS名詞解釋瀏覽器

CSS (Cascading Style Sheets) ：指層疊樣式表ide

樣式：給HTML標籤添加須要顯示的效果。佈局

層疊：使用不一樣的添加方式，給同一個HTML標籤添加樣式，最後全部的樣式都疊加到一塊兒，共同做用於該標籤。學習

1.1.3 CSS樣式規則字體

使用HTML時，須要聽從必定的規範。CSS亦如此，要想熟練的使用CSS對網頁進行修飾，首先須要瞭解CSS樣式規則。具體格式以下網站

選擇器{屬性1:屬性值;屬性2:屬性值;..}設計

在上面的樣式規則中，「選擇器」用於指定CSS樣式做用的HTML對象，花括號內是對該對象設置的具體樣式。屬性和屬性值以鍵值對方式出現，使用英文冒號「:」分隔。多個屬性之間使用英文分號「;」分隔。例如：

<style>

h2{

color:red;

font-size:100px;

}

</style>

初學者在書寫CSS樣式時，除了要遵循CSS樣式規則，還必須注意CSS代碼結構中的幾個特色，具體以下：

l CSS樣式「選擇器」嚴格區分大小寫，「屬性」和「屬性值」不區分大小寫。

l 多個屬性之間必須用英文狀態下的分號隔開，最後一個屬性後的分號能夠省略，可是，爲了便於增長新樣式最好保留。

l 若是屬性的值由多個單詞組成且中間包含空格，則必須爲這個屬性值加上英文狀態下的引號。例如：
p { font-family:"Times New Roman";}
l 在編寫CSS代碼時，爲了提升代碼的可讀性，一般會加上CSS註釋，例如：

/* 這是CSS註釋文本,此文本不會顯示在瀏覽器窗口中  */

l 在CSS代碼中空格是不被解析的，花括號以及分號先後的空格無關緊要。所以，可使用空格鍵、Tab鍵、回車鍵等對樣式代碼進行排版，即所謂的格式化CSS代碼，這樣能夠提升代碼的可讀性。例如：
h1{ font-size:20px; color:red; }
和

h1{

font-size:20px;                    /* 定義字體大小屬性  */

color:red;                          /* 定義顏色屬性  */

}

l 上述兩段代碼所呈現的效果是同樣的，可是，第二種書寫方式的可讀性更高。須要注意的是，屬性的值和單位之間是不容許出現空格的，不然瀏覽器解析時會出錯。例如，下面這行代碼就是不正確的。

h1{ font-size:20 px; }                /* 20和單位px之間有空格 */

1.1.4 引入CSS樣式

CSS使用很是靈活，及能夠嵌入在HTML文檔中，也能夠是一個單獨的文件，若是是單獨的文件，則必須以.css爲擴展名。CSS和HTML的結合3種經常使用方式：

1) 行內樣式

行內樣式，是經過標籤的style屬性來設置元素的樣式。

<!--方式1：行內樣式

color : 表示字體顏色

font-size : 表示字體大小

-->

<a style="color: #f00; font-size: 30px;">傳智播客</a>

行內樣式經過標籤的屬性來控制樣式，這樣並無作到結構與表現（HTML展現結構、CSS顯示效果）相分離，因此通常不多使用。學習階段有時候爲了快速編程，偶有使用。

2) 內部樣式

內部樣式又稱爲內嵌式，是將CSS代碼集中卸載HTML文檔的<head>頭部標籤體中，而且使用<style>標籤訂義。

給當前html文件中的多個標籤設置樣式。

在html的<head>標籤中使用<style>標籤來定義CSS

<!--方式2：內部樣式

 

background-color ： 表示背景色

 

-->

 

<style type="text/css">

 

body{

 

background-color: #ddd;

 

}

 

</style>

內嵌式CSS樣式只對其所在的HTML頁面有效，能夠對多處標籤統一設置樣式，所以，僅設計一個頁面時，使用內嵌式是個不錯的選擇。但若是是一個網站，不建議使用這種方式，由於他不能充分發揮CSS代碼的重用優點。

3) 外部樣式

外部樣式又稱爲鏈入式，是將全部的樣式放在一個或多個以.css爲擴展名的外部樣式表文件中，經過<link>標籤將樣式鏈接到HTML文檔中。

<!--方式3：外部樣式

 

rel="stylesheet" ,固定值，表示樣式表

 

type="text/css"，固定值，表示css類型

 

href ，表示css文件位置

 

font-family 表示使用的字體系列，多個字體使用逗號分隔。例如：「字體1,字體2,字體3」，此時優先使用「字體1」，若是「字體1」系統不存在，再使用「字體2」，以此類推。

 

-->

 

<link rel="stylesheet" type="text/css" href="css/demo00.css"/>

鏈入式最大的好處是同一個CSS樣式表能夠被不一樣的HTML頁面連接使用，同時一個HTML頁面也能夠經過多個<link />標記連接多個CSS樣式表。

1. CSS的概述
2. Css概述
3. CSS概述
4. Web—CSS概述
5. 4-css概述
6. 【BootStrap】概述 & CSS
7. Study 5 —— CSS概述
8. CSS樣式概述
9. CSS定位概述
10. CSS 定位體系概述
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• Java Agent入門實戰（二）-Instrumentation源碼概述
• 漫談MySQL的鎖機制

相關標籤/搜索

每日一句

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