Web前端基礎（07）

課程回顧

表單:

下拉選<select name><option value selected>   
<textarea name rows表示行 cols表示列 placeholder占位文本>  
按鈕: <input type="submit/reset/button" value="顯示文本">  
<button>按鈕</button>      

實體引用: & nbsp ; & lt ; & gt ;

分區标簽: div獨占一行 span共占一行 h5新增标簽:header footer section nav article

CSS:層疊樣式表 美化頁面

三種引入方式:

内聯: 在标簽内部添加style屬性 不能複用

内部: 在head标簽裡面添加style标簽,标簽體内寫樣式代碼, 可以目前頁面複用

外部: 在單獨的css檔案中寫樣式代碼 在html頁面中通過link标簽引入,可以多頁面複用,還可以将html和css代碼分離

選擇器

div{}

#id{}

.class{}

div,#id{},.class{}

input[type=‘text’]{}

*{}

div span{}

div>span{}

a:hover/link/active/visited{}

顔色指派

red

#ff0000

#f00

rgb(255,0,0)

rgba(255,0,0,0-1)

背景圖檔

background-image:url();

background-size:200px 300px;

background-repeat:no-repeat;禁止重複

background-position:橫向百分比 縱向百分比

顯示方式display

block:塊級元素, 獨占一行,可以修改寬高,包括:div h1-h6 p等

inline:行内元素,共占一行,不能修改寬高,包括:span,b,i,small等

inline-block:行内塊元素,共占一行,也能修改寬高,包括:img,input等

文本和字型相關

文本修飾 text-decoration: overline/underline/line-through/none

文本陰影 text-shadow: 顔色 x偏移值 y偏移值 濃度(值越小越清晰)

文本顔色 color:red;

行高 line-height:20px; 可以通過行高控制垂直居中

字型大小 font-size:20px;

加粗 font-weight: bold/normal(去掉加粗效果);

斜體 font-style:italic;

字型設定 font-family:xxx,xxx,xxx; font:30px xx,xxx,xxx;

CSS的三大特性

繼承性:元素可以繼承上級元素的文本和字型相關樣式. 部分元素自身效果不受繼承影響比如:h1-h6的字型大小,超連結字型顔色.

層疊性:多個選擇器有可能選擇到同一個元素,如果添加的樣式不同會全部層疊生效,如果添加的樣式相同則由優先級決定

優先級:作用範圍越小,優先級越高. id>class>标簽名>繼承(屬于間接選中)

盒子模型

盒子模型=外邊距+邊框+内邊距+寬高

寬高: 用來控制元素顯示大小

邊框: 控制元素的邊框效果

外邊距: 控制元素顯示位置

内邊距: 控制元素内容的位置

盒子模型之寬高

指派方式:兩種

像素,機關是px

上級元素的百分比

如果隻設定寬度高度會等比例縮放

行内元素不能修改寬高

盒子模型之外邊距margin

什麼是外邊距: 元素距上級元素或相鄰兄弟元素的距離稱為外邊距

指派方式:

單獨給某一個方向指派: margin-left/right/top/bottom:10px;

四個方向指派: margin:50px;

上下和左右指派: margin:10px 20px;

元素水準居中 margin:0 auto;

(注意這是讓元素自身居中,text-align:center是讓元素裡面的文本在元素内部居中)

上右下左指派: margin:10px 20px 30px 40px; 順時針

上下相鄰兩個元素的外邊距取最大值,左右相鄰求和

粘連問題: 當元素的上邊緣和上級元素的上邊緣重疊時,給元素添加上外邊距會出現粘連顯示異常,給上級元素添加overflow:hidden解決,給上級元素添加邊框也可以解決(修改了元素原來的樣子,不推薦)

h1,p,body這些元素自帶外邊距,使用時需要注意.

盒子模型之邊框border

單獨給某一個邊添加邊框 border-left/right/top/bottom: 粗細 樣式 顔色;

給四個方向添加邊框 border:粗細 樣式 顔色;

圓角: border-radius: 10px; 值越大越圓 超過寬高的一半時會變為圓形(前提是正方形)

盒子模型之内邊距padding

什麼是内邊距: 元素邊緣距内容的距離稱為内邊距.

指派方式和外邊距類似:

單獨給某一個方向指派: padding-left/right/top/bottom:10px;

四個方向指派: padding:50px;

上下和左右指派: padding:10px 20px;

上右下左指派: padding:10px 20px 30px 40px; 順時針

修改元素的内邊距會影響元素的寬高

如果需要移動元素内的子元素有兩種方式:

給大元素添加内邊距去移動裡面的小元素,這種方式會改變大元素的尺寸(不推薦使用)

給小元素添加外邊距即可.