當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】

發布時間：2024/9/30 HTML 46 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

w3cschool菜鳥教程.CHM（騰訊微云）：https://share.weiyun.com/c1FaX6ZD

HTML/CSS學習筆記01【概念介紹、基本標簽、表單標簽】【day01】

HTML/CSS學習筆記02【表單標簽】【day02】

HTML/CSS學習筆記03【CSS概述、CSS選擇器、CSS屬性、CSS案例-注冊頁面】【day02】

第4節 CSS概述

CSS_概述

CSS_與html結合方式

第5節 CSS_選擇器

CSS_語法格式

選擇器_擴展選擇器 (1)

選擇器_擴展選擇器 (2)

第6節 CSS屬性

CSS_屬性1

CSS_屬性2_盒子模型

第7節 CSS_案例-注冊頁面

CSS_案例-注冊頁面

CSS_案例-注冊頁面1

CSS_案例-注冊頁面2

第4節 CSS概述

CSS_概述

1. 概念：Cascading Style Sheets 層疊樣式表
?? ?* 層疊：多個樣式可以作用在同一個html的元素上，同時生效

2. 好處：
?? ?1. 功能強大
?? ?2. 將內容展示和樣式控制分離
?? ??? ?* 降低耦合度。解耦
?? ??? ?* 讓分工協作更容易
?? ??? ?* 提高開發效率

CSS_與html結合方式

3. CSS的使用：CSS與html結合方式
?? ?1. 內聯樣式
?? ??? ? * 在標簽內使用style屬性指定css代碼
?? ??? ? * 如：<div style="color:red;">hello css</div>
?? ?2. 內部樣式
?? ??? ?* 在head標簽內，定義style標簽，style標簽的標簽體內容就是css代碼
?? ??? ?* 如：
?? ??? ??? ?<style>
?? ??? ? ? ? ? ?div{
?? ??? ? ? ? ? ? ? ?color:blue;
?? ??? ? ? ? ? ?}
?? ??? ? ? ?</style>
?? ??? ??? ?<div>hello css</div>
?? ?3. 外部樣式
?? ??? ?1. 定義css資源文件。
?? ??? ?2. 在head標簽內，定義link標簽，引入外部的資源文件
?? ??? ?* 如：
? ? ?? ??? ?* a.css文件：
?? ??? ??? ??? ?div{
?? ??? ??? ??? ? ? ?color:green;
?? ??? ??? ??? ?}
?? ??? ??? ?<link rel="stylesheet" href="css/a.css">
?? ??? ??? ?<div>hello css</div>
?? ??? ??? ?<div>hello css</div>

?? ?* 注意：
?? ??? ?* 1、2、3種方式，css作用范圍越來越大
?? ??? ?* 1方式不常用，后期常用2,3
?? ??? ?* 第3種格式可以寫為：
?? ??? ??? ?<style>
?? ??? ? ? ? ? ?@import "css/a.css";
?? ??? ? ? ?</style>

第5節 CSS_選擇器

CSS_語法格式

4. css語法：
?? ?* 格式：
?? ??? ?選擇器 {
?? ??? ??? ?屬性名1:屬性值1;
?? ??? ??? ?屬性名2:屬性值2;
?? ??? ??? ?...
?? ??? ?}
?? ?* 選擇器：篩選具有相似特征的元素
?? ?* 注意：
?? ??? ?* 每一對屬性需要使用；隔開，最后一對屬性可以不加“;”。

選擇器_擴展選擇器 (1)

5. 選擇器：篩選具有相似特征的元素
?? ?* 分類：
?? ??? ?1. 基礎選擇器
?? ??? ??? ?1. id選擇器：選擇具體的id屬性值的元素。建議在一個html頁面中id值唯一。
?? ??? ? ? ? ? ?* 語法：#id屬性值{}
?? ??? ? ? ?2. 元素選擇器：選擇具有相同標簽名稱的元素。
?? ??? ? ? ? ? ?* 語法：標簽名稱{}
?? ??? ? ? ? ? ?* 注意：id選擇器優先級高于元素選擇器
?? ??? ? ? ?3. 類選擇器：選擇具有相同的class屬性值的元素。
?? ??? ? ? ? ? ?* 語法：.class屬性值{}
?? ??? ? ? ? ? ?* 注意：類選擇器選擇器優先級高于元素選擇器。

內聯樣式，優先級1000

id選擇器，優先級100

類和偽類，優先級10

元素選擇器，優先級1

選擇器_擴展選擇器 (2)

