整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS簡史:從1.0到3.0,最終又將走向哪里?

          /面包理想

          一轉眼已經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相關基礎知識有所了解,接下來我們就開始真正的進入技術的學習,大家是不是迫不及待了呢?

          SS課堂筆記

          1、CSS的概念

          層疊樣式表(英文全稱:Cascading Style Sheets) *層疊:多個樣式可以作用在同一個html的元素上,同時生效

          是一種用來表現HTML或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。

          • 樣式定義如何顯示 HTML 元素
          • 樣式通常存儲在樣式表
          • 把樣式添加到 HTML 4.0 中,是為了解決內容與表現分離的問題
          • 外部樣式表可以極大提高工作效率
          • 外部樣式表通常存儲在 CSS 文件
          • 多個樣式定義可層疊為一個

          CSS很像化妝,通過不同的CSS將同樣的HTML內容打造為不同的呈現結果。

          所以,前端程序員相互表白的時候可以說:you are the CSS to my HTML.

          這是不是CSS是對HTML進行美化和布局作用的最好總結?

          2、CSS的優勢

          1. 功能強大
          2. 將內容展示和樣式控制分離
          • 降低耦合度。解耦
          • 讓分工協作更容易
          • 提高開發效率

          3、CSS的使用:CSS與html結合使用

          根據定義CSS的位置不同,分為行內樣式、內部樣式和外部樣式

          3.1 行內樣式

          也稱為內聯樣式

          直接在標簽中編寫樣式,通過使用標簽內部的style屬性;

          一般在測試的時候使用居多:
          語法:
          <html標簽 style="樣式1:值1;樣式2:值2;....樣式N:值N;">hello my css</html標簽>
          案例:
          <div style="color: red;">hello my css</div>

          弊端:只能對當前的標簽生效,沒有做到內容和樣式相分離,耦合度太高。

          3.2 內部樣式

          定義在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>

          3.3 外部樣式

          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>

          作用域的范圍:外部樣式表>內部樣式表>行內樣式表

          優先級:外部樣式表<內部樣式表<行內樣式表;

          同樣的樣式作用在同一個標簽身上:就近原則;不同樣式作用在同一個標簽身上:疊加生效。

          4、CSS語法

          基本格式:由兩個主要的部分構成:選擇器,以及一條或多條聲明:

          選擇器 {
                  屬性1:值1;
                  屬性2:值2;
                  ...
          }
          選擇器:篩選具有相似特征的元素
          屬性和屬性值之間用冒號分割,不同的屬性之間用分號隔開。

          例如:

          5、CSS注釋

          注釋是用來解釋你的代碼,并且可以隨意編輯它,瀏覽器會忽略它。

          CSS注釋以 /* 開始, 以 */ 結束

          /*這是CSS的注釋*/
          div {
              color: red;  /*文字顏色是紅色*/
          }

          6、基本選擇器:篩選具有相似特征的元素

          6.1 id選擇器

          選擇具有相同id屬性值的元素,建議html頁面中的id值唯一

          id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。

          HTML元素以id屬性來設置id選擇器,CSS 中 id 選擇器以 "#" 來定義。

          PS: ID屬性不要以數字開頭,數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。

          雖然多個元素可以使用同一個id選擇器控制樣式,但是不推薦。如果需要同樣的樣式對多個標簽生效,使用class選擇器。

          6.2 class選擇器

          選擇具有相同的class屬性值的元素。

          class 選擇器用于描述一組元素的樣式,class 選擇器有別于id選擇器,class可以在多個元素中使用。

          class 選擇器在HTML中以class屬性表示, 在 CSS 中,類選擇器以一個點"."號顯示:

          PS:類名的第一個字符不能使用數字!它無法在 Mozilla 或 Firefox 中起作用。

          6.3 元素選擇器/標簽選擇器

          選擇具有相同標簽名稱的元素。

          定義選擇器語法:標簽名稱{};PS:標簽名稱必須是html提供好的標簽。

          使用標簽選擇器:自動使用在所有的同名的標簽上

          7 優先級

          7.1 選擇器的優先級

          ID選擇器 > 類選擇器 > 標簽選擇器

          當多個選擇器作用在同一個標簽上的時候,如果屬性沖突,看優先級;如果不沖突,樣式疊加生效。

          7.2 樣式表的優先級

          行內樣式 > 內部樣式 >外部樣式

          同樣,三個樣式表中都有內容作用在同一個html標簽的時候,如果屬性沖突,看優先級;如果不沖突,樣式疊加生效。

          8 CSS常用樣式

          8.1 color :字體顏色

          跟顏色相關的取值分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

          8.2 width height:寬高

          PS:只有塊狀元素可以設置寬高,行級元素設置不生效。

          取值方式有2種:

          1:數值 絕對數字 單位是像素PX

          2:百分比:占據父元素的比例

          8.3 背景樣式

          8.4 文本樣式

          8.5 列表樣式

          8.6 邊框樣式

          10 HTML&CSS調試利器

          以谷歌瀏覽器為例說明。

          快捷鍵F12或者工具條中的開發者工具調出以下內容。

          在elements中可以看到當前頁面的所有標簽,在styles中可以看到html元素對應的樣式。


          11 盒子模型

          11.1 概念

          所有HTML元素可以看作盒子,在CSS中,"box model"這一術語是用來設計和布局時使用。

          CSS盒模型本質上是一個盒子,封裝周圍的HTML元素,它包括:邊距,邊框,填充,和實際內容。

          盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。

          盒子模型說明圖:

          • Margin(外邊距) - 清除邊框外的區域,外邊距是透明的。
          • Border(邊框) - 圍繞在內邊距和內容外的邊框。
          • Padding(內邊距) - 清除內容周圍的區域,內邊距是透明的。
          • Content(內容) - 盒子的內容,顯示文本和圖像。


          11.2 盒子的寬度和高度

          元素的實際寬度和高度:

          當我們計算一個元素實際在頁面占有的總寬度計算公式是這樣的:

          總元素寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距

          元素的總高度最終計算公式是這樣的:

          總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距

          11.3 如果想要設置的寬度直接就是元素的實際寬度,通過box-sizing屬性

          12 補充常用樣式

          12.1 float 浮動

          12.1.1 什么是浮動

          CSS 的 Float(浮動),會使元素向左或向右移動,其周圍的元素也會重新排列。

          Float(浮動),往往是用于圖像,但它在布局時一樣非常有用。

          12.1.2 元素怎樣浮動

          元素的水平方向浮動,意味著元素只能左右移動而不能上下移動。

          一個浮動元素會盡量向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

          浮動元素之后的元素將圍繞它。

          浮動元素之前的元素將不會受到影響。

          12.1.3 彼此相鄰的浮動元素

          如果你把幾個浮動的元素放到一起,如果有空間的話,它們將彼此相鄰。

          12.1.4 clear--清除浮動

          元素浮動之后,周圍的元素會重新排列,為了避免這種情況,使用 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>
          

          12.2 overflow

          控制內容溢出元素框時顯示的方式。

          overflow屬性有以下值:

          描述

          visible

          默認值。內容不會被修剪,會呈現在元素框之外。

          hidden

          內容會被修剪,并且其余內容是不可見的。

          scroll

          內容會被修剪,但是瀏覽器會顯示滾動條以便查看其余的內容。

          auto

          如果內容被修剪,則瀏覽器會顯示滾動條以便查看其余的內容。

          inherit

          規定應該從父元素繼承 overflow 屬性的值。

          注意:overflow 屬性只工作于指定高度的塊元素上。

          注意: 在 OS X Lion ( Mac 系統) 系統上,滾動條默認是隱藏的,使用的時候才會顯示 (設置 "overflow:scroll" 也是一樣的)。

          12.3 Display(顯示) 與 Visibility(可見性)

          12.3.1 兩者的區別

          display屬性設置一個元素應如何顯示,visibility屬性指定一個元素應可見還是隱藏。

          隱藏一個元素可以通過把display屬性設置為"none",或把visibility屬性設置為"hidden"。但是請注意,這兩種方法會產生不同的結果。

          visibility:hidden可以隱藏某個元素,但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說,該元素雖然被隱藏了,但仍然會影響布局。

          display:none可以隱藏某個元素,且隱藏的元素不會占用任何空間。也就是說,該元素不但被隱藏了,而且該元素原本占用的空間也會從頁面布局中消失。

          12.3.2 display 改變元素的類型

          CSS樣式有以下三個:

          • display:block -- 顯示為塊級元素
          • display:inline -- 顯示為內聯元素
          • display:inline-block -- 顯示為內聯塊元素,表現為同行顯示并可修改寬高內外邊距等屬性

          13 復合選擇器

          由兩個或多個基礎選擇器,通過不同方式組合而成的。

          可以更準確更精細的選擇目標元素標簽。

          13.1 全局選擇器

          語法:* {} 一般去掉標簽的一些默認效果的時候使用,或者整站通用效果時使用。但是不推薦,一般將 * 替換為常用標簽的名稱,并用逗號分隔,其實就是使用并集選擇器。

          13.2 并集選擇器

          并集選擇器(CSS選擇器分組)是各個選擇器通過,連接而成的,通常用于集體聲明。

          語法:選擇器1,選擇器2,......選擇器N{}

          意思是多個選擇器都是通用的樣式。任何形式的選擇器(包括標簽選擇器、class類選擇器id選擇器等),都可以作為并集選擇器的一部分。

          13.3 交集選擇器

          條件:交集選擇器由兩個選擇器構成,找到的標簽必須滿足:既有標簽一的特點,也有標簽二的特點。

          語法:h3.class{ color:red; }

          其中第一個為標簽選擇器,第二個為class選擇器,兩個選擇器之間不能有空格,例如div.list。

          交集選擇器是并且的意思。 即...又...的意思

          例如:   table.bg   選擇的是: 類名為 .bg  的 表格標簽,但用的相對來說比較少。

          13.4 后代選擇器

          概念:后代選擇器又稱為包含選擇器。

          作用:用來選擇元素或元素組的子孫后代。

          其寫法就是把外層標簽寫在前面,內層標簽寫在后面,中間用空格分隔,先寫父親爺爺,在寫兒子孫子。

            格式:父級 子級{屬性:屬性值;屬性:屬性值;}

          語法:.class h3{color:red;font-size:16px;}

          當標簽發生嵌套時,內層標簽就成為外層標簽的后代。

          子孫后代都可以這么選擇。 或者說,它能選擇任何包含在內 的標簽。

          13.5 子元素選擇器

          作用:子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。

          其寫法就是把父級標簽寫在前面,子級標簽寫在后面,中間跟一個 > 進行連接。

          語法:.class>h3{color:red;font-size:14px;}

           比如:  .demo > h3 {color: red;}   說明  h3 一定是demo 親兒子。  demo 元素包含著h3。

          13.6 實現代碼

          <!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>
          

          13.6 偽類選擇器

          偽類選擇器:和類選擇器相區別類選擇器是一個點 比如 .demo {} 而我們的偽類 用 2個點 就是 冒號 比如 :link{} 。

          作用:用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果, 比如可以選擇 第1個,第n個元素。

          因為偽類選擇器很多,比如鏈接偽類,結構偽類等等。我們這里先給大家講解鏈接偽類選擇器。

          • a:link /* 未訪問的鏈接 */
          • a:visited /* 已訪問的鏈接 */
          • a:hover /* 鼠標移動到鏈接上 */
          • a:active /* 選定的鏈接 */
          <!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>
          

          注意**

          • 寫的時候,他們的順序盡量不要顛倒 按照 lvha(四類的首字母) 的順序。否則可能引起錯誤。
          • 因為叫鏈接偽類,所以都是利用交集選擇器 a:link a:hover
          • 因為a鏈接瀏覽器具有默認樣式,所以我們實際工作中都需要給鏈接單獨指定樣式。
          • 實際開發中,我們很少寫全四個狀態,一般我們寫法如下:
          a {   /* a是標簽選擇器  所有的鏈接 */
                 font-weight: 700;
                 font-size: 16px;
                 color: gray;
          }
          a:hover {   /* :hover 是鏈接偽類選擇器 鼠標經過 */
                 color: red; /*  鼠標經過的時候,由原來的 灰色 變成了紅色 */
          }

          13.7 復合選擇器比對

          選擇器

          作用

          特征

          使用情況

          隔開符號及用法

          后代選擇器

          用來選擇元素后代

          是選擇所有的子孫后代

          較多

          符號是空格 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


          什么是CSS?

          Cascading Style Sheet

          層疊樣式表語言(不是編程語言,屬于樣式表語言,沒有變量、數據類型、控制語句...)

          CSS其實是專門用來修飾HTML的,讓HTML更好看。

          CSS是HTML的化妝品。

          CSS是為HTML服務的,所以HTML還是主體,CSS是依附在HTML上的,

          所以進行CSS的開發,我們還是需要新建html/htm文件。

          在HTML中怎么嵌入CSS樣式呢?

          第一種方式:內聯定義

          第二種方式:定義內部樣式塊對象

          第三種方式:鏈入外部樣式表文件(這種方式最常用!)

          關于選擇器的優先級:

          • 標簽選擇器優先級最低。
          • 其次是類選擇器。
          • 最高優先級是id選擇器。

          CSS設置背景(background)

          • 背景顏色 background-color
          • 背景圖片 background-image
          • 背景重復 background-repeat:repeat-x/repeat-y
          • 背景位置 background-position:bottom/left/top/right/center
          • 背景關聯 background-attachment:fixed/scroll

          綜合寫法:

          .tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}

          CSS設置文本格式

          通過文本屬性,您可以改變文本的顏色、字符間距,對齊文本,裝飾文本,對文本進行縮進,等等。

          文本縮進 :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;

          CSS鏈接

          鏈接的四種狀態

          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;
            }

          CSS表格

          表格邊框

          table,th,td{border:1px solid red;}

          折疊邊框

          border-collapse:collapse;

          • 表格的寬度和高度

          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-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset/hidden
          • 邊框寬度:border-width
          • 邊框顏色:border-color

          綜合寫法:

          border:1px solid red;

          輪廓(outline)

          可以按順序設置如下屬性:

          • outline-color
          • outline-style
          • outline-width

          CSS所有尺寸

          • 寬度

          width/min-width/max-width

          • 高度

          height/min-height/max-height

          • 行高

          line-height

          display顯示類型

          隱藏元素—–display:none或者visibility:hiddden

          display通常可以設置為none、inline、block

          visibility通常可以設置為hidden、visible

          二者的區別在于display會將元素隱藏掉,并且位置不再被占據,而visibility則是占據原來的位置。

          CSS塊級元素和內聯元素—-display:block/inline/inline-block;

          CSS定位(position)

          position 屬性值的含義:

          static

          元素框正常生成。塊級元素生成一個矩形框,作為文檔流的一部分,行內元素則會創建一個或多個行框,置于其父元素中。

          relative

          元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所占的空間仍保留。

          absolute

          元素框從文檔流完全刪除,并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉,就好像元素原來不存在一樣。元素定位后生成一個塊級框,而不論原來它在正常流中生成何種類型的框。

          fixed

          元素框的表現類似于將 position 設置為 absolute,不過其包含塊是視窗本身。

          CSS浮動

          設置浮動:float:left/right;

          清除浮動:clear:both/left/right/null;

          浮動的兩個影響因素:1、文檔流 2、顯示類型

          元素內容溢出

          • 溢出滾動條

          overflow:scroll(不管是否溢出都會有滾動條)、auto(自動添加)

          • 溢出隱藏

          overflow:hidden;

          CSS的相關特性

          1、繼承性

          它不僅允許樣式應用于某個特定的html標簽元素,而且還可引用于其后代;

          2、CSS層疊

          當有相同權重的樣式存在時,會根據這些CSS樣式的前后順序來決定,處于最后面的CSS樣式會被應用,后面的CSS樣式會覆蓋前面的樣式。

          總而言之:內聯樣式表(標簽內部)>嵌入樣式表(當前文件中)>外部樣式表(外部引入文件)


          主站蜘蛛池模板: 国产午夜精品一区理论片| 一区二区三区视频观看| 乱中年女人伦av一区二区| 精品香蕉一区二区三区| 久久一区二区三区精品| 国产精品亚洲一区二区三区在线| 亚洲av乱码中文一区二区三区| 色欲精品国产一区二区三区AV| 色噜噜AV亚洲色一区二区| 久久精品无码一区二区三区日韩| 国产成人一区二区动漫精品| 无码一区二区三区AV免费| 中文乱码人妻系列一区二区| 日韩免费一区二区三区在线播放| 亚洲福利一区二区| 日韩一区二区在线视频| 亚洲电影唐人社一区二区| 亚洲日韩AV无码一区二区三区人| 亚洲宅男精品一区在线观看| 亚洲一区二区三区国产精华液| 日韩精品人妻一区二区三区四区 | 国产成人片视频一区二区| 精品乱码一区二区三区在线| 四虎一区二区成人免费影院网址| 午夜无码视频一区二区三区| 久久精品无码一区二区三区日韩 | 国产剧情国产精品一区| 亚洲av一综合av一区| 麻豆一区二区三区精品视频| 无码福利一区二区三区| 日本精品3d动漫一区二区| 四虎一区二区成人免费影院网址 | 精品人无码一区二区三区| 亚洲无圣光一区二区| 在线免费观看一区二区三区| 一级特黄性色生活片一区二区| 国产波霸爆乳一区二区 | 久久精品一区二区东京热| 久久精品免费一区二区| 波多野结衣中文一区| 国产成人AV一区二区三区无码|