CSS基礎學習

阿新 • • 發佈：2018-12-10

CSS的分類和優先順序

瀏覽器預設設定
外部樣式表(<head>標籤內部)，定義在單獨css檔案中，由<link>標籤引用，

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

內部樣式表(<head>標籤內部) 由<style>標籤包圍

<style type="text/css">
  hr {color: sienna;}
</style>

內聯樣式表在HTML元素內部使用style

屬性, style可以包含任何css屬性。

<p style="color: sienna; margin-left: 20px">

優先順序 4>3>2>1 ;

CSS基本語法

selector {
    property1: value1; 
    property2: value2;
    ...
}

selector被稱為選擇器，代表要被渲染的元素，可能是元素HTML名稱、id值或者class值；
可以指定多個選擇器，用逗號隔開; 如果是空格隔開，表示派生選擇器，即空格前後的元素具有父子關係；

選擇器分類

元素選擇器，又叫類選擇器，即直接使用html元素作為選擇器，可以用*

表示所有元素。
類選擇器，又叫class選擇器，顧名思義該選擇器作用於指定的class元素，使用.class表示。類選擇器可以和元素選擇器結合使用，如p.class1，表示class='class1'的p元素。
ID選擇器，作用與指定id的元素，使用#id表示。
屬性選擇器，作用於特定屬性的元素,語法:可選的元素名[屬性名],還可以根據屬性值選取特定元素，如a[href='http://www.bb.com']，選取href為’http://www.bb.com‘的a標籤。其他高階語法：~= 部分匹配，即匹配詞列表中某個詞；^= 匹配開始; $= 匹配結尾；*= 包含子串；
後代選擇器或派生選擇器，使用空格隔開，從左至右為祖先後代關係。

子元素選擇器，使用>隔開父子元素。
相鄰兄弟選擇器，使用+連結，但只選擇右邊的元素，兩個元素必須相鄰，且有共同的父元素。

CSS樣式

背景

背景色

background-color: red;

背景影象

background-image: url("img_file");

背景重複:

可能取值：repeat-x,水平重複; repeat-y,垂直重複; no-repeat,不重複.

background-repeat: repeat-y;

背景定位:

可能取值: top, bottom, right, left, center，百分比, px(相對於元素左上角內邊距的偏移量); 分別表示垂直和水平方位，所以最多賦兩個值，一個表示垂直，另一個表示水平，如果只賦一個值，另一個預設center；

background-position: top;

背景關聯：背景圖是否隨檢視視窗滾動。

可能取值：scroll(預設), fixed, inherit, initial, local, unset.

background-attachment: fixed;

以上所有背景相關屬性都可以統一放入background屬性賦值，用空格隔開。

文字

文字縮排

text-intent，可以賦值em或百分比(相對於父元素)。

水平文字對齊

text-align，可能值left,right,center,justify等，隻影響文字，不影響元素本身。

字母間隔

letter-spacing,影響單詞的每個字母或者字元之間的間隔，可以使用em,px,百分比等多種單位；另外word-spacing定義單詞之間的間隔，但是這裡的單詞並不是傳統意義的單詞，只要有空白符隔開，都會被認為是單詞，所以慎用word-spacing。

大小寫轉換

text-transform，取值： * none，預設，不轉換 * uppercase, 大寫 * lowercase,小寫 * captalize，首字母大寫

文字裝飾

text-decoration，取值： * none，預設，無裝飾 * underline, 下劃線 * overline，上劃線 * line-through，貫穿線

文字顏色

color

字型型別

font-family,CSS 定義了 5 種通用字體系列：

Serif 字型
Sans-serif 字型
Monospace 字型
Cursive 字型
Fantasy 字型

字型風格

font-style,可能值， * normal, 正常顯示 * italic, 斜體 * oblique, 文字傾斜

italic和oblique在大部分場景下顯示效果相同，只有部分字型本身不支援傾斜的話，italic是無效的，所以只能使用oblique。

字型加粗

font-weight，取值： * 100~900，九級粗度 * bold, 相當於700 * normal, 相當於400 * bolder, 比繼承的粗度更粗 * lighter, 比繼承的粗度更細

字型大小

font-size, 可以使用em,px,百分比,smaller,larger等定義字型大小，其中em是相對大小單位，與實際大小的對應關係為: 實際大小= 繼承來的大小*em。

連結

連結<a>有四種狀態： * a:link, 普通，未被訪問的狀態 * a:visited, 已訪問 * a:hover, 滑鼠指標位於連結上方 * a:active, 連結被點選的時刻

