WEB前端--Day3(css)
一、上堂回顧
1.網頁開發的知識 組成：結構，表現，行為 實現：html，css，javascript 2.html簡介 超文字標記語言 規範：標籤組成 操作思想：封裝 3.html中常用的標籤 font：設定字型，size color p:設定段落 h：標題，注意：數字 越大，字號越小 hr：水平線 br：換行 特殊字元： < > img: src width height alt title 相對路徑：../ 塊標籤：pre div span 列表標籤：有序【ol】 無序【ul】 li 表格標籤：table tr td【th】 合併單元格：colspan rowspan a：超連結標籤，href target 定位資源：#top #id 音視訊標籤：audio video ：controls loop autoplay 表單標籤：form input select textarea 屬性：type：text，password，file，radio，checkbox，button,submit,reset value: name id class checked selected 頭標籤：head linkcss
1.概念 層疊樣式表 意義：為了將結構和表現分離，為了程式碼的維護性和可讀性 2.css的選擇器 3.css和html的結合方式 內嵌樣式和連結樣式 行內樣式和匯入樣式：瞭解
二、css的屬性
1.字型屬性
font-family:字型型別，比如宋體，黑體等
font-style：字型樣式【是否傾斜】
normal：正常
italic：義大利體
oblique:斜體
font-weight:設定字型的粗細，取值範圍為100~900，數值越大，字型越粗
normal：正常
bold：粗體
bolder：
lighter
font-size：字型大小，一般情況下，使用px為單位，預設大小為16px
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> p{ /*注意：可以同時設定多種字型，瀏覽器在訪問者的計算機中查詢宋體， * 如果查詢到，則直接顯示，如果查詢不到，則去查詢後面的字型 * 如果列出來的字型在訪問者的計算中都不存在，則顯示預設字型 * */ font-family: 宋體,微軟雅黑,Arial; font-style: oblique; /* * italic:只是一種字型風格，義大利體，對每個字元得到結構做了一些微小的改動，來反映外觀的變化 * oblique：將正常文字傾斜一定的角度，一般給英文設定傾斜 */ /*font-weight: 900;*/ font-weight: lighter; /*font-size: 30px;*/ font-size: 2em; /* * px:表示畫素，與解析度有關，表達字型大小，縮放的時候不建議使用 * em:自動適應尺寸，方便字型的放大或者縮小,用於段落縮排 * 1em = 16px */ } </style> </head> <body> <p>字型屬性</p> </body> </html>
2.文字屬性
text-decoration:設定文字的裝飾效果
none：正常
underline：下劃線
line-through:給文字新增刪除線
overline：新增頂線
blink：閃爍，僅部分瀏覽器支援
text-indent:段落縮排，中文中常用2em【常用】
text-align:對齊方式【常用】
left：局左對齊
right
center：居中對齊【常用】
justify：兩端對齊
letter-spacing:字元之間的間距
word-spacing:單詞之間的間距
text-transform:變化，側重於大小寫轉換
none：正常顯示
capitalize:單詞首字母大寫
uppercase：將小寫轉化為大寫
lowercase：將大寫轉化為小寫
direction：文字方向
ltr：文字方向為從左到右，預設方向
rtl：文字方向為從右到左
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> p{ /*注意：可以同時給一段文字設定多個裝飾效果，使用空格隔開*/ /*text-decoration: underline overline line-through;*/ /*注意：後出現的屬性會覆蓋先出現的屬性*/ text-decoration: underline; text-indent: 2em; /*text-align: center;*/ /*使用px作為單位*/ /*字元*/ letter-spacing: 10px; /*單詞，通過空格區分單詞*/ word-spacing: 20px; text-transform: uppercase; direction: rtl; } </style> </head> <body> <p>文字屬性css html</p> </body> </html>
3.盒子屬性
在進行頁面佈局之前，將資料封裝到一塊一塊的區域中，常用div
說明：所有的html的標籤都能使用盒子屬性
3.1邊框屬性
border：邊框，統一設定指定標籤的所有的邊框，引數：邊框寬度 邊框樣式 邊框顏色
border-top: 上
border-bottom：下
border-left：左
border-right：右
border-width：邊框的寬度，單位使用px
border-style:邊框的樣式
dotted：點畫線
dashed：虛線
solid：實線
double：雙線
border-color：邊框顏色
border-radius：邊框削圓角【注意：一般使用百分比表示，百分比越大，表示圓角越大】【常用】
50%：將正方形削圓角，取值為50%的時候，表示得到一個圓
總結：
border-width,border-color,border-style分別給出1個，2個，3個或者4個屬性值的時候，分別代表的含義
1個：上下左右
2個：前者代表上下，後者代表的是左右
3個：前者代表上，中間代表左右，後者代表的下
4個：分別代表上右下左
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 100px; /*統一設定 引數可以不按照特定的順序*/ /*border: 2px dashed blue;*/ } #div2{ /*個別設定：只設置指定的邊框*/ border-right: 2px solid red; } #div3{ /*統一設定*/ border-width: 3px; border-color: purple; border-style: dotted; } #div4{ border-width: 2px; border-color: red green cyan purple; border-style: solid; } </style> </head> <body> <div>AAAAAA</div> <div id="div2">BBBBB</div> <div id="div3">CCCCC</div> <div id="div4">DDDDDD</div> </body> </html>
3.2內邊距
padding；內邊距，引數為距離，單位為px
padding-left
padding-right
padding-top
padding-bottom
說明：可以統一設定指定標籤的上下左右的內邊距，也可以單獨設定
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 100px; /*統一設定 引數可以不按照特定的順序*/ border: 2px dashed blue; } #div2{ /*統一設定內邊距*/ /*注意：設定了內邊距，相當於將該標籤的寬和高改變*/ padding: 30px; } #div3{ /*單獨設定*/ padding-left: 30px; padding-bottom: 30px; } </style> </head> <body> <div>AAAAAA</div> <div id="div2">BBBBB</div> <div id="div3">CCCCC</div> </body> </html>
3.3外邊距
margin：外邊距，引數為距離，單位為px
margin-left
margin-right
margin-top
margin-bottom
說明：可以統一設定指定標籤的上下左右的外邊距，也可以單獨設定
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 100px; /*統一設定 引數可以不按照特定的順序*/ border: 2px dashed blue; } #div2{ /*統一設定外邊距*/ /*注意：外邊距的參照物：頁面，相鄰的其他標籤*/ margin: 30px; } #div3{ /*單獨設定*/ margin-top: 50px; } </style> </head> <body> <div>AAAAAA</div> <div id="div2">BBBBB</div> <div id="div3">CCCCC</div> </body> </html>
3.4其他寫法
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> img{ width: 400px; height: 400px; /*border-radius: 50%;*/ border-left-color: purple; border-left-width: 2px; border-left-style: solid; border-right-style: dotted; } </style> </head> <body> <img src="img/pic20.jpg" /> </body> </html>
4.尺寸屬性
width：寬度
height：高度
line-height:行高
注意：當文字內容只有一行的時候，將行高設定為和height相等，【line-height = height】,就可以實現文字在垂直方向上居中顯示
text-align:center,在水平方向上居中顯示
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ width: 200px; height: 100px; border: 1px black solid; /*設定文字真正意義上的居中顯示：水平方向和垂直方向*/ line-height: 100px; text-align: center; } </style> </head> <body> <div class="box"> 尺寸屬性this is a text </div> </body> </html>
5.背景屬性
background；背景【顏色或者圖片】
background-color:背景顏色
background-image:背景圖片
background-repeat：背景樣式平鋪樣式
repeat：沿著水平和垂直方向平鋪，預設值
no-repeat；不平鋪
repeat-x:沿著水平方向平鋪
repeat-y:沿著垂直方向平鋪
background-position：背景影象的位置
left right top bottom center
background-attachment;設定背景圖片是否隨著網頁內容一起滾動
scroll：會隨著滾動，預設值
fixed：固定，不隨著滾動
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ width: 100%; height: 5000px; /*背景顏色*/ /*注意：給任何的標籤都可以設定背景顏色*/ /*background-color: red;*/ /*背景圖片 * 圖片尺寸 = 背景的大小,整體放下 * 圖片尺寸 < 背景的大小,預設平鋪 * 圖片尺寸 > 背景的大,只顯示背景的大小 * */ /*background-image: url(img/pic20.jpg);*/ /*是否允許平鋪*/ /*background-repeat: no-repeat;*/ /*設定背景圖的位置 *水平方向：left center right * 垂直方向：top center bottom * 數值可以自定義 * */ /*引數：左右 上下，類似於座標系中的點*/ /*background-position: 50% 50px;*/ /*設定背景圖是否隨著網頁內容滾動*/ /*background-attachment: fixed;*/ /*設定顏色的漸變 * background：linear-gradient() */ /*從左到右的線性漸變*/ /*background:linear-gradient(to right,red,blue);*/ /*從上到下的線性漸變*/ /*background:linear-gradient(red,blue);*/ /*從左上角到右下角的線性漸變*/ background:linear-gradient(to right bottom,red,blue); } </style> </head> <body> </body> </html>
6.和列表相關的屬性
list-style:設定列表的專案符號和位置
list-style-image:設定列表的專案符號
list-style-position:設定專案符號的位置
inside：裡面
outside：外面
7.浮動屬性
div是塊級元素，特點：在頁面中獨佔一行【會自動換行】，當一個html頁面中有多個div的時候，預設從上往下依次排列，這種排列方式被稱為流
元素浮動之前，被稱為元素處於標準流中，是豎向排列的，浮動之後，可以將元素的排列方式改為橫向排列
float：實現標籤的浮動
none：預設值，不浮動
left：向左浮動
right：向右浮動
clear： 清除浮動，取值一般為left或者right，表示將原來的浮動清除掉，避免影響後面標籤的位置
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 300px; height: 300px; background-color: red; float: right; } #div2{ width: 200px; height: 200px; background-color: blue; float: right; } #div3{ width: 400px; height:400px; background-color: orange; float: right; } </style> </head> <body> <div id="div1">111</div> <div id="div2">222</div> <div id="div3">333</div> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> li{ float: left; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html>
8.顯示屬性
display：標籤的顯示狀態
none：隱藏，特點：不會佔據空間，常用來進行頁面的重繪或者重排
block：塊級標籤
特點：總是以一個塊的形式表現出來，可以獨佔一行
可以設定寬高以及內外邊距，如果不設定，預設寬度和父標籤相等
高度會隨著文字內容的變化而變化【自適應】
例如：div p li hn
inline：行內標籤
特點：不會自動換行，寬高隨著內容自適應，設定寬高和內外邊距無效
設定這個值，就可以將一個塊級標籤轉換為行內標籤，那麼該標籤將不能設定寬高和內外邊距
例如：span a
inline-block:行內塊級標籤
特點：不但具有block的特點：可以設定寬高和內外邊距
也具有inline的特點：不換行
使用場景：導航的實現【浮動，目的是將豎向排列轉換為橫向排列】
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0px; margin: 0px; list-style: none; } ul li{ float: left; } a{ /*將a標籤從行內標籤轉換為塊級標籤：就可以設定寬高和內外邊距*/ display: block; width: 30px; height: 30px; background-color: orange; text-decoration: none; text-align: center; line-height: 30px; } </style> </head> <body> <ul> <li><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> </ul> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ul,li,a,*{ padding: 0; margin: 0; list-style: none; text-decoration: none; } li{ display: inline-block; border: 1px solid red; /*float: left;*/ } </style> </head> <body> <ul> <li><a href="">1</a></li><li><a href="">2</a></li><li><a href="">3</a></li><li><a href="">4</a></li><li><a href="">5</a></li> </ul> </body> </html> <!-- 問題：將所有標籤的內外邊距設定為了0，但是最終顯示li之間有間距，間距從哪來？ 原因：實際上，這是inline造成的，這些間距是空白符，在瀏覽器中，空白符不會被忽略的【換行造成的空白符】 -->
9.定位屬性
9.1絕對定位
position
absolute：絕對定位，將物件從文件流中拖出
參照物：父標籤或者先輩標籤【如果該標籤的父標籤設定了有效的定位，就以父標籤作為參照物，如果沒有設定有效定位，則查詢所有的先輩標籤】
注意：可以使用left，top，right和bottom屬性設定標籤的位置
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*absolute:參照物是父標籤*/ body{ height: 9999px; background-color:red; } .pos1{ position: absolute; left: 100px; top: 150px; } </style> </head> <body> <h2 class="pos1">標題yi</h2> </body> </html>
9.2相對定位
relative：相對定位，不會脫離文件流
參照物：該標籤自身原來的位置
注意：可以使用left，top，right和bottom屬性設定標籤的位置
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*relative：參照自身原來的位置*/ .pos1{ position: relative; left: -20px; } .pos2{ position: relative; left: 20px; } </style> </head> <body> <h2>標題</h2> <h2 class="pos1">標題yi</h2> <h2 class="pos2">標題er</h2> </body> </html>
9.3固定定位
fixed：固定定位，脫離文件流
參照物：窗體
使用場景:應用在廣告中
注意：有效的定位可以設定距離參照物上下左右的位置，如果在參照物的內部，這些屬性值是正數，一旦出界就是負數
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ height: 9999px; background-color:red; } .one{ position: fixed; left: 15px; top: 50px; } .two{ position: fixed; right: 30px; top: 50px; } </style> </head> <body> <p class="one"> hello </p> <p class="two"> 文字 </p> </body> </html>
9.4z-index的使用
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .x{ position: absolute; left: 0px; top: 0px; /*設定了圖片的絕對定位之後，則img會覆蓋h*/ z-index: 1; /* * 使用前提：該標籤設定了定位屬性 * z-index的作用：值決定標籤顯示的位置【標籤層疊的時候】 * 此屬性的值越大，則表示優先順序越高，則被顯示在最上層 * z-index預設的值為0，將z-index設定為-1.表示該標籤擁有更低的優先順序 */ } </style> </head> <body> <h1>標題</h1> <img class="x" src="img/pic20.jpg" /> </body> </html>
10.綜合練習-百度首頁
baidu.css
*{ /*去除預設的內外邊距*/ padding: 0; margin: 0; } /*設定上面*/ #head{ /*向右浮動*/ float: right; margin-top:10px; } /*設定上面的超連結*/ .headlink{ color: black; font-size: 12px; margin: 10px; } /*更多產品*/ .more{ background-color: blue; color: white; text-decoration: none; margin-right: 10px; font-size: 14px; text-align: center; /*line-height: ;*/ } /*中間*/ #middle{ /*清除浮動*/ clear: right; text-align: center; /*中間的div以body為參照物*/ position: absolute; top: 80px; /*設定寬度*/ width: 100%; } /*輸入框的樣式*/ #key{ width: 30%; height: 30px; } /*按鈕*/ #btn{ width: 70px; height: 30px; background-color: blue; color: white; } /*底部*/ #footer{ position: absolute; bottom: 10px; width: 100%; height: 150px; text-align: center; } /*底部超連結*/ #footlink{ margin: 20px; } #footlink a{ color: gray; font-size: 12px; }baiduhome.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入css檔案--> <link href="css/baidu.css" type="text/css" rel="stylesheet" /> </head> <body> <!--上面--> <div id="head"> <a class="headlink" href="#">新聞</a> <a class="headlink" href="#">好123</a> <a class="headlink" href="#">地圖</a> <a class="headlink" href="#">地圖</a> <a class="headlink" href="#">地圖</a> <a class="headlink" href="#">地圖</a> <a class="headlink" href="#">地圖</a> <a class="headlink" href="#">地圖</a> <a class="more" href="#">更多產品</a> </div> <!--中間--> <div id="middle"> <img src="https://www.baidu.com/img/bd_logo1.png" /> <div id="sub"> <form action="#" method="get"> <input type="text" name="kw" id="key" /> <button id="btn">百度一下</button> </form> </div> </div> <!--下面--> <div id="footer"> <div> <img src="img/二維碼.png" /> <p>手機百度</p> </div> <div id="footlink"> <a href="#">地圖</a> <a href="#">地圖</a> <a href="#">地圖</a> <a href="#">地圖</a> <br /> <a href="#">地圖</a> <a href="#">地圖</a> <a href="#">地圖</a> </div> </div> </body> </html>