CSS基礎筆記

CSS（Cascading Style Sheets），層疊樣式表。

基本格式

選擇器 {
    屬性：值；
}

CSS注釋

/*  注釋內容  */

引入樣式表

行內樣式表（內聯樣式）

通過標簽的style屬性設置元素樣式

<標簽名 style="屬性:值;屬性:值;">內容</標簽名>

內部樣式表（內嵌式）

將CSS代碼集中寫在head標簽內，用style標簽定義

<head>
    <style type="text/css">  <!-- type在html5中可省略 -->
        選擇器 {屬性:值;屬性:值;}
    </style>
</head>

外部樣式表（外鏈式）

將CSS代碼放在后綴為css的外部樣式表文件中，在HTML的head標簽中，用link標簽鏈接外部樣式表文件

<head>
    <link href="url地址" type="text/css" rel="stylesheet" />
</head>

選擇器

標簽選擇器（元素選擇器）

使用HTML標簽名稱作為選擇器

類選擇器

使用"."（英文句號）進行標識，后面跟著類名，如： .classname

標簽調用時添加屬性class="類名"

注意：

HTML使用多個類選擇器時，顯示效果與類名先后順序無關，而與CSS書寫順序有關
不建議使用”_"下劃線命名
不建議純數字和中文命名
可參考《Web前端開發規范手冊》

id選擇器

使用“#“標識，后面緊跟id名

W3C標準規定，同一個頁面內，不允許有相同id的對象，但允許有相同class的對象

通配符選擇器

用”*“表示，能匹配頁面中所有的元素

偽類選擇器

鏈接偽類選擇器：

:link 未訪問的鏈接
:visited 已訪問的鏈接
:hover 鼠標移動到鏈接上時
:active 選定的鏈接

注意，書寫時順序盡量不要顛倒

結構（位置）偽類選擇器（CSS3）：

:first-child 屬于其父元素的第一個子元素
:last-child 屬于其父元素的最后一個子元素
:nth-child(n) 指定屬于其父元素的第n個子元素，n可以是數字、關鍵詞、公式
:nth-last-child(n) 指定屬于其父元素的倒數第n個子元素

目標偽類選擇器：

:target 選取當前活動的目標元素

復合選擇器

交集選擇器

更精確地定義

標簽選擇器.類選擇器 {屬性:值;}

并集選擇器

定義共同擁有的屬性

選擇器,選擇器 {屬性:值;}

后代選擇器

包含深層全部

外層 內層 {屬性:值;}

子元素選擇器

只選擇子元素而不包含更深層的

父元素 > 子元素 {屬性:值;}

屬性選擇器

選擇器[屬性] {屬性:值;}
選擇器[屬性=值] {屬性:值;}  /* 值完全相同的 */
選擇器[屬性*=值] {屬性:值;}  /* 任意位置有該值的 */
選擇器[屬性^=值] {屬性:值;}  /* 起始位置有該值的 */
選擇器[屬性$=值] {屬性:值;}  /* 結束位置有該值的 */

偽元素選擇器

::first-letter 文本的第一個字或詞
::first-line 文本第一行
::selection 選中文本時的樣式
::before 元素內部開始位置創建一個元素并選擇
::after 元素內部結束位置創建一個元素并選擇

標簽顯示模式

塊元素（block-level）

如<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等

總是從新行開始
寬度默認是容器的100%
高度、行高、外邊距及內邊距都可以控制
可以容納內聯元素和其他塊元素

行內元素（inline-level）

如<a>、<strong>、<b>、<em>、<i><del>、<s>、<ins>、<u>、<span>等

和相鄰元素在一行
高、寬無效、水平方向的padding和margin可以設置，垂直方向無效
默認寬度為內容寬度
只能容納文本或其他行內元素

行內塊元素（inline-block）

如<img />、<input />、<td>

和相鄰元素在一行
高、寬、外邊距、內邊距都可以設置
默認寬度為內容寬度

標簽顯示模式切換

