1. 什麼是CSS CSS的全稱是Cascading Style Sheets，層疊樣式表。它用來控制HTML標簽的樣式，在美化網頁中起到非常重要的作用。 CSS的編寫格式是鍵值對形式的，比如 color: red; background-color: blue; font-size: 20px; ...
1. 什麼是CSS
- CSS的全稱是Cascading Style Sheets，層疊樣式表。它用來控制HTML標簽的樣式，在美化網頁中起到非常重要的作用。
CSS的編寫格式是鍵值對形式的，比如
|
|
冒號左邊的是屬性名，冒號右邊的是屬性值。
CSS遵循一個規律：就近原則（同一個樣式出現多次定義，以離內容最近的為準）、疊加原則（同一個樣式只出現一次定義，以出現的為準）
2. CSS有3種書寫形式
1》行內樣式：（內聯樣式）直接在標簽的style屬性中書寫
<body style="color: red;">
2》頁內樣式：在本網頁的style標簽中書寫
|
|
3》外部樣式：在單獨的CSS文件中書寫，然後在網頁中用link標簽引用
// relation 關係， 要告訴瀏覽器導入的是什麼東西。（層疊樣式表）
<link rel="stylesheet" href="index.css">
3. CSS的兩大重點
屬性：通過屬性的複雜疊加才能做出漂亮的網頁
選擇器的作用：通過選擇器找到對應的標簽設置樣式（選擇器就是用來找網頁中的標簽，去設置樣式）
1》標簽選擇器
/* 1.標簽選擇器 */
div {
color: red;
}
p {
color: blue;
}
<div>11111</div>
<p>222222</p>
2》類選擇器的格式
/* 2.類選擇器 */
.one {
color: yellow;
}
<div class="one">3333333</div>
<p class="one">444444</p>
3》id選擇器的格式
/* 3.id選擇器 */
#first {
font-size: 40px;
}
<div id="first">555555</div>
<!--id選擇器只能用一次，是唯一標識，其它地方不能重覆使用-->
<!--<div id="first">666666</div>-->
4》併列選擇器
/* 併列選擇器 */
div,.one {
color: blue;
}
說明：併列選擇器是一種合併寫法，即把多個標簽相同的樣式合併寫到一起。
5》複合選擇器
/* 複合選擇器 */
div .one {
background-color: lightgray;
}
#first div {
color: #84ffdb;
}
說明：複合選擇器是一種縮小定位範圍的寫法，方便快速定位。（首先先找div標簽，然後再在div標簽里去找設置了one的類選擇器。）
6》直接後代選擇器
/*直接後代選擇器*/
div > p {
color: red;
}
說明：定位div裡面的p標簽，包括所有兒子級的p標簽，不包括孫子級的p標簽。
7》相鄰兄弟選擇器
/*相鄰兄弟選擇器*/
div + p {
color: red;
}
說明：定位與div併列同級且最近的一個p標簽。
8》屬性選擇器
/*屬性選擇器，定位帶name屬性的div */
div[name] {
color: red;
}
/*屬性選擇器，定位 name屬性值為zhangsan div */
div[name="zhangsan"] {
color: blue;
}
/*屬性選擇器，定位帶 name屬性和age屬性 的div */
div[name][age]{
color:gray;
}
<!--div有一個name屬性-->
<div name="zhangsan">11111</div>
<div name="lisi">22222</div>
<!--div有兩個屬性：name和age-->
<div name="wangwu" age="23">333333</div>
9》偽類
在選擇器後加上“：屬性”,當這個屬性被觸發的時候，可以去改變選擇器對應標簽的樣式。
標簽:屬性 {
樣式
}
div { background-color: red; width: 300px; height: 300px; } /* 偽類：當滑鼠放到div區域上時，改變div的樣式 （webView不支持，點擊才能看到效果）*/ div:hover { background-color: green; width: 100px; height: 100px; } /* 偽類：輸入框獲得焦點（處於編輯狀態）時，改變input邊框的樣式 */ input:focus { /* 去掉外邊框的藍色 */ outline: none; /* 邊框：是一個複合屬性。(1.邊框寬度 2.邊框樣式:實線solid、虛線dashed、雙環線double 3.邊框顏色) */ border: 1px solid yellow; }
4. 選擇器的優先順序
選擇器的針對性越強（範圍越小），它的優先順序就越高。
如：id選擇器 > 類選擇器 > 標簽選擇器
/* 強制改變優先順序用important，important優先順序最高，設置body標簽里所有文字為黑色 */
* {
color:black !important;
}
5. CSS屬性
CSS有N多屬性，根據繼承性，主要可以分為2大類
1》可繼承屬性：
父標簽的屬性值會傳遞給子標簽
一般是文字控制屬性
body {
font-size: 30px;
color: red;
/*字體加粗*/
font-weight: bolder;
}
|
下麵列舉一些可繼承屬性（紅色表示常用）：
visibility（隱藏內容）、cursor（游標樣式）
line-height、color、font、font-family（文字字體）、font-size、font-weight（文字加粗）、text-decoration（文字下劃線）、letter-spacing、word-spacing、white-space、font-style、font-variant、text-transform、direction /*去掉標簽的下劃線*/ text-decoration: none;
text-indent（文字首行縮進）、text-align（內容水平居中）
list-style（列表樣式）、list-style-type、list-style-position、list-style-image |
div {
background-color: red;
width: 300px;
height: 300px;
/* 隱藏標簽的內容和結構 */
/* display: none; */
/* 隱藏標簽的內容，保留標簽的結構，占位 */
visibility: hidden;
/*規定游標的樣式（游標移到div上顯示）：pointer手指（跳轉/超鏈接用）；crosshair十字架（畫圖/畫區域用）*/
cursor: pointer;
}
p {
color: blue;
/* 段落首行縮進（根據像素/比例進行縮進）*/
text-indent: 3%;
}
ul {
/*列表樣式屬性：none無；square方塊；circle圓*/
list-style:square;
}
2》不可繼承屬性
父標簽的屬性值不能傳遞給子標簽
一般是區塊控制屬性
下麵列舉一些不可繼承屬性（紅色表示常用）：
display、margin、border、padding、background（背景）
height、min-height、max-height、width、min-width、max-width
overflow、position、left、right、top、bottom、z-index
float、clear
table-layout、vertical-align
page-break-after、page-bread-before
unicode-bidi
div {
/*背景屬性：可以直接設置顏色，也可以設置圖片*/
/*background: red;*/
background: url("img/a.png");
/*背景圖片大小：自適應標簽的大小*/
background-size: cover;
}
div {
background-color: red;
width: 100px;
height: 30px;
/* 溢出屬性（內容超過顯示的大小）：auto 超出範圍的部分自動滾動顯示（類似於滾動視圖）；hidden 超出範圍的部分隱藏 */
overflow: auto;
}
6. CSS3新增的屬性
1》RGBA透明度
div {
/* RGB透明度 */
/* font-size: 9pt; color: gray; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;" lang="en-US"> rgb(255,58,15); */
background-color: rgba(255,56,14,1.0);
/* 設置不透明度 */
opacity: 0.2;
}
2》陰影
標簽陰影：
/* 塊(標簽)陰影：水平陰影的位置 垂直陰影的位置 模糊距離 陰影的顏色 */
box-shadow: 5px 5px 10px red;
文字陰影：
/* 文字陰影：水平陰影的位置 垂直陰影的位置 模糊距離 陰影的顏色 */
text-shadow: 5px 5px 10px #111534;
3》邊框
/* 邊框屬性：邊框寬度 邊框樣式（實線、虛線、雙環線） 邊框顏色 */
border: 20px solid yellow;
/* 邊框的圓角半徑 */
border-radius: 10px;
7. 盒子模型
網頁上的每一個標簽都是一個盒子
每個盒子都有四個屬性：
1》內容（content）
盒子里裝的東西
網頁中通常是指文字和圖片
2》填充（padding，內邊距）
怕盒子里裝的（貴重的）東西損壞，而添加的泡沫或者其它抗震的輔料
3》邊框（border）：盒子本身
4》邊界（margin，外邊距）
盒子擺放的時候的不能全部堆在一起，盒子之間要留一定空隙保持通風，同時也為了方便取出
W3C標準盒子模型：寬高是內容的寬度和高度
微軟的標準盒子模型：寬高是盒子的寬度和高度
邊距屬性：（padding，內邊距； margin，外邊距），複合屬性，依次設置上右下左。
一、標簽水平居中：
1》行內標簽、行內塊級標簽：
/* 當前標簽的內容水平居中 */
text-align: center;
2》塊級標簽：
/*水平居中（左右邊距自動），用於塊級標簽*/
margin: 0px auto;
二、標簽垂直居中：
div {
background-color: red;
width: 500px;
height: 300px;
/* 設置行高：值等於height，垂直居中 */
line-height: 300px;
}
複習CSS常用的屬性：
8. CSS佈局
預設情況下，所有的網頁標簽都在標準流佈局中
從上到下，從左到右
脫離標準流的兩種方法：
1》float屬性
float屬性的常用取值有：
left：脫離標準流，浮動在父標簽的最左邊
right：脫離標準流，浮動在父標簽的最右邊
應用場景（用於製作菜單欄）：
2》position屬性（浮動在父標簽的任意位置） 結合 left、right、top、bottom屬性來使用
註意：如果是相對於body來浮動，無需再設置父標簽的position。
