今日重點
1.定義css樣式的方式
2.css的層疊性
3.權重
4.css的常用單位
5.盒子模型
6.基本標簽
7.作業任務
學習心得
今天我們學習了用css來改變html，可以把昨天學會的html的樣式進行美化，晚自習時，在張老師的帶領和指導下，我做出了一個新用戶注冊頁面，小小的進步對我的鼓勵是非常大的，明天繼續加油！
學習內容
定義css樣式的方式（理解）
行內樣式
如果當前的樣式不需要復用，可以使用行內樣式
優先級
內頁樣式（嵌入樣式）
①標簽選擇器
②類選擇器，聲明樣式的時候需要用一個英文的，選擇樣式通過class屬性，不需要寫.
③id選擇器，聲明樣式的時候需要用一個#，對應的元素id要匹配
3.外部樣式（推薦）
css的層疊性（了解）
1.如果樣式沖突，遵循就近原則，哪個樣式距離就執行哪個樣式
?2.如果樣式不沖突，就不層疊
繼承性：子標簽會繼承父標簽的某些樣式：文本顏色，字號，背景顏色...
優先級：類>標簽>id
權重（了解）
繼承的樣式權重最低
?行內樣式權重最高
?權重相同的情況，采用就近原則
！important 無限大
css常用單位（基本了解）
px：像素：絕對單位，一個像素代表一個點
em:：相對單位，參考父級元素。父級元素的字體是10px，要設置元素的字體大小為2em，當前元素的字體就是32px
rem：相對單位，參考頁面。當我們改變了瀏覽器的字號設置，頁面的字號也會隨之發生改變。應用老人版
百分比：相對于父級元素的比例。
盒子模型（基本理解）
width.height：表示內容區的寬和高
margin:外邊距，元素距離上一個元素的位置
padding:內邊距，本元素內部空出的距離
border：邊框線
absolute:絕對定位
當前的文檔流可以理解為上天了參照物是已經定位的父級元素
relative:相對定位
參照物是已經定位的父級元素占有原位置，不會上天 父相子絕
static:文檔流 (默認）
fixed:浮動
visibility: hidden：元素隱藏 ；scroll ：滾動條 ；visible ：溢出
基本標簽
style 標簽(div)，類(.bg)，id(#spring)
link:引入外部css
link:默認樣式
hover:懸停樣式
active：激活樣式
visited:點擊過的元素
nth-child()：選中第幾個對應元素
font-size：字體大小
background:背景
list-style-type:列表類型
list-style-position:列表位置
border:邊框
radius:半徑；collapse：折疊
display：區塊
inline：行級；block:塊級
inline-block：內聯塊
div,p：選擇頁面上所有的div和p
div p*：選中div里面的p，無論嵌套多少層，都可以找到
div>p*：選中div里的直接子元素p
div+p：選中緊跟著div的p
作業任務
截圖
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/reg.css">
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用戶注冊</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!--定義表單 form-->
<form action="#" method="post">
<table>
<tr>
<td class="td_left"><label for="username">用戶名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="請輸入用戶名">
</td>
</tr>
<tr>
<td class="td_left"><label for="password">密碼</label></td>
<td class="td_right"><input type="password" name="password" id="password"
placeholder="請輸入密碼"></td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="請輸入郵箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="請輸入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手機號</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="請輸入手機號"></td>
</tr>
<tr>
<td class="td_left"><label>性別</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="請輸入出生日期">
</td>
</tr>
<tr>
<td class="td_left"><label for="checkcode">驗證碼</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode"
>
<img id="img_check" src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="btn_sub" value="注冊"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p >已有賬號?<a href="#" >立即登錄</a ></p>
</div>
</div>
</body>
</body>
</html>
浙公網安備 33010602011771號