display屬性：

block（行內轉塊）
inline（塊轉行內）
inline-block（塊、行內轉行內塊）

字體樣式屬性

font-size：字號

單位	說明
em	相對于當前對象內文本的字體尺寸
px	像素
絕對長度單位	說明
in	英寸
cm	厘米
mm	毫米
pt	點

font-family：字體

font-weight:字體粗細

可用值normal(400)、700(bold)、bolder、lighter、數字

font-style：字體風格

可用值normal(默認值)、italic(傾斜)、oblique(傾斜)

font：綜合設置字體樣式

選擇器 {font: font-style font-weight font-size/lin-height font-family;)

使用font屬性時，值的順序不能更換，中間用空格隔開
不需要設置的可以省略，但必須保留font-size和font-family，否則font屬性不起作用

常用技巧：

現在網頁普遍使用14px+
盡量使用偶數字號，ie6等老式瀏覽器對奇數會有bug
盡量使用系統默認字體，當瀏覽器不支持第一個字體時會嘗試下一個字體
當不支持字體的中文寫法時，可用英文寫法或者unicode寫法

外觀樣式

color：顏色

預設顏色，如red、blue、pink
十六進制，如#DDDDDD
RGB形式，rgb(255,255,255)或rgb(100%,0,0)
顏色透明，rgba()

line-height：行間距

常用單位有像素px，相對值em，百分比%

text-align：水平對齊方式

常用值：left（默認），center，right

text-indent：首行縮進

建議使用單位em

letter-spacing：字間距

word-spaing：單詞間距

text-shadow：文字陰影

水平距離垂直距離模糊距離顏色

前兩個參數必須有，后兩個參數有默認值

text-decoration: 裝飾效果

none \ underline \ overline \ line-through

背景樣式

background-color: 背景顏色
background-image: 背景圖片，url(url地址)
background-repect: 是否平鋪，repeat-x \ repeat-y \ repeat \ no-repeat \ round \ space，默認repeat
background-attachment: 固定還是滾動，fixed \ scroll，默認scroll
background-position: 位置，top \ center \ bottom \ left \ center \ right \ 百分比 \ 長度值，默認top left
background: 背景顏色背景圖片平鋪滾動位置，順序無規定
rgba顏色可設置透明
background-size: 設置尺寸，寬高 \ cover \ contain
多背景圖片，一個元素可以設置多重背景圖，每組background用 , 分隔，前面的背景圖層次較高

CSS書寫規范

選擇器與 { 之間包含空格
屬性名與 : 之間不包含空格，: 與值之間包含空格
包含多個選擇器時，每個選擇器獨占一行
選擇器嵌套層級盡量不大于3級
每個屬性定義另起一行
屬性定義以 ; 結尾
更詳細的看規范手冊

CSS三大特性

層疊性

出現樣式沖突時，按書寫順序，以最后的樣式為準

繼承性

子標簽會繼承父標簽的某些樣式，如字體、字號、顏色、行距等與文字類有關的
不繼承的有：邊框、外邊距、內邊距、背景、定位、元素高等與塊有關的

特殊性

specificity用一個四位的數字串（0,0,0,0）表示，左面最大，一級大于一級，數位之間沒有進制

元素（標簽）（0,0,0,1)
類、偽類、屬性 (0,0,1,0)
ID (0,1,0,0)
行內樣式 (1,0,0,0)
!important +∞ 屬性:值!important;
繼承的權重為0
權重相同時按順序，最后的為準

盒子模型

border：邊框

border: border-width border-style border-color
border-width: 邊框寬度
border-style:

常用屬性值：none（無，默認）、solid（單實線）、dashed（虛線）、dotted（點線）、double（雙實線）
border-collapse: collapse 邊框合并
border-radius: 圓角半徑

padding: 內邊距

margin: 外邊距

寬度屬性width和高度屬性height僅適用于塊元素，對行內元素無效（除img和input）
外邊框會合并
沒有給定寬高時，padding不會影響盒子大小

