整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
/面包理想
一轉眼已經2018年，前端行業也風風雨雨地走過了10多年，網頁布局也從最原始的文檔變成了精彩紛呈的交互。當我看到第四代CSS布局技術的時候，在驚嘆互聯網發展如此突飛猛進的同時，不禁會有一個疑問：CSS經歷1.0到3.0的版本變遷，最終又將走向哪里？
今天我們就回顧一下CSS簡史和四次布局技術的躍遷。
1.CSS簡史
為什么我們需要回顧一下CSS簡史呢？
1.了解過去能夠更好地預測未來，畢竟太陽底下沒有什么新鮮事。
2.相比預測未來，通過了解CSS發展演變趨勢，能夠科學合理地評判CSS的發展，指導我們學習CSS的核心技術，讓我們在有限的精力和時間內學對知識，學好知識。
那是1989年的第一場雪，比1988年來的更早一些，伯納斯·李（Tim Berners-Lee）以超人的智慧和消耗了前額無數濃密的頭發為代價發明了World Wide Web，沒有他就沒有我們今天互聯網相關的工作，也就沒有了這個專欄教程，請允許我代表廣大前端致以崇高的敬意。我們先一睹大神的風采。
對互聯網之父，我只想對他說一句話，有一款洗發水增發效果挺好的，我一直用，你要不要試試？
互聯網誕生了以后，最初的網頁僅僅是純文本，但是隨著互聯網的發展，大家意識到web的原始版本根本就沒有提供一種裝飾網頁的方法。這就好比一個嬰兒不會穿著衣服出生一樣，孩子大了，總不能裸奔吧？這個時候兩個大神提供了解決方案Pei Yaun Wei和Andreesen。
Pei Yaun Wei說，這個好辦，我們可以給孩子穿上紙尿褲。
Pei-Yuan Wei在1991年創建圖形瀏覽器 ViolaWWW ，他整合了自己提出的樣式語言到自己開發的瀏覽器中，還期望自己的樣式語法最終能成為web關于樣式的官方標準。雖然這個目標并未達到，但是他提出的樣式語法確實為其它的一些樣式語法提供了一些靈感。
Andreesen說，那玩意得換多麻煩，我給孩子畫一身衣服吧，當然你懂的，最后Pei Yaun Wei的方案被采用了，但是我們還是看看Andreessen畫出來的情況有多亂。
與此同時，Andreessen 在他開發的網景瀏覽器中進行了不同的嘗試。他并沒有創建一種分離式的標記語言，而是采取拓展HTML標簽的方法來包含非標準化的HTML標簽已達到裝飾網頁的目的。不幸的是，沒過多久，網頁就失去了所有的語義化并看起來像下面這樣混亂：
<MULTICOL COLS="3" GUTTER="25"> <P><FONT SIZE="4" COLOR="RED">This would be some font broken up into columns</FONT></P></MULTICOL>
最終被大家采納的語言是由Hakon Wium 在 1994年 10月提出的樣式語法。它被稱為樣式層疊表，簡稱CSS，但是直到1996年的時候，CSS才演變成我們熟悉的樣子。
html { margin-left: 2cm; font-family: "Times", serif;
}h1 { font-size: 24px;
}
然后在1998年5月W3C發表了CSS2，緊接著一個讓我們深惡痛覺的瀏覽器誕生了！對沒錯，就是你深惡痛絕的那個萬能的IE6，2001年微軟發布了IE6，不過搞笑的是，IE6最初的出現確實很大程度推動了CSS發展。那時候的網頁已經變成跟現在很接近了。
按照常理你肯定會想，后面我就知道了，你不用說了，然后就是CSS3.0了。好吧，如果是我，我也這樣想，但是國際友人的腦回路可能跟我們不一樣，事實上，CSS3早于1999年已經開始制訂，直到2011年6月7日，CSS 3 Color Module終于發布為W3C Recommendation。這個故事告訴我們兩件事：
1.w3c這個組織活的真夠長，甚至比很多讀者年齡都大。
2.不是CSS正式版發布了你才放心使用，如果等到那個時候使用，你的項目可能未曾綻放就枯萎了。
細心的讀者可能會問了，CSS3正式版什么時候發布啊？另外CSS4.0什么時候發布？
好吧，我只能告訴你隨緣吧……而且沒有CSS4.0了，也不會有CSS5.0了。
來我們再看看國際友人的腦回路：
簡單地說，就是從CSS3開始，CSS規范就被拆成眾多模塊（module）單獨進行升級，或者將新需求作為一個新模塊來立項并進行標準化。因此今后不會再有CSS4、CSS5這種所謂大版本號的變更，有的只是CSS某個模塊級別的躍遷。
按照CSS工作組的說法，CSS歷史上并沒有版本的概念，有的只是“級別”（level）的概念。比如，CSS3其實是CSS Level 3，CSS2是CSS Level 2，而CSS Level 1當然就是CSS1。每個級別都以上一個級別為基礎。
大家可能說這個命名好亂啊，這事兒我只想跟你說，你就把CSS工作組當成你女朋友就好了，她開心就好，她說的都是對的，她說啥就是啥……
至于我們，會用就好了。
CSS出現的好處就是讓結構和表現分離，可以更靈活的修飾網頁,學習也很簡單。這里我更想說說它的不足。
1.CSS只有一個全局的命名空間，所以是無法避免出現選擇器沖突的。
2.模塊化做的不夠好，所以造成嵌套和覆蓋混亂，容易產生一大堆亂糟糟的樣式。
所以現在CSS也在向“模塊化、JS化發展”
不過客觀地說，CSS的出現確實是互聯網里程碑式的進步。
CSS其實就做了兩件事：
1.如何布局
2.元素怎么表現
說直白一點就是兩件事，一個房子是蓋成兩室一廳還是三室兩廳，另一件事是精裝修。
這里大家就會看到如果一個房子180平米隔成1個10平米的主臥170平米的廁所，你再怎么精裝修也不會是一個宜居的房間。所以布局在CSS中是極其重要的。與CSS發展簡史類似，CSS布局也經歷了一代又一代的迭代，才成為當前的樣子。
接下來我們就說說CSS布局簡史。
2.CSS布局簡史
初代table布局
在1997年的時候，David Siegel 改變了web，他自己研究出了一項網頁布局技術，利用html中的table元素和gif圖片縫合在一起，創造了表格布局技術，之后他就猶如一頭猛獸泛濫起來。
優點：布局容易、快捷、兼容性好
缺點：改動不便，需要重新調整，工作量大
由于互聯網網站越來越復雜，內容和業務更新頻繁，所以table布局是完全不能勝任的，以至于table布局的發明人都說：
“我把炸醬和面倒在了一起，并且沒法分開它。”
不過這個真不是我杜撰出來的，原文：
David Siegel：“有人說我毀掉了Web，我回答他們，的確如此。我毀掉了Web是因為我把巧克力和花生醬混合在一起卻再也不能把它們分開。我犯下了把結構跟表現混合在一起的錯誤。”
然后第二代布局技術登場了，
CSS+div布局
CSS+div布局總結起來有三大優點，
1.省時，學習容易，寫代碼也很容易，很快，效率高
2.省事，如果業務邏輯變了，改起來特別方便快捷
3.省錢，代碼量少，省帶寬，適合seo
基于這三年不難看出CSS+div布局人畜無害，人見人愛，也就不難解釋為什么被廣泛地使用成為目前主流的布局技術了。當然了他也有缺點：
1.需要考慮平臺兼容性，對制作人員的技能要求較高。
2.在移動端布局顯得有些力不從心，如未知寬高float內部元素居中、垂直水平布局、響應式布局等方面略顯繁瑣。
基于此，第三代布局技術應運而生。
Flex布局
優點：
1.CSS3的布局方式，可以在不使用其他框架的情況下，簡便、完整、響應式地實現各種頁面布局 2.移動端布局簡直太友好
缺點：
兼容性較差，IE瀏覽器版本在9.0以上，基本要10.0 對于其他瀏覽器，要求兼容性寫法
Flex布局日漸成為移動端主流布局技術，但是它是單一維度的布局，這個我會在專欄后面講到，有時候也會捉襟見肘，所以目前出現了第四代的布局技術：
grid布局
因為目前大部分瀏覽器并不支持這種技術，但是它代表了網絡發展，這里大家保持關注就好，這里我重點說下它為什么可以稱為第四代網絡布局技術。首先一個觀點大家先記住：
它并不會取代第三代的布局技術，而是顛覆和突破。就好像Flex遠比div+CSS布局更方便，但是div+CSS依然有用武之地。
我們說下它的突破之處：
1.flex對標的是float，本質上還是一維布局，這就跟別人開著夏利，你開奔馳都是地面上跑沒啥本質區別一樣。但是grid升維了，grid是飛機，在地面馬路這條線一維之上讓人能夠思考高度這個維度，以前是汽車一維交通工具（你只能在水平方向一個方向開），飛機是二維（能俯沖了（橫向、縱向同時）），所以grid可以說是拓寬了CSS布局的維度。不排除將來會有三維布局的出現。到時候CSS不僅僅能控制橫向布局，縱向布局，還可以深度布局（這個要依賴于三維展示的出現，如VR，AR三維立體的展示設備出現）。
2.grid布局里面采用了“可視化布局（template部分，所見即所得）”，這個是顛覆了傳統的，寫一句代碼刷一下瀏覽器這樣的開發方式，不排除以后會出現代碼即效果的開發模式。比如你在一個設備上畫一個區域，然后畫輪播圖。
這種方式類似于vc++控件方式，但是更智能，也更友好。誰說不可能呢？大家不要忘了grid布局的來源是早就廢棄的table布局。說到這里我多說一句搞笑的微軟，frontpage沒火，dreamwaver火了，最早提出“canvas”概念的 VML沒火，最后html5的canvas火了，連CSS3網格布局也是由微軟創建的一個模塊 ，最后火起來居然沒人認識它。心疼微軟一秒鐘。
說到這里大家對CSS簡史和布局也有所了解了，我們總結下，通過本文你應該學到：
（1）CSS的發展歷史。
（2）熟知布局的發展歷史，以便對未來布局技術的發展有一個客觀的判斷，來選擇是否學習。
通過本文的學習大家已經對CSS相關基礎知識有所了解，接下來我們就開始真正的進入技術的學習，大家是不是迫不及待了呢？
層疊樣式表(英文全稱：Cascading Style Sheets) *層疊：多個樣式可以作用在同一個html的元素上，同時生效
是一種用來表現HTML或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。
CSS很像化妝，通過不同的CSS將同樣的HTML內容打造為不同的呈現結果。
所以，前端程序員相互表白的時候可以說：you are the CSS to my HTML.
這是不是CSS是對HTML進行美化和布局作用的最好總結？
根據定義CSS的位置不同，分為行內樣式、內部樣式和外部樣式
也稱為內聯樣式
直接在標簽中編寫樣式，通過使用標簽內部的style屬性；
一般在測試的時候使用居多：
語法：
<html標簽 style="樣式1：值1;樣式2：值2;....樣式N：值N;">hello my css</html標簽>
案例：
<div style="color: red;">hello my css</div>弊端：只能對當前的標簽生效，沒有做到內容和樣式相分離，耦合度太高。
定義在head標簽內，通過style標簽，該標簽內容就是CSS代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>內部樣式</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>hello my css</div>
</body>
</html>1、提前定義css資源文件
2、在head標簽內，定義link標簽引入外部樣式文件。
lina.css文件，放在與html頁面同級的css文件夾中：
div {
color: red;
}
html頁面中的引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部樣式</title>
<link rel="stylesheet" href="css/lina.css" />
</head>
<body>
<div>hello my css</div>
</body>
</html>作用域的范圍:外部樣式表>內部樣式表>行內樣式表
優先級：外部樣式表<內部樣式表<行內樣式表;
同樣的樣式作用在同一個標簽身上：就近原則；不同樣式作用在同一個標簽身上:疊加生效。
基本格式：由兩個主要的部分構成：選擇器，以及一條或多條聲明:
選擇器 {
屬性1:值1;
屬性2:值2;
...
}
選擇器:篩選具有相似特征的元素
屬性和屬性值之間用冒號分割，不同的屬性之間用分號隔開。例如：
注釋是用來解釋你的代碼，并且可以隨意編輯它，瀏覽器會忽略它。
CSS注釋以 /* 開始, 以 */ 結束
/*這是CSS的注釋*/
div {
color: red; /*文字顏色是紅色*/
}選擇具有相同id屬性值的元素，建議html頁面中的id值唯一
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。
HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。
PS： ID屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。
雖然多個元素可以使用同一個id選擇器控制樣式，但是不推薦。如果需要同樣的樣式對多個標簽生效，使用class選擇器。
選擇具有相同的class屬性值的元素。
class 選擇器用于描述一組元素的樣式，class 選擇器有別于id選擇器，class可以在多個元素中使用。
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：
PS：類名的第一個字符不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。
選擇具有相同標簽名稱的元素。
定義選擇器語法：標簽名稱{}；PS：標簽名稱必須是html提供好的標簽。
使用標簽選擇器：自動使用在所有的同名的標簽上
ID選擇器 > 類選擇器 > 標簽選擇器
當多個選擇器作用在同一個標簽上的時候，如果屬性沖突，看優先級；如果不沖突，樣式疊加生效。
行內樣式 > 內部樣式 >外部樣式
同樣，三個樣式表中都有內容作用在同一個html標簽的時候，如果屬性沖突，看優先級；如果不沖突，樣式疊加生效。
跟顏色相關的取值分3種：
1、顏色的單詞 red blue...
2、rgb(紅，綠，藍)三色的取值范圍是0-255 rgb(255,0,0)
rgba（紅，綠，藍,透明度），透明度取值：0-1 0 全透明 1-不透明 0.5 半透明rgba(255,0,0,0.4)
3、#值1值2值3 ：值的范式是00-FF 十六進制數字組成的 例如：#FF0000
PS：只有塊狀元素可以設置寬高，行級元素設置不生效。
取值方式有2種：
1：數值 絕對數字 單位是像素PX
2：百分比：占據父元素的比例
以谷歌瀏覽器為例說明。
快捷鍵F12或者工具條中的開發者工具調出以下內容。
在elements中可以看到當前頁面的所有標簽，在styles中可以看到html元素對應的樣式。
所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和布局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
盒子模型說明圖：
元素的實際寬度和高度：
當我們計算一個元素實際在頁面占有的總寬度計算公式是這樣的：
總元素寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。
元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。
clear 屬性指定元素兩側不能出現浮動元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮動</title>
<style>
div{
width: 400px;
height: 200px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<!--沒有浮動屬性的元素都屬于常規文檔流：從上往下從左往右依次顯示
浮動的元素都脫離了常規文檔流；
為了好理解：大家可以認為浮動元素屬于一層，非浮動元素屬于一層
如果想要非浮動元素不受浮動元素的影響，需要使用clear屬性
-->
<div style="background: rgba(255,0,0,0.5); float: left;">
div1-左浮動，脫離常規文檔流，緊貼父元素或者上一個同方向浮動
</div>
<div style="background: lawngreen; width: 600px; height: 350px; ">
div2-未浮動，常規文檔流,
<br/>PS:此時div1在div2的上方顯示，因為div1和div2是不同文檔流中的元素，顯示互不影響
如果不想讓div2被浮動元素影響，需要添加clear屬性。
添加clear: left;之后div2就會忽略div1浮動的影響，在div1層后面顯示，不會重疊了，大家可以自己試驗一下
</div>
<div style="background: lightblue; float: right; width: 1800px;">
div3-右浮動，脫離常規文檔流，緊貼父元素或者上一個同方向浮動
</div>
<div style="background: lightcoral; width: 600px; height: 350px; ">
div4-未浮動，常規文檔流,
<br/>PS:此時div3在div4的上方顯示，因為div3和div4是不同文檔流中的元素，顯示互不影響
如果不想讓div4被浮動元素影響，需要添加clear屬性。
添加clear: right;之后div4就會忽略div3浮動的影響，在div3層后面顯示，不會重疊了，大家可以自己試驗一下
clear屬性有三個取值：left、right、both;分別是取出左浮動、有浮動和所有浮動元素的影響
</div>
<div style="background: lavender;">
div5-未浮動，常規文檔流,
</div>
</body>
</html>
控制內容溢出元素框時顯示的方式。
overflow屬性有以下值：
值 | 描述 |
visible | 默認值。內容不會被修剪，會呈現在元素框之外。 |
hidden | 內容會被修剪，并且其余內容是不可見的。 |
scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
注意:overflow 屬性只工作于指定高度的塊元素上。
注意: 在 OS X Lion ( Mac 系統) 系統上，滾動條默認是隱藏的，使用的時候才會顯示 (設置 "overflow:scroll" 也是一樣的)。
display屬性設置一個元素應如何顯示，visibility屬性指定一個元素應可見還是隱藏。
隱藏一個元素可以通過把display屬性設置為"none"，或把visibility屬性設置為"hidden"。但是請注意，這兩種方法會產生不同的結果。
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
CSS樣式有以下三個：
由兩個或多個基礎選擇器，通過不同方式組合而成的。
可以更準確更精細的選擇目標元素標簽。
語法：* {} 一般去掉標簽的一些默認效果的時候使用，或者整站通用效果時使用。但是不推薦，一般將 * 替換為常用標簽的名稱，并用逗號分隔，其實就是使用并集選擇器。
并集選擇器（CSS選擇器分組）是各個選擇器通過,連接而成的，通常用于集體聲明。
語法：選擇器1，選擇器2，......選擇器N{}
意思是多個選擇器都是通用的樣式。任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。
條件：交集選擇器由兩個選擇器構成，找到的標簽必須滿足：既有標簽一的特點，也有標簽二的特點。
語法：h3.class{ color:red; }
其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，例如div.list。
交集選擇器是并且的意思。 即...又...的意思
例如： table.bg 選擇的是： 類名為 .bg 的 表格標簽，但用的相對來說比較少。概念：后代選擇器又稱為包含選擇器。
作用：用來選擇元素或元素組的子孫后代。
其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔，先寫父親爺爺，在寫兒子孫子。
格式：父級 子級{屬性:屬性值;屬性:屬性值;}語法：.class h3{color:red;font-size:16px;}
當標簽發生嵌套時，內層標簽就成為外層標簽的后代。
子孫后代都可以這么選擇。 或者說，它能選擇任何包含在內 的標簽。
作用：子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。
其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個 > 進行連接。
語法：.class>h3{color:red;font-size:14px;}
比如： .demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含著h3。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>復合選擇器</title>
<style>
/*全局選擇器：
一般去掉標簽的一些默認效果的時候使用，或者整站通用效果時使用。但是不推薦，
*/
*{
color: #333;/*定義全局文字顏色，統一色彩基調*/
}
/*并集選擇器：通常用于集體聲明
替換全局選擇器；
*/
div,p,dldt,dd{
/*去掉瀏覽器的默認樣式*/
margin: 0;
padding: 0;
color: #333;/*定義全局文字顏色，統一色彩基調*/
}
/*交集選擇器*/
li.myli{
color: red;
}
/*后代選擇器*/
ul li{
font-size: 28px;
}
.myUL li{
font-family: "微軟雅黑";
}
.myUL li a{
text-decoration: line-through;
}
/*子元素選擇器*/
.demo>h3{
color: red;
}
</style>
</head>
<body>
<ul>
<li>li11111111111</li>
<li class="myli">li22222222222</li>
<li>li33333333333</li>
<li>li44444444444<a href="">點擊我試試</a></li>
<li class="myUL">
<ul>
<li>li11111111111</li>
<li class="myli">li22222222222</li>
<li>li33333333333</li>
<li>li44444444444
<a href="">點擊我試試</a>
</li>
</ul>
</li>
</ul>
<ol>
<li>li11111111111</li>
<li>li22222222222</li>
<li>li33333333333</li>
<li>li44444444444</li>
</ol>
<div class="demo">
div1
<h3>靜夜思</h3>
<ul>
<li><h3>靜夜思----li</h3></li>
</ul>
</div>
</body>
</html>
偽類選擇器：和類選擇器相區別類選擇器是一個點 比如 .demo {} 而我們的偽類 用 2個點 就是 冒號 比如 :link{} 。
作用：用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果， 比如可以選擇 第1個，第n個元素。
因為偽類選擇器很多，比如鏈接偽類，結構偽類等等。我們這里先給大家講解鏈接偽類選擇器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>偽類選擇器</title>
<style>
/*偽類選擇器*/
a:link{
color: red;/*默認顏色是紅色*/
}
a:visited{
color: blue;/*訪問過的頁面是藍色*/
}
a:hover{
color: green;/*鼠標懸浮是綠色*/
font-size: 28px;
}
a:active{
color: gold;/*按下鼠標不放手是金色*/
font-family: "微軟雅黑";
}
</style>
</head>
<body>
<a href="03-常用樣式.html" target="_blank">常用樣式</a>
<a href="04-盒子模型1.html" target="_blank">盒子模型</a>
<a href="05-綜合練習.html" target="_blank">綜合練習</a>
</body>
</html>
注意**
a { /* a是標簽選擇器 所有的鏈接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是鏈接偽類選擇器 鼠標經過 */
color: red; /* 鼠標經過的時候，由原來的 灰色 變成了紅色 */
}選擇器 | 作用 | 特征 | 使用情況 | 隔開符號及用法 |
后代選擇器 | 用來選擇元素后代 | 是選擇所有的子孫后代 | 較多 | 符號是空格 p .one |
子代選擇器 | 選擇 最近一級元素 | 只選親兒子 | 較少 | 符號是> .nav>p |
交集選擇器 | 選擇兩個標簽交集的部分 | 既是 又是 | 較少 | 沒有符號 p.one |
并集選擇器 | 選擇某些相同樣式的選擇器 | 可以用于集體聲明 | 較多 | 符號是逗號 .nav, .header |
鏈接偽類選擇器 | 給鏈接更改狀態 | 較多 | 重點記住 a{} 和 a:hover 實際開發的寫法 |
一篇文章說了HTML，現在再來說一說CSS，所謂CSS是指層疊樣式表 (Cascading Style Sheets)，通過引入樣式表，從而極大的提高了工作效率。
搭配視頻觀看效果更佳~~
Web前端開發零基礎入門HTML/CSS/JavaScript
https://www.ixigua.com/6907467670300393988
Cascading Style Sheet
層疊樣式表語言（不是編程語言，屬于樣式表語言，沒有變量、數據類型、控制語句...）
CSS其實是專門用來修飾HTML的，讓HTML更好看。
CSS是HTML的化妝品。
CSS是為HTML服務的，所以HTML還是主體，CSS是依附在HTML上的，
所以進行CSS的開發，我們還是需要新建html/htm文件。
第一種方式：內聯定義
第二種方式：定義內部樣式塊對象
第三種方式：鏈入外部樣式表文件（這種方式最常用！）
綜合寫法：
.tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}通過文本屬性，您可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等。
文本縮進 ：Text-indent:2em
文本對齊方式：Text-align:left/right/center/ justify
文本修飾：Text-decoration:underline/line-through/overline/none
字符間距：Word-spacing:px/em 英文單詞之間的間隔；
Letter-spacing:px/em漢字和英文字母之間的間隔；
文本轉換：Text-transform:uppercase/lowercase/ capitalize
行與行間距：Line-height:px/%
垂直對齊圖像： vertical-align：text-top/text-bottom
文本陰影：text-shadow:水平偏移，垂直偏移 顏色
字體類型:font-family:”sans-serif”;
字體樣式:font-style:normal ;
字體大小:font-size:20px/3.75em/100%;默認大小為16px,字體為宋體
字體加粗:font-weight:normal;
字體的轉變:font-variant:normal/smallcaps;
鏈接的四種狀態
a:link {color:#FF0000;} /* 未被訪問的鏈接 */
a:visited {color:#00FF00;} /* 已被訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標指針移動到鏈接上 */
a:active {color:#0000FF;} /* 正在被點擊的鏈接 */【注意】當為鏈接的不同狀態設置樣式時，請按照以下次序規則：
a:hover 必須位于 a:link 和 a:visited 之后
a:active 必須位于 a:hover 之后
去掉a鏈接默認的下劃線
text-decoration:{none/underline}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}創建鏈接塊
display:block;
在一個無序列表中，列表項的標志 (marker) 是出現在各列表項旁邊的圓點。在有序列表中，標志可能是字母、數字或另外某種計數體系中的一個符號。
要修改用于列表項的標志類型，可以使用屬性 list-style-type：
ul {list-style-type : square;}上面的聲明把無序列表中的列表項標志設置為方塊。
列表項圖像
你可能想對各標志使用一個圖像，這可以利用 list-style-image 屬性做到：
ul li {list-style-image : url(xxx.gif);}列表標志位置
ul{
list-style-position:inside;
}表格邊框
table,th,td{border:1px solid red;}折疊邊框
width,height
text-align:center/right/left;
vertical-align:bottom;
padding
background
margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制塊級元素之間的距離, 它們是透明不可見的。
根據上, 右, 下, 左的順時針規則, 簡寫為
margin: 40px 40px 40px 40px;
為便于記憶, 請參考下圖：
當上下, 左右margin值分別一致, 可簡寫為:
margin: 40px 40px;
前一個40px代表上下margin值, 后一個40px代表左右margin值.
當上下左右margin值均一致, 可簡寫為:
margin: 40px;
padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制塊級元素內部, content與border之間的距離
【注意】當你想讓兩個元素的content在垂直方向(vertically)分隔時, 既可以選擇padding-top/bottom, 也可以選擇margin-top/bottom, 在此建議你盡量使用padding-top/bottom來達到你的目的, 這是因為css中存在Collapsing margins(折疊的margins)的現象.
綜合寫法：
border:1px solid red;可以按順序設置如下屬性：
width/min-width/max-width
height/min-height/max-height
line-height
隱藏元素—–display:none或者visibility:hiddden
display通常可以設置為none、inline、block
visibility通常可以設置為hidden、visible
二者的區別在于display會將元素隱藏掉，并且位置不再被占據，而visibility則是占據原來的位置。
CSS塊級元素和內聯元素—-display:block/inline/inline-block;
position 屬性值的含義：
static
元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置于其父元素中。
relative
元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
absolute
元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
fixed
元素框的表現類似于將 position 設置為 absolute，不過其包含塊是視窗本身。
設置浮動：float:left/right;
清除浮動：clear:both/left/right/null;
浮動的兩個影響因素：1、文檔流 2、顯示類型
overflow:scroll（不管是否溢出都會有滾動條）、auto（自動添加）
overflow:hidden;
1、繼承性
它不僅允許樣式應用于某個特定的html標簽元素，而且還可引用于其后代；
2、CSS層疊
當有相同權重的樣式存在時，會根據這些CSS樣式的前后順序來決定，處于最后面的CSS樣式會被應用，后面的CSS樣式會覆蓋前面的樣式。
總而言之：內聯樣式表(標簽內部)>嵌入樣式表(當前文件中)>外部樣式表(外部引入文件)
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
