當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

03 CSS听课笔记

發(fā)布時(shí)間：2025/3/15 CSS 40 豆豆

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

CSS：頁(yè)面美化和布局控制

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

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

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

注意：
* 1,2,3種方式 css作用范圍越來(lái)越大
* 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語(yǔ)法：
格式：
選擇器 {
屬性名1:屬性值1;
屬性名2:屬性值2;
...
}
選擇器:篩選具有相似特征的元素
* 注意：?每一對(duì)屬性需要使用；隔開(kāi)，最后一對(duì)屬性可以不加；

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

<!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)擴(kuò)展選擇器：
　　<1>選擇所有元素：
　　語(yǔ)法： *{}
　　<2>并集選擇器(相同樣式比較實(shí)用)：
　　選擇器1,選擇器2{}
　　<3>子選擇器：篩選選擇器1元素下的選擇器2元素
　　語(yǔ)法：選擇器1 選擇器2{}
　　<4>父選擇器：篩選選擇器2的父元素選擇器1
　　語(yǔ)法：選擇器1 > 選擇器2{}

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

　　<6> 偽類選擇器：選擇一些元素具有的狀態(tài)
　　語(yǔ)法：元素:狀態(tài){}
　　* 如： <a>
　　* 狀態(tài)：
　　* link：初始化的狀態(tài)
　　* visited：被訪問(wèn)過(guò)的狀態(tài)
　　* active：正在訪問(wèn)狀態(tài)
　　* hover：鼠標(biāo)懸浮狀態(tài)

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

　　* float：浮動(dòng)
　　　　* left
　　　　* right

7.案例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>注冊(cè)頁(yè)面</title><style>body{/*設(shè)置背景圖片*/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">新用戶注冊(cè)</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="請(qǐng)輸入用戶名"></td></tr><tr><td class="td_left"><label for="password">密碼</label></td><td class="td_right"><input type="password" name="password" id="password" placeholder="請(qǐng)輸入密碼"></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="請(qǐng)輸入郵箱"></td></tr><tr><td class="td_left"><label for="name">姓名</label></td><td class="td_right"><input type="text" name="name" id="name" placeholder="請(qǐng)輸入姓名"></td></tr><tr><td class="td_left"><label for="tel">手機(jī)號(hào)</label></td><td class="td_right"><input type="text" name="tel" id="tel" placeholder="請(qǐng)輸入手機(jī)號(hào)"></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="請(qǐng)輸入出生日期"></td></tr><tr><td class="td_left"><label for="checkcode" >驗(yàn)證碼</label></td><td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="請(qǐng)輸入驗(yàn)證碼"><img id="img_check" src="img/verify_code.jpg"></td></tr><tr><td colspan="2" align="center"><input type="submit" id="btn_sub" value="注冊(cè)"></td></tr></table></form></div></div><div class="div_right"><p class="p_rg3">已有賬號(hào)?<a href="#" class="a_rg">立即登錄</a></p></div></div> </body> </html>

效果圖：

轉(zhuǎn)載于:https://www.cnblogs.com/luckyplj/p/11203362.html

總結(jié)

以上是生活随笔為你收集整理的03 CSS听课笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

笔记
css

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