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

CSS

03 CSS听课笔记

發布時間：2025/3/15 CSS 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 03 CSS听课笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS：頁面美化和布局控制

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

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

3. CSS的使用：CSS與html結合方式，共3種
(1)內聯樣式
　　* 在標簽內使用style屬性指定css代碼
　　* 如：<div style="color:red;">hello css</div>
(2) 內部樣式
　　* 在head標簽內，定義style標簽，style標簽的標簽體內容就是css代碼
(3)外部樣式
　　第一步：定義css資源文件。
　　第二步：在head標簽內，定義link標簽，引入外部的資源文件

注意：
* 1,2,3種方式 css作用范圍越來越大
* 1方式不常用，后期常用2,3(掌握)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/day1.css"> </head> <body><div style="color: red"> hello world</div><div > hello world1</div><div > hello world2</div></body> </html>

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

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

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>#div1{color: red;}div{color: antiquewhite;}.class1{color: aqua;}</style> </head> <body><div id="div1">hello</div><div >world</div><div class="class1">world</div> </body> </html>

　　(2)擴展選擇器：
　　<1>選擇所有元素：
　　語法： *{}
　　<2>并集選擇器(相同樣式比較實用)：
　　選擇器1,選擇器2{}
　　<3>子選擇器：篩選選擇器1元素下的選擇器2元素
　　語法：選擇器1 選擇器2{}
　　<4>父選擇器：篩選選擇器2的父元素選擇器1
　　語法：選擇器1 > 選擇器2{}

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

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

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

7.案例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>注冊頁面</title><style>body{/*設置背景圖片*/background: url("img/register_bg.png");}.div_left{float: left;margin: 15px;}.div_center{float: left;}.div_right{float: right;margin: 15px;}.rg_layout{width: 900px;height: 500px;border: 5px solid #eeeeee;background-color: white;/*讓div水平居中*/margin: auto;margin-top:15px;}.p_rg1{color: #ffd026;font-size: 20px;}.p_rg2{color: #a6a6a6;font-size: 20px;}.p_rg3{font-size: 15px;}.a_rg{color: pink;}.td_left{width: 100px;text-align: right;height: 45px;}.td_right{padding-left: 45px;}#username,#password,#checkcode,#email,#name,#tel,#birthday{width: 250px;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: 120px;height: 40px;background-color: #ffd026;border: 1px solid #ffd026;}</style> </head> <body><div class="rg_layout"><div class="div_left"><p class="p_rg1">新用戶注冊</p><p class="p_rg2">USER REGISTER</p></div><div class="div_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="div_right"><p class="p_rg3">已有賬號?<a href="#" class="a_rg">立即登錄</a></p></div></div> </body> </html>

效果圖：

轉載于:https://www.cnblogs.com/luckyplj/p/11203362.html

總結

以上是生活随笔為你收集整理的03 CSS听课笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

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

笔记
css

上一篇： Windows 下的批处理脚本基础——批
下一篇： CSS3弹性盒子Flex