關於CSS的一些基礎內容

最近用到了css，剛好學學。css（cascading style sheet）中文名層疊樣式表，用於為html文件新增樣式控制，也是一種計算機語言。

一、css語法

a)css規則由選擇器和宣告組成，構造為selector，多個宣告之間用分號隔開。declaration又包含屬性property和值value兩部分。結構為property:value。

b) 不同的property的value有不太能夠的寫法，比如color:#ff000;color:rgb(255,255,255);width:12px;width:98%;font-family:"calibr"等等。

c) css中使用空格不會影響工作效果，而且css對大小寫不敏感，但涉及到與 html 文件一起工作的話，class 和 id 名稱對大小寫是敏感的。

d) 可以對選擇器分組，然後使用相同的宣告，比如

table,div,h1

二、選擇器

常用的選擇器有派生選擇器、id選擇器、類選擇器、屬性選擇器等。

a) 派生選擇器

能夠依據元素的上下文關係來定義樣式，所以也叫上下文選擇器。比如要讓li列表中的strong元素變為斜體字：

li strong

我是斜體字

我是正常的字型。

讓h2中的strong顏色為blue

h2

h2 strong

h2 strong會覆蓋h2的樣式定義

b)id選擇器

用於為標有特定id的html元素指定樣式。

#red

這個段落是紅色。

id屬性在html中不能重複，否則只有最後渲染的那個生效。

id選擇器也用於建立派生選擇器，擴充套件派生選擇器的使用場合。

c) 類選擇器

用點號開頭，且類名的第乙個元素不能是數字，基本使用為：

.center

類選擇器可作用於所有標記的元素。

類選擇器也可以可派生選擇器配合使用：

.fancy td

這樣寫時，類名為fancy的更大的元素內部的**單元都會顯示橙色文字。

td.fancy

而這樣時，所有類名為fancy的單元格都將是橙色文字。

d)屬性選擇器

用於對帶有指定屬性的html元素設定樣式。比如為帶有title屬性的所有元素設定樣式：

hello

[title]

還有屬性和值選擇器，比如

[title=hello]選擇title=hello的元素

[title~=hello]選擇title包含hello的元素

[title|=hello]選擇title以hello開頭的元素

e)偽類

偽類用於為選擇器新增特殊的效果，比如要控制超連結的狀態：

a:link /* 未訪問的鏈結 */

a:visited /* 已訪問的鏈結 */

a:hover /* 滑鼠移動到鏈結上 */

a:active /* 選定的鏈結 */

偽類與css還可以配合使用：

a.red : visited

css

三、框模型(box model)

a)css中的元素採用框模型來定義內容(element)、內邊距(padding)、外邊距(margin)、邊框(border)等。

b) padding屬性控制元素邊框與內容之間的空白區域，margin則設定元素邊框外側的空白區域。

如果直接寫padding:10px或margin:10px，則四條邊框都會生效，也可以使用*-top\*-right\*-bottom\*-left來分別設定，簡寫時為，這是按照上右下左的順時針順序設定了對應的邊距。

c)css的長度單位分為相對長度單位和絕對長度單位，相對長度單位有em(字型高度)\ex（字型x的高度）\px（畫素）\%（百分比），絕對長度單位有in（英吋）\cm\mm\pt（point1點=72分之1英吋）\pc（picas，1px=12點）。為邊距使用%時，是相對父元素的width計算的。

關於CSS的一些基礎內容

關於token的一些內容

ci的一些基礎內容

css的一些基礎（一）

關於CSS的一些基礎內容

關於token的一些內容

ci的一些基礎內容

css的一些基礎（一）

相關推薦