如鵬網學習筆記（八）CSS

標籤：水平   weight   返回   選擇   ima   清除浮動   方式   如何   背景   

CSS

一、CSS簡介

　　1，CSS (Cascading Style Sheets) 階層式樣式表 ，是一種電腦語言，用來控制HTML內容的顯示效果

　　2，CSS預先定義了眾多的和顯示效果有關的樣式屬性，比如color、font-size等。如果希望html內容顯示某個效果，就應用對應的CSS樣式屬性即可

　　3，CSS對樣式的控制是非常精確和精細的

二、CSS文法

　　1，CSS語言的基本單位是樣式聲明：proppertyName:value;

　　2，CSS語言的使用方式：
　　　　1，把CSS樣式聲明作為HTML標籤的style屬性值

　　　　2，使用CSS選取器

三、文本樣式

　　用來控制文本的顯示效果，常用樣式屬性：

　　color（文本的顏色):顏色值(顏色名、RGB / RGBA 顏色、十六進位顏色..)（見備忘）
　　text-indent（文本縮排）: 長度值(長度單位：px、%、em、in、cm、mm..)
　　text-align（文本對齊）: 枚舉值(left、right、center..)
　　word-spacing（單詞間隔）:長度值
　　letter-spacing（字元間隔）:長度值
　　text-decoration（文本修飾）:枚舉值(none、underline、overline、line-through..)

四、字型樣式

　　font-family 設定字型名稱
　　font-size 設定字型的尺寸
　　font-style 設定字型風格
　　font-weight 設定字粗細

　　font 可以把上面的樣式屬性合并起來寫（值是有序的，使用空格分隔）
　　（font-weight font-size font-family）

五、CSS的特點

　　1，有的樣式屬性子標籤可以從父標籤那裡繼承過來，有的則不能

　　2，一個標籤可以同時應用若干個樣式屬性

　　3，一個標籤的最終顯示效果，是由若干個樣式屬性層疊（疊加）到一起形成的

六、CSS選取器

　　1，如果不適用元素style屬性值的方式，CSS要想控制元素的樣式，就要先定位、找到想要控制的元素

　　2，CSS使用選取器文法來定位元素，選取器有多種類型，並且選取器之間可以通過多種形式組合在一起使用，
　　　　CSS選取器靈活、精準、而且強大

　　3，選取器類型：
　　　　標籤選取器、id選取器、類別選取器、屬性選取器、偽類別選取器

　　4，選取器可以書寫在Html的<style>標籤裡面，文法格式為：
　　　　<style type="text/css">
　　　　　　選取器1{樣式聲明列表}
　　　　　　選取器1{樣式聲明列表}
　　　　</style>

七、屬性選取器

　　1，通過元素的屬性進行定位

　　　　[attr]選擇有attr屬性的標籤
　　　　[attr=val] 選擇以attr屬性值為val的標籤
　　　　[attr^=val] 選擇以attr屬性值以val開頭的標籤
　　　　[attr$=val] 選擇以attr屬性值以val結尾的標籤
　　　　[attr*=val] 選擇以attr屬性值中包含val的標籤

八、偽類別選取器

　　　　用來定位處於特定狀態下的元素

　　　　:link 沒有被點擊過的超連結
　　　　:visited 被點擊過的超連結
　　　　:hover 滑鼠經過的超連結
　　　　:focus 獲得焦點的標籤
　　　　:first-child 第一個子標籤
　　　　:last-child 最後一個子標籤
　　　　:empty 沒有內容的標籤
　　　　:enabled 可以操作的標籤
　　　　:disabled 不可操作的標籤
　　　　:checked 處於選擇狀態的標籤

九、複合選取器

　　選取器可以進行多種形式的組合：
　　selector1空格selector2 在1選中的元素中，使用2篩選其後代元素(2不要使用偽類別選取器)
　　selector1>selector2 在1選中的元素中，使用2篩選其子項目
　　selector1~selector2 在1選中的元素中，使用2篩選其後續兄弟元素
　　selector1+selector2 在1選中的元素中，使用2篩選其後續緊鄰的兄弟元素
　　selector1,selector2 各個選取器的並集
　　selector1(沒有空格)selector2 各個選取器的交集（複合後可識別才可以這樣使用）

十、CSS控制邊框效果

　　很多HTML元素都有邊框，如img、table、td、div、input等

　　border-style 邊框樣式，枚舉值

　　border-width 邊框寬度，長度值

　　border-color 邊框顏色，顏色值

　　可以合并上面三個樣式屬性 border:solid 2px red;

　　還可以分別控制上下左右邊框的樣式，如border-top-color樣式屬性

　　table元素使用border-collaps:collaps;可以合併儲存格邊框


十一、CSS控制元素背景樣式

　　很多HTML元素都可以設定背景樣式（背景色、背景圖片），如body、div等

　　background-color: red;背景色，顏色值

　　background-image: url("bg1.jpg"); 背景圖片

　　background-repeat: 背景圖片平鋪方式，枚舉值

