CSS入門知識匯總

fasss 發布于2019-04-23 11:41 / 3080人閱讀

摘要：而三大部分又是由來編寫組成的結構樣式行為的概念及作用是層疊樣式表的縮寫，簡稱樣式表。提高網站在百度或中的排名內容能被更廣泛的設備所訪問。

1.CSS認識

在談論CSS的概念之前，我們先說一說web標準的目的——其在于創建一個統一的用于web表現層的技術標準，以便通過不同瀏覽器或終端設備向最終用戶展示信息內容。一個網頁的呈現是由三部分組成：結構（Structure）、表現（Presentation）和行為（Behavior）。

而三大部分又是由html、css、js來編寫組成的：

結構	HTML
樣式	CSS
行為	JS

1.1 CSS的概念及作用

CSS是(Cascading Style Sheets)層疊樣式表的縮寫，簡稱樣式表。

網頁設計者使用CSS可以定義元素的樣式，包括字體，顏色及其它的高級樣式。

采用CSS樣式的優點：

1. 提高頁面瀏覽速度。使用CSS方法，比傳統的web設計方法至少節約50%以上的大小。

2. 縮短改版時間，將表現與內容相分離。只要簡單的修改幾個CSS文件就可以重新設計一個有成千上萬個網頁。

3.降低網站流量的費用。帶寬要求降低(代碼更簡潔),成本更低

4.聯想容易被搜尋引擎搜索到。提高網站在百度或google中的排名

5.內容能被更廣泛的設備所訪問。包括屏幕閱讀機，手持設備等。

1.2 CSS的三種基本寫法

語法簡單說明如下：

單個樣式：

樣式屬性名：樣式屬性值?;?比如?color:red;

多個樣式：

樣式屬性名：樣式屬性值?;?樣式屬性名：樣式屬性值?;

比如?color:red;font-size:120px;

注意：

1.屬性值不需要使用引號括起來，除非屬性值是由多個單詞組成，如：font-family: "sans serif"；

2.有的屬性可以指定多個屬性值，多個屬性值間以“,”隔開；

3.當定義多個值時，瀏覽器按照從前向后順序選擇屬性值。如果第1個值有效，則嘗試使用，如果第1個無效，則使用第2個，依次類推。

①寫法一：在標簽中的style屬性中直接寫樣式?

1 
2 <div style="color: red;font-weight: bold;font-style: italic;font-family:楷體;">疊層樣式表div>

②寫法二：在style標簽內書寫樣式，標簽可以放在頁面的任何位置；推薦寫在head、body中

 1 <head>
 2 <meta charset="UTF-8">
 3 <title>Insert title heretitle>
 4 
 5 <style type="text/css">
 6 div {  
 7     color: red;
 8     font-weight: bold;
 9     font-style: italic;
10     font-family:楷體;
11 }
12 style>
13 head>
14 <body>
15 <div>疊層樣式表div>
16 body>

③寫法三：外部引入樣式，實際項目中應用最多，使用link標簽進行.css文件外部引用

 1 <head>
 2 <meta charset="UTF-8">
 3 <title>Insert title heretitle>
 4 
 5 <link rel="stylesheet" href="./css/02-css.css">
 6 head>
 7 <body>
 8 
 9 <div>疊層樣式表div>
10 body>

.css文件中寫入選擇器對應的樣式列表，如下：

1 @CHARSET "UTF-8";
2 div {
3     color: red;
4     font-weight: bold;
5     font-style: italic;
6     font-family:楷體;
7 }

?2.CSS選擇器

2.1基本選擇器

CSS基本選擇器比較簡單，主要分為：通用選擇器、標簽選擇器、類選擇器、ID選擇器四大類。直接上代碼看一下就懂了：

 1 <head>
 2 <meta charset="UTF-8">
 3 <title>Insert title heretitle>
 4 <style type="text/css">
 5 /* 1.通用選擇器
 6 *{  
 7     color: red;
 8     font-weight: bold;
 9     font-style: italic;
10     font-family:楷體;
11 } */
12 /* 2.標簽選擇器
13 span{  
14     color: red;
15     font-weight: bold;
16     font-style: italic;
17     font-family:楷體;
18 } */
19 /* 3.類選擇器
20  .spanstyle{
21     color: red;
22     font-weight: bold;
23     font-style: italic;
24     font-family:楷體;
25 } */
26 /* 4.ID選擇器
27 #id1{
28     color: red;
29     font-weight: bold;
30     font-style: italic;
31     font-family:楷體;
32 } */
33 style>
34 head>
35 <body>
36 
41 <div>div樣式div>
42 <span class="spanstyle">span樣式span>
43 <a id="id1">a超鏈接樣式a>
44 body>

