CSS初步--定義和應用樣式
阿新 • • 發佈：2019-02-08
定義和應用樣式
CSS樣式由一條或多條以分號隔開的樣式宣告組成，每條宣告包含著一個CSS屬性和該屬性的值，二者以冒號分隔。
例如：background-color:grey; color:white。
1.使用元素內嵌方式：使用全域性屬性style將樣式應用到具體的某些元素上去。例如：
<a title="測試內容" href="http://www.baidu.com" style="background-color:#d0d0d0;color:#0000ff;">百度</a>
<p>I like <span>some </span>apples.</p 效果如下：
2.使用文件內嵌樣式
相比較style屬性，我們可以使用style元素定義文件內嵌樣式，通過CSS選擇器指示瀏覽器應用樣式。例:
<html>
<head>
<title>hhhhfff</title>
<style type="text/css">
a{
background-color: #d0d0d0;
color: #0000ff;
}
</style>
</head>
<body> 效果和上面的一致。
在一個style元素中可以定義多條樣式，例：
<html>
<head>
<title>hhhhfff</title>
<style type="text/css">
a{
background-color 效果如下:
可以看到a元素和span元素同時有了樣式。
3.使用外部樣式表
為了在每一個文件中避免重複定義相同的樣式，我們可以建立一個獨立的樣式表文件。例如，我們可以將上面的樣式放到名為test.css的檔案中去:
a{
background-color: #d0d0d0;
color: #0000ff;
}
span{
border: thin red solid;
padding: 10px;
}然後在HTML文件就可以使用link元素將樣式表匯入，例:
<html>
<head>
<title>hhhhfff</title>
<link rel="stylesheet" type="text/css" href="test.css"></link>
</head>
<body>
<a title="測試內容" href="http://www.baidu.com">百度</a>
<p>I like <span>some </span>apples.</p>
</body>
</html>得到的效果仍舊和上面的效果一致。
文件只要使用link元素就可以連結想要的樣式表，但是需要注意的是，如果不同樣式表中使用了同樣的選擇器，那麼這些樣式表的匯入順序很重要，這種情況下得以應用的是後匯入的樣式。
1.從其他樣式表匯入樣式
可以使用@import語句將樣式從一個樣式表匯入另一個樣式表。例如下面的combine.css:
@import "styles.css"
span
{
border:medium black dashed;
padding:10px;
}然後用link連結新的樣式表:
<link rel="stylesheet" type="text/css" href="combine.css"></link>可以看到的是，最後是combine.css的span起了作用:
2.宣告樣式表的字元編碼
在CSS樣式表中可以出現在@import語句之前的只有@charset語句，它用於宣告樣式表使用的字元編碼，例如:
@charset "UTF-8";
@import "styles.css";
span
{
border:medium black dashed;
padding:10px;
}