CSS基礎語法

時間 2020-07-24

標籤 css 基礎語法欄目 CSS 简体版

原文原文鏈接

1.簡介
css

層疊樣式表是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。html

CSS目前最新版本爲CSS3，是可以真正作到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS可以對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎全部的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，並可以進行初步交互設計，是目前基於文本展現最優秀的表現設計語言。CSS可以根據不一樣使用者的理解能力，簡化或者優化寫法，針對各種人羣，有較強的易讀性。ide

2.基礎語法字體

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。優化

selector {declaration1; declaration2; ... declarationN }

每條聲明由一個屬性和一個值組成。url

selector {property: value}

在下面例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。spa

h1 {color:red; font-size:14px;}

3.選擇器類型設計

a).標記選擇器：選擇器一般是某個 HTML 標籤，好比 p、h一、em、a，甚至能夠是 html 自己。htm

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

b).類選擇器：類選擇器一般以.號開頭，在HTML文件中經過class屬性來引用。對象

.important {color:red;}

<h1 class="important">
This heading is very important.
</h1>

c).ID選擇器：一般以#開頭，在HTML文件中經過id屬性來引用，與類選擇器不一樣，ID選擇器在文檔中只能使用一次。

#mostImportant {color:red; background:yellow;}

<h1 id="mostImportant">This is important!</h1>

d).屬性選擇器：一般以中括號括起，若是但願選擇有某個屬性的元素，而不論屬性值是什麼，可使用簡單屬性選擇器。它有多種用法：

[attribute]用於選取帶有指定屬性的元素。

[attribute=value]用於選取帶有指定屬性和值的元素。

[attribute~=value]用於選取屬性值爲一用空格分隔的字詞列表，其中一個等於value。

[attribute|=value]用於選取屬性值爲一用連字符分隔的字詞列表，且由value開始。

[attribute^=value]匹配屬性值以指定值開頭的每一個元素。

[attribute$=value]匹配屬性值以指定值結尾的每一個元素。

[attribute*=value]匹配屬性值中包含指定值的每一個元素。

4.css在html文檔中的使用

a).直接樣式表：因爲要將表現和內容混雜在一塊兒，內聯樣式會損失掉樣式表的許多優點。請慎用這種方法，例如當樣式僅須要在一個元素上應用一次時。

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

b).內部樣式表：當單個文檔須要特殊的樣式時，就應該使用內部樣式表。你可使用 <style> 標籤在文檔頭部定義內部樣式表，就像這樣:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-p_w_picpath: url("p_w_picpaths/back40.gif");}
</style>
</head>

c).外表樣式表：當樣式須要應用於不少頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的狀況下，你能夠經過改變一個文件來改變整個站點的外觀。每一個頁面使用 <link> 標籤連接到樣式表。<link> 標籤在（文檔的）頭部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

相關標籤/搜索

每日一句

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