CSS學習筆記

時間 2019-11-08

標籤 css 學習筆記欄目 CSS 简体版

原文原文鏈接

初學CSS的筆記整理：css

CSS工做方式：瀏覽器在展示一個文檔時，必須將文檔內容和CSS結合起來，處理過程以下：

①瀏覽器先將標記語言和CSS轉換成DOM<文檔對象模型>結構，此時DOM表明電腦內存中的相應文檔，由於它已經融合了文檔內容和相應的樣式表。html

②而後瀏覽器把 DOM的內容展現出來。web

2. 層疊和繼承：瀏覽器

①層疊樣式的優先級從高到低依次爲：網頁開發者定義的樣式、網頁閱讀者定義的樣式、瀏覽器的默認樣式。服務器

【注】:CSS 另外提供了一個!important關鍵字，用戶能夠經過使用這個關鍵字使本身定義的樣式覆蓋掉開發者定義的樣式。ide

②對繼承的元素來講，子元素自身的樣式優先級高於從父級繼承來的樣式。佈局

3. 選擇器:學習

　　 ①類選擇器：經過class屬性定義，爲元素指定類名，文檔中的多個元素能夠擁有同一個類名。字體

　　 ②id選擇器：經過id屬性定義，爲元素制定id，每一個ID在文檔中必須是惟一。網站

　　 ③僞類選擇器：加在選擇器後面的用來指定元素狀態的關鍵字。如:link, :visited, :hover, :checked, :focus..

　　　　語法格式：selector : pseudo-class {property: value}

　　　 ④通用選擇器：相似通配符，能夠給全部可用元素添加樣式。

　　　　語法格式：* { }

　　　 ④優先級：id選擇器 > 類選擇器 > 標籤選擇器（tag selector）。

【注】：樣式表中，類選擇器以「.」開頭；id選擇器以"#"開頭。

<p class="key" id="principal"> .key { color: green; } #principal { font-weight: bolder; }

4. 文本樣式：

　　font-size: 字體的大小；

　　line-height: 文本的行間距；

　　font-style:italic; 指定文本爲斜體；

　　font-weight:bold; 指定文本加粗；

　　font-variant: small-caps; 指定文本爲小型大寫字母；

　　......

　　 文字樣式：

　　text-shadow：給文字添加陰影；

　　 work-break: 讓文本自動換行；

　　 word-wrap: 長單詞和url自動換行；

　　 Web Font與@font-face: 使用服務器端字體；

　　 font-size-adjust: 修改字體種類而保持字體尺寸不變；

　　 ......

5. 內容：

　　①文本內容：在選擇器的後面加上:before 或者 :after 。在聲明中，指定 content 屬性，並設置文本內容。

.ref:before { font-weight: bold; color: navy; content: "Reference: ";
}

　　②圖片內容：經過將content 屬性值設置爲某個圖片的URL，能夠將圖片插到元素的前面或後面。

下面這條規則在全部類名包含glossary的a標籤後面插入一個空格和一個圖標： a.glossary:after {content: " " url("../images/glossary-icon.gif");}

6. 列表：

　　　　使用list-style 屬性來指定列表項標記的樣式。

　　　　語法以下：

　　　　　 list-style: 簡寫屬性。用於把全部用於列表的屬性設置於一個聲明中。

　　　　列表類型：ul {list-style-type : square}

　　　　　列表項圖像：ul li {list-style-image : url(xxx.gif)}

7. 盒模型：

　　　　當你的瀏覽器展示一個元素時，這個元素會佔據必定的空間。這個空間由四部分組成：

　　　　　　內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)

　　中間是元素呈現內容的區域。這個區域的外面是內邊距。再外面是邊框。最外面的是外邊距，外邊距將該元素與其它元素分開。

　　　邊框樣式：border屬性給元素四周指定統一的邊框。

　　　盒模型相關博客推薦：《CSS盒子的浮動》《CSS盒子的定位》

　　8. 佈局

　　①塊級元素的width能夠阻止內容從左到右撐滿容器。

#main {
  width: 600px;
  margin: 0 auto; 
}

 <div id="main">
設置塊級元素的 width 能夠阻止它從左到右撐滿容器。而後你就能夠設置左右外邊距爲 auto 來使其水平居中。元素會佔據你所指定的寬度，而後剩餘的寬度會一分爲二成爲左右外邊距。
惟一的問題是，當瀏覽器窗口比元素的寬度還要窄時，瀏覽器會顯示一個水平滾動條來容納頁面。
</div>

②max-width： 替代 width 可使瀏覽器更好地處理小窗口的狀況，能夠解決水平滾動條的問題。

③ box-sizing: border-box; 此元素的內邊距和邊框再也不會增長它的寬度。

.simple {
  width: 500px;
  margin: 20px auto;
  box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  box-sizing: border-box;
}

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

 <div class="simple"> 咱們如今同樣大小了！ </div> <div class="fancy"> 萬歲！ </div>

　　 ④position：static(靜態定位),relative(相對定位),fixed(固定定位),absolute(絕對定位，相對於它的父元素定位)

　　　　參考資料：《CSS-position》

　　 ⑤clear: 控制浮動

　　 ⑥clearfix: 清除浮動

 
  .clearfix {
  overflow: auto;
} 
 

　　 ⑦float: 浮動佈局，當某內容比非浮動的內容還要高或者低時須要。

　　 ⑧width: *%; 百分比寬度

　　 ⑨inline-block：簡單來講就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現。以後的內聯對象會被排列在同一行內。好比咱們能夠給一個link（a元素）inline-block屬性值，使其既具備block的寬度高度特性又具備inline的同行特性。

　　 ⑩column: 實現文字的多列布局

.three-column {
  padding: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}

　　佈局相關博客推薦：《CSS固定寬度佈局》《CSS變化寬度佈局》

　　 9. 媒體查詢語法：

<!-- link元素中的CSS媒體查詢 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 樣式表中的CSS媒體查詢 -->
<style> @media (max-width: 600px) { .facet_sidebar { display: none;
  } } </style>