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

HTML

前端 day02 CSS

發(fā)布時(shí)間：2024/1/8 HTML 18 豆豆

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

CSS

1、代碼的三種引入方式

（1）內(nèi)聯(lián)樣式

（2）內(nèi)部樣式

（3）外部樣式

/*外部的css文件*/ div{color: green; } <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>寫css代碼的3種位置</title><style type="text/css">div{color: blue;}</style><link rel="stylesheet" href="css/out.css"></head> <body>  <div style="color: red">天氣不錯(cuò)</div> <div>天氣不錯(cuò)</div> <div>天氣不錯(cuò)</div> </body> </html>

2、CSS選擇器

簡(jiǎn)單選擇器

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>4種基本選擇器</title><style>/*基本選擇器選擇器介紹: 就是選著出要操作樣式的所有標(biāo)簽進(jìn)行控制樣式分類1.通用選擇器2.標(biāo)簽選擇器3.類選擇器4.ID選擇器優(yōu)先級(jí)固定: 通用選擇器 < 標(biāo)簽選擇器 < 類選擇器 < ID選擇器*//*1.通用選擇器格式: *{樣式名1:樣式值1; ...}* 含義,操作所有標(biāo)簽, 只有這一個(gè)通配符*//*例如：操作所有標(biāo)簽字體顏色為紅色*/*{color: red;}/*2.標(biāo)簽選擇器格式:標(biāo)簽名{樣式名1:樣式值1; ...}作用:根據(jù)指定的標(biāo)簽名操作樣式*//*例如：操作h2標(biāo)簽字體顏色為藍(lán)色*/h2{color: blue;}/*3.類選擇器格式:.類名{樣式名1:樣式值1; ...}以"."開(kāi)頭,類名是自定義,定義規(guī)范符合java的變量名,不能以數(shù)字開(kāi)頭步驟:1.定義類選擇器2.在標(biāo)簽里面使用class="類名1 類名2 ..."作用:操作多個(gè)標(biāo)簽使用同樣類名的選擇器控制樣式*//*例如：所有使用class="one"的標(biāo)簽的字體顏色為綠色*/.one{color: green;}/*4.ID選擇器格式:#ID{樣式名1:樣式值1; ...}以"#"開(kāi)頭,ID必須是標(biāo)簽里面id屬性的值, 每個(gè)標(biāo)簽的id值必須在當(dāng)前頁(yè)面是唯一步驟:1.定義ID選擇器2.在標(biāo)簽里面使用id="值"作用:操作指定的唯一一個(gè)標(biāo)簽的樣式*//*例如：設(shè)置標(biāo)簽id="two"的字體為黃色*/#two{color: yellow;}</style> </head> <body> <h2>通用選擇器</h2> <p>我是一個(gè)段落</p> <hr/><h2>標(biāo)簽選擇器</h2><div>我是一個(gè)塊級(jí)元素</div> <hr/><h2 class="one">類選擇器</h2> <hr/><h2>ID選擇器</h2> <span class="one" id="two">我是內(nèi)聯(lián)元素</span> <span class="one">我是內(nèi)聯(lián)元素</span> <hr/></body> </html>

選擇器之間優(yōu)先級(jí)

通用選擇器 < 標(biāo)簽選擇器 < 類選擇器 < ID選擇器

復(fù)合選擇器

1.層級(jí)復(fù)合選擇器 ? 2.屬性復(fù)合選擇器 ? 3.偽類復(fù)合選擇器 ? 4.并集復(fù)合選擇器 ? 5.交集復(fù)合選擇器