　　background-attachment:背景圖片是否隨內容滾動，枚舉值

　　background-position-x:center; 背景圖片水平方向位置，枚舉值

　　同樣，背景樣式也可以寫在一起background: url("bg1.jpg") repeat ;

十二、盒子模型

　　為了更好的控制頁面樣式，CSS定義了盒子模型。一個HTML元素就是一個盒子

　　盒子的元素：
　　　　margin外邊距
　　　　border邊框
　　　　padding 內邊距
　　　　內容



　　1，一個盒子在頁面中佔據的範圍大小由外邊距、內邊距、內容的總面積決定

　　2，內邊距和外邊距只能指定寬度樣式

　　3，盒子的背景會對內邊距和內容起作用

　　4，外邊距、邊框、內邊距可對上下左右不分分別進行樣式控制

　　5，設定盒子高度或寬度時只對內容起作用


十三、盒子的定位

　　1，通過對每個盒子的外邊距、邊框、內邊距、內容、位置的精確控制，CSS可以實現複雜而精準的頁面配置

　　2，需要掌握下面幾個概念

　　　　區塊層級元素：這類元素預設有換行效果，典型的如div

　　　　行內元素：這類元素預設沒有換行效果，典型的如span

　　　　文檔流：HTML元素在頁面上顯示時，根據在源碼中出現的次序，按照從上到下、從左至右、區塊層級元素獨佔一行、行內元素不換行的規則
　　　　　　　　依次排列。文檔流中的元素會對後續元素的位置產生影響

　　　　盒子定位：
　　　　　　相對定位：
　　　　　　　　元素在顯示時，相對自己本來的位置向下或者向右位移指定數值，
　　　　　　　　但元素本身並不脫離文檔流，也就說後面的元素還認為此元素在原來的位置，
　　　　　　　　所以會排列在此元素原本位置的後面（但會造成覆蓋）

　　　　　　　　position: relative;
　　　　　　　　top: 50px;
　　　　　　　　left: 50px;

　　　　　　絕對位置：
　　　　　　　　以最近的已經定位的祖先元素為基準進行位移（如果沒有這樣的祖先元素則以瀏覽器視窗為基準），
　　　　　　　　元素本身脫離文檔流，也就說後面元素認為此元素不存在，所以會佔據此元素原來的位置
　　　　　　　　（但會造成覆蓋，脫離文檔流後就不具有區塊層級元素獨佔一行的性質了）

　　　　　　　　position: absolute;
　　　　　　　　top: 50px;
　　　　　　　　left: 50px;

　　　　　　固定定位：
　　　　　　　　和絕對位置類似也會脫離文檔流，但總是以瀏覽器視窗為基準，而且位置不會隨著捲軸移動
　　　　　　　　position: fixed;
　　　　　　　　top: 50px;
　　　　　　　　left: 50px;

　　　　　　浮動:
　　　　　　　　如果一個盒子向左浮動(float: left;)：這個元素會成為行內元素；
　　　　　　　　它後面的區塊層級元素會失去一半的獨佔一行的特性，即左邊緊靠在浮動元素後面，右邊延伸到行尾
　　　　　　　　向右浮動和向左浮動效果類似
　　　　　　　　可以使用clear: both;清除浮動效果對後面盒子的影響

十四、z-index層級樣式屬性

　　　　由於元素定位後會產生元素的疊加覆蓋情況，為了靈活控制疊加部分的顯示，CSS提供了z-index層級樣式屬性


　　　　z-index只能取整數，預設為0，可正可負
　　　　z-index值大的元素會覆蓋值小的元素
　　　　z-index只對進行了定位的元素有效

十五、如何獲得元素在頁面中的座標

　　　　HTML所有的元素都具有下面這5個唯讀屬性

　　　　offsetLeft元素邊框距頁面左邊界的距離
　　　　offsetTop元素邊框距上邊界的距離
　　　　offsetWidth元素的寬度（左右邊框的跨度）
　　　　offsetHeight元素高度（上下邊框的跨度）
　　　　offsetParent返回已經定位的祖先元素，如果沒有則返回body元素或者null



十六、使用CSS的五種方式

　　1，行內樣式：寫在元素的style屬性裡

　　2，內嵌樣式：寫在<style>元素內

　　3，匯入樣式：在<style>元素內，開頭使用@import url(index.css);方式引入，這種方式實際上算是內嵌樣式

　　4，連結樣式：使用<link>元素引入css檔案，如<link type="text/css" rel="stylesheet" href="c1.css"/>

　　5，預設樣式：集合每一種html標籤都有預設的css樣式


　　當某個樣式屬性出現多次時，就需要使用優先順序規則解決產生的矛盾：
　　　　1，不同引入方式的優先順序：行內>內嵌、匯入和連結>預設
　　　　2，同一種引入方式或相同優先順序的引用方式中，後出現的會覆蓋先出現的

十七、其他常用樣式屬性
　　display控制元素的可見度

　　cursor控制滑鼠指標進入元素時的樣式

如鵬網學習筆記（八）CSS