其中冒號前面的a也可以換成a的#id或者.class，為某個或某些特定的連結指定樣式。可分別為這幾種狀態指定color,background,font-family,text-decoration等樣式，但是實測時發現color值不能使用關鍵字，如red,green等，要使用十六進位制表示的RGB值，如#00FF00.

列表

列表即有序列表<ol>和無序列表<ul>,列表樣式包括： * list-style-type:square,列表項的標誌符號，也可以使用list-style-image:url()自定義影象； * list-style-position, 列表符號的位置, 預設outside，當設定是為inside的時候，列表項整體會後移。

表格

border系屬性用於設定<table>、<td>、<th>、<tr>等邊框，包括樣式(border-style)、顏色(border-color)、厚度(border-width)、是否單線(border-collapse)、邊框與邊框之間的間距(border-spacing，當border-collapse設定為collapse時，看不到效果).

表格邊框預設不顯示(border-style為’none’)，要設定樣式為其他值後才會顯示。

除此之外還可以設定以下表格相關屬性： * pading: 內邊距 * margin: 外邊距 * text-align和vertical-algin: 文字對齊

輪廓

在元素的最外圍畫一層指定樣式的邊框

相關屬性： * outline-color * outline-style * outline-width * outline

定位

CSS定位有三種：普通流、浮動和絕對定位。

定位屬性:position，取值： * static: 預設，無定位，元素框正常生成。 * relative: 相對定位，相對於其本來位置偏移。 * absolute: 絕對定位，相對於最近已定位的祖先元素，可能覆蓋頁面上的其他元素，可以通過z-index控制邊框的對方次序。 * fixed: 相對於瀏覽器視窗定位，即元素不會隨瀏覽器滾動。

除static外，其他屬性值還可與top、bottom、left、right配合使用，表示具體的偏移值。

浮動：float 浮動框不在文件的普通流中，他可以想做或者向右移動，直到碰到它的包含框或另一個浮動框。

如果一個元素不想其周圍出現浮動元素，可以使用clear指定對應的邊即可。

CSS3

新邊框屬性

border-radius, 設定圓角，四個角可以分別設定。
border-image,使用影象充當邊界線。

新的背景屬性

background-size, 背景影象大小。
background-origin,背景開始繪製的區域，取值有border-box、padiing-box和content-box。就像貼紙一樣，將貼紙從指定區域的左上角開始貼。
backgound-clip,背景影象的繪製區域，將該區域外的影象裁剪掉，效果就像先按照background-origin區域貼好貼紙，然後將background-clip區域外的貼紙裁剪掉。
background-image，不是新屬性，但是多了使用方式，可以指定多個url作為背景。
box-shadow,盒模型陰影。

漸變

線性漸變:liner-gradient,例子background:linear-gradient(red,blue)，設定一個從上到下，從red漸變到blue的背景色。如果設定從左到右的漸變色，可以設定一個90度的漸變角度，如backgound:linear-gradient(90deg,red,blue)。
徑向漸變:radial-gradient, 例子,background: radial-gradient(circle, red, yellow, green)，設定圓形的徑向漸變效果。

新的文字屬性

文字陰影:text-shadow:5px 5px green，文字溢位時該如何處理，取值有：ellipsis(省略號)、clip(裁剪)等。
文字溢位:text-overflow:ellipsis(溢位時顯示省略號)。

注：另一個相似屬性overflow,不針對文字，而是整個內容區域溢位時的處理，取值有hidden、scroll等。
使用自定義字型：@font-face

2D轉換

移動:translate(x,y)
縮放:scale(x,y)
旋轉:rotate(angle)
傾斜:skew(x,y)

過渡

transition-property:應用過渡的CSS屬性。
transition-duration:過渡時長，預設0。
transition-delay:延時。
transition-timing-function:過度效果

動畫

定義：

@keyframes myname {
    from {property_name: value;}
    to {property_name: value;}
}

使用:

div {
    animation-name: myname;
    animation-duration: 2s;
    ...
}

多列

把內容分成多部分顯示，只有當內容足夠多時才會分成多列。

column-count: 列數
column-width: 列寬
column-gap: 兩列之間的間隙
column-rule-style: 分割線的樣式
column-rule-color: 分割線顏色
column-rule-width: 分割線寬度

設定元素尺寸可伸縮

resize,取值horizontal(水平方向可伸縮)、vertical(垂直方向可伸縮)、both(水平和垂直可伸縮)。一般要與overflow同時使用才有效果。即會在元素右下角生成可拉伸的三角區，拖動該區域就可以伸縮元素了。