html-css初探-day02 · javaWEB

>### A.今天學什么？ #### 1.盒子模型如何傳參 ``` 不像之前使用 margin-top padding-button 這樣針對傳參而是使用 margin: ;來進行傳參 // html <div></div> // css pdding 與 margin 傳參方式相同 div{ width: 100px; height: 100px; background-color: red; /* margin: 100px; 只傳一個參數，四個方向都發生改變 */ /*margin: 100px;*/ /* margin: 100px 200px; 只傳2個參數，第一個參數為上下，第二個參數為左右 */ /*margin: 100px 200px;*/ /* margin: 100px 200px 300px; 傳三個參數則第一個為上，第二個為左右，第三個為下 */ /*margin: 100px 200px 300px;*/ /* margin: 100px 200px 300px 400px; 傳4個參數，則按照順時針方向，依次為上右下左 */ margin: 100px 200px 300px 400px; } ``` #### 2.`html`標簽分類 - ##### 2.1塊元素 -- `block` ``` // html  <div>div</div> <p>p</p> <h1>h1</h1> <ul> <li>li</li> </ul> <dl> <dt>dt</dt> <dd>dd</dd> </dl> // css div{ width: 100px; height: 100px; background-color: red; margin-top: 100px; } ``` - ##### 2.2內聯元素 -- `inline` ``` // html  <a href="">a</a> <span>span</span> <strong>strong</strong> <i>i</i> <em>em</em> //css a{ width: 100px; height: 100px; background-color: pink; margin-top: 100px; margin-left: 50px; padding: 100px; } ``` - ##### 2.3內聯塊元素 -- `inline-block` ``` // html  <br /> <br />  <img src="images/logo2.png" alt=""> <button>按鈕</button> <input type="text" /> // css button{ width: 100px; height: 100px; padding: 50px 0 0 50px; margin: 50px; } ``` #### 3.幾種類型元素的水平居中 - ##### 3.1塊元素居中 -- `block` ``` // HTML <div>div</div> ``` ``` // css div{ width: 100px; height: 100px; background-color: red; margin: 0 auto; /* 默認display: block; */ } ``` - ##### 3.2內聯元素居中 -- `inline` ``` //HTML <a href="">a標簽</a> ``` ``` a{ background-color: yellow; width: 100px; height: 100px; margin: 0 auto; /* a標簽中文字水平居中 */ text-align: center; /* a標簽中文字垂直居中 */ line-height: 100px; /* 去下劃線 */ text-decoration: none; display: block; /* 默認display: inline; */ } ``` - ##### 3.3內聯塊元素居中 -- `inline-block` ``` // html <button>按鈕</button> // css button{ background-color: pink; width: 100px; height: 100px; /* 內聯塊元素也無法用margin水平居中，因為其不是獨占一行 */ margin: 0 auto; /* 默認display: inline-block; */ } ``` - ##### 3.4不改變display屬性來達到水平居中效果 -- 給父級元素加上屬性 text-align: center; ``` // html <div class="parent"> <img src="images/logo2.png" alt=""> <br /> <a href="">hello world</a> </div> // css /* 給它的父級元素加text-align: center; */ .parent{ text-align: center; } ``` #### 4.幾種選擇器補充 - ##### 4.1分組選擇器 -- 選中的元素都使用該屬性 ``` // html <div>div</div> <p>hello world</p> <h1>h1</h1> // css /* 分組選擇器代表這些元素都使用這個屬性 */ div,p,h1{ color: pink; } ``` - ##### 4.2后代選擇器 -- 指定某元素的某后代元素使用該屬性 ``` // html <div class="parent"> <p>hello my friend</p> </div> // css /* 后代選擇器 class為parent的元素的后代p使用這個屬性 */ .parent p{ color: deepskyblue; } ``` - ##### 4.3兄弟選擇器 - 1. div+p 可選擇緊接在另一元素后的元素，且二者有相同父元素。 ``` // html <div class="parent2">hello my sister</div> <p>p1</p> <p>p2</p> <p>p3</p> // css /* 兄弟選擇器-1 選中class為parent2的元素后的第一個p元素，而不是該元素和這個p元素都使用該屬性兩者要擁有相同的父元素 */ .parent2+p{ color: red; } ``` - 2. div~p 可選中緊接在另一元素后的所有該元素，且二者有相同父元素。 ``` // html <div class="parent3">hello my sisters</div> <p>p1</p> <p>p2</p> <p>p3</p> // css /* 兄弟選擇器-2 可選中緊接在另一元素后的所有該元素，且二者有相同父元素。 */ .parent3~p{ color: blue; } ``` - ##### 4.4偽類選擇器 ``` // html <input class="input1" type="text" /> // css /* 偽類選擇器 */ /* focus 聚焦，鼠標點擊輸入框后，輸入框背景變為紅色 */ /* hover 鼠標放上去，不需要點擊就會變色 */ .input1:focus{ background-color: red; } ``` - ##### 4.5偽元素選擇器 ``` // html <div class="fake_class">hello world</div> // css /* 偽元素選擇器 */ /* 用選擇器生成一個元素，內容為 "前面" 設置display為塊元素，所以獨占一行這個元素具有一切元素的特征，可以設置寬高等 */ /* before 在 .fake_class 的這個元素的前面 */ /* after 在 .fake_class 這個元素的后面 */ .fake_class:before{ content: "前面"; width: 100px; height: 100px; text-align: center; line-height: 100px; background-color: deepskyblue; color: #333; display: block; } ``` - ##### 4.6屬性選擇器 ``` // html <p class="one"> hello property</p> // css /* 屬性選擇器 */ /* 選擇屬性為 one 的p元素 */ p[class=one]{ width: 100px; height: 100px; background-color: deeppink; color: #333; } ``` #### 5.選擇器的優先級別排序 CSS權重指的是樣式的優先級，有兩條或多條樣式作用于一個元素，權重高的那條樣式對元素起作用,權重相同的，后寫的樣式會覆蓋前面寫的樣式。 ##### 權重的等級可以把樣式的應用方式分為幾個等級，按照等級來計算權重 - 1、!important，加在樣式屬性值后，權重值為 10000 - 2、內聯樣式，如：style=””，權重值為1000 - 3、ID選擇器，如：#content，權重值為100 - 4、類，偽類和屬性選擇器，如： content、:hover 權重值為10 - 5、標簽選擇器和偽元素選擇器，如：div、p、:before 權重值為1 - 6、通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權重值為0 - 權重相同時，后面的覆蓋前面的 ``` // html <p class="one" id="two">hello world</p> // css /* 這里id選擇器權重最高，為100，所以顏色為綠色權重相同時，后面的會覆蓋前面的 */ p{ color: red; } .one{ color: yellow; } #two{ color: green; } /* 這里可以看到，兩個id選擇器相同，后面的覆蓋了前面的 */ #two{ color: brown; } ``` #### 6.`css`背景 - ##### 6.1 背景一些常用屬性 - background-color   背景顏色 - background-image   背景圖片 ./ 當前目錄路徑 ../上級目錄路徑 - background-repeat   設計圖片重復 - background-position   圖片位置可以用來設置雪碧圖 x y ``` // html <div class="one"></div> // css .one{ width: 100px; height: 100px; /* background-color 背景顏色 */ background-color: #eee; /* background-image 背景圖片 */ background-image: url("images/icon1.png"); /* background-repeat 設置圖片重復幾次 no-repeat 不重復 repeat-x x軸上重復 repeat-y y軸上重復 repeat 重復，默認值 inherit 指定background-repea屬性設置應該從父元素繼承 */ background-repeat: no-repeat; /* background-position: x y; 設置圖片位置 background-position-x x方向偏移量 background-position-y y方向偏移量 */ background-position-x: 30px; background-position-y: 30px; /* 第一個參數為水平方向第二個為垂直方向，不同于margin等 */ background-position: center center; } ``` - ##### 6.2背景吸附 - background-attachment   背景是否相對瀏覽器固定 ``` // html <div class="two"></div> <div class="three"></div> // css /* 背景吸附 */ .two{ /* 子元素不給width，它會繼承父元素的寬度只發生在塊元素之間 */ /* width: 100%; */ height: 468px; background-color: #eee; background-image: url("images/banner.jpg"); /* background-attachment:scroll|fixed 默認值為scroll fixed背景圖片不會隨鼠標的滾動而滾動，相當于固定定位而且如果設置為平鋪重復的話，鼠標滾動可以看到整張圖都是頁面的背景可以翻到更多的地方 */ background-attachment: fixed; } .three{ height: 800px; background-color: pink; } ``` - ##### 6.3背景大小 - background-size   設置背景大小 x y ``` // html <div class="four"></div> // css /* 背景大小 */ .four{ width: 800px; height: 400px; background-image: url("images/down.jpg"); background-repeat: no-repeat; background-color: red; /* background-size: x y; 注意，如果不是等比大小，容易造成圖片拉伸慎用 */ background-size: 100% 100%; } ``` - ##### 6.4雪碧圖、背景簡寫 - 利用background-position 來達到一圖多用的效果，因為圖片加載需要時間，多次使用一張圖可以優化網頁瀏覽體驗 - 背景簡寫使用 background: ; ``` // html <div class="one"></div> // css .one{ width: 18px; height: 18px; /*background-color: #333; background-image: url("images/icons_type.png"); background-repeat: no-repeat; background-position: -19px 0;*/ /* 背景簡寫 */ background: #333 url("images/icons_type.png") no-repeat -19px 0; } ```