CSS.笔记案例
一、CSS簡介
1.什么是CSS
CSS，Cascading Style Sheet層疊樣式表
是一組樣式設置規則，用于控制頁面的外觀樣式
2.為什么使用CSS
實現內容與樣式的分離，便于團隊開發
樣式復用，便于網站的后期維護
頁面的精確控制，讓頁面更精美
3.CSS作用
頁面外觀美化
布局和定位
二、基本用法
1、CSS語法
<head><style>選擇器{屬性名：屬性值;屬性名：屬性值; }</style> </head>選擇器：要修飾的對象（東西）
屬性名：修飾對象的哪個屬性（樣式）
屬性值：樣式的取值
案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>Document</title><style>P{color:red;}h2{color:blue;}</style> </head> <body><p>css從入門到精通</p><h2>主講</h2> </body> </html>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-1lJxRL68-1593495123236)(C:\Users\lenovo\Desktop\作業\html\2\2020-03-24 20_56_17-.png)]
2、CSS應用方式
也稱為CSS引用方式，有三種方式：內部樣式、行內樣式、外部樣式
2.1 內部樣式
也稱為內嵌樣式，在頁面頭部通過style標簽定義
對當前頁面當中所有符合樣式選擇器的標簽都起作用
2.2 行內樣式
也稱為嵌入樣式，使用HTML標簽的style屬性定義
只對設置style屬性的標簽起作用
2.3 外部樣式
使用單獨的CSS文件定義，然后在頁面中使用 link標簽 或 ***@import***指令 引入
使用 link標簽 鏈接外部樣式文件(推存用法)
type屬性可以省略
@import指令 導入外部樣式文件
案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>Document</title><style>/*內部樣式（并沒有實現樣式與內部的分離）*/p{color:red;}</style><!-- 外部樣式 link標簽鏈接樣式文件--><link rel="stylesheet" type="text/css" href="style/hello.css"><!-- 外部樣式 @import導入樣式文件--><style>/* @import "style/hello.css"*/</style> </head> <body><p>welcome to css</p><p>歡迎來到css課堂</p><h2 style="color:blue">web前段工程師</h2><h2>Java開發工程師</h2><div>哈哈</div><div>嘿嘿</div> </body> </html>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-53nCLjoT-1593495123239)(C:\Users\lenovo\Desktop\作業\html\2\2020-03-24 20_57_26-Document - 2345加速瀏覽器 10.7.png)]
三、選擇器
1、基礎選擇器
1.1 標簽選擇器
也稱為元素選擇器，使用HTML標簽作為選擇器名稱
以標簽名作為樣式應用的依據
1.2 類選擇器
使用自定義名稱，以 .點號 作為前綴，然后通過HTML標簽的class屬性調用類選擇器
以標簽的class屬性作為樣式應用的依據
注意事項：
調用時不能添加 .點號
同時調用多個類選擇器時以 空格 分隔
類選擇器定義時，名稱不能以數字開頭
1.3 ID選擇器
使用自定義名稱，以 # 號作為前綴，然后通過HTML標簽的id屬性進行名稱匹配
以標簽的id屬性作為樣式應用的依據，一對一的關系
2、復雜選擇器
2.1 復合選擇器
標簽選擇器和類選擇器、標簽選擇器和ID選擇器，一起使用
必須同時滿足兩個條件才能應用樣式
2.2 組合選擇器
也稱為集體聲明
將多個具有相同樣式的選擇器放在一起聲明，使用逗號隔開
2.3 嵌套選擇器
在某個選擇器內部再設置選擇器，通過空格隔開
只有滿足層次關系最里層的選擇器所對應的標簽才會應用樣式
注意：使用 空格 時不區分父子還是后代，使用CSS3中新增的 > 時必須是父子關系才行
2.4 偽類選擇器
根據不同的狀態顯示不同的樣工，一般用于 標簽
四種狀態：
:link 未訪問的鏈接
:visited 已訪問的鏈接
:hover 鼠標移動到鏈接上，即懸浮在鏈接
:active選定的鏈接，被激活
注意：默認超鏈接為：藍色，下劃線
2.5 偽元素選擇器
:first-letter為第一個字符的樣式
:first-line:為第一行添加樣式
:before:在元素內容的最前面添加的內容，需要配合content屬性使用
:after:在元素內容的最后面添加的內容，需要配合content屬性使用
案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>Document</title><style>p:first-letter{color:red;font-size:30px;}p:first-letter{background:yellow;}p:before{content:"嘿嘿";}p:after{content:"哈哈";}</style> </head> <body><p>hello world</p><hr><p>hello world<br>welcome to</p> </body> </html>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-zwWgKm6v-1593495123241)(C:\Users\lenovo\Desktop\作業\html\2\2020-03-28 20_46_50-Document - 2345加速瀏覽器 10.7.png)]
3.選擇器優先級
3.1 優先級
行內樣式>ID選擇器>類選擇器>標簽選擇器
原因：首先加載標簽選擇器,再加載類選擇器，然后加載ID選擇器，最后加載行內樣式
后加載會覆蓋先加載的同名樣式
3.2 內外部樣式加載順序
就近原則
原因：按照書寫順序依次加載，在同優先級的前提下，后加載的會覆蓋先加載的同名樣式，所以離的越近
越優先
3.3 !important
可以使用!important使某個樣式有最高的優先級
案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>Document</title>/*<link rel="stylesheet" type="text/css" href="style/world">*/<style>div{font-size:20px;color:red;}.hello{font-weight:bold;color:blue;}#world{text-decoration:underline;color:green;}</style> <link rel="stylesheet" href="style/world.css"></head> <body><div class="hello" id="world" style="color">css</div><p>主講</p> </body> </html>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-xvSIwb3w-1593495123245)(C:\Users\lenovo\Desktop\作業\html\2\2020-03-28 20_43_55-Document - 2345加速瀏覽器 10.7.png)]
四、常用的css屬性
1.字體屬性
定義字體相關的樣式
| font-size | 大小，尺寸 | 可以使用多種單位 |
| font-weight | 粗細 | |
| font-family | 字體 | |
| font-style | 樣式 | |
| font | 簡寫 |
1.1 font-size
取值：
- inherited繼承，默認從父標簽繼承字體大小（默認值），所有CSS屬性的默認值都是inherited
- px 像素 pixel
- %百分比，想對于父標簽字體大小的百分比
- em倍數，相對于父標簽字體大小的倍數
HTML根元素默認字體大小為16px，也稱為基礎字體大小
1.2 font-weight
取值：
- normal普通（默認）
- bold粗體
- 自定義400 normal 700 bold
1.3 font-family
是求系統中要安裝指定的字體
一般建議寫3種字體，首選，其次，備用，以逗號隔開
1.4 font-style
取值：
- normal普通
- italic斜體
1.5 font
簡寫屬性：font：font-style|font-weight|font-size|font-family
必須此順序書寫
案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>Document</title><style>div{font-size:30px;}p{/*font-size:20px;*//*font-size:80%;*/font-size:2em;}span.hello{/*font-size:80%;*/font-size:2em;}body{font-size:62.5%;}r#ddd{font-size:3em;}ul li{/* font-size:30px;font-weight:700;font-family:華文行楷,黑體,宋體;font-style:normal; */font:italic bold 20px 黑體,楷體,宋體;}</style> </head> <body><p>css入門到精通<span>主講：高職培訓</span></p>主講:hecter<hr><div>我的div<p>css入門到精通<span>主講：高職培訓</span></p></div><hr><span class="hello">主講：高職培訓</span><hr><ul><li>嘿嘿</li></ul> </body> </html>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-lqX1X4DN-1593495123246)(C:\Users\lenovo\Desktop\作業\html\2\2020-03-31 20_02_42-Document - 2345加速瀏覽器 10.7.png)]
2.文本屬性
| color | 顏色 | |
| line-height | 行高 | 行之間的高度 |
| text-align | 水平對齊方式 | 取值：left、center、right |
| vertical-align | 垂直對齊方式 | 取值：top、middle、bottom可用于圖片和文字的對齊方式 |
| text-indent | 首行縮進 | |
| text-decoration | 文本修飾 | 取值：underline、overline、line-through |
| text-transform | 字母大小寫 | 取值：lowercase、uppercase、capitalize首字母大寫 |
| letter-spacing | 字符間距 | |
| word-spacing | 單詞間距 | 只對英文有效 |
| white-space | 空白的處理方式 | 文本超出范圍后是否換行顯示，取值：nowrap |
2.1 color
取值：四種寫法
-
顏色名稱：使用英文單詞
-
16進制的RGB取值：#RRGGBB
特定情況下可以縮寫
#FFFFFF--->#FFF 白色 #000000--->#000 黑色 #FF0000--->#F00 紅色 #00FF00--->#0F0 綠色 #0000FF--->#00F 藍色 #CCCCCC--->#CCC 灰色 #FF7300--->無法簡寫注意：不區分大小寫
-
rgb 函數：rgb（red、green、blue）
每種顏色的取值范圍，[0,255]
rgb(255,0,0)----->紅 rgb(0,255,0)----->綠 rgb(0,0,255)----->藍 -
rgba函數：rgba(red,green,blue,alpha)
可以設置透明度，alpha取值范圍：[0,1] 0表示完全透明 1表示完全不透明
rgba(255,0,0,1)----->純紅 rgba(255,0,0,0.5)----->紅色半透明案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>/* div{color: red;background-color:#cccccc;background-color:transparent;background-image:url(../images/heihei.gif);}*/</style><link rel="stylesheet" type="text/css" href="style.css"> </head> <body><div><p>welcome to css welcome to css welcome to css </p><p>welcome to css welcome to css welcome to css </p><p>welcome to css welcome to css welcome to css </p></div><hr><p class="cart"></p>購物車 </body> </html> div{color: red;/* background-color:#cccccc;background-color:transparent;background-image:url(../image/heihei.gif);background-repeat:no-repeat;background-position:right top;height: 100px;background-attachment:fixed;*/background:red url(../../images/qq.jpg) repeat-x 30px 100px;}.cart{width:30px;height: 30px;background-color:#ccc;background-image:url(../image/icon.gif);background-color:transparent;background-position:-160px -30px;}[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-p0ReZxrf-1593495123248)(C:\Users\lenovo\Desktop\作業\html\2\2020-04-04 20_49_06-圖片預覽.png)]
3.背景屬性
| background-color | 背景顏色 | |
| background-image | 背景圖片 | |
| background-repeat | 背景圖片的重復方式 | |
| background-position | 背景圖片的顯示位置 | |
| background-attachment | 背景圖片是否跟隨滾動 | |
| background | 簡寫 |
3.1 background-color
取值：transparent 透明
3.2 background-image
必須使用url()方式指定圖片的路徑
如果是在css樣式文件中使用相對路徑，此時是相對于css文件，不是相對html文件
3.3 background-repeat
取值：repeat(默認)，repeat-x，repeat-y,no-repeat
3.4 background-position
默認背景圖顯示在左上角
取值：
關鍵字：top、bottom、left、right、center
坐標：左上角為(0,0)坐標，向右為x正方向,向下為y正方向
CSS雪碧圖，即CSS Sprites,也稱為CSS精靈,一種CSS圖像合并技術
含 義：將網頁中許多非常小的圖標/圖片整合到一張大圖中，當訪問面面時只需要下載一次，可以減少訪問
服務器的次數，提高性能
原理：使用background-position進行背景定位，使用坐標精確地定位出背景圖片的位置
3.5 background-attachment
取值：scroll(默認)、fixed固定不動
3.6 background
簡寫屬性：background:background-color|background-image|background-repeat|background-position
以空格隔開，書寫順序沒有要求
4.列表屬性
| list-style-type | 設置列表前的標記 | |
| list-style-image | 將圖像作為列表前的標記 | |
| list-style-position | 設置標記的位置 | 取值：outside(默認)、inside |
| list-style | 簡寫 |
4.1 list-style-type
取值：none、disc、circle、square、decimal
此時不再區分有序列表還是無序列表，只要設置列表前的標記就可以了
4.2 list-style
簡寫屬性：list-style:list-style-type|list-style-image|list-style-position
書寫順序沒有要求
案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>/* li{list-style-type:decimal;}*/.first{list-style-type:decimal;}.second{/* list-style-type:square;*/list-style-image:url(../images/male.gif);}.third{list-style-type:circle;list-style-position:inside;}.fourth{/* list-style:squareurl url(../images/female.gif) inside;*/list-style:none;}.nav{list-style:none;}.nav li{list-style:none;float:left;width:50px;}</style></head> <body><ul><li class="first">hello</li><li class="second">hello</li><li class="third">hello</li><li class="fourth">hello</li></ul><hr><nav><ul class="nav"><li>新聞</li><li>地圖</li><li>視頻</li><li>貼吧</li></ul></nav> </body> </html>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-D97oJQT7-1593495123249)(C:\Users\lenovo\Desktop\作業\html\2\2020-04-04 20_42_25-Document - 2345加速瀏覽器 10.7.png)]
5.表格屬性
border-collapse:表格中相鄰的邊框是否合并（折疊）為單一邊框
取值：separated（默認） collapse
6.使用LiveReload
可以實現當保存頁面文件時實時刷新瀏覽器
步驟：
在Chrome瀏覽器中安裝 LiveReload 擴展程序
將livereload.rar文件解壓–>在chrome瀏覽器的右上角找“…”–>更多工具–>擴展程序–>提示：需要打
開開發者模式–>加載已解壓的擴展程序–>注意后項的操作 勾選"允許訪問所有網站留存數據"
在Sublime中安裝LiveRelad插件
將 LiveRelad-sublime.rar 解壓放到sublime的插件目錄中（packages）中
配置sublime中的LiveRelad插入
preference–>packages settings–>LiveReload–>settings - default
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6xEvhLTE-1593495123251)(C:\Users\lenovo\Desktop\作業\html\2\2020-04-04 20_38_41-Document - 2345加速瀏覽器 10.7.png)]
在瀏覽器中啟用LiveReload
先打開要訪問的頁面，然后點擊瀏覽器地址欄右邊的黑色圓圈，當中心的小圓圈變成實心時表示已啟
用
在sublime中啟用LiveReload
按ctrl+Shift+P–>搜索livereload,選擇enable–>搜索simple reload:選擇enable
五、盒子模型
1.簡介
盒子模型是網頁布局的基礎，將頁面中所有元素均看作是一個盒子，盒子都包含以下幾個屬性：
- width 寬度
- height 高度
- border 邊框
- padding 內邊距
- margin 外邊距
2.盒子模型
2.1 border
盒子的邊框
分為4個方向：
? 上top、右right 、下bottom、左left
? border-top、border-right、border-bottom、border-left
每個邊框都包含三種樣式：
? 顏色：color、粗細width、樣式style
? border-top-color、border-top-width、border-top-style
? border-right-color、border-right-width、border-right-style
? border-bottom-color、border-bottom-width、border-bottom-style
? border-left-color、border-left-width、border-left-style
樣式的取值：
? solid實線、dashed虛線、dotted點線、double雙線、inset內嵌3D線、outset外嵌3D線
簡寫，三種方式：
-
按方向簡寫
border-top、border-right、border-bottom、border-left
書寫順序：
border-方向、width style color
-
按樣式簡寫
border-color、border-width、border-style
書寫順序：
border-樣式：top right、bottom、left
必須按順時針方向書寫，同時可以縮寫
? border-width: 2px----->四個邊框寬度均為2px
? border-width: 2px 4px----->上下一樣 左右一樣
? border-width: 2px 3px 4px
規則：如果省略，則認為上下一樣，左右一樣
-
終極簡寫
如果四個邊樣式完全相同，border-width style color
2.2 padding
表示盒子的內邊距，即內容與邊框之間的距離
有四個方向：也可以簡寫，按順時針書寫
默認：上下一樣，左右一樣
注意：左右沖突以左為準，上下沖突以上為準
2.3 margin
表示盒子的外邊距，即盒子與盒子之間的距離
同樣也分為四個方向，也可以簡寫（安順時針方向，默認上下一樣，左右一樣）
居中對齊：
/*元素的水平居中*/ /*1.塊級元素的水平居中*/margin:0 auto;/*提示：塊級元素必須指定寬度*//*2.文本的水平居中*/text-algin:center;/*3.垂直居中，將height和line-height設置為相同*/height:100px;line-height:100px;3.其他
3.1 元素所占空間
頁面中的元素實際所占的空間
- 寬度=width+左右padding+左右border+左右margin
- 高度=height+上下padding+上下border+上下margin
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Wrv8aXnX-1593495123253)(C:\Users\lenovo\Desktop\作業\html\2\2020-04-08 17_36_55-Document - 2345加速瀏覽器 10.7.png)]
3.2 盒子屬性默認值
不同標簽的盒子屬性默認值可能不同，需要自己設置
body,ul,ol,dl,li,p,form,h1,h2,h3,h4,h5,h6{margin:0;padding:0;} <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>/* body默認margin不為0 */body{margin:0;padding:0;}/* p默認margin也不為0 */p{margin:0;}ul{list-style:none;margin:0;padding:0;}body,ul,ol,dl,li,p,form,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}</style> </head> <body>welcome to css<p>hello world</p><ul><li>hello1</li><li>hello2</li><li>hello3</li></ul> </body> </html><!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>/* body默認margin不為0 */body{margin:0;padding:0;}/* p默認margin也不為0 */p{margin:0;}ul{list-style:none;margin:0;padding:0;}body,ul,ol,dl,li,p,form,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}</style> </head> <body>welcome to css<p>hello world</p><ul><li>hello1</li><li>hello2</li><li>hello3</li></ul> </body> </html>3.3 外邊距的合并
也稱為外邊距的折疊，指的是兩個塊級元素垂直外邊距相遇時，他們將合并為一個外邊距，合并后的外邊距值為其中較大的那個外邊距值
兩種情況：
- 當一個元素出現在另一個元素上面時，第一個元素的下邊距與第二個元素的上邊距會發生合并
- 當第一個元素包含在另一個元素中時，并且沒有內邊距或邊框把外邊距分隔開時，兩個元素的上外邊距會發生合并
外邊距合并的好處，讓排版在視覺上顯得更美觀
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div{width:50px;height:50px;background:#ccc;}.div1{margin-bottom:20px;}.div2{margin-top:30px;}.div3{width:100px;height:100px;background: blue;margin-top:20px;/* border:1px soild red; */}.div4{margin-top:10px;}p{margin:20px 0;}</style> </head> <body><div class="div1">div1</div><div class="div2">div2</div><hr><div class="div3"><div class="div4"></div></div><hr><p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p><p>p6</p><p>p7</p></body> </html>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-wPkADch1-1593495123255)(C:\Users\lenovo\Desktop\作業\html\2\2020-03-31 20_06_44-圖片預覽.png)]
六、定位方式
1.簡介
通過position屬性實現對元素的定位，有四種定位方式
常用取值：
| static | 默認值 | 按照常規文檔流進行顯示 |
| relative | 相對定位 | 相對于標簽原來的位置進行的定位 |
| absolute | 絕對定位 | 相對于第一個非static定位的父標簽的定位 |
| fixed | 固定定位 | 相對于瀏覽器窗口進行定位 |
設置定位方式后，還要設置定位屬性（偏移量）：top、bottom、left、right
2.相對定位
先設置元素的position屬性為relative，然后在設置偏移量
3.絕對定位
先設置父標簽為非static定位，然后設置元素的position屬性為absolute，最后再設置偏移量
注意：
- 一般來說都會將父標簽設置為非static定位
- 如果父標簽不是非static定位，則會相對于瀏覽器窗口進行定位
- 設置元素為絕對定位后，元素會浮到頁面上方
4.固定定位
先設置元素的position屬性為fixed，然后再設置偏移量
設置元素為固定定位后，元素會浮動在頁面上方
5.z-index
設置元素定位方式后，元素會浮在頁面上方，此時可以通過z-index屬性設置優先級，控制元素的堆疊順序
取值為數字，值越大優先級越高，默認為auto（大多數瀏覽器默認為0）
注意：只能給非static定位的元素設置z-index屬性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>#container{width:800px;border:1px solid #000;position:relative;}.div1,.div2,.div3,.div4{width:100px;height:50px;}.div1{background:red;/* 默認為station *//* position:static; */position:relative;top:20px;left:50px;z-index:-5;}.div2{background:blue;position:absolute;left:100px;bottom:50px;z-index:-8;}.div3{background:green;position:fixed;bottom:50px;left:100px;}.div4{background:cyan;}</style> </head> <body><div id="container"><div class="div1">div1</div><div class="div2">div2</div><div class="div3">div3</div><div class="div4">div4</div></div> </body> </html>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Whkrgvyi-1593495123256)(C:\Users\lenovo\Desktop\作業\html\2\2020-04-19 18_00_50-Document - 2345加速瀏覽器 10.8.png)]
七、其他CSS屬性
1.浮動和清除
1.1 浮動屬性
通過float屬性來實現元素的浮動，可以讓塊級元素脫離常規的文檔流，向左或向右移動，在同一行顯示，如果一行顯示不下，則會換行顯示
常用取值：
- left左浮動
- right右浮動
- none不浮動、默認值
設置float屬性后，元素會浮在頁面上層，此時父容器無法計算自己的尺寸，如果我們還想顯示父容器通常會在末尾添加一個清除了float屬性的空的div來解決
1.2 清除屬性
通過clear屬性來實現清除，設置元素的哪一側不允許有浮動元素
常用取值：
- left左側不允許出現浮動元素
- right右側不允許出現浮動元素
- both兩側均不允許出現浮動元素
- none允許兩側出現浮動元素，默認值
結論：
- 對于非浮動元素，兩邊都可以設置清除屬性（常用）
- 對于浮動元素，向哪邊浮動，就只能設置哪邊的清除
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-JuRZBWrY-1593495123259)(C:\Users\lenovo\Desktop\作業\html\2\2020-04-19 18_02_44-.png)]
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>body{margin:0;padding:0;}#container{width:960px;margin:0 auto;border:2px solid #0f0;}.div1,.div2,.div3,.div4{width:200px;height:180px;float:left;margin:5px;border:5px outset #ff7300;padding:10px;}#container img{width:100%;height:100%;}#container .clr{clear:both;}</style> </head> <body><div id="container"><div class="div1"><img src="../../images/adv1.jpg" alt=""> </div><div class="div2"><img src="../../images/adv2.jpg" alt=""> </div><div class="div3"><img src="../../images/adv3.jpg" alt=""> </div><div class="div4"><img src="../../images/adv4.jpg" alt=""> </div><div class="clr"></div></div><p>welcome to CSS</p>javascript </body> </html>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-2RwyRHei-1593495123260)(C:\Users\lenovo\Desktop\作業\html\2\2020-04-19 18_04_28-Document - 2345加速瀏覽器 10.8.png)]
2. 元素的顯示和隱藏
2.1 display
通過display屬性設置元素是否顯示，以及是否獨占一行
常用取值：
| none | 不顯示 | |
| inline | 顯示為內聯元素，行級元素的默認值 | 將塊級元素變為行級元素，不在獨占一行 |
| block | 顯示為塊級元素，塊級元素的默認值 | 將行級元素轉化為塊級元素，獨占一行 |
| inline-block | 顯示為內聯元素，但是可以設置寬和高 | 在inline基礎上允許設置寬度和高度 |
注意：
行級元素是無法設置寬度和高度的，可以為行級元素設置display：inline-block然后就可以設置寬和高了
2.2 visibility
也可以通過visibility屬性設置元素的顯示和隱藏
常用屬性：
| visible | 顯示 | |
| hidden | 隱藏 |
2.3 區別
- display隱藏時不再占據頁面中的空間，后面的元素會占用其位置
- visibility隱藏時會占據頁面中的空間，位置還保留在頁面中，只是不顯示
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-pZjdc69Q-1593495123262)(C:\Users\lenovo\Desktop\作業\html\2\2020-04-19 18_05_58-Document - 2345加速瀏覽器 10.8.png)]
3.輪廓屬性
3.1 簡介
輪廓outline，用于在元素的周圍繪制一個輪廓，位于border外圍，可以突出顯示元素
3.2 基本用法
常用屬性
- outline-width 輪廓寬度
- outline-color 輪廓顏色
- outline-style 輪廓樣式
- outline 簡寫
在瀏覽器中，當鼠標單擊或使用tab鍵讓一個表單或鏈接獲得焦點時，該元素會有一個輪廓
優點：可以提高使用表單的用戶體驗
缺點：有時會影響美觀
3.3 outline和border區別
- border可以應用于所有的html元素，而outline主要用于表單元素，超鏈接元素
- 當元素獲得焦點時會自動出現outline輪廓效果，當失去焦點時會自動消失，這是瀏覽器默認行為
- outline不影響元素的尺寸和位置，而border會影響
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-vz2bs5he-1593495123263)(C:\Users\lenovo\Desktop\作業\html\2\2020-04-19 18_07_53-Document - 2345加速瀏覽器 10.8.png)]
4.其他屬性
4.1 寬高相關
- max-width 設置元素的最大寬度
- max-height 設置元素的最大高度
- min-width 設置元素的最小寬度
- min-height 設置元素的最小高度
4.2 overflow屬性
當元素內容溢出時該如何處理
常用屬性：
- visible溢出時可見，顯示在元素外，默認值
- hidden溢出的部分不可見（常用）
- scroll無論是否出現溢出適中出現滾動條
- auto溢出時自動出現滾動條
4.3 cursor屬性
用于設置光標的形狀
常用屬性：
- default默認光標，一般為箭頭
- pointer手形，光標移動超鏈接上時一般顯示為手形
- move表示可移動
- text表示文本
- wait表示程序正忙，需要等待
- help表示幫助
八、頁面布局
1.簡介
常見頁面布局：
- 表格布局
- div布局
2.表格布局
2.1 簡介
不適用于復雜布局，僅用于簡單、有規則的結構
定位相對準確，與瀏覽器基本無關，適用于簡單分隔
2.2 用法
table常用樣式的屬性
- border在表格外圍設置邊框
- border-spacing設置單元格之間的距離（相當于table標簽中的cellspacing 屬性，即間距）
- border-collapse表格中相鄰邊框是否合并，取值：seprate、collapse
th/td常用樣式屬性：
- border為單元格設置邊框
- padding設置單元格的內邊距（相當于table標簽中的cellpadding屬性，邊距）
3.div布局
定位絕對精確，使用靈活，適合于復雜的布局方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>.hello{width:80%;border:1px solid #ccc;border-spacing:0;border-collapse:separate;}.hello th,.hello td{border:1px solid #ccc;padding:5px;}</style> </head> <body><table class="hello" cellspacing="0"><thead><tr><th>th1</th><th>th2</th><th>th3</th><th>th4</th></tr></thead><tbody><tr><td>td1</td><td>td2</td><td>td3</td><td>td4</td></tr><tr><td>td1</td><td>td2</td><td>td3</td><td>td4</td></tr><tr><td>td1</td><td>td2</td><td>td3</td><td>td4</td></tr><tr><td>td1</td><td>td2</td><td>td3</td><td>td4</td></tr><tr><td>td1</td><td>td2</td><td>td3</td><td>td4</td></tr><tr><td>td1</td><td>td2</td><td>td3</td><td>td4</td></tr></tbody></table> </body> </html>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-RrZzKxns-1593495123265)(C:\Users\lenovo\Desktop\作業\html\2\2020-04-19 18_13_16-Document - 2345加速瀏覽器 10.8.png)]
3.1 簡單布局
兩種形式：
- 1-1-1布局
- 1-2/3-1布局
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-FLmC9cr7-1593495123266)(C:\Users\lenovo\Desktop\晚飯\2020-04-23 21_15_48-Document - 2345加速瀏覽器 10.8.png)]
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="style2.css"> </head> <body><div id="container"><header class="header">header</header><article class="wrapper"><!-- <aside>left side</aside> --><section class="main">main</section><aside>right aside</aside></article><footer class="footer">footer</footer></div> </body> </html> @charset "utf-8"; body{padding:0;margin:0; } #container{width: 980px;border:1px solid red;margin:0 auto; } #container .header{width: 100%;height:80px;background:red; } #container .wrapper{width:100%;height:600px;background:blue;margin:10px 0; } #container .wrapper aside{background:pink;width: 200px;height: 400px;float:left; } #container .wrapper .main{background:cyan;width:770px;height:600px;float:left;/* margin:0 10px; */margin-right:10px; } #container .footer{width:100%;height:120px;background:green; }[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6bLygAZJ-1593495123268)(C:\Users\lenovo\Desktop\晚飯\2020-04-23 21_16_09-Document - 2345加速瀏覽器 10.8.png)]
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="style3.css"> </head> <body><article id="wrapper"><section class="main"> main</section><aside class="left">left aside </aside><aside class="right">right aside</aside></article> </body> </html> @charset "utf-8"; /* 父容器1.溢出隱藏2.設置容器的內邊距padding，用來空出位置放置左右兩個側邊欄*/ #wrapper{overflow:hidden; /* 超出部分隱藏 *//* 實現左側邊欄和右側邊欄 */padding:0 200px; /* 左右分別空出200px用于放置左、右側邊欄 */min-width:300px;border:1px solid #CCC; }/* 主體：1.寬度自適應2.設置浮動布局*/ #wrapper .main{width: 100%;height: 300px;background:green;float:left; }#wrapper aside{width: 190px;height: 300px;background:blue;float:left;position:relative; }#wrapper .left{margin-left:-100%;left:-200px; }#wrapper .right{margin-left:-190px;left:200px; /* 相對于左邊 *//* right:-200px; */ /* 相對于右邊 */ }[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-0GNMa9Qv-1593495123270)(C:\Users\lenovo\Desktop\晚飯\2020-04-23 21_16_29-Document - 2345加速瀏覽器 10.8.png)]
3.2 圣杯布局
頁面結構，兩邊的邊欄寬度固定，中間主體在一定范圍內可自適應，并且主體優先被加載
一般防止頁面縮放影響瀏覽，都會為頁面設置一個最小寬度
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="style4.css"> </head> <body><div id="container"><header class="header">header</header><article class="wrapper"><section class="main">main</section><aside class="left">left</aside><aside class="right">right</aside></article><footer class="footer"> footer</footer></div> </body> </html> @charset "utf-8"; body{margin:0;padding:0; }#container{margin:0 auto; } #container .header{width:100%;height: 80px;background:red; } #container .wrapper{overflow:hidden;padding:0 200px;min-width:300px;margin:10px 0; } #container .main{width:100%;height: 400px;background:blue;float:left; } #container aside{float:left;width: 190px;height: 300px;background:cyan;position:relative; } #container .left{margin-left:-100%;left:-200px; } #container .right{margin-left:-190px;left:200px; } #container .footer{width:100%;height: 150px;background:green; }[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-PKZfB1b0-1593495123271)(C:\Users\lenovo\Desktop\晚飯\2020-04-23 21_21_31-Document - 2345加速瀏覽器 10.8.png)]
3.3 雙飛翼布局
源自淘寶的UED（用戶體驗設計）團隊
雙飛翼布局和圣杯布局要實現的效果是相同的，只是思路不同
圣杯布局和雙飛翼布局的區別：
雙飛翼布局比圣杯布局多創建一個div
雙飛翼布局不用設置內邊距和相對定位，也不用設置偏移量
雙飛翼布局使用的margin、圣杯布局使用的padding
實際開發中建議使用css3 中新增的flex彈性盒子的布局，更簡潔
#container .header{
width:100%;
height: 80px;
background:red;
}
#container .wrapper{
overflow:hidden;
padding:0 200px;
min-width:300px;
margin:10px 0;
}
#container .main{
width:100%;
height: 400px;
background:blue;
float:left;
}
#container aside{
float:left;
width: 190px;
height: 300px;
background:cyan;
position:relative;
}
#container .left{
margin-left:-100%;
left:-200px;
}
#container .right{
margin-left:-190px;
left:200px;
}
#container .footer{
width:100%;
height: 150px;
background:green;
}
總結
