css本質就是乙個樣式表
主要由選擇器和宣告兩個部分組成，宣告部分又包括屬性跟屬性值
/*注釋*/
/*多行注釋
*/
/*內部樣式*//*外部樣式 將css**寫在單獨的檔案中，再進行引用*/
/*行內樣式*/
hello world
/* id選擇器 */
#id名
/* 類選擇器 */
.類名/* 元素選擇器 */
元素名/* 通用選擇器 */
*/* 例子 */
#id1
.c1p
/*作用於div內部的a標籤*/
div a
/*選擇所有父級是元素的元素*/
div>span
/*
選擇所有緊接著元素之後的第乙個元素
也就是同級別緊挨著的下面的第乙個*/
div+p
/*同級別下的所有span*/
div-span
例如：
/*所有含有屬性名username的標籤樣式*/
[username]
/*所有含有屬性名username的p標籤樣式*/
p[username]
/*所有含有屬性名username="json"的標籤樣式*/
[username="json"]
/* 將div,p標籤統一設定字型為紅色 */
div,
p
/* c1類內部所有p標籤的樣式 */
.c1 p
/*未訪問的連線 */
a:link
/*滑鼠移動到鏈結上的*/
a:hover
/*選中的時候*/
a:active
/*已訪問的鏈結*/
a:visited
p:first-letterp:beforep:after/*此時頁面上所有標籤會繼承body的字型顏色，但是p標籤不會，因為p標籤自己的樣式把body的樣式覆蓋了*/
內聯樣式 > id選擇器 > 類選擇器 >元素選擇器
width屬性可以為元素設定寬度
height屬性可以為元素設定高度
塊兒級標籤才能設定寬度，內聯標籤的寬度由內容來決定
body
字型大小：font-size
p
字型粗細：font-weight
顏色主要有三種表示方式：
文字對齊：text-align
文字裝飾：text-decoration
注意：該屬性常用於去掉a標籤預設的自劃線
a
首行縮排：text-indent: 32px
p
div
background-attachment 屬性設定背景是否固定或者隨著頁面的其餘部分滾動2、fixed 頁面滾動的時候，背景不會移動
3、inherit 從父元素繼承屬性的設定
邊框屬性：邊框粗細，樣式，顏色
.c1
/*也可以簡寫成*/
.c1/*邊框四邊可以設定不同樣式,四個字首如下：
border-top
border-right
border-bottom
border-left
*/
邊框樣式：border-style1、none 無邊框
2、dotted 點狀虛線邊框
3、dashed 矩形虛線邊框
4、solid 實線邊框
圓角屬性 ：border-radius
1、none：在瀏覽器中不顯示
2、block: 具有塊兒級元素的特點，如果設定了寬度，則會用margin填充剩下的部分
3、inline: 行內元素顯示
4、inline-block：使元素同時具有行內元素和塊兒級元素的特點
注意：display：none 和bisibility:hidden的區別：
前者可以隱藏某個元素，不會占用任何空間
後者可以隱藏某個元素，但是隱藏後元素仍占用元素原有的空間，仍然還會影響布局
注意：margin和padding常用的四種簡寫順序：
浮動元素不管它本身是何種元素，都會生成乙個塊級框，有兩個特點：
屬性值：
注意：浮動會有乙個影響(會造成父標籤塌陷)如下圖(上為塌陷圖，下為沒有塌陷圖)：
通用解決浮動影響方法：
.clearfix:after
overflow應用案例(圓形頭像)：
1、static：預設值，無定位，並且標籤物件的left、top等值是不起作用的
2、relative：相對定位，以自己的原始位置，依據top，right，bottom，left等屬性進行位置偏移
注意：left是表示從左往右移動
該定位主要用法：方便絕對定位元素找到參照物
3、absolute：絕對定位：以最靠近自己並已經開啟定位的祖先元素為定位(也就是起始位置)進行偏移，
如果，沒有已定位的父元素，則以body元素為定位。
注意：如果父元素設定position屬性，如position:relative，那麼子元素就會以父元素左上角為起始點進行偏移
主要應用在：右側小廣告，回到頂部按鈕等
定位的例子：
回到頂部
脫離文件流(文件流指原來的位置，脫離文件流就是指不保留原來的位置)不脫離文件流：三層結構：1、最底層是正常文字內容(z=0) 距離使用者最遠的
2、黑色透明區(z=99) 中間層
3、白色註冊區域(z=100) 距離使用者最近的一層
hello world
註冊介面
username:
password:
用來定義透明效果，取值範圍是0~1,0是完全透明，1是完全不透明
opacity跟rgba的區別：
前端管中窺豹之CSS篇
注釋內容 可多行注釋 選擇器 屬性 值 屬性 值 head內style標籤內部直接書寫css link標籤引入外部css檔案 直接在標籤被通過style屬性書寫css樣式 id 唯一標識標籤 class 標籤類屬性 可以有多個，類似python物件導向的繼承 標籤名 id名.類名 標籤名1，標籤名2...
一 前端總結 之CSS篇
渲染時，dom 元素所採 的 布局模型。可通過 box sizing 進 設定。根據計算寬 的區域可分為 content box w3c 標準盒模型 border box ie 盒 模型 padding box margin box 瀏覽器未實現 塊級格式化上下 是 個獨 的渲染區域，讓處於 bfc...
前端常用重難點總結之css篇
今天天氣不錯，心情也一掃陰霾，人生的路，有的時候越走越窄，有的時候越走越多，但是，每一次選擇，便注定意味著無數的錯過，我們應該珍惜每一場相逢，把握好每乙個機會，不向命運低頭。廢話不多說，css篇參上。css篇 1 基礎 1 選擇器概念的理解以及css規則命名慣例 2 三種機制 繼承 層疊 特指 3 ...