<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                # 無處不在的CSS 或許你覺得CSS一點兒也不重要,而事實上,如果說HTML是建筑的框架,CSS就是房子的裝修。那么Javascript呢,我聽到的最有趣的說法是小三——還是先讓我們回到代碼上來吧。 ## 3.1 CSS 下面就是我們之前說到的代碼,css將Red三個字母變成了紅色。 ~~~ <!DOCTYPE html> <html> <head> </head> <body> <p id="para" style="color:red">Red</p> </body> <script type="text/javascript" src="app.js"></script> </html> ~~~ 只是, ~~~ var para=document.getElementById("para"); para.style.color="blue"; ~~~ 將字體變成了藍色,CSS+HTML讓頁面有序的工作著,但是Javascript卻打亂了這些秩序,有著唯恐世界不亂的精彩,也難怪被冠以小三之名了——或許終于可以理解,為什么以前人們對于Javascript沒有好感了——不過這里要講的是正室,也就是CSS,這時還沒有Javascript。 ![圖像說明文字](https://box.kancloud.cn/2015-08-25_55dbf88b58104.jpg) ## 3.2 關于CSS 這不是一篇專業講述CSS的書籍,所以我不會去說CSS是怎么來的,有些東西我們既然可以很容易從其他地方知道,也就不需要花太多時間去重復。諸如重構等這些的目的之一也在于去除重復的代碼,不過有些重復是不可少的,也是有必要的,而通常這些東西可能是由其他地方復制過來的。 到目前為止我們沒有依賴于任何特殊的硬件或者是軟件,對于我們來說我們最基本的需求就是一臺電腦,或者可以是你的平板電腦,當然也可以是你的智能手機,因為他們都有個瀏覽器,而這些都是能用的,對于我們的CSS來說也不會有例外的。 CSS(Cascading Style Sheets),到今天我也沒有記得他的全稱,CSS還有一個中文名字是層疊式樣式表,事實上翻譯成什么可能并不是我們關心的內容,我們需要關心的是他能做些什么。作為三劍客之一,它的主要目的在于可以讓我們方便靈活地去控制Web頁面的外觀表現。我們可以用它做出像淘寶一樣復雜的界面,也可以像我們的書本一樣簡單,不過如果要和我們書本一樣簡單的話,可能不需要用到CSS。HTML一開始就是依照報紙的格式而設計的,我們還可以繼續用上面說到的編輯器,又或者是其他的。如果你喜歡DreamWeaver那也不錯,不過一開始使用IDE可無助于我們寫出良好的代碼。 忘說了,CSS也是有版本的,和windows,Linux內核等等一樣,但是更新可能沒有那么頻繁,HTML也是有版本的,JS也是有版本的,復雜的東西不是當前考慮的內容。 ## 3.3 代碼結構 對于我們的上面的Red示例來說,如果沒有一個好的結構,那么以后可能就是這樣子。 ~~~ <!DOCTYPE html> <html> <head> </head> <body> <p style="font-size: 22px;color:#f00;text-align: center;padding-left: 20px;">如果沒有一個好的結構</p> <p style=" font-size:44px;color:#3ed;text-indent: 2em;padding-left: 2em;">那么以后可能就是這樣子。。。。</p> </body> </html> ~~~ 雖然我們看到的還是一樣的: ![圖像說明文字](https://box.kancloud.cn/2015-08-25_55dbf8aeb61db.jpg) 于是我們就按各種書上的建議重新寫了上面的代碼 ~~~ <!DOCTYPE html> <html> <head> <title>CSS example</title> <style type="text/css"> .para{ font-size: 22px; color:#f00; text-align: center; padding-left: 20px; } .para2{ font-size:44px; color:#3ed; text-indent: 2em; padding-left: 2em; } </style> </head> <body> <p class="para">如果沒有一個好的結構</p> <p class="para2">那么以后可能就是這樣子。。。。</p> </body> </html> ~~~ 總算比上面好看也好理解多了,這只是臨時的用法,當文件太大的時候,正式一點的寫法應該如下所示: ~~~ <!DOCTYPE html> <html> <head> <title>CSS example</title> <style type="text/css" href="style.css"></style> </head> <body> <p class="para">如果沒有一個好的結構</p> <p class="para2">那么以后可能就是這樣子。。。。</p> </body> </html> ~~~ 我們需要 ~~~ <!DOCTYPE html> <html> <head> <title>CSS example</title> <link href="./style.css" rel="stylesheet" type="text/css" /> </head> <body> <p class="para">如果沒有一個好的結構</p> <p class="para2">那么以后可能就是這樣子。。。。</p> </body> </html> ~~~ 然后我們有一個像app.js一樣的style.css放在同目錄下,而他的內容便是 ~~~ .para{ font-size: 22px; color:#f00; text-align: center; padding-left: 20px; } .para2{ font-size:44px; color:#3ed; text-indent: 2em; padding-left: 2em; } ~~~ 這代碼和JS的代碼有如此多的相似 ~~~ var para={ font_size:'22px', color:'#f00', text_align:'center', padding_left:'20px', } ~~~ 而22px、20px以及#f00都是數值,因此: ~~~ var para={ font_size:22px, color:#f00, text_align:center, padding_left:20px, } ~~~ 目測差距已經盡可能的小了,至于這些話題會在以后討論到,如果要讓我們的編譯器更正確的工作,那么我們就需要非常多這樣的符號,除非你樂意去理解: ~~~ (dotimes (i 4) (print i)) ~~~ 總的來說我們減少了符號的使用,但是用lisp便帶入了更多的括號,不過這是一種簡潔的表達方式,也許我們可以在其他語言中看到。 ~~~ \d{2}/[A-Z][a-z][a-z]/\d{4} ~~~ 上面的代碼,是為了從一堆數據中找出“某日/某月/某年”。如果一開始不理解那是正則表達式,就會覺得那個很復雜。 這門語言可能是為設計師而設計的,但是設計師大部分還是不懂編程的,不過相對來說這門語言還是比其他語言簡單易懂一些。 ## 3.4 樣式與目標 如下所示,就是我們的樣式 ~~~ .para{ font-size: 22px; color:#f00; text-align: center; padding-left: 20px; } ~~~ 我們的目標就是 ~~~ 如果沒有一個好的結構 ~~~ 所以樣式和目標在這里牽手了,問題是他們是如何在一起的呢?下面就是CSS與HTML溝通的重點所在了: ### 3.4.1 選擇器 我們用到的選擇器叫做類選擇器,也就是class,或者說應該稱之為class選擇器更合適。與類選擇器最常一起出現的是ID選擇器,不過這個適用于比較高級的場合,諸如用JS控制DOM的時候就需要用到ID選擇器。而基本的選擇器就是如下面的例子: ~~~ p.para{ color:#f0f; } ~~~ 將代碼添加到style.css的最下面會發現“如果沒有一個好的結構”變成了粉紅色,當然我們還會有這樣的寫法 ~~~ p>.para{ color:#f0f; } ~~~ 為了產生上面的特殊的樣式,雖然不好看,但是我們終于理解什么叫層疊樣式了,下面的代碼的重要度比上面高,也因此有更高的優先規則。 而通常我們可以通過一個 ~~~ p{ text-align:left; } ~~~ 這樣的元素選擇器來給予所有的p元素一個左對齊。 還有復雜一點的復合型選擇器,下面的是HTML文件 ~~~ <!DOCTYPE html> <html> <head> <title>CSS example</title> <link href="./style.css" rel="stylesheet" type="text/css" /> </head> <body> <p class="para">如果沒有一個好的結構</p> <div id="content"> <p class="para2">那么以后可能就是這樣子。。。。</p> </div> </body> </html> ~~~ 還有CSS文件 ~~~ .para{ font-size: 22px; color:#f00; text-align: center; padding-left: 20px; } .para2{ font-size:44px; color:#3ed; text-indent: 2em; padding-left: 2em; } p.para{ color:#f0f; } div#content p { font-size:22px; } ~~~ ## 3.5 更有趣的CSS 一個包含了para2以及para_bg的例子 ~~~ <div id="content"> <p class="para2 para_bg">那么以后可能就是這樣子。。。。</p> </div> ~~~ 我們只是添加了一個黑色的背景 ~~~ .para_bg{ background-color:#000; } ~~~ 重新改變后的網頁變得比原來有趣了很多,所謂的繼承與合并就是上面的例子。 我們還可以用CSS3做出更多有趣的效果,而這些并不在我們的討論范圍里面,因為我們討論的是be a geek。 或許我們寫的代碼都是那么的簡單,從HTML到Javascript,還有現在的CSS,只是總有一些核心的東西,而不是去考慮那些基礎語法,基礎的東西我們可以在實踐的過程中一一發現。但是我們可能發現不了,或者在平時的使用中考慮不到一些有趣的用法或者說特殊的用法,這時候可以通過觀察一些精致設計的代碼中學習到。復雜的東西可以變得很簡單,簡單的東西也可以變得很復雜。
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看