5. 選擇器：篩選具有相似特征的元素。
?? ?* 分類：
?? ??? ?1. 基礎選擇器
?? ??? ??? ?1. id選擇器：選擇具體的id屬性值的元素.建議在一個html頁面中id值唯一
?? ??? ? ? ? ? ?* 語法：#id屬性值{}
?? ??? ? ? ?2. 元素選擇器：選擇具有相同標簽名稱的元素
?? ??? ? ? ? ? ?* 語法：標簽名稱{}
?? ??? ? ? ? ? ?* 注意：id選擇器優先級高于元素選擇器
?? ??? ? ? ?3. 類選擇器：選擇具有相同的class屬性值的元素。
?? ??? ? ? ? ? ?* 語法：.class屬性值{}
?? ??? ? ? ? ? ?* 注意：類選擇器選擇器優先級高于元素選擇器
?? ??? ?2. 擴展選擇器：
?? ??? ??? ?1. 選擇所有元素：
?? ??? ??? ??? ?* 語法： *{}
?? ??? ??? ?2. 并集選擇器：
?? ??? ??? ??? ?* 選擇器1，選擇器2{}
?? ??? ??? ?3. 子選擇器：篩選選擇器1元素下的選擇器2元素
?? ??? ??? ??? ?* 語法： ?選擇器1 選擇器2{}
?? ??? ??? ?4. 父選擇器：篩選選擇器2的父元素選擇器1
?? ??? ??? ??? ?* 語法： ?選擇器1 > 選擇器2{}

?? ??? ??? ?5. 屬性選擇器：選擇元素名稱，屬性名=屬性值的元素
?? ??? ??? ??? ?* 語法： ?元素名稱[屬性名="屬性值"]{}

?? ??? ??? ?6. 偽類選擇器：選擇一些元素具有的狀態
?? ??? ??? ??? ?* 語法：元素:狀態{}
?? ??? ??? ??? ?* 如： <a>
?? ??? ??? ??? ??? ?* 狀態：
?? ??? ??? ??? ??? ??? ?* link：初始化的狀態
?? ??? ??? ??? ??? ??? ?* visited：被訪問過的狀態
?? ??? ??? ??? ??? ??? ?* active：正在訪問狀態
?? ??? ??? ??? ??? ??? ?* hover：鼠標懸浮狀態

內聯樣式，優先級1000

id選擇器，優先級100

類和偽類，優先級10

元素選擇器，優先級1

通配選擇器，優先級0

第6節 CSS屬性

CSS_屬性1

CSS_屬性2_盒子模型

6. 屬性
?? ?1. 字體、文本
?? ??? ?* font-size：字體大小
?? ??? ?* color：文本顏色
?? ??? ?* text-align：對其方式
?? ??? ?* line-height：行高?
?? ?2. 背景
?? ??? ?* background：
?? ?3. 邊框
?? ??? ?* border：設置邊框，符合屬性
?? ?4. 尺寸
?? ??? ?* width：寬度
?? ??? ?* height：高度
?? ?5. 盒子模型：控制布局
?? ??? ?* margin：外邊距
?? ??? ?* padding：內邊距
?? ??? ??? ?* 默認情況下，內邊距會影響整個盒子的大小。
?? ??? ??? ?* box-sizing: border-box; ?設置盒子的屬性，令width和height就是最終盒子的大小。

?? ??? ?* float：浮動
?? ??? ??? ?* left
?? ??? ??? ?* right

CSS：頁面美化和布局控制

第7節 CSS_案例-注冊頁面

CSS_案例-注冊頁面

CSS_案例-注冊頁面1

CSS_案例-注冊頁面2

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>注冊頁面</title><style>* {margin: 0px;padding: 0px;box-sizing: border-box;}body {background: url("img/register_bg.png") no-repeat center;padding-top: 25px;}.rg_layout {width: 900px;height: 500px;border: 8px solid #EEEEEE;background-color: white;/*讓div水平居中*/margin: auto;}.rg_left {/* border: 1px solid red; */float: left;margin: 15px;}.rg_left>p:first-child {color: #FFD026;font-size: 20px;}.rg_left>p:last-child {color: #A6A6A6;font-size: 20px;}.rg_center {float: left;/* border: 1px solid red; */}.rg_right {/* border: 1px solid red; */float: right;margin: 15px;}.rg_right>p:first-child {font-size: 15px;}.rg_right p a {color: pink;}.td_left {width: 100px;text-align: right;height: 45px;}.td_right {padding-left: 50px;}#username,#password,#email,#name,#tel,#birthday,#checkcode {width: 251px;height: 32px;border: 1px solid #A6A6A6;/*設置邊框圓角*/border-radius: 5px;padding-left: 10px;}#checkcode {width: 110px;}#img_check {height: 32px;vertical-align: middle;}#btn_sub {width: 150px;height: 40px;background-color: #FFD026;border: 1px solid #FFD026;}</style></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 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" placeholder="請輸入驗證碼"><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> </html>

加油~~~? ?開始學習JavaWeb咯~~~

總結

以上是生活随笔為你收集整理的HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： HTML/CSS学习笔记02【表单标签】
下一篇： HTML 中表单form 的相关知识