最簡潔的CSS學習筆記

css是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的子集)等檔案樣式的電腦語言。 CSS不僅可以靜態修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。 CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支援幾乎所有的字體字號樣式，擁有對網頁物件和模型樣式編輯的能力。

1.通用屬性 #name：名稱，可以重複，可以一樣;

class：類別名，可以重複，也可以擁有多個，給CSS用的；如

;

#id：唯一標示，不能重複，一般多用在JavaScript中；命名規則與其他語言的標示命名規則一樣; title：標題，可以在標籤中添加；如 ;

#2.標籤關係

後代關係：父子關係（包含關係）;

兄弟關係：同父關係; 3.CSS-層疊樣式表

CSS註解：/ 註解內容寫在這裡，給程式設計師看，頁面上不顯示

/; #CSS語法規則：所有符號都以英文輸入法狀態下輸入，要小寫，大括號裡寫屬性，每條屬性語句都以分號結束，屬性值要帶像素單位（px）；格式：屬性:屬性值; 4.CSS的引入方式

#行內引入：在標籤中加樣式的引入方式;格式： 內容 ; 注意：程式碼可維護性極差，CSS程式碼與html結構沒有實現分離;影響的範圍只在目前標籤;

內嵌引入：在網頁頭部加 CSS樣式 ; 注意：程式碼可維護性比較差，沒有實作CSS程式碼與HTML結構分離，影響範圍只在目前頁面; 外接引入：在網頁外建立一個xx.css文件，網頁頭部中利用 ;

注意：程式碼可維護性高，CSS程式碼與HTML結構完全分離，影響範圍整個網站所有引入CSS檔案網頁中;

#5.CSS核心語法：

結構格式：選擇器{屬性：屬性值；屬性：屬性值；...}；例：p{background:red;color:gray;size:20px;};

選擇器：選擇頁面元素的工具; 大括號：大括號裡面寫樣式內容;

6.選擇器

基礎選擇器：###############通用選擇器：用來初始化網頁預設樣式的，樣式表開頭就寫；格式：*{padding:0;margin:0;};#############標籤選擇器:給指定標籤加樣式；格式：p{color:green ;};############類別選擇器：選擇制定類別選擇器樣式；格式:.class名稱{background:pink;};###注意：class名稱在標籤中定義，如class="one";如果幾個區塊內容樣式一樣，那麼給他們一樣的樣式就可以;################id選擇器：唯一標示，不能重複出現；格式：#id名{backgound-image:url(1.jpg);}###注意：id名在標籤中定義id="one";id不能隨表加，幾個區塊內容樣式一樣時幾個區塊的id名都得不一樣;###;######################id和class的差別：###注意上一點－ID必須能夠唯一的確定DOM節點。如果你全篇都使用ID選擇器，那麼即使兩個DOM節點樣式完全相同，那麼你也必須把節點樣式寫兩遍, 如果後期要進行維護,那麼你必須對兩處的代碼都進行維護！ ！ ！極大的增加了維護的成本;###############偽類選擇器：順序LoVe HAte原則，可以跳過去，但順序不能換；分別是連結狀態(link) ，訪問過的狀態(visited)，活動狀態(hover)和點擊狀態(active);###############描點類別：a:link{color:yellow;} a: visited{color:blue;} a:hover{color:red;} a:active{color:pin;} 取得焦點時的樣式a:focus{};###注意：屬性中可以加文字屬性，背景顏色和圖片；a{}與a:link{}實現的效果是一樣的;######列表類別：li:link{color:yellow;};li:visited{color:blue;} li:hover {color:red;} li:active{color:pin;};###注意：屬性中可以加文字系列屬性，背景顏色和圖片等;############### ###複合選擇器：### 分組選擇器（並集選擇器，多元選擇器）：用來為多個元素加上同一個樣式；例：.one,#one,a,span{color :red;font-size:14px;}意思是類別one,#one,a標籤，span標籤有共同屬性;

後代選擇器：給子類別元素加屬性;例：.one a{text-decoration:none;}意思是類別one的後代a標籤修飾的內容無底線;

子元素選擇器（指定式選擇器）：為指定的子元素加屬性；例：#one>p{color:red;};意思是為id選擇器one的兒子p標籤休息的內容加屬性;

