層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化

那css網頁HTML有什麼關係?

通俗的講你可以把HTML比作是組成網頁的框架，而css則是裝飾美化網頁的工具。一個沒有任何css的網頁是排版混亂，雜亂無章的，沒有美感的。

本文下來主要介紹下如何在網頁中使用css，以及css包括哪些知識點，具體的css知識點會在以後逐一介紹，一篇文章很難講完。

回顧下HTML基礎

css是作用於HTML標籤上的，如果你還不是很熟悉HTML，請先學習HTML的知識，再來學習css。

一個HTML標籤如下結構：

標籤（Tag）—— 元素名稱，如a, div
屬性（Attribute）—— 元素屬性，如href
值（Value）—— 屬性值
元素（Element）—— HTML標記中所有的東西：屬性、值和內容。

網頁中如何使用css

網頁中使用css一般有三種，行內樣式，內部樣式表及外部樣式表。

1、行內樣式

在html標籤的style屬性中寫css代碼，這樣的方式就是行內樣式。行內樣式有個缺點就是對於頁面中相同的元素必須每個元素都寫一遍css代碼，很不方便，所以這時需要使用內部樣式表或外部樣式表。

如下示例：

<html>
  <head>
                <title>行內樣式</title>
  </head>
<body>
    <p style="color:red;font-size:14px;">hello world!</p>
  </body>
  </html>

2、內部樣式表

使用<style></style> 標籤之間寫css代碼，就是內部樣式表。內部樣式表缺點就是當頁面複雜的時候，不利於組織代碼，把不同模塊功能的css代碼組織成不同的css文件，這樣更加清晰，便於組織維護代碼。

如下示例：

<html>
  <head>
  <title>內部樣式表</title>
        <style type="text/css>
                        h1{
                color: red;
        }
                                p{
                color: bule;
        }
    </style>
  </head>
<body>
        <h1>標題1</h1>
    <p>hello world!</p>
  </body>
  </html>

3、外部樣式表

使用<link href="css文件路徑"> 的方式引入外部css 文件，這就是外部樣式表，除此之外，在一個css 文件中還可以使用 @import "css文件路徑" 引入另外一個css文件。

示例1：

<html>
  <head>
  <title>內部樣式表</title>
  <link href="style.css" rel="stylesheet">
  </head>
  <body>
        <h1>標題1</h1>
    <p>hello world!</p>
  </body>
  </html>

style.css

h1{
  color: red;
}
p{
  color: bule;
}

示例2：

如下代碼，在style.css 中使用@import引入一個home.css文件，

style.css

@import "home.css"
h1{
  color: red;
}
p{
  color: bule;
}

home.css

div{
        color: #ff00ff;
}
p{
  color: red;
}

這裡特別注意下，home.css 裡面的css 選擇器如果和style.css 的一樣，那麼style.css 的樣式效果會覆蓋home.css 的效果，比如這裡p標籤最終顯示為藍色，而不是紅色。

css語法

css有三個部分組成：選擇器、屬性和值。

選擇器 —— 原來查詢選擇HTML標籤的
屬性 —— 設置HTML元素的各種樣式
值 —— 應用的樣式值

例子：

#id{
        color: red;
}
p{
        color: green;
}
.head{
        color: blue;
  font-size: 12px;
}

如上#id,p,.head 就是選擇器，大括號裡面冒號前面是屬性，冒號後面是值，每行以分號結束。

css知識點

1、css 選擇器

2 、css優先級

3、css 間距 —— margin、padding

4、css 盒子模型

5、css字體和文本

6、css連結樣式

7、css背景 —— background

8、css邊框和圓角

9、css顯示 —— display

10、css定位 —— position

11、css浮動 —— float

12、css布局：flex彈性盒子

13、css響應式：媒體查詢

14、css 過渡和動畫

15、css漸變和陰影

16、css網格

最後

css （層疊樣式表）它有很多屬性，但是平時只會用到一小部分，學習css不能死記硬背一大堆屬性語法，這樣沒有多大用處，只需要掌握基本的概念和常用語法，基本上就夠用了，對於其它的屬性在用的時候再查詢文檔就可以了。

關於css詳細內容，後面會按知識點介紹，感謝關注。

下一篇：前端入門——css 選擇器

前端入門——css 樣式表簡介

回顧下HTML基礎

網頁中如何使用css

css語法

css知識點

最後