資訊專欄INFORMATION COLUMN
摘要：此時(shí)你只需要在問題出現(xiàn)時(shí)，去問谷歌。附一個(gè)我目前遇到所有用過的屬性，在的梳理后，如果你能手寫出谷歌首頁，那么你一定會(huì)了解它們的用法。
問題
有時(shí)候會(huì)覺得自己在寫 css 時(shí)沒有什么章法，因?yàn)?css 的屬性很多，又有一些繼承不繼承的關(guān)系，還有一些相互影響的屬性需要注意?？傊褪怯X得寫 css 好費(fèi)勁，不如寫編程語言的邏輯清晰明了。
干貨手寫 css 很重要
對(duì)于簡單頁面，嵌套式的 sass 和 bootstrap 沒必要用
（ 但 sass 中的顏色變量還是很好用的，可以在 .scss 文件里寫 css + 顏色變量）
css 的原理是很簡單（單字、展示、大小、定位、對(duì)齊、樣式，初學(xué)者應(yīng)注意這個(gè)順序；這個(gè)順序來自 CSScomb）
在寫頁面寫出效果后，用 CSScomb 回顧并理清思路
可能會(huì)碰到的常用 css 屬性列表（至少用它們可寫出一個(gè)正常的（或被改造的）谷歌首頁）
分析 sass ?有的人會(huì)建議使用 less 或 sass 來代替樣式表文件，或者把一個(gè) css 文件分成幾部分，然后用一個(gè) @_xx 來引入。新手注意：對(duì)于小站點(diǎn)、小頁面的需求來說，是幾乎不需要引入任何 css 預(yù)編譯器特性的。
我所理解的 sass 和 compass 等對(duì)于 「css 樣式表設(shè)計(jì)」 的輔助工具、高階工具，是為了幫助人們解決一些重復(fù)性的工作，也就是說能騰出一些處理重復(fù)工作的時(shí)間去干別的。
也就是說，如果一個(gè)人不能手寫一個(gè)布局（比如手寫谷歌首頁和百度首頁），是因?yàn)樗鼘?duì)于要實(shí)現(xiàn)的效果不理解，對(duì)于要實(shí)現(xiàn)的效果無法用 css 來表現(xiàn)，這是樣式表基礎(chǔ)知識(shí)的不牢固造成的。
這時(shí)用 sass 是沒用的。這些高階工具能幫你解決什么問題呢？它能縮短你手寫 css 的時(shí)間，但不能替你寫 css。
也就是說，sass 編譯出來的 css，你，應(yīng)該是可以手寫出來的。如果達(dá)不到這個(gè)要求，說明你頁面寫得不熟。
bootstrap ?如果你是一個(gè)新手，一定會(huì)有很多人像你推薦 bootstrap 因?yàn)樗軌蛎馊ズ芏嗦闊?。比?它的 grid 12 網(wǎng)格布局。
呃 ... 怎么說呢，我覺得對(duì)于純 css 的學(xué)習(xí)，要比對(duì)于 bootstrap 等前端框架的學(xué)習(xí)，要有趣。
css 是一個(gè)很 showy 的東西，你可以叫它 UI，也可以叫它 Web Design，因?yàn)樗墙o html 上樣式的。它的語句本身是松散的（相對(duì)于編程語言的邏輯），但它有因?yàn)樗缮⒍翢o章法嗎？
No，Never，否則請(qǐng)向我解釋一下那些看起來很漂亮的網(wǎng)頁是怎么在 bootstrap 出現(xiàn)之前實(shí)現(xiàn)出來的。
而往往越松散的東西，它的原理就會(huì)越基本 ———— 而在這松散的架構(gòu)和基本的原理之上，發(fā)揮出的想象力才是最大的。
真正的想象力是一種很迷人的東西。如果你用 bootstrap 完成了頁面的全部設(shè)計(jì)，那么你的想象力很可能就是 bootstrap 的 grid ?？赡茉诓恢挥X中錯(cuò)過了設(shè)計(jì)的精髓 ———— 簡單、松散、想象力無盡。
而實(shí)際上，初學(xué)者：css 的原理是很簡單（單字、展示、大小、定位、對(duì)齊、樣式，注意這個(gè)順序），既包括了在一張網(wǎng)頁上畫畫所需要的一切，又沒有冗余的東西。在手寫 css 時(shí)，在微調(diào)樣式表的過程中，你體會(huì)到一種微妙的和諧和內(nèi)在的、小而美的邏輯。
掌握了 css 原理之后，你會(huì)比使用 bootstrap 更覺得心應(yīng)手。
看教程？如果你已經(jīng)下定決心，拋棄 sass 和 bootstrap，擁抱 css ，那么可能有人會(huì)給你推薦 很多書，比如。但是這些書上的資料太多了，并且傾向于覆蓋方方面面。 you know, css looks complex, but using css is easy
解答這時(shí)，應(yīng)當(dāng)在練習(xí)寫頁面的過程中，搜索各種解決辦法，順帶溫習(xí)樣式表的基礎(chǔ)知識(shí)。有些知識(shí)，書上的講解好；有些知識(shí)，網(wǎng)上的文章就夠拿來解決問題了。
css 屬于后者，所以去寫頁面吧。如果你真的去手寫頁面了，那么你邁出了正確的一步。
幸運(yùn)的話，你會(huì)遇到如下路障，來幫你鞏固 基礎(chǔ)知識(shí)（也就是說，如果你沒思索過這些問題，你很可能就是在基礎(chǔ)知識(shí)學(xué)習(xí)的路上走偏了），從頁面 grid 控制開始，塊級(jí)元素固定定位，相鄰，浮動(dòng)，居中，沉底布局，響應(yīng)式，塊級(jí)元素布局。
而現(xiàn)在的你，完全不用思考這些，你唯一要思考的是：如何把這一塊塊的東西擺在一張網(wǎng)頁上，以及如何調(diào)整它的位置。
基礎(chǔ)知識(shí)w3school 就好了，把 這個(gè)頁面 里的所有鏈接看一遍，然后就可開始寫 html 和 css 了。簡單的說就是，之后可能會(huì)有人向你推薦什么特棒的教程，但你不用看（實(shí)際上你可能會(huì)覺得教程太簡單而看不下去）。此時(shí)你只需要在問題出現(xiàn)時(shí)，去問谷歌。
編輯器推薦 st2，安裝 Emmet 插件，想必你們都知道了。
在我練習(xí)寫 css 頁面的時(shí)候，唯一覺得有幫助的工具就是 CSScomb，你可以寫一段 css，在完成效果之后（注意，在完成頁面效果之前，別用，而是在搜索問題解決辦法的過程中，學(xué)習(xí) css 基本知識(shí)）用它梳理一下，看看結(jié)果是什么。
如果你嘗試了，你會(huì)發(fā)現(xiàn)是 css 語句的順序調(diào)整了。是的，這就是寫 css 的 workflow ，也是你應(yīng)該思考如何布局一個(gè)頁面的線索。
附一個(gè)我目前遇到所有用過的 css 屬性，在 CSScomb 的梳理后，如果你能手寫出谷歌首頁，那么你一定會(huì)了解它們的用法。
.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;
}
當(dāng)然，上述 css 屬性，只用到一部分就夠了。并且它們是散布在整個(gè) 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;
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/110946.html
摘要：屬性排序插件配置參數(shù)大全圖片介紹如下所示點(diǎn)擊進(jìn)去更詳細(xì)空行產(chǎn)生的原因以及解決方法原因由于官方文檔將屬相按照單字定位展示大小樣式進(jìn)行排序所以會(huì)產(chǎn)生空行，表示其實(shí)一類。 CSScomb 是一個(gè)超級(jí)爽的前端css屬性排序工具，用來規(guī)則css, make your code more beautiful sublime插件CSScomb介紹 官方網(wǎng)站只有一句如插件作用的介紹 Make...
摘要：國內(nèi)各大公司都已經(jīng)投入使用，在一些常見的網(wǎng)站，如淘寶騰訊小米等移動(dòng)站點(diǎn)，隨處可見其蹤影。變革之騰訊手機(jī)淘寶的設(shè)計(jì)與實(shí)現(xiàn)前端亂燉適配總結(jié)樣式重置上文已提及，這里推薦閱讀同學(xué)寫的專題文章。 前言 CSS代碼難維護(hù)眾所皆知。 為一個(gè)元素設(shè)置樣式的方式可以通過定義的class、定義的id、元素的標(biāo)簽名、元素的屬性等選擇器以及這些選擇器的組合來實(shí)現(xiàn)； 作用于某個(gè)元素上的樣式又可能來自單個(gè)樣式規(guī)...
摘要：國內(nèi)各大公司都已經(jīng)投入使用，在一些常見的網(wǎng)站，如淘寶騰訊小米等移動(dòng)站點(diǎn)，隨處可見其蹤影。變革之騰訊手機(jī)淘寶的設(shè)計(jì)與實(shí)現(xiàn)前端亂燉適配總結(jié)樣式重置上文已提及，這里推薦閱讀同學(xué)寫的專題文章。 前言 CSS代碼難維護(hù)眾所皆知。 為一個(gè)元素設(shè)置樣式的方式可以通過定義的class、定義的id、元素的標(biāo)簽名、元素的屬性等選擇器以及這些選擇器的組合來實(shí)現(xiàn)； 作用于某個(gè)元素上的樣式又可能來自單個(gè)樣式規(guī)...
摘要：一個(gè)叫的人用純重繪并模擬了種不同的移動(dòng)設(shè)備包括可以給你的網(wǎng)站添加不相關(guān)的獨(dú)立組件的一個(gè)庫。每一個(gè)組件都是針對(duì)移動(dòng)設(shè)備定制的，并且它有很多你在傳統(tǒng)的框架中看不到的功能。如果你用開發(fā)移動(dòng)優(yōu)先的網(wǎng)站，并想要網(wǎng)站正常運(yùn)行在低版本的上，可以考慮。 眾所周知，CSS是非常棒的，它使網(wǎng)站看起來很漂亮，可以為網(wǎng)站添加動(dòng)畫，并讓呈現(xiàn)和內(nèi)容分離。去了解CSS的一切是非常難做到的，它只會(huì)變得更加困難,因?yàn)槲?..
摘要：更改文件名之后，在文件中寫入的代碼。控制增加前綴的版本根據(jù)頁面中的標(biāo)簽及標(biāo)簽中的選擇器屬性，來精簡樣式。 項(xiàng)目地址 既然重新學(xué)習(xí)了 Gulp，那索性就再把以前用 Gulp 寫的東西拿出來，重新寫一遍。這次寫的時(shí)候要把要點(diǎn)記錄下來，不然以后忘了就沒法回憶了。 因?yàn)?Gulp 現(xiàn)在使用沒有以前那么多了，所以就不寫復(fù)雜的應(yīng)用了。這次寫一個(gè)簡單的 Demo 處理工具，只是為了把 PSD 轉(zhuǎn)成 ...
閱讀 3496·2023-04-26 03:05
閱讀 1547·2019-08-30 13:09
閱讀 1972·2019-08-30 13:05
閱讀 970·2019-08-29 12:42
閱讀 1459·2019-08-28 18:18
閱讀 3512·2019-08-28 18:09
閱讀 581·2019-08-28 18:00
閱讀 1776·2019-08-26 12:10