2.2其他選擇器

CSS其他選擇器主要有：多元素選擇器、后代選擇器、子元素選擇器、相鄰元素選擇器、屬性選擇器這五大類，具體還是看代碼：

 1 <head>
 2 <meta charset="UTF-8">
 3 <title>Insert title heretitle>
 4 <style type="text/css">
 5 /*1.多元素選擇器 
 6 div,span,a{
 7     color: red;
 8     font-weight: bold;
 9     font-style: italic;
10     font-family:楷體;
11 } */
12 /*2.后代選擇器
13  #intro p{
14     color: red;
15     font-weight: bold;
16     font-style: italic;
17     font-family:楷體;
18 }*/
19 /*3.子元素選擇器
20  #intro > p > span {
21     color: red;
22     font-weight: bold;
23     font-style: italic;
24     font-family:楷體;
25 }*/
26 /*4.相鄰元素選擇器
27 span + p {
28     color: red;
29     font-weight: bold;
30     font-style: italic;
31     font-family:楷體;
32 }*/
33 /*5.屬性選擇器
34 a[target]{
35     color: red;
36     font-weight: bold;
37     font-style: italic;
38     font-family:楷體;
39 }
40 a[target=_blank]{
41     color: red;
42     font-weight: bold;
43     font-style: italic;
44     font-family:楷體;
45 } */
46 style>
47 head>
48 <body>
49 
55 <div>div樣式div>
56 <span class="spanstyle">span樣式span>
57 <p>p1標簽樣式p>
58 <a id="id1">a超鏈接樣式a>
59 <div id="intro">
60     <p>
61         我是大p<br>
62         <span>我是大p里面的spanspan>
63     p>
64     <p>我是小pp>
65 div>
66 <span class="spanstyle">span樣式span>
67 <p>p2標簽樣式p>
68 <a href="http://www.baidu.com" target="_blank">baidu.coma><br>
69 <a href="http://www.taobao.com" target="_top">taobao.coma>
70 body>

?另外獨立來說一說偽類選擇器，CSS偽類選擇器主要用于某些選擇器添加特殊的效果。主要在支持CSS的瀏覽器上對鏈接的不同狀態以不同的方式顯示。這些狀態包括：活動狀態（active），已被訪問狀態(visited)，未被訪問狀態(link)，和鼠標懸停狀態(hover)。

