資訊專欄INFORMATION COLUMN
摘要：此時你只需要在問題出現時，去問谷歌。附一個我目前遇到所有用過的屬性，在的梳理后，如果你能手寫出谷歌首頁，那么你一定會了解它們的用法。
問題
有時候會覺得自己在寫 css 時沒有什么章法，因為 css 的屬性很多，又有一些繼承不繼承的關系，還有一些相互影響的屬性需要注意。總之就是覺得寫 css 好費勁，不如寫編程語言的邏輯清晰明了。
干貨手寫 css 很重要
對于簡單頁面，嵌套式的 sass 和 bootstrap 沒必要用
（ 但 sass 中的顏色變量還是很好用的，可以在 .scss 文件里寫 css + 顏色變量）
css 的原理是很簡單（單字、展示、大小、定位、對齊、樣式，初學者應注意這個順序；這個順序來自 CSScomb）
在寫頁面寫出效果后，用 CSScomb 回顧并理清思路
可能會碰到的常用 css 屬性列表（至少用它們可寫出一個正常的（或被改造的）谷歌首頁）
分析 sass ?有的人會建議使用 less 或 sass 來代替樣式表文件，或者把一個 css 文件分成幾部分，然后用一個 @_xx 來引入。新手注意：對于小站點、小頁面的需求來說，是幾乎不需要引入任何 css 預編譯器特性的。
我所理解的 sass 和 compass 等對于 「css 樣式表設計」 的輔助工具、高階工具，是為了幫助人們解決一些重復性的工作，也就是說能騰出一些處理重復工作的時間去干別的。
也就是說，如果一個人不能手寫一個布局（比如手寫谷歌首頁和百度首頁），是因為它對于要實現的效果不理解，對于要實現的效果無法用 css 來表現，這是樣式表基礎知識的不牢固造成的。
這時用 sass 是沒用的。這些高階工具能幫你解決什么問題呢？它能縮短你手寫 css 的時間，但不能替你寫 css。
也就是說，sass 編譯出來的 css，你，應該是可以手寫出來的。如果達不到這個要求，說明你頁面寫得不熟。
bootstrap ?如果你是一個新手，一定會有很多人像你推薦 bootstrap 因為它能夠免去很多麻煩。比如 它的 grid 12 網格布局。
呃 ... 怎么說呢，我覺得對于純 css 的學習，要比對于 bootstrap 等前端框架的學習，要有趣。
css 是一個很 showy 的東西，你可以叫它 UI，也可以叫它 Web Design，因為它是給 html 上樣式的。它的語句本身是松散的（相對于編程語言的邏輯），但它有因為松散而毫無章法嗎？
No，Never，否則請向我解釋一下那些看起來很漂亮的網頁是怎么在 bootstrap 出現之前實現出來的。
而往往越松散的東西，它的原理就會越基本 ———— 而在這松散的架構和基本的原理之上，發揮出的想象力才是最大的。
真正的想象力是一種很迷人的東西。如果你用 bootstrap 完成了頁面的全部設計，那么你的想象力很可能就是 bootstrap 的 grid 。可能在不知不覺中錯過了設計的精髓 ———— 簡單、松散、想象力無盡。
而實際上，初學者：css 的原理是很簡單（單字、展示、大小、定位、對齊、樣式，注意這個順序），既包括了在一張網頁上畫畫所需要的一切，又沒有冗余的東西。在手寫 css 時，在微調樣式表的過程中，你體會到一種微妙的和諧和內在的、小而美的邏輯。
掌握了 css 原理之后，你會比使用 bootstrap 更覺得心應手。
看教程？如果你已經下定決心，拋棄 sass 和 bootstrap，擁抱 css ，那么可能有人會給你推薦 很多書，比如。但是這些書上的資料太多了，并且傾向于覆蓋方方面面。 you know, css looks complex, but using css is easy
解答這時，應當在練習寫頁面的過程中，搜索各種解決辦法，順帶溫習樣式表的基礎知識。有些知識，書上的講解好；有些知識，網上的文章就夠拿來解決問題了。
css 屬于后者，所以去寫頁面吧。如果你真的去手寫頁面了，那么你邁出了正確的一步。
幸運的話，你會遇到如下路障，來幫你鞏固 基礎知識（也就是說，如果你沒思索過這些問題，你很可能就是在基礎知識學習的路上走偏了），從頁面 grid 控制開始，塊級元素固定定位，相鄰，浮動，居中，沉底布局，響應式，塊級元素布局。
而現在的你，完全不用思考這些，你唯一要思考的是：如何把這一塊塊的東西擺在一張網頁上，以及如何調整它的位置。
基礎知識w3school 就好了，把 這個頁面 里的所有鏈接看一遍，然后就可開始寫 html 和 css 了。簡單的說就是，之后可能會有人向你推薦什么特棒的教程，但你不用看（實際上你可能會覺得教程太簡單而看不下去）。此時你只需要在問題出現時，去問谷歌。
編輯器推薦 st2，安裝 Emmet 插件，想必你們都知道了。
在我練習寫 css 頁面的時候，唯一覺得有幫助的工具就是 CSScomb，你可以寫一段 css，在完成效果之后（注意，在完成頁面效果之前，別用，而是在搜索問題解決辦法的過程中，學習 css 基本知識）用它梳理一下，看看結果是什么。
如果你嘗試了，你會發現是 css 語句的順序調整了。是的，這就是寫 css 的 workflow ，也是你應該思考如何布局一個頁面的線索。
附一個我目前遇到所有用過的 css 屬性，在 CSScomb 的梳理后，如果你能手寫出谷歌首頁，那么你一定會了解它們的用法。
.m-1
{
font-size: 4px;
line-height: 5em;
position: relative;
top: 2em;
bottom: 1em;
left: 2em;
right: -0.2em;
display: inline;
display: none;
display: flex;
visibility: hidden;
float: left;
clear: both;
width: 15em;
min-width: 960px;
max-width: 1024px;
height: 5em;
height: 100%;
min-height: 100%;
margin-top: 3em;
margin-right: auto;
margin-left: auto;
margin-bottom: -4em;
padding-top: 4em;
padding-bottom: 2em;
list-style: none;
list-style: none;
text-align: center;
color: red;
border: solid 1px #000;
background: blue;
justify-content: center;
}
當然，上述 css 屬性，只用到一部分就夠了。并且它們是散布在整個 css 文件中的。
你很可能只寫出這些東西來就能夠完成部分頁面了。
.g-1
{
line-height: 4em;
height: 4em;
text-align: center;
}
.g-1 .m-1
{
float: left;
width: 8em;
background: red;
}
.g-1 .m-2
{
margin-left: 8em;
background: blue;
}
.g-1 .m-2 .clearme
{
clear: both;
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/110946.html
摘要：屬性排序插件配置參數大全圖片介紹如下所示點擊進去更詳細空行產生的原因以及解決方法原因由于官方文檔將屬相按照單字定位展示大小樣式進行排序所以會產生空行，表示其實一類。 CSScomb 是一個超級爽的前端css屬性排序工具，用來規則css, make your code more beautiful sublime插件CSScomb介紹 官方網站只有一句如插件作用的介紹 Make...
摘要：國內各大公司都已經投入使用，在一些常見的網站，如淘寶騰訊小米等移動站點，隨處可見其蹤影。變革之騰訊手機淘寶的設計與實現前端亂燉適配總結樣式重置上文已提及，這里推薦閱讀同學寫的專題文章。 前言 CSS代碼難維護眾所皆知。 為一個元素設置樣式的方式可以通過定義的class、定義的id、元素的標簽名、元素的屬性等選擇器以及這些選擇器的組合來實現； 作用于某個元素上的樣式又可能來自單個樣式規...
摘要：國內各大公司都已經投入使用，在一些常見的網站，如淘寶騰訊小米等移動站點，隨處可見其蹤影。變革之騰訊手機淘寶的設計與實現前端亂燉適配總結樣式重置上文已提及，這里推薦閱讀同學寫的專題文章。 前言 CSS代碼難維護眾所皆知。 為一個元素設置樣式的方式可以通過定義的class、定義的id、元素的標簽名、元素的屬性等選擇器以及這些選擇器的組合來實現； 作用于某個元素上的樣式又可能來自單個樣式規...
摘要：一個叫的人用純重繪并模擬了種不同的移動設備包括可以給你的網站添加不相關的獨立組件的一個庫。每一個組件都是針對移動設備定制的，并且它有很多你在傳統的框架中看不到的功能。如果你用開發移動優先的網站，并想要網站正常運行在低版本的上，可以考慮。 眾所周知，CSS是非常棒的，它使網站看起來很漂亮，可以為網站添加動畫，并讓呈現和內容分離。去了解CSS的一切是非常難做到的，它只會變得更加困難,因為我...
摘要：更改文件名之后，在文件中寫入的代碼。控制增加前綴的版本根據頁面中的標簽及標簽中的選擇器屬性，來精簡樣式。 項目地址 既然重新學習了 Gulp，那索性就再把以前用 Gulp 寫的東西拿出來，重新寫一遍。這次寫的時候要把要點記錄下來，不然以后忘了就沒法回憶了。 因為 Gulp 現在使用沒有以前那么多了，所以就不寫復雜的應用了。這次寫一個簡單的 Demo 處理工具，只是為了把 PSD 轉成 ...
閱讀 3368·2023-04-26 03:05
閱讀 1470·2019-08-30 13:09
閱讀 1916·2019-08-30 13:05
閱讀 894·2019-08-29 12:42
閱讀 1390·2019-08-28 18:18
閱讀 3452·2019-08-28 18:09
閱讀 525·2019-08-28 18:00
閱讀 1723·2019-08-26 12:10