CS3盒子模型

box-sizing: 指定盒模型

content-box 默認值，盒子大小為width+padding+border
border-box 盒子大小為width，即width包含padding和border

box-shadow: 盒子陰影

h-shadow v-shadow blur spread color inset
水平位置(必需) 垂直位置(必需) 模糊距離陰影尺寸顏色外部陰影(outset)轉為內部陰影

浮動

普通流（標準流或文檔流）

上到下，左到右，塊元素占一行

float: 浮動

left right none(默認)

浮動會使元素具有行內塊特性

clear: 清除浮動

left right both 不允許左側、右側、左右側有浮動元素

額外標簽法：在浮動元素末尾添加一個空標簽包含clear:both;
父級元素添加overflow屬性方法：在父級元素添加overflow: hidden;或值為auto\scroll都可以

使用after偽元素：

.類名:after {  /* 一般類名為clearfix */
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.類名 {*zoom: 1;}  /* IE6、7專用 */

before和after雙偽元素：

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

版心

指網頁中主題內容所在的區域

布局流程

確定頁面的版心
分析行模塊和列模塊
制作HTML和CSS
CSS初始化

定位

定位模式：static、relative、absolute、fixed
邊偏移：top、bottom、left、right

static（靜態定位）

relative（相對定位）

相對在文檔流的位置定位，在文檔流中的位置保留

absolute（絕對定位）

相對最近的已定位父元素定位，所有父元素沒定位時，以body定位，不保留原位置

fixed（固定定位）

相對瀏覽器定位，不保留原位置

固定定位沒有內容時，需要指定寬高
居中，例如：left: 50%; margin-left: 半寬;
行內元素添加絕對定位、固定定位、浮動后，會自動轉換為行內塊模式

疊放次序（z-index）

默認值為0，取值越大，越居上，可以為負數
值相等時，按書寫順序，后來居上
只有相對定位、絕對定位、固定定位有此屬性

元素的顯示和隱藏

display: 顯示

none 隱藏，不保留位置

visibility : 可見性

visible 可見
hidden 隱藏，保留位置

overflow: 溢出

visible 默認
auto 超出就顯示滾動條
scroll 一直顯示滾動條
hidden 超出部分隱藏

CSS用戶界面樣式

cursor: 鼠標樣式

default、pointer、move、text等

outline: 輪廓

outline-width outline-style outline-color
去除輪廓線，outline: 0;

resize:

防止拖拽文本域，resize: none;

vertical-align: 垂直對齊

baseline、top、middel、bottom
對塊元素無效，對行內元素或行內塊元素有效
常用于圖片、表單、文字的對齊
去除圖片底側縫隙

溢出的文字隱藏

work-break: 自動換行

normal break-all(允許在單詞內換行) keep-all(只能在半角空格或連字符處換行)
主要處理英文單詞

white-space: 文本顯示方式

normal nowrap(強制同一行內顯示所有文本)

text-overflow: 文字溢出

clip ellipsis(溢出時顯示省略標記...)
前提是設置了強制一行內顯示

CSS精靈技術（sprite）

本質就是將一些背景圖像整合到一張大圖中，通過background-position定位

字體圖標

UI人員設計字體圖標效果圖（svg）
前端人員上傳生成并下載兼容性字體文件包
引入字體文件包到HTML頁面

滑動門

利用sprite技術和padding實現

外框顯示左門，用padding-left撐開背景
內框顯示左門以右所有，用padding-right撐開背景

過渡

transition: 屬性時間運動曲線延遲;

transition-property 可用all指定所有屬性
transition-duration 默認0
transition-timing-function ease（默認）、linear、ease-in、ease-out、ease-in-out
transition-delay 默認0

2D轉換

transform: 方法

translate()方法位移，長度或百分比（按自身）
rotate()方法旋轉，角度deg
scale()方法縮放或放大
skew()方法翻轉
matrix()方法

transform-origin: 調整元素轉換變形的原點

3D轉換