JavaWeb基礎（day14_css）
阿新 • • 發佈：2020-07-14
css
css樣式種類
- 內部樣式
- 在head標籤中使用 <style>標籤
- 行內樣式
- 直接在標籤中寫style屬性進行賦值,style屬性的就相當於內部樣式的{}
- 外部樣式
- 單獨寫一個檔案命名為xxx.css,將css程式碼寫入檔案,在 <head> 中進行引用
- 單獨寫一個檔案命名為xxx.css,將css程式碼寫入檔案,在 <head> 中進行引用
選擇器
常用選擇器
- 標籤選擇器 標籤型別{} ,直接寫標籤的名字就行
- id選擇器 #id名稱{} ,id不能重複,需要給標籤新增一個id
- 屬性類選擇器 .class名稱{} class可以重複,需要給標籤添
- 加class屬性
- 並集選擇器, 選擇器1,選擇器2{}
- 屬性選擇器 標籤[屬性="具體屬性值"]{} 例如：input[type="text"]{}
文字樣式
- fontstyle
- 設定文字樣式,常用取值為italic和normal 程式碼：font-style: italic;
- fontweight
- 設定文字的粗細,常用取值 lighter,bold和bolder還可以進行數字取值100,900 程式碼：font-weight: bold;
- fontsize
- 設定文字大小,取值是畫素 程式碼：font-size: 100px;
- fontfamily
- 設定字型 程式碼：font-family: "宋體";
- textdecoration
- 文字裝飾屬性,常用取值underline(下劃線)line-through(刪除線)overline(上劃線)none(什麼都沒有) 可以用none去掉a標籤的下劃線
- textalign
- 對齊方式: left right center
- textindent
- 縮排方式 2em代表兩個文字寬度
- color
- 設定字型顏色”red”
背景樣式
- backgroundcolor
- 設定背景顏色”red”
- backgroundimage
- 設定背景圖片, background-image:url("img/1.jpg"); ,會自動平鋪
- backgroundrepeat
- 設定平鋪方式,有四個值,repeat(預設),norepeat(不平鋪),repeatx(水平平鋪),repeaty(垂直平鋪)
- backgroundposition
- 設定背景定位方式格式為: 水平方向數值 垂直方向數值 ,水平各有left center right ,垂直有top center bottom,也可以是具體的畫素值比如 100px 100px
- backgroundattachment
- 設定背景的關聯方式常用有兩個scroll(會隨著滾動條的滾動而滾動),fixed(不會隨著滾動而滾動)
邊框
border 屬性,連寫格式 寬度 樣式 顏色盒子模型
- padding
- 內容到邊框的距離叫做內邊距,內邊距屬性按照的順序是上右下左順序進行設定也可以分開進行設定改變內邊距元素的寬高會發生改變
- 設定內邊距後元素的自身的寬高會發生改變
- 設定完內邊距後顏色也會被設定上
- margin
- 外邊距,元素邊框與邊框之間的距離,依次設定的上右下左
- margin設定為 0 auto 就代表距離上方0畫素,距離左右兩邊水平居中
- 盒子模型
- 元素的寬度:左邊邊框+左邊內邊距+內容寬度+右邊內邊距+右邊邊框
- 元素的高度:上邊邊框+上邊內邊距+內容高度+下邊的內邊距+下邊邊框
- 元素空間的寬度:左邊的外邊距+元素的寬度+右邊的外邊距
- 元素空間的高度:上邊的外邊距+元素的高度+下邊的外
標準流
1. HTML標籤被分為兩種型別,一種是塊級標籤(獨佔一行,可以設定寬高),一種是行內標籤(不獨佔一行,不能設定寬高) 2. 我們之前學的所有的標籤,都是按照標準流進行排列的,塊級元素從上到下,行內元素從左到右- display
- display屬性:inline(行內)block(塊級)inlineblock(行內塊級,能夠設定寬高),none(隱藏,不佔空間)
浮動流
- float
- 浮動流,設定屬性float能讓元素向左或向右進行浮動元素會脫離標準流,那麼標準流的元素會相應頂上來其次脫離標準流,會在相應的標準流的行號上進行浮動如果向左或向右進行浮動後,左右兩邊又有其他元素,就會緊貼那個元素浮動流不分行內和塊級元素都可以設定寬高
- clear
- 設定clear屬性,能夠使元素在浮動的過程中不去貼靠其他元素,只能影響自己,不能影響其他元素
定位流
- 相對定位
- 不會脫離標準流,相對於在標準流的位置進行偏移,所以下面元素不會頂上來position屬性為relative,再結合 top right bottom left 四個屬性進行位置的確定
- 絕對定位
- 會脫離標準流,所以下面元素會頂上來,相對於在標準流的位置進行偏移設定postion為absolute,通過top right bottom left定位如果祖先元素沒有定位流(相對定位,絕對定位,固定定位),絕對定位相對於body定位,如果祖先元素是定位流,絕對定位相對於祖先元素(就近原則)絕對定位不分行內和塊級元素都可以設定寬高
- 固定定位
- 固定定位脫離標準流設定postion為fixed,通過top right bottom left定位不區分行內和塊級和絕對定位相同,唯一不同就是不會隨著滾動條滾動而滾動