《CSS揭祕》閱讀體驗

葉糖糖發表於2017-09-05
CSS

CSS是一種神奇的技術，它可以讓一張原本普通的網頁變得絢麗多姿。可以想象一下如果沒有CSS，使用者在瀏覽器中看到的網頁將會是什麼模樣？ 是不是感覺有些可怕？恰巧最近在讀一些前端技術的書，今天利用一些時間，寫下一本好書的讀後感。

一、誰適合讀《CSS揭祕》

這本書適合有一定CSS基礎的開發者朋友閱讀，如果您剛接觸CSS，那麼不建議您現在就閱讀這樣的書。因為這並不是一本講CSS入門的書，所以得算作進階級的書。

二、本書特色
  • 一本有趣的CSS攻略書
  • 擁有實用的CSS使用技巧
  • 完全用HTML5寫成，美觀大方
  • 每篇攻略言簡意賅，背後原理清晰易懂
三、預備知識

需要了解高一數學的一些知識，如下：

  • 平方根
  • 勾股定理
  • 三角函式
  • 對數等。
四、讀完本書有哪些收穫

閱讀一本書最有趣的事，莫過於能夠利用書中學到的知識解決眼下實際的問題。讀完這本書可以深刻理解背景與邊框、形狀、視覺效果、使用者排印、使用者體驗、結構與佈局和過渡動畫方面的使用技巧。

當然還有Web標準的指定過程、瀏覽器字首方面的知識。第一章內容中還給出了一些CSS編碼的技巧，非常有意思。個人比較關心的是關於響應式網頁設計和我應該使用前處理器嗎這兩個小主題。

如果在沒有閱讀這本書之前，你問我該如何實現一個響應式的網頁？你得到的答案不出意外應該是使用媒體查詢。不過考慮到以後的程式碼維護以及多種裝置上的不同瀏覽器，還是得用一種優雅的方式解決響應式佈局問題。不能僅僅依賴媒體查詢，就像以前編寫HTML佈局非常依賴CSS+DIV一樣。對於Sass和LESS一般的小專案還是儘量少用，大型的專案倒是可以用一用。

對於圖形正常情況下，最為一個比較機智的開發者應該不會自己寫程式碼實現。大部分開發者會讓設計師提供，真是想為開發者點贊。但不是沒一個開發者都那麼幸運，也許你是一個人在獨自奮鬥，還不會PS！那就得跟我一樣，摸索使用CSS畫一個圓，平行四邊形等。好在再也不要擔心這樣的問題了，因為已讀攻略。

請猜一猜如下示例程式碼會在瀏覽器中呈現什麼樣的效果？

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>形狀</title>
 <style type="text/css">
    div{
        width: 300px;
        height: 200px;
        background:darkgrey;
        border-radius: 100% 0 0 100% / 50%;
    }
</style>
 </head>
 <body>
   <div></div>
 </body>
 </html>

沒錯，就是你所想的那樣——半個橢圓。是不是感覺很好玩。 enter image description here

這只是其中的一個小技巧，最後的過渡和動畫更加有意思，當然也蠻燒腦的。感覺自己已經被前端給玩壞了。每時每刻總會發現各種有趣的新鮮使用技巧。

相關文章