層級(jí)選擇器和屬性選擇器

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/*復(fù)合選擇器介紹: 就是由多個(gè)基本選擇器組成的分類1.層級(jí)復(fù)合選擇器2.屬性復(fù)合選擇器3.偽類復(fù)合選擇器4.并集復(fù)合選擇器5.交集復(fù)合選擇器優(yōu)先級(jí): 復(fù)合選擇器的優(yōu)先級(jí)遵循基本選擇器的優(yōu)先級(jí), 優(yōu)先級(jí)一樣,下面的會(huì)覆蓋上面的*//*1.層級(jí)復(fù)合選擇器格式：基本選擇器1 基本選擇器2 ...{樣式名:樣式值;...}作用：按照標(biāo)簽的層級(jí)選中元素操作樣式特點(diǎn)：基本選擇器之間使用空格隔開(kāi)*//*例如：設(shè)置div標(biāo)簽里面的所有span標(biāo)簽的字體顏色為紅色*/div span{color: red;}/*2.屬性復(fù)合選擇器格式1：基本選擇器[屬性名]{樣式名:樣式值;...} 操作含有屬性名的指定元素樣式格式2：基本選擇器[屬性名=屬性值]{樣式名:樣式值;...} 操作含有屬性名并且等于指定屬性值的指定元素樣式格式3：基本選擇器[屬性名1=屬性值1][屬性名2=屬性值2]...{樣式名:樣式值;...}操作含有多個(gè)屬性名并且等于指定屬性值的指定元素樣式格式4：[屬性名]{樣式名:樣式值;...} 操作含有屬性名的所有元素樣式*//*例如1：操作所有p標(biāo)簽含有title屬性的字體顏色為綠色*/p[title]{color: green;}/*例如2：操作所有p標(biāo)簽含有title="girl"屬性的字體顏色為藍(lán)色*/p[title='girl']{color: blue;}/*例如3：操作input標(biāo)簽type="text"并且name="username"的標(biāo)簽邊框線:粗細(xì)10px solid實(shí)線 red紅色*/input[type="text"][name="username"]{border:10px solid red;}/*例如4：操作所有標(biāo)簽含有title="boy"屬性的字體顏色為黃色*/[title="boy"]{color: yellow;}</style> </head> <body> <div><span>你好，美女！</span> </div><span>你好，帥哥！</span> <p title="girl">這是段落1</p> <p title="man">這是段落2</p> <div title="boy">這是塊級(jí)元素</div> <input type="text" name="username"> <br/> <input type="text" name="age"> </body> </html>

偽類、并集、交集選擇器

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>偽類、并集、交集選擇器</title><style>/*復(fù)合選擇器介紹：多個(gè)基本選擇（標(biāo)簽，類，ID選擇器）器組成的選擇器1.層級(jí)選擇器2.屬性選擇器3.偽類選擇器4.并集選擇器5.交集選擇器優(yōu)先級(jí)：復(fù)合選擇器的優(yōu)先級(jí)根據(jù)基本選擇器的優(yōu)先級(jí)操作*//*偽類選擇器介紹：根據(jù)指定標(biāo)簽元素的不同狀態(tài)行為設(shè)置不同的樣式狀態(tài)1：正常狀態(tài)，沒(méi)有訪問(wèn)過(guò)，狀態(tài)名：link狀態(tài)2：已訪問(wèn)過(guò); 狀態(tài)名：visited狀態(tài)3：懸浮狀態(tài)，鼠標(biāo)懸浮到元素上，鼠標(biāo)移到元素上;狀態(tài)名:hover狀態(tài)4：激活狀態(tài)，正在使用鼠標(biāo)點(diǎn)擊這個(gè)元素；狀態(tài)名：active格式：基本選擇器:狀態(tài)名{樣式名:樣式值}注意：規(guī)定順序必須先link\visited\hover\active，這個(gè)順序不可以改變，否則效果出不來(lái)*//*例如1：a標(biāo)簽，沒(méi)有訪問(wèn)過(guò)，設(shè)置字體顏色為綠色*/a:link{color: green;}/*例如2：a標(biāo)簽，已訪問(wèn)過(guò)，設(shè)置字體顏色為灰色*/a:visited{color: gray;}/*例如3：a標(biāo)簽，鼠標(biāo)懸浮時(shí)，設(shè)置字體顏色為藍(lán)色*/a:hover{color: blue;}/*例如4：a標(biāo)簽，鼠標(biāo)點(diǎn)擊的時(shí)候，設(shè)置顏色字體為紅色*/a:active{color: red;}/*并集復(fù)合選擇器格式：基本選擇器1,基本選擇器2,...{樣式名:樣式值;}特點(diǎn): 分隔符","作用：標(biāo)簽元素只要符合其中任何一個(gè)基本選擇器就可以設(shè)置樣式*//*例如1：設(shè)置id=“two” 或 class="one"的標(biāo)簽元素字體顏色為紅色*/#two,.one{color: red;}/*交集復(fù)合選擇器格式：基本選擇器1基本選擇器2...{樣式名:樣式值;}特點(diǎn): 無(wú)分隔符作用：標(biāo)簽元素需要符合所有基本選擇器才會(huì)設(shè)置樣式*//*例如1：設(shè)置標(biāo)簽為p并且class="one"的標(biāo)簽的字體大小為50px*/p.one{font-size: 50px;}</style> </head> <body> <a href="#1">我是鏈接</a><br/> <a href="#2">我是鏈接</a><br/> <a href="#3">我是鏈接</a><br/> <a href="#4">我是鏈接</a><br/> <hr/> <input type="text" name="username" id="username"><p id="two">第1段</p> <p class="one">第2段</p> <p>第3段</p> </body> </html>

