五,JavaWeb簡略的談下前端技術<二>CSS層疊樣式表
最初的web頁面只是在瀏覽器裏邊顯示一些信息而已，後來隨着互聯網的發展，人們對頁面的可觀賞性要求愈來愈高，你網站作的難看，沒人瀏覽啊，並且網站的功能愈來愈強大，若是這麼多的頁面沒有一個很好的排版的話，簡直就是亂七八糟，爲此對於優化頁面的需求也愈來愈高，可是HTML他沒這個能力啊，HTML：臣妾作不到啊~。爲此爲了彌補HTML的不足，W3C組織又弄出來了一個新的東西，那就是CSS，而後就是HTML來負責內容，CSS用來負責美觀。 css
5.1引用方式
CSS有4種定義與引用方式：行內樣式，內嵌式，連接式和導入式。用的時候能夠根據實際的狀況來選擇合適的定義方式。 html
1，行內樣式： 前端
行內樣式是一種比較直接的一種樣式，它經過style屬性直接定義在HTML標記內，這種樣式比較容易被初學者接受，可是很是不靈活。 web
例子以下：<p style=」color:blue」>文字</p>把段落裏邊的顏色設置成藍色。 瀏覽器
2，內嵌式： 字體
內嵌式樣式表就是在頁面中使用<style></style>標記將CSS樣式包含在頁面中，例如： 優化
<style> 網站
P{ spa
color:red; .net
}
</style>
這樣的話，在html文檔中，全部p標記的內容都是紅色字體的。可是呢，咱們一個網站裏邊有不少的網頁的，你說咱們在一個網頁定義了這樣的一個樣式，可是咱們另外的一個頁面又要從新弄，是否是很麻煩，因此說這種時比較笨重的。
3，連接式：
連接外部CSS樣式表是最經常使用的一種引用樣式表的方式，將CSS樣式定義在一個外部的文件中，而後在html文件中使用<link>標記引用，這是最爲有效的使用CSS樣式表的方式。
用法：<link rel=」stylesheet」 href=」path」 type=」text/css」>
例子：好比咱們建立了一個mystyle.css的樣式表，那麼咱們怎麼用呢？
<link rel=」stylesheet」 href=」mystyle.cc」 type=」text/css」>那麼在CSS文件中定義的樣式就被HTML文件引用了。
4，導入式
導入式和連接式差很少只不過是引用的方式不同罷了，好比在連接式中舉的那個例子，那麼用導入式怎麼用呢？
<style>
@import 「mystyle.css」
</style>
若是萬一有一個文檔具備上述的全部的樣式，並且對同一種標記多了多個樣式定義的時候應該怎麼辦呢？因此W3C給這幾種使用CSS的方式弄了一個級別。他們的優先級從高到底爲：行內樣式》內嵌》連接》導入式。
5.2CSS規則：
一個CSS樣式表中包含3部份內容：選擇符、屬性、屬性值。
選擇符：{屬性：屬性值;}
選擇符又叫選擇器，HTML引用某個CSS文件以後，某一段文字的具體用什麼樣式，就是經過選擇器來具體使用的。
例如上邊提到的例子
<style>
P {
color:red;
}
</style>
那麼p就是選擇器，當前的HTML中全部使用p標記的內容的顏色都將是紅色的。
Color就是屬性嘍，red就是屬性值。
5.3CSS選擇器
1，標記選擇器：直接定義某個標記的屬性，那麼全部使用這個標記的內容都將是被設置的樣式。使用這種選擇器很是便捷，可是使用這種選擇器會有必定的侷限性。好比說我定義了一個超連接的樣式，那麼我一個頁面的超連接將都是這個樣式，我想用不一樣的樣式來表現超連接的話，將很是麻煩。
2，類別選擇器：本身定義一個類別，以.開頭，至關於本身定義了一個屬性同樣。
例子：
<head>
<meta charset = 「utf-8」>
<title>類別選擇器</title>
<style>
.one{
color:red;
}
</style>
</head>
<body>
<h2 class=」one」>應用了選擇器1</h2>
</body>
3,ID選擇器：經過HTML頁面中的ID屬性來選擇來添加樣式的，須要注意一個html頁面中不能有兩個相同的ID，至關於給標記的ID屬性增長了一個屬性值，定義ID以#號開頭。
<style>
#one{
color:red;
}
</style>
<body>
<p id=」one」>ID選擇器</p>
</body>
5.4 CSS經常使用屬性
此處略，無非就是寬，高，背景，字體，顏色啥的，須要用的時候去查找就好了。順便舉個小例子。
下期預告：六,JavaWeb簡略的談下前端技術<三>JavaScript
若是想查看更多的技術文檔請關注個人公衆號：ITYaoDao，或者直接掃描下邊的二維碼：
- 1. 六,JavaWeb簡略的談下前端技術<三>JavaScript
- 2. 四，JavaWeb簡略的談下前端技術<一>HTML5的各個標記
- 3. Web前端——CSS層疊樣式表
- 4. css---層疊式樣式表
- 5. CSS 層疊式樣式表
- 6. css層疊樣式表（2）——層疊樣式表的使用
- 7. CSS層疊樣式表
- 8. CSS（層疊樣式表）
- 9. CSS：層疊樣式表—position
- 10. CSS--層疊樣式表
- 更多相關文章...
- • Hibernate的快照技術 - Hibernate教程
- • Web 品質 - 樣式表 - 網站品質教程
- • Docker容器實戰(一) - 封神Server端技術
- • 三篇文章瞭解 TiDB 技術內幕 —— 談調度
-
每一个你不满意的现在，都有一个你没有努力的曾经。