相鄰元素選擇器：

1.兩個緊鄰的兄弟選擇器加屬性,不給自己加屬性，只給後面的兄弟加屬性;.one+p{background:red;}; 2.one~p{background:green}意思是給one選擇器後面的所有p標籤元素加屬性，前提是他們擁有一個父類別;

屬性選擇器：

#1.給帶有屬性的元素的加屬性;img[id]{ background:red;}給帶id的元素加屬性;

給帶有指定屬性值的元素加屬性：img[src="b.jpg"]{background:red ;}給帶有b.jpg的元素加屬性;

3.給帶有指定字元開頭的元素加屬性：img[src^="b"]{background: red;}為以b開頭的所有元素加屬性; 4.選擇器帶有以指定屬性值為結尾的元素：img[src$="b"]{background:red;}給以b結尾的所有元素加屬性; 5.選擇器帶有包含指定屬性值的元素:img[src*="b"]{background:red;}給含b的所有元素加屬性;

7.元素包含（顯示方式的分類） 塊元素：用來排版，結構典型的有：p，p，li，h1， dt;

元素本身獨佔一行顯示（與寬度無關）;

可以設定寬度和高度;

當嵌套一個區塊級元素，子元素如果不設定寬度，那麼該子元素的寬度為父元素的寬度;

#行內元素： 用來加樣式的；span,a,font,strong; 注意：行內元素不要給上下的margin和padding，上下會被忽略，左右起作用（一般不用）;

元素在一行上顯示;

不能直接設定寬度和高度;

行內塊元素：image,input;

元素在一行上顯示;

可以設定寬度與高度;

轉換關係：行內包含行內；區塊元素包含區塊元素，區塊元素可以包含行內元素;

Display: inline 將元素轉換為行內中元素

Display：inline-block # 設計 轉化為區塊元素

8.CSS的屬性 #字型有關屬性：

font-size:字體大小，多少像素，px; font-weight:字體粗細，bold（700-900），normal，可以寫100 -900;

font-style：字體傾斜，italic，normal;

font-family:字體，微軟雅黑，黑體;

屬性連寫：font: font-style font-weight font-size/line-height font-family;

注意： font屬性聯寫必須有font-size 和font -family(其他屬性可以不寫)；font-size 和font-family的順序不能換;

文字： ##color:顏色;

text-indent：縮排【單位是em】;

text-decoration ：文字線【underline底線，overline上劃線，line-through刪除線，none取消線】;

word-spacing:單字間距離;

#letter-spacing：字母鍵距離;

text-align：水平對齊方式【預設left，center，right】;

line-height：行高，文字所在行的高度 【行高和元素高度相等時文字垂直居中】;

尺寸：是塊元素的尺寸，行內元素不可以設定寬高，想設定得轉換;

#width：寬度;

height：高度;

#列表ul，li的屬性：list-style-type在ul中加了可以的li中不用加;

list-style-type:none;

去掉符號,square方塊，circle圓，disc實體圓，加圖了後可以不寫也可以list-style-type: none; list-style-image:url(1.jpg) 圖片

# border:1px solid red; 為ul整體設定邊框

list-style-position:outside; 樣式圖片定位：inside,outside

背景：

##。背景顏色background-color;

背景圖片background-image 注意：設定背景圖片的時候一定要設定寬度和高度;

背景平鋪background -repeat：repeat （預設值）|no-repeat （不平鋪）|repeat-x |（橫向平鋪）repeat-y（縱向平鋪）

## 背景位置background- position：設定具體值： left| right| top| bottom| cneter; 設定具體值的時候不區分先後順序；設定具體數字的時候，第一個值代表水平方向，第二個值代表垂直方向，設定前背景圖片設定格式改為background-image;

設定背景是否固定background-attachment： Scroll（預設值）捲動;fixed （圖片固定）;

屬性聯寫：沒有數量限制和先後順序限制：background:url("") red no-peat 30px 40px;

#行高line-height:

盒子模型：用來進行網頁佈局，必須設定寬度

盒子邊框屬性：

組成部分：

#邊框寬高：border-width:1px;

邊框顏色：border-color:red;

#邊框樣式：border-style:solid實線/dotted點線/dashed虛線/none無;