3、常用樣式

（1）背景樣式

（2）文本樣式和字體樣式

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>初相遇</title><style>/*1. 詩(shī)放在div的層中id=content，寬400px，全文字體大小14px;2. 標(biāo)題放在h1中。每段文字放在p中3. 標(biāo)題文字大小18px，顏色#06F，居中對(duì)齊4. 每段文字縮進(jìn)2em5. 段中的行高是22px6. "胸懷中滿溢著幸福，只因你就在我眼前",加粗，傾斜，藍(lán)色7. 最后一段，顏色#390; 下劃線，鼠標(biāo)移上去指針變化。8. 美字加粗，顏色color:#F36，大小18px;9. 文席慕容，三個(gè)字，12px，顏色#999，不加粗*//*1. 詩(shī)放在div的層中id=content，寬400px，全文字體大小14px;*/*{font-size: 14px;}#content{width:400px;}/*2. 標(biāo)題放在h1中。每段文字放在p中*//*3. 標(biāo)題文字大小18px，顏色#06F，居中對(duì)齊*/h1{font-size: 18px; /*字體大小*/color: #06F; /*字體顏色*/text-align: center; /*文本對(duì)齊方式*/}/*4. 每段文字縮進(jìn)2em*//*5. 段中的行高是22px*/p{text-indent: 2em; /*段落文字縮進(jìn), em代表1個(gè)字符,所以這里是縮進(jìn)2個(gè)字符*/line-height: 22px;}/*6. "胸懷中滿溢著幸福，只因你就在我眼前",加粗，傾斜，藍(lán)色*/.xiong{font-weight: bold; /*字體加粗*/font-style: italic; /*斜體*/color: blue;}/*7. 最后一段，顏色#390; 下劃線，鼠標(biāo)移上去指針變化。*/p:last-child{ /*最后1段*/color:#390;text-decoration: underline; /*下劃線*/}p:last-child:hover{cursor: pointer; /*鼠標(biāo)為手指效果*/}/*8. 美字加粗，顏色color:#F36，大小18px;*/.mei{font-weight: bold;color: #F36;font-size: 18px;}/*9. 文席慕容，三個(gè)字，12px，顏色#999，不加粗*/.wen{font-size: 12px;color:#999;font-weight: normal; /*不加粗*/}</style> </head> <body> <div id="content"><h1>初相遇 <span class="wen">文/席慕容</span></h1><p><span class="mei">美</span>麗的夢(mèng)和美麗的詩(shī)一樣，都是可遇而不可求的，常常在最沒(méi)能料到的時(shí)刻里出現(xiàn)。</p><p>我喜歡那樣的夢(mèng)，在夢(mèng)里，一切都可以重新開(kāi)始，一切都可以慢慢解釋，心里甚至還能感覺(jué)到，所有被浪費(fèi)的時(shí)光竟然都能重回時(shí)的狂喜與感激。<span class="xiong">胸懷中滿溢著幸福，只因你就在我眼前</span>，對(duì)我微笑，一如當(dāng)年。</p><p>我喜歡那樣的夢(mèng)，明明知道你已為我跋涉千里，卻又覺(jué)得芳草鮮美，落落英繽紛，好像你我才初相遇。</p> </div> </body> </html>

（3）邊框樣式

盒子模型

1、內(nèi)邊距

2、外邊距

總結(jié)

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

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