五,JavaWeb簡略的談下前端技術<二>CSS層疊樣式表

時間 2019-11-09

標籤 javaweb 簡略前端技術 css 層疊樣式欄目 Java 简体版

原文原文鏈接

最初的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，或者直接掃描下邊的二維碼：

相關文章

相關標籤/搜索

Hibernate教程

每日一句

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

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<