1 a:link {color: #FF0000}        /* 未訪問的鏈接 */
2 a:visited {color: #00FF00}    /* 已訪問的鏈接 */
3 a:hover {color: #FF00FF}    /* 鼠標移動到鏈接上 */
4 a:active {color: #0000FF}    /* 選定的鏈接 */

提示：在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。

提示：偽類名稱對大小寫不敏感。

下面以一個a:hover的例子來解釋一下偽類選擇器的作用：

 1 <head>
 2 <meta charset="UTF-8">
 3 <title>Insert title heretitle>
 4 <style type="text/css">
 5 /*將所有的a標簽的狀態都修改成下面這樣*/
 6 a{
 7     color:black;        
 8     text-decoration: none;  /*不顯示下劃線*/
 9 }
10 /*當鼠標移上來的狀態我們進行多帶帶的修改*/
11 a:hover{
12     color:red;
13     text-decoration: underline;
14     font-size:30px;
15 }
16 style>
17 head>
18 <body>
19 
25 <a href="www.baidu.com">百度網址a>
26 body>

顯示效果如下：

更多CSS偽類知識可以參考：http://www.w3school.com.cn/css/css_pseudo_classes.asp

3. CSS的優先級

CSS樣式是有優先級的，具體的樣式優先級（渲染順序）如下：

!important > 行內樣式 > id選擇器 > 類選擇器 > 標簽選擇器，在選擇器優先級（先看優先級）相同的情況下，參照就近原則，具體示例如下代碼：

 1 <head>
 2 <meta charset="UTF-8">
 3 <title>Insert title heretitle>
 4 
 6 <style type="text/css">
 7 /* div{
 8     color:red !important;
 9 } */
10 /* #divId{
11     color:green;
12 } */
13 .divClass{
14     color: yellow;
15 } 
16 div{
17     color: orange;
18 }
19 div{
20     color:black;
21 }
22 style>
23 head>
24 <body>
25 <div id="divId" class="divClass" style="color: blue;">我被渲染了div>
26 body>

4.CSS的繼承性

HTML文檔以樹形結構進行組織，各元素之間是一種層次關系，這種層次關系同樣反映在樣式表的應用中。具有層次關系的元素之間，內層元素將繼承外層元素的樣式，多個外層元素中定義的樣式將疊加到內層元素。

HTML中，是其他元素的容器，是其他元素的最外層元素，所以元素中定義的樣式將影響其他所有元素的顯示格式。

具體示例如下：

 1 <head>
 2 <meta charset="UTF-8">
 3 <title>Insert title heretitle>
 4 
 5 <style type="text/css">
 6 .divclass{
 7     color: blue;
 8     border-width:1px;
 9      border-style:solid;
10     border-color:red;
11 }
12 style>
13 head>
14 <body>
15 
21 <div style="color: blue;border: 1px solid red">
22     <p>字體變紅p>
23 div>
24 <div class="divclass">
25     <p>字體變紅p>
26 div>
27 body>

具有繼承的CSS屬性：

說明

對應屬性

文本相關的屬性是繼承的

text-align、color、text-indent、font-family、font-size、

font-style、font-weight、 letter-spacing、word-spacing、

text-transform、line-height等

列表相關的屬性是繼承的(ul,ol,li)

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

5.更多CSS

本文只列出了本人作為web開發時常用的CSS知識入門進行系統總結，不包含CSS3等特定CSS知識，更多文檔及官方知識庫請鏈接w3school官網：

http://www.w3school.com.cn/cssref/index.asp

云服務器 GPU云服務器 css入門 css快速入門 css入門到精通 css入門教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1009.html

前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
關于sass、scss、less的概念性知識匯總

摘要：而使用預處理器，提供缺失的樣式層復用機制減少冗余代碼，提高樣式代碼的可維護性。所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，預處理器有沒有解決更大的麻煩。也是成熟的預處理器之一，而且有一個穩定，強大的團隊在維護。這篇文章主要解答以下幾個問題，供前端開發者的新手參考。 1、什么是Sass和Less？ 2、為什么要使用CSS預處理器？ 3、Sass和Less的...

HmyBmny 2019-08-29 16:24 評論0 收藏0
關于sass、scss、less的概念性知識匯總

摘要：而使用預處理器，提供缺失的樣式層復用機制減少冗余代碼，提高樣式代碼的可維護性。所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，預處理器有沒有解決更大的麻煩。也是成熟的預處理器之一，而且有一個穩定，強大的團隊在維護。這篇文章主要解答以下幾個問題，供前端開發者的新手參考。 1、什么是Sass和Less？ 2、為什么要使用CSS預處理器？ 3、Sass和Less的...

xuweijian 2019-08-02 11:15 評論0 收藏0
前端性能優化知識點匯總

摘要：面試必談的前端性能優化為什么做優化提供給用戶最佳體驗有哪些差的體驗白屏好久才顯示內容浪費用戶流量優化方案大概分為以下幾種降低請求數量減少獲取數據的接口數初始數據盡量通過一個接口返回減少的數量提取公共利用緩存減少后續加載訪問。面試必談的--前端性能優化為什么做優化提供給用戶最佳體驗 #有哪些差的體驗 - 白屏好久才顯示內容 - h5浪費用戶流量優化方案大概分為以下幾種： 1、降低...

quietin 2019-08-30 13:59 評論0 收藏0
前端性能優化知識點匯總

摘要：面試必談的前端性能優化為什么做優化提供給用戶最佳體驗有哪些差的體驗白屏好久才顯示內容浪費用戶流量優化方案大概分為以下幾種降低請求數量減少獲取數據的接口數初始數據盡量通過一個接口返回減少的數量提取公共利用緩存減少后續加載訪問。面試必談的--前端性能優化為什么做優化提供給用戶最佳體驗 #有哪些差的體驗 - 白屏好久才顯示內容 - h5浪費用戶流量優化方案大概分為以下幾種： 1、降低...

ChanceWong 2019-08-26 11:48 評論0 收藏0
前端性能優化知識點匯總

摘要：面試必談的前端性能優化為什么做優化提供給用戶最佳體驗有哪些差的體驗白屏好久才顯示內容浪費用戶流量優化方案大概分為以下幾種降低請求數量減少獲取數據的接口數初始數據盡量通過一個接口返回減少的數量提取公共利用緩存減少后續加載訪問。面試必談的--前端性能優化為什么做優化提供給用戶最佳體驗 #有哪些差的體驗 - 白屏好久才顯示內容 - h5浪費用戶流量優化方案大概分為以下幾種： 1、降低...

CarterLi 2019-08-01 18:38 評論0 收藏0