學起來 —— CSS 入門基礎
阿新 • • 發佈：2017-08-06
顏色 下層 ack repeat-x order solid otto ... 偏移量
Hello,大家好！
小女來更博啦！CSS福利送上~~~
首先給大家介紹一下CSS到底是什麽？
一、CSS概念
W3C規範中，要求有三條：一 為“兩個分離”，二 為語言遵循語義化，三 為代碼書寫規範性。其中要求的第一條“兩個分離”指的是內容與表現分離以及內容與行為分離，而其中的“表現”指的就是CSS。CSS全稱Cascading Style Sheets，中文名為層疊樣式表，是一種用來表現HTML等文件樣式的計算機語言，可以給HTML帶來更多更精彩的表現形式。
二、CSS引入的三種方式
1、行內樣式表
直接在HTML標簽中，使用style=""的方式引用；
eg.
優點：優先級最高；使用靈活。 缺點：不符合W3C關於內容與表現分離的要求，不利於樣式復用；
2、內部樣式表
在 <head></head>標簽中，使用style標簽包裹CSS代碼。
<head>
<style type="text/css" >
</style>
</head>
特點：一定程度上實現了HTML與CSS的分離。但是分離不夠徹底，沒辦法實現多頁面共用樣式。
3、外部樣式表 ：
將css單獨寫入css文件中，並與HTML文件關聯。
【導入CSS文件的兩種方式】① 在head標簽中，使用link鏈接。
eg. <link rel="stylesheet" type="text/css" href="css/01-CSS.css" />
② 在style標簽中，[email protected] 導入。 eg. @import url("css/02-CSS導入方式和優先級");優點：徹底實現HTML與CSS 的分離，符合W3C的規範，有利於多頁面復用，統一樣式。常用link方式引入。
三、CSS常用選擇器
<1> 通用選擇器
1.寫法：*{} 2.優先級：最低 <2> 標簽選擇器 1.寫法：標簽名{} 2.作用：根據選擇器名稱，選中頁面中所有的HTML標簽。 <3> 類選擇器（class選擇器） 1.寫法：.class名{} 調用：在HTML標簽中，使用class="class名稱"調用選擇器； 2.優先級: class選擇器 > 標簽選擇器; <4> ID選擇器 1.寫法：#ID名{} 調用：在HTML標簽中，使用id="id名"調用選擇器； 2.優先級：ID > class > 標簽選擇器 ; 3.同名id只能有一個；<style type="text/css" > *{ color: pink; background-color: darkgrey; } li{ color: red; } .li01{ color: blue; } #first{ color: green; } </style><5> 交集選擇器 1.寫法：選擇器1選擇器2選擇器3......{} 多個選擇器之間緊挨著，沒有任何分隔； 2.生效規則：一個標簽要滿足交集選擇器，則必須滿足交集選擇器中出現的所有選擇器； <6> 並集選擇器 1.寫法：選擇器1,選擇器2,選擇器3,...,選擇器n{} 選擇器之間，用 逗號 分割 2.生效規則：只要滿足並集選擇器中的任何一個，就能生效。 <7> 後代選擇器 1.寫法： 選擇器1 選擇器2 ... 選擇器n{} 選擇器之間，用 空格 分割 2.生效規則：必須滿足後一個選擇器是前一個選擇器的後代，才會生效。 <8> 子代選擇器 1.寫法：選擇器1>選擇器2>...選擇器n{} 選擇器之間，用 > 分割 2.必須滿足後一個選擇器是前一個選擇器的直接子代，才會生效。不能隔代，即中間包含其他標簽，不會生效。
#first.li01{ color: deepskyblue; } #first,.li01{ color: deeppink; } ul li{ color: darkorange; } div>ul>.li01{ background-color: deepskyblue; }<9> 選擇器的命名規則 ① 只能由字母、數字、下劃線、減號組成； ② 開頭不能是數字；減號也不能單個獨立存在，多個減號可以。 <10> 選擇器的優先級 1. 第一原則：近者優先。作用於最裏層的選擇器，生效； 2. 當作用於同一層時， 每一種選擇器所占優先級，可以進行運算獲得： 標簽選擇器占權重為1 class選擇器占比重為10 id選擇器占比重為100 行內樣式表 style=""占權重為1000 eg. .div1 #div2 div .div4 #li{} //221 .div1 .div2 #div #div4 #li{} //320 【註】只有交集、後代、子代選擇器才參與權重的累加！而並集選擇器相當於寫了多個選擇器，沒有總優先級！ eg. #div，.div{} 並集選擇器相當於兩個選擇器，分別是10,100 3. 如果計算出的優先級完全相同，則後寫的選擇器生效； eg. #div.div{} .div#div{} 兩者的優先級都是110，所有後寫的選擇器生效。 四、 CSS常用文本屬性 1. 字體、字號類 font-style: 設置斜體; italic傾斜 normal正常； font-weight: 字體粗細; bold加粗、normal正常、lighter變細；也可以通過100~900數值設置； font-size: 字體大小; 可以使用像素（px）、 百分比（%）或者 em，其中瀏覽器默認16px； 字號： 200% 表示 瀏覽器默認大小(16px)的兩倍= 32px font-family: "微軟雅黑" ,"幼圓", "隸書" ,"宋體", "黑體" ,sans-serif; 設置字體，多個字體之間用逗號分隔。 font-variant: small-caps; 大寫變大，小寫變小。
<style type="text/css"> .div{ width: 500px;height: 500px; color: #000000; background-color: rgba(255,0,222,0.3); } .div{ font-weight: lighter; font-style: italic; font-size: 30px; font-family:"宋體","黑體","微軟雅黑","幼圓","隸書",sans-serif; font-variant: small-caps; font:75%/1.5 arial "微軟雅黑",sans-serif; } </style>2. 字體顏色類 （1） color：字體顏色； （2） opacity：透明度，可選值0-1；1-不透明。0-全透明。 【CSS中的顏色單位】 ① 使用顏色英文表示：red/green/blue 紅綠藍 ② 使用十六進制表示：#ffffff #000 #000000 黑色 ③ 使用rgb（255,255,0）三個數值分別表示red、green、blue，範圍是0~255 rgba 第四位表示透明度，範圍0~1 其中0-全透明；1-不透明 【rgba和opacity的區別】 rgba本身可以設置顏色，而opacity必須配合其他顏色屬性使用 rgba 僅僅讓當前元素設置的顏色透明；而opacity會讓當前元素裏面的所有文字、背景、子元素都透明。 3、行距、對齊類 （1）line-height：行高；可以寫px單位、可以直接寫數字（表示默認行距的幾倍）、可以寫%（表示默認行距的百分比）； 行高的作用：讓單行文字在div中垂直居中，設置行高=div的高度，可以使單行文字垂直居中； （2）text-align：設置區域內的行級元素的水平對齊方式（left、right和center） （3）letter-spacing：字符間距，字與字之間的距離。 （4）text-decoration: 下劃線 去掉超鏈接的下劃線： text-decoration: none; （5）overflow: 設置超出區域的文字顯示方式； （6）text-overflow： 設置行末多余文字的顯示方式 （不能單獨用）需配合 white-space: nowrap; （文字不斷行）一起使用！ （7）white-space: nowrap; 設置中文行末，不斷行顯示。 （8）text-indent: 首行縮進 （9）-webkit-text-stroke: 1px; 文字描邊 【註】-webkit ：表示只有webkit內核瀏覽器上 才能生效。如chrome； （10） text-shadow 陰影 text-shadow:5px 10px 0px yellow ; 五、CSS 常用背景屬性 1、background-color：背景色 2、background-image：背景圖 兩者同時存在。背景圖覆蓋背景色。 3、background-repeat: repeat：平鋪； no-repeat：不平鋪； repeat-x：x軸 平鋪（一行） repeat-y：y軸 平鋪（一列） 4、background-size:背景圖大小； 【指定寬度高度】 可以寫px，也可以寫%（父容器寬高的百分比）當寫兩個屬性時：表示寬和高當寫一個屬性時：表示寬度，高度將會等比縮放。 5、background-position: right bottom; 背景圖片偏移量 eg. background-position: right bottom; eg. background-position: 50px 50px; /*與左上角位置比較, 圖片向右移50px/向下移50px*/ 左負右正、上負下正 eg.background-position: 30%; 水平方向去掉圖片寬度，剩余區域 左邊：右邊 = 3:7 六、CSS盒模型 <1> margin: 200px;外邊距 ① 只寫一個值：表示四周外邊距均為指定值。 ② 寫兩個值：第一個數上下外邊距，第二個數左右外邊距。 ③ 寫三個值：表示上右下，左邊默認等於右邊。 ④ 寫四個值：表示上右下左四條邊順時針方向。 ⑤ margin:0 auto;設置塊級元素在父容器中水平居中。 【區別】text-align: center; 是將塊級div中的文字關於該塊級div標簽水平居中。 <2> padding: 100px; 內邊距 設置方式與margin完全相同。 【註】但是，使用內邊距會把div區域撐大，使用時必須註意div實際寬高為多大！ <3> border: 10px solid #0000FF;邊框 dotted - 虛線 solid - 實線 ① 設置邊框需要三個屬性：原則上三個屬性缺一不可，順序不可隨意修改 ② 可以使用top、right、bottom、left分別設置四個邊！ <4> border-radius 圓角 eg. border-radius: 20px 50px 20px 50px/20px 50px 20px 50px; <5> border-image 圖片邊框 eg. -webkit-border-image: url(img/008.png) 27/27px stretch; 拉伸 【註意】第二個值圖片的切片寬度寫的時候不能帶px單位！第三個值邊框的寬度寫的時候必須帶px單位，與切片寬度用 / 分隔！類似於 font-size/line-height <6> box-shadow 盒子陰影 eg. box-shadow:20px 20px 20px 10px red inset ; 內陰影 <7> outline 外圍線 顯示在border外面， 並且不會占據空間。可能會覆蓋四周內容。 <8> 手動設置盒子類型 box-sizing: border-box; 怪異(IE)盒子[ 設置的寬度和高度，包含content+padding+border ]； box-sizing: content-box; 標準盒子[設置的寬度和高度，僅僅包含content部分]； 默認效果。 七、CSS定位 <1> 相對定位 1、使用position: relative ;設置元素為相對定位元素 使用top right bottom left調整元素的位置 2、當left 和right同時存在時，left生效； 當top 和bottom同時存在時，top生效 。
<head> <meta charset="UTF-8"> <title>CSS 定位</title> <style type="text/css"> #div1-1{ width: 200px; height: 200px; background-color: red; position: relative ; top: 100px; /*距離原來位置的上邊100px top生效*/ bottom: 200px; right: 200px; left: 100px; /*距離原來位置的左邊100px left生效*/ z-index: -1; } #div1-2{ width: 200px; height: 200px; background-color: yellow; position: relative; z-index: 0; } </style> </head>3、定位機制： ① 相對定位是相對於自己原來的位置定位，當top等屬性不指定時，元素位置不發生改變； ② 相對定位不會釋放元素在原有文檔流中的位置，也不會影響其他文檔流元素位置。 4、關於元素z軸重疊： ① 定位元素，默認的z軸高於普通文檔流元素。 ② 同為定位元素，後來者居上，即後面蓋住前面。 ③ 使用 z-index 手動調節定位元素的上下層z軸順序。z-index 默認0，而且只能作用於定位元素 <2> 絕對定位 1、使用 position: absolute; 設置元素為絕對定位 2、定位機制： ① 相對於第一個使用了relative、absolute、fixed（進行了定位的）定位的祖先元素進行定位 ② 如果所有的祖先元素都未定位，則相對於瀏覽器左上角進行定位。 ③ 使用absolute的元素，會從文檔類中完全刪除，原有空間會被釋放。
#div2{ width: 500px; height: 500px; background-color: blue; margin: 0 auto; position: relative; /* 目的:將絕對定位div2-1的位置限制於div2中*/ } #div2-1{ width: 200px; height: 200px; background-color: red; position: absolute; left: 100px; top: 100px; }<3> 固定定位 1、固定定位使用 position=fixed; 設置固定位置 2、固定定位，是一種特殊的絕對定位！只是祖先元素無法使用定位鎖住； 3、定位機制: 永遠相對於瀏覽器左上角進行定位，而且不隨滾動條的滾動而滾動。 <4> z-index 屬性 1、作用：根據其設置的數值，決定元素在z軸方向上的層疊次序； 2、使用要求： （1）z-index 只能給 定位元素（relative、absolute、fixed）調整層疊次序； （2）z-index 要考慮父容器的 z-index 的約束， ① 如果父容器設置的 z-index 的屬性，則子容器的所有元素，將不能脫離父容器層次的約束。（即，父容器設置了z-index，則子容器只能以父容器的數值為準； 再給子容器設置z-index，只能調整子容器在父容器之內的層疊順序） ② 如果父容器沒有設置z-index，或者設置為z-index：auto；則子容器調整z-index將不受父容器層次約束。 3、【 z-index：auto；和z-index：0；異同 】 ① z-index: auto;是默認值，與 z-index: 0;處於同一平面； ② z-index: 0;會約束子元素必須與父元素在同一平面；z-index: auto; 不會約束子元素層次。
#div3{ width: 200px; height: 200px; background-color: red; position: relative; top: 150px; left: 100px; /*z-index: auto; */ /*設置 auto與設置為數值的區別*/ z-index: 0; } #div3-1{ width: 100px; height: 100px; background-color: yellow; position: relative; z-index: 10; } #div3-2{ width: 150px; height: 150px; background-color: blue; position: relative; }
效果圖附上
學起來 —— CSS 入門基礎