今日內容:

? CSS樣式

? CSS樣式的種類

? 選擇器

? 文本相關樣式

? 背景相關樣式

? 邊框

? 盒子模式

select標簽

下拉列表標簽,常用于單選和多選,是一個組合標簽,需要和子標簽option一起搭配使用,不會獨占一行

常用屬性:

? name屬性:發送給服務器使用的

? multiple屬性:不寫默認單選,取值為multipe表示多選,一般我們常用單選

? size屬性:可見選擇數目

option標簽

? selected屬性:表示勾選當前選項

? value屬性:用于發送給服務器的選項值

注意:

1.如果使用多選,呢么選擇的時候,需要按下ctrl鍵進行多選

2.size屬性我們一般不設置

3.selected屬性如果不設置,默認顯示的是列表中的第一個選擇

4.value屬性如果不設置的話,發送給服務器的值是option的文本值,如果設置了value屬性值,那么發送的就是value屬性值,一般情況下我們都需要設置

textarea標簽

文本域,用于多行輸入文本信息

○ name:用于發送給服務器的名稱

○ cols屬性:用于指定文本域的列數

○ rows屬性:用于指定文本域的行數

CSS樣式:進行頁面美化和布局及控制

? 概念:Cascading Style Sheet 層疊樣式表

層疊:多個樣式可以作用在同一個html的元素上,可以同時生效

? 好處:

1.功能比較強大

2.將內容展示和樣式控制進行分離,

§ 降低耦合度,解耦合

§ 分工協作更方便

§ 提高樣式的可復用性

? 使用:

選擇器{

屬性1:屬性值

屬性2:屬性值

屬性3:屬性值1 屬性值2 屬性值3 …;

…

…

}

注意:

1.選擇器嚴格區分大小寫,屬性和屬性值不區分大小寫,屬性與屬性之間使用分號隔開,最后一個屬性可以省略不寫,如果一個屬性有多個屬性值

多個屬性值之間用空格隔開,type屬性可以省略不寫

2.如果一個標簽由多個css樣式控制,按照就近原則進行覆蓋

3.css樣式的種類 有三種 行內樣式>內聯式>外聯式

選擇器:

當我們想要設置某些標簽的樣式時,就必須讓css代碼找到對應的標簽,通過選擇器可以找到對應的標簽

常用的選擇器

標簽選擇器,?? ?語法格式:?? 標簽名稱{} 如對div標簽控制,? -->div{}

id選擇器,?? ?語法格式:?? #id名稱{},注意:id一般不能重復,需要給標簽添加一個id屬性

類選擇器,?? ?語法格式:?? .class名稱{}class名稱可以重復,需要給標簽添加一個class屬性

并集選擇器,?? ?語法格式:?? 選擇器1,選擇器2,選擇器3,…{}

屬性選擇器,?? ?語法格式:?? 標簽[屬性="具體的屬性值"]{} 比如:input[type="text"]--->username輸入框設定樣式

input[type="password"--->控制passwoeld密碼輸入框設定樣式]

不太常用的選擇器

后代選擇器?? ?語法格式:?? 選擇器1 選擇器2{}??? 瀏覽器加載樣式的時候會首先找選擇器1對應的標簽存在不存在,

如果存在那么找選擇器1里面的嵌套選擇器的選擇器2對應的標簽 (java多級繼承)

子元素選擇器?? ?語法格式:?? 選擇器1>選擇器2{}?? 瀏覽器會加載選擇器1下的所有子元素符合選擇器2的條件

交集選擇器?? ?語法格式:?? 選擇器1選擇器2{}??? 要求標簽同時具備選擇器1和選擇器2? 里面的css樣式才會起作用

相鄰兄弟選擇器?? ?語法格式:?? 選擇器1+選擇器2{}

通用兄弟選擇器?? ?語法格式:?? 選擇器1~選擇器2{}

選中同級別的第一個標簽?? ?語法格式:?? 標簽:first-child{}

選中同級別同類型第一個標簽?? ?語法格式:?? 標簽:first-of-type{}

選中同級別中同類型的最后一個標簽?? ?語法格式:?? 標簽:last-of-type{}

選中同級別第幾個標簽?? ?語法格式:?? 標簽nth-child(n){}

選中同級別中同類型的第幾個標簽?? ?語法格式:?? 標簽nth-of-type(n){}

文本系列樣式

用于設置文本相關的一些樣式

○ font-style:設置文字樣式,常用取值為 斜體 italic 和 正常 normal

○ font-weight:設置文字的粗細,常用取值為light lighter,bold和boler.還可以使用數字表示 100-900

○ font-size:設置文字的大小取值默認單位為像素px,如font-size:30px

○ font-family:設置字體,如"宋體","楷體","微軟雅黑"等

○ font:進行連寫,如:設置字體為宋體,字體大小為20px,字體為斜體,字體加粗-->font:italic bolder 20px "宋體";

○ text-decoration:文本裝飾屬性,常用取值為underline下劃線,overline上劃線,刪除線line-through,none什么都沒有

○ text-align:水平方向的對齊方式,常用取值left center right

○ text-indent:縮進方式 em作為縮進單位 2em相當于往里面縮進兩個文字的寬度

○ color:設置文字的顏色,英語單詞,rgb(值1,值2,值3)#十六進制00~FF

背景系列樣式:

設置標簽的背景相關樣式

○ background-color:設置標簽的背景顏色

○ background-image:設置背景圖像,他的屬性值語法格式:url(相對路徑)會自動平鋪

○ background-repeat:設置平鋪的方式有四個值,repeat默認值,no-repeat不平鋪,repeat-x水平平鋪,repeat-y垂直平鋪

○ background-position:設置背景定位方式,格式:為水平方向數值,垂直定位數值

水平方向left center right 垂直方向

垂直方向有top center boottom,也可以是具體的像素值 100px 100px;

○ background-size:設置背景圖像的尺寸大小,尺寸大小可以使用百分比,也可以使用具體的像素值

○ background-attachment:設置背景的關聯方式,常用的有兩個sroll(會隨著滾動條的滾動而滾動) fixed(不會隨著滾動條的滾動而滾動)

○ 連寫 background:顏色 圖片 平鋪的方法 定位的方式…中間可以任意寫

邊框系列樣式

border屬性,連寫--->格式:寬度 樣式 顏色 倒角radius:設置邊框四角的弧度

盒子模型(邊框盒子border-box)

padding:內容到邊框的距離,叫做內邊距,內邊距屬性按照上右下左順序進行設置,也可以分開設置

改變內邊距的寬高會影響元素的大小

如果我們采用的內容盒子模型,content-box,那么設置內邊距后元素自身的寬高也會發生改變

但是如果我們設置盒子模型為邊框盒子 border-box,那么設置內邊距后自身的寬高不會發生改變,但是內容的寬高會發生改變.

margin:元素邊框與元素邊框之間的間距就是外邊距,設置的順序也是上右下左,如果我們設置margin的值為:0 auto就代表距離上方的為0像素遠,

距離左右兩邊為水平居中

如果相鄰元素對同一方向設置外邊距,則瀏覽器會取大值

盒子模型的構成

1.元素的寬度:左邊的邊框+左邊的內邊距+內容的寬度+右邊內邊距+右邊邊框--->width = padding +border+content

2.元素的高度:上邊邊框+上邊內邊距+內容的高度+下邊內邊距+下邊邊框--->height = padding+border+content

3.元素空間的寬度:左邊的外邊距+元素的寬度+右邊的外邊距

4.元素的空間高度:上邊的外邊距+元素的高度+下邊的外邊距