屬性聯寫：border:1px solid red; 注意：屬性聯寫的時候沒有先後順序限制，邊框顏色可以不寫，邊框寬度可以不寫

分開寫法：

border邊框：

padding內邊距：設定內容距離盒子邊框之間的距離

margin外邊距： 設定盒子與盒子之間的距離

p{ width:300px; height:200px; border-top:1px solid red; border-left:1px solid red; border-right:1px solid red; border-bottom:1px solid red; } 6. 单独设置属性法： border-top-color:red; border-top-style:solid; border-top-width:1px; #盒子大小：

盒子大小影響的地方： 繼承的盒子再父盒子寬度範圍內，padding值不會影響該盒子大小

盒子大小計算：寬度=內容寬度+左右邊框+左右內邊距

邊框可以影響盒子大小

內邊邊距影響盒子大小

以後進行頁面盒子佈局的實現，如果給盒子設定了內邊距，對應的要將內容寬度或高度減去對應的值

#margin外邊距： 設定盒子與盒子之間的距離

盒子居中：

屬性聯寫：

標準流下的盒子居中:margin:0px auto;

定位的盒子居中：先走父盒子的一半，再往回走自己寬度的一半

Margin: 10px 上右下左下左10px #p#10p#p# 1 上下10px 左右20px

Margin: 10px 20px 30px 上10px 左右20px 下30px

Margin: 10px 20px

#Margin: 10px 20px #10px ##Margin: 10px #1px

#注意： #屬性聯寫：

Padding: 10px; 上，右，下，左側的距離為10pxx 上，右，下，左側的距離為10pxxx##p0px 上下10px 左右20px

Padding: 10px 20px 30px; 上10px 左右20px 下30px

#Padding: 10p12x 左

當兩個盒子垂直顯示的時候，外邊距以設定的最大值為準（外邊距合併的第一種情況），當兩個盒子橫排顯示時，外邊距疊加

外邊距塌陷（有難問題）解決步驟：

#padding內邊距：設定內容距離盒子邊框之間的距離

給父盒子設定邊框

#給父盒子設定overflow:hidden;

清除边距：

方法1： *{padding：0；margin：0；}

方法2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}

9.CSS的三大特性 继承性：

可继承性：color，text-align，text-indent，font-size，font-weight，font-family

不可继承：text-decoration，border，display，margin，float，padding

继承性发生的前提是标签之间属于一种嵌套关系

文字颜色可以实现继承；文字大小可以实现继承；字体可以实现继承；与文字有关的属性都可以 实现继承

行高可以实现继承

特殊性：

不能继承父元素中的文字颜色（层叠掉了）

标题标签不能继承父元素中的文字大小

重叠性：层叠性是指样式的覆盖

样式的层叠性与样式的调用顺序没有关系，与样式的定义顺序有关。

层叠性发生的前提： 样式冲突

优先级：

权重：行内引入（1000）>id(100)>class(10)>标签（1）>通用(0)

把权重相加，值越大越有先

权重一样，后面的样式起作用

10.补充知识笔记 表单优化写法： 用户名：

格式化列表图标：list-style: none

表单合并：border-collapse:collapse(设置表格边框合并，适用于表格）

Bfc “格式化上下文”

overflow:

visible:默认值。内容不会被修剪，会呈现在元素框之外

hidden:内容会被修剪，并且其余内容是不可见的;当图片改变位置时带动父元素也改变位置，给父元素加此属性值可使父元素位置不变

scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容

auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

11.标准流：块级元素独占一行显示；标准流的显示方式：元素默认的显示方式 12.浮动：浮动用来解决文字图片环绕问题；用来制作导航栏，网页布局 用法： Float:left| right

特点：要浮动都浮动

设置了浮动的元素不占原来的位置（脱标）

可以让块级元素在一行上显示

浮动可以行内元素转化为行内块元素

模式转换的过程中，能用display就用display

清除浮动：

定义：清除浮动不是删除浮动；清除浮动指的是清除浮动的影响

注意使用时机：当子元素设置了浮动，父元素没有高度的时候，造成页面布局混乱；这种情况下进行清除浮动。

清除浮动方法： [x] 注意：在要清除浮动的元素后面添加一个空块元素（

,标签），在添加的空元素中加clear:both | left |right

.clearfix{ clrar:both; }

[x]给父盒子设置overflow:hidden;**注意：如果父盒子中有定位的元素，一般不推荐使用该种方式清除浮动** .content{ width:500px； overflow:hidden; } [x]使用伪元素清除浮动 .clearfix:after{ content:""; display:block; clear:both; height:0; visibility:hidden; } .clearfix { zoom:1; }

13.定位：方位：left、right、top、bottom 静态定位：静态定位就是元素标准流的显示方式position:static;就是默认的定位

绝对定位：相对于定位元素的父元素或者祖先元素定位，如果父元素和祖先元素不存在定位，就会找到最初的包含层；不占有以前的位置；position：absolute；

当给一个单独的元素设置绝对定位，以浏览器左上角（body）为基准设置定位的。

当盒子发生嵌套关系的时候，如果父盒子没有设置定位，子盒子设置定位以浏览器左上角为基准设置定位。

当盒子发生嵌套关系的时候，如果父盒子设置定位，子盒子设置定位父盒子左上角为基准设置定位。

為盒子設定了絕對定位，該盒子不佔位置（脫標）

給行內元素設定絕對定位後，該元素轉換為了行內區塊元素

注意：元素設定了絕對定位後，透過特定的方位名稱可以隨便設定元素的位置

##相對定位：相對於元素原位置，會佔有先前位置；position：relative；

#元素設定了相對定位後佔原來的位置

設定相對定位以自己的位置設定位置

相對定位無法進行元素的模式轉換

#子絕父相（子元素設定絕對定位，父元素設定相對定位）

#固定定位：相對於整個穩穩固定不變；固定定位不佔位置（脫標）;將行內元素轉換為行內塊元素position:fixed

層級問題：

只有設定到定位才會有層級問題

兄弟元素中存在相對，絕對等定位，誰的HTML文件結構在後面，誰在最外層（層級高）

Z-index:設定層級，值是數字，只要有定位會用到定位設定

14. CSS之精靈兔：選擇透明文件 瀏覽器中的座標系

圓點以右為正方向，圓點以下為正

CSS精靈是一種處理網頁背景圖像的方式；精靈圖也是一種背景圖片

精靈圖的使用

使用fw一定要用開啟的方式開啟精靈圖

使用精靈圖作為背景圖片的時候，常與background-position配合使用

測量精靈圖中的元素的座標使用矩形選擇器

或使用快速鍵 字母： k

15. CSS可見性 overflow: hidden 將超出部分隱藏

## display: none 將元素隱藏起來

display：block 將元素顯示(與記憶體搭配化 )

ibvis 元素#o#> display: none; 隱藏在元素上後不佔位置

visibility: hidden; 隱藏元素後佔原來的位置

16. 圖片與文字居中 #每一種inlne-block元素都有一個預設的vertical-align:baseline

#vertical-align:middle 垂直對齊；vertical-align與inline-block更搭配;

17. 規避脫標流

網頁佈局過程中能用標準流就用標準流

#標準流不能解決浮動 浮動無法解決定位

使用margin-left/margin-right 取值為auto可以將盒子自動衝到兩外一邊

18. 標籤包含規範

p可以包含任何標準流下的標籤

p標籤不能包含p和標題標籤和列表標籤 標題便簽可以包含其他標籤

#行內元素最好不要包含其他標籤

19. 設定寬高的總結

在浮動之後，元素可以設定寬高 在絕對定位後，元素可以設定寬高

在固定定位後，元素可以設定寬高

20. 提升至CSS3

CSS3和CSS2：CSS功能強大，程式碼簡潔

偽類別選擇器：

第一個子元素：first-child

最好一個元素：last-child############第n個子元素：nth -child（n）;n給數值############奇數為子元素：nth-child(odd);或（nth-child(2n+1)）####### ######偶數位子元素：nth-child(even)；或（nth-child(2n)）##################文字陰影：text-shadow ：水平，垂直，陰影############盒子陰影：box-shaadow:水平，、垂直，陰影############背景：background#### ########相關推薦：#########全面總結css中屬性值繼承知識###### CSS段落屬性詳解

20 個 CSS 進階技巧總結

#