CSS相關知識

時間 2019-11-17

標籤 css 相關知識欄目 CSS 简体版

原文原文鏈接

CSS的優點：

1：樣式表提供了遠比HTML多得多的格式化選擇。

2：在給網頁添加背景的時候，你要肯定他要如何平鋪（重複等一系列的屬性）

3：CSS佔用的空間也遠比HTML的格式化選項要少得多，加載速度更快

4：能夠設置多種樣式樣式表，更具不一樣的需求提供不一樣的風格，樣式更加獨立

文檔類型：

全部網頁都是一個doctype（文檔類型）開頭的，表示網頁用哪種HTML來編寫

HTML的工做原理

1：網站的第一行是DOCTYPE聲明，

2：<html></html>若是把一個網頁比做成一顆樹的話，那HTML就是樹幹

3：網頁的head標頭

4：網頁的主體body,頁面上呈現的內容都是寫在這裏面的

讓IE8支持HTML5

<!--[if it IE 9]>

<![endif]>

IE條件註釋簡稱（IECC）

只有IE9以前的版本可見的javascript代碼

能夠忘卻的HTML標籤和屬性

1：不要用<font>來控制文本的顯示，css能夠作的更好

2：不要使用<b><i>標籤來使文字變得加粗或者傾斜：若是你必定要增強某一個字或者某一段話，可使用<strong>標籤來。對於相對次要的文字，可使用<em>標籤來進行強調

爲了使標籤顯示爲斜體可使用<cite>標籤，它具備一舉兩得的做用，它不只把標題變成的斜體，還給標籤作上了標記，便於搜索引擎的搜索

3：不要用<table>標籤進行網頁佈局

4：不要使用標籤的屬性來設置效果

5：不要濫用<br>標籤

經驗和見解：

經過最近的兩個頁面佈局設計的練習，我有了必定的心得和體會

關於HTML：多使用語義話結構的標籤，在沒有使用css樣式以前最好HTML代碼不要顯示多餘的效果，HTML只須要專一體現結構就能夠了，必定要注意命名規範和多寫註解，這樣在別人看你的代碼的時候才能更好地理解你的佈局思惟，爲何把這幾個結構劃分爲一塊，合理的運用標籤，合理的劃分結構。

關於css部分：

1：拿到設計稿以後，必定不要一拿到設計稿就開始動手開始作，設計師設計模塊都是有他本身的理由的，先理解設計師的思路，找到類似的地方，實現複用，這樣能夠大量減小你的代碼量，還有利於修改。

2：能用樣式實現的東西儘可能用樣式來實現，不要使用其餘的東西來影響HTML的結構，實現低耦合性。

3：使用CSS重置的技術，由於每一個瀏覽器的初始設計師不一樣的，他能取消瀏覽器常常在段落和其餘標籤之間插入的間距。

小技巧：

1：用標題<h1~h6>表示文本內的相對重要性。當兩個標題對於網頁的主題一樣重要時，那就給這兩個標題使用相同等級的標題，若是有一個標題不是很重要，那就給它使用下一級的標題，最好不要跳級

2：對於文本段落使用<p>標籤。

3：對於包含多個相關項目的列表，則使用無序列表<ul>,好比導航連接，標題，或者諸如此類的一組提示語等。

4：使用有序列表<ol>來表示一個過程的步驟，或者定義一個項目的順序。

5：若是要建立一個術語及其定義或描述，則要用<dl>（定義列表）標籤，並結合<dt>（定義術語） <dd>（定義描述）來使用。

6：若是引用一段引用語，好比摘自其餘網站的一段文字，一篇文章影評，或者只是你的祖父的一些至理名言，就要儘可能對長段落使用<blockquote>標籤，對於那些短的就使用<q>標籤

8：若是沒有合適的標籤，在你給某一個元素或者某一組元素添加樣式的時候，可使用span和div標籤

9：不要濫用div，H5中提供了幾個標籤能夠來取代div標籤<article>,<section>和<footer>標籤。對於導航欄可使用<nav>標籤

10：用W3C檢測器來檢測頁面

中止IE8全部無厘頭的行爲，恢復成IE8以前正常的樣子，作法就是在網頁中添加一個META的標籤，讓IE8忽略 compatibility view(兼容性視圖),compatillty view list(兼容性視圖列表)採用最標準的兼容模式來顯示網頁

最好放在<title>標籤正下方

高速緩存：當你發現你剛作出的修改在瀏覽器上沒有體現的時候，你可使用強制從新加載頁面的方式來解決，ctrl+F5

用CSS來鏈接外部樣式表

方法一使用<link>標籤

方法二：使用@improt指令：

與HTML的<link>標籤不一樣的是，@improt是CSS語言的一部分，具備如下明顯不一樣於HTML的一些性質：

1：與外部文件鏈接的時候得使用url（絕對路徑）而不是href，並要把路徑放在放在一對圓括號裏面。

2：和使用link標籤同樣，也可使用多個@improt外部樣式

<style>
@import url();

@import url();

</style>

裏的引號寫不寫都行。

標籤選擇器：

不是很推薦使用，會很大篇幅的使用，在你的HTML代碼結構裏的全部相同標籤都會使用這一套樣式，不利於對於同一標籤內的內容顯示不一樣樣的的實現

類選擇器：

目前我認爲是最好用的選擇器了。給標籤添加一個類名，能夠實現精準控制，對你想要設置樣式的元素標籤，設置你須要的類名，在外部樣式中設置便可。

使用規則：

1：全部類選擇器的開始都要以一個圓點開始（ID選擇器則是使用#鍵來開始）

2：CSS只容許在類名稱中出現使用字母，數字，連字符- 和下劃線_

3：在圓點以後，名稱始終要以字母開頭。

4：類名區分大小寫。大寫小不一樣的兩個相同的名稱，CSS會把它們解析爲不一樣的類

小小加油站：

div和span標籤

在你想給大段相關元素擺放位置的時候，可使用DIV標籤，它表現爲塊級元素的特性，能夠用盒子模型去理解它

span標籤：

在一大段文字中，若是你只想給特定的文字設置樣式，就能夠用到span標籤了，給span標籤設置類就能夠經過css給它來設置特使的樣式了

ID選擇器：控制特殊的網頁元素

具備惟一性

一個HTML頁面中同時只能存在一個ID名稱。

用處：目前使用到的功能有：設置一個標籤，給它設置position屬性：fixed定位，點擊它跳會頂部。

給標籤組定義樣式

若是有一些標籤（類）須要設置相同的樣式的話

可使用標籤組定義樣式：例如h1,h2,h3,h3,...{

樣式的內容

}

須要設置相一樣式的屬性能夠寫在一塊兒，中間使用逗號分開。也叫羣組選擇器

通用選擇器（*）

大哥級別的選擇器，他會同時設置整個頁面，不會針對某一個，所有都涉及到了

給標籤內的標籤設置定義樣式

由於HTML結構是樹形結構的，因此註定他有不少分支，她的內部會有不少的子節點（分支）好比ul中有li

li就是ul的派生元素，這個時候咱們就能使用派生選擇器：

能夠把這些標籤想一想成族譜，你是出於子標籤的位置；

祖父就是祖先元素，派生標籤就是祖先元素下一級的標籤，能夠理解成叔叔和爸爸的一輩，（其實就是離祖先元素最近的一個元素節點），父元素就是爸爸，你就是子標籤，就是一級一級樹根狀的發散下來的。

祖先元素：一個頁面的開始。<html>標籤就是全部標籤的祖先元素

派生標籤：處在一個標籤或者多個標籤內部的標籤就是派生標籤，

同胞標籤，能夠理解成你的兄弟

僞類和僞元素（給用戶提供更好地體驗更具一些操做會產生相應的效果）還能夠給元素添加額外的顯示效果

給連接定義樣式

1：a:link 指用戶尚未訪問過的連接

2：a:visited 表示用戶已經訪問過的標籤，訪問過以後會產生不一樣的效果，和沒有訪問的連接產生區別

3: a:hover 當用戶把鼠標移到這個連接上的時候會產生的效果

4: a:active 當用戶點擊連接時候產生的效果

給段落添加樣式

1：frist-letter:能夠建立下落的首字母（對段落開始的第一個字母的設置）

2:frist-line：對段落的首行進行設計

介紹更多的僞類：

1：focus 和hover極爲類似區別是當標籤得到焦點的時候提供的樣式，判斷用戶的焦點放在了哪裏，最適合用於給訪問者提供反饋，好比經過改變文本框的背景色表名她要在什麼位置輸入

2: befor 能完成一些選擇器沒法完成的操做，好比在某個元素前面加上東西

3: after 和before恰好相反，在後面添加引用標記

4::selection （注意注意必定要使用兩個冒號，使用一個冒號是不起做用的）通常用做訪問者須要複製文字時候的操做，能夠在訪問者選擇複製文字的時候，改變一選擇文字的樣式

屬性選擇器

選擇哪些相同標籤，可是具備不一樣屬性的元素

img[title]（標籤名[具備的屬性值]）

1：(^=)：以什麼開始 img[href^="http://"]

2:（$=）：以什麼結尾 img[href$=".jpg"]

3：(*=):帶有什麼的（找到全部具備共同屬性名的元素標籤）img[hreg*="select"]找到全部名字裏麪包含select的元素

子選擇器：

和派生相似找到離父元素最近的子元素的同級元素，找到子元素的下一級還能夠繼續使用自選擇器

：first-child 找到第一個子標籤

：last-child 找到最後一個子標籤

：nth-child

很複雜的選擇器，有不少種用法

能夠選擇列表中的奇元素或者偶元素

tr:nth-child(odd){backgroung-color:#efefef}設置奇數行的元素

tr:nth-child(even){background-color:#efefef}設置偶數行的元素

nth-child(N)這裏的N是能夠設置的，設置你但願他改變的元素

子類選擇器：(先記下來，這個暫時沒有用過，用過以後再來補充)

：frist-of-type

: last-of-type

: nth-of-type

同胞選擇器

子元素之間的聯繫，還必須是相鄰的子元素，若是兩個元素是相鄰的子元素就能夠用+號來使他們關聯起來

還有一種組合選擇器~號若是h2+p表示的是h2標籤旁邊的p標籤，那麼h2~p就表示和h2同一級的全部p標籤

：not（）選擇器

能夠稱爲否認僞類：可你幫助你選擇除了某個類以外的全部類

例子

p:not(.class){color:red}

意思就是除了p標籤類名爲class以外的全部標籤顏色設置爲紅色

侷限性：

1：只能使用簡單的選擇器。

2：不能使用派生選擇器

3：不能使用：not選擇器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。