好程序員web前端分享CSS基礎篇

時間 2019-11-17

標籤程序員 web 前端分享 css 基礎欄目快樂工作简体版

原文原文鏈接

學習目標

· 一、CSS簡介javascript

· 二、CSS語法css

· 三、樣式的建立java

· 四、兩種引入外部樣式表的區別瀏覽器

· 五、樣式表的優先級和做用域dom

· 六、CSS選擇器學習

· 七、選擇器的權重url

· 八、浮動屬性的簡單應用cdn

· 九、HTML、CSS註釋對象

1、

CSS簡介

css:層疊樣式表英文全名：cascading style sheets
,WEB標準中的表現標準語言,表現標準語言在網頁中主要對網頁信息的顯示進行控制，簡單說就是如何修飾網頁信息的顯示樣式。
blog

目前推薦遵循的是

W3C發佈的CSS3.0.

用來修飾

XHTML或者XML等樣式文件的計算機語言。
1998年5月21日由w3C正式推出的css2.0

2、

CSS語法

CSS語法：選擇符{屬性：屬性值；屬性：屬性值；}

選擇符表示要定義樣式的對象，能夠是元素自己，也能夠是一類元素或者制定名稱的元素

屬性：屬性是指定元素所具備的屬性，它是

css的核心，css2共有150多個屬性

屬性值：屬性值包括法定屬性值及常見的數值加單位，如

25px，或顏色值等。

說明：

1）每一個CSS樣式由兩部分組成，即選擇符和聲明，聲明又分爲屬性和屬性值；
2）屬性必須放在花括號中，屬性與屬性值用冒號鏈接。
3）每條聲明用分號結束。
4）當一個屬性有多個屬性值的時候，屬性值與屬性值不分前後順序。
5）在書寫樣式過程當中，空格、換行等操做不影響屬性顯示。

3、樣式的建立

(內部樣式表外部樣式表內聯樣式表)

A、內部樣式表

語法：

注：使用

style標記建立樣式時，最好將該標記寫在<head></head>;

B、外部樣式

*方法一：外部樣式表的建立：
<link rel="stylesheet" type="text/css" href="目標文件的路徑及文件名全稱" />

說明：

使用

link元素導入外部樣式表時，需將該元素寫在文檔頭部，即<head>與</head>之間。
rel（relation）：用於定義文檔關聯，表示關聯樣式表；
type：定義文檔類型；

*方法二：外部樣式表的導入
<style type="text/css">
@import url(目標文件的路徑及文件名全稱);
</style>

注：

@和import之間沒有空格 url和小括號之間也沒有空格；必須結尾以分號結束；

C、內聯樣式（行間樣式，行內樣式，嵌入式樣式、內嵌樣式）

語法：

<標籤 style="屬性：屬性值;屬性:屬性值;"></標籤>

例：

4、兩種引入外部樣式表

link和import之間的區別

擴展知識點：

link和import導入外部樣式的區別：

差異

1：本質的差異：link屬於XHTML標籤，而@import徹底是CSS提供的一種方式。

差異

2：加載順序的差異：

當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），

link引用的CSS會同時被加載，而@import引用的CSS會等到頁面所有被下載完再被加載。因此有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍），網速慢的時候還挺明顯。

差異

3：兼容性的差異：@import是CSS2.1提出的，因此老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標籤無此問題。

差異

4：使用dom(document object model文檔對象模型 )控制樣式時的差異

：當使用

javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的.

5、樣式表的優先級

A、內聯樣式表的優先級別最高
B、內部樣式表與外部樣式表的優先級和書寫的順序有關，後書寫的優先級別高。

C、做用域：內聯樣式的做用域最小，只能應用於當前元素，其次是內部樣式表，能應用於當前HTML文件，最後是外部樣式表，能應用於全部連接的HTML文件。

相關標籤/搜索

每日一句

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