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

HTML

前端 day02 CSS

發(fā)布時間：2024/1/8 HTML 17 豆豆

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

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">天氣不錯</div> <div>天氣不錯</div> <div>天氣不錯</div> </body> </html>

2、CSS選擇器

簡單選擇器

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

通用選擇器 < 標簽選擇器 < 類選擇器 < ID選擇器

復合選擇器

1.層級復合選擇器 ? 2.屬性復合選擇器 ? 3.偽類復合選擇器 ? 4.并集復合選擇器 ? 5.交集復合選擇器

層級選擇器和屬性選擇器

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>/*復合選擇器介紹: 就是由多個基本選擇器組成的分類1.層級復合選擇器2.屬性復合選擇器3.偽類復合選擇器4.并集復合選擇器5.交集復合選擇器優(yōu)先級: 復合選擇器的優(yōu)先級遵循基本選擇器的優(yōu)先級, 優(yōu)先級一樣,下面的會覆蓋上面的*//*1.層級復合選擇器格式：基本選擇器1 基本選擇器2 ...{樣式名:樣式值;...}作用：按照標簽的層級選中元素操作樣式特點：基本選擇器之間使用空格隔開*//*例如：設置div標簽里面的所有span標簽的字體顏色為紅色*/div span{color: red;}/*2.屬性復合選擇器格式1：基本選擇器[屬性名]{樣式名:樣式值;...} 操作含有屬性名的指定元素樣式格式2：基本選擇器[屬性名=屬性值]{樣式名:樣式值;...} 操作含有屬性名并且等于指定屬性值的指定元素樣式格式3：基本選擇器[屬性名1=屬性值1][屬性名2=屬性值2]...{樣式名:樣式值;...}操作含有多個屬性名并且等于指定屬性值的指定元素樣式格式4：[屬性名]{樣式名:樣式值;...} 操作含有屬性名的所有元素樣式*//*例如1：操作所有p標簽含有title屬性的字體顏色為綠色*/p[title]{color: green;}/*例如2：操作所有p標簽含有title="girl"屬性的字體顏色為藍色*/p[title='girl']{color: blue;}/*例如3：操作input標簽type="text"并且name="username"的標簽邊框線:粗細10px solid實線 red紅色*/input[type="text"][name="username"]{border:10px solid red;}/*例如4：操作所有標簽含有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">這是塊級元素</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>/*復合選擇器介紹：多個基本選擇（標簽，類，ID選擇器）器組成的選擇器1.層級選擇器2.屬性選擇器3.偽類選擇器4.并集選擇器5.交集選擇器優(yōu)先級：復合選擇器的優(yōu)先級根據(jù)基本選擇器的優(yōu)先級操作*//*偽類選擇器介紹：根據(jù)指定標簽元素的不同狀態(tài)行為設置不同的樣式狀態(tài)1：正常狀態(tài)，沒有訪問過，狀態(tài)名：link狀態(tài)2：已訪問過; 狀態(tài)名：visited狀態(tài)3：懸浮狀態(tài)，鼠標懸浮到元素上，鼠標移到元素上;狀態(tài)名:hover狀態(tài)4：激活狀態(tài)，正在使用鼠標點擊這個元素；狀態(tài)名：active格式：基本選擇器:狀態(tài)名{樣式名:樣式值}注意：規(guī)定順序必須先link\visited\hover\active，這個順序不可以改變，否則效果出不來*//*例如1：a標簽，沒有訪問過，設置字體顏色為綠色*/a:link{color: green;}/*例如2：a標簽，已訪問過，設置字體顏色為灰色*/a:visited{color: gray;}/*例如3：a標簽，鼠標懸浮時，設置字體顏色為藍色*/a:hover{color: blue;}/*例如4：a標簽，鼠標點擊的時候，設置顏色字體為紅色*/a:active{color: red;}/*并集復合選擇器格式：基本選擇器1,基本選擇器2,...{樣式名:樣式值;}特點: 分隔符","作用：標簽元素只要符合其中任何一個基本選擇器就可以設置樣式*//*例如1：設置id=“two” 或 class="one"的標簽元素字體顏色為紅色*/#two,.one{color: red;}/*交集復合選擇器格式：基本選擇器1基本選擇器2...{樣式名:樣式值;}特點: 無分隔符作用：標簽元素需要符合所有基本選擇器才會設置樣式*//*例如1：設置標簽為p并且class="one"的標簽的字體大小為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. 詩放在div的層中id=content，寬400px，全文字體大小14px;2. 標題放在h1中。每段文字放在p中3. 標題文字大小18px，顏色#06F，居中對齊4. 每段文字縮進2em5. 段中的行高是22px6. "胸懷中滿溢著幸福，只因你就在我眼前",加粗，傾斜，藍色7. 最后一段，顏色#390; 下劃線，鼠標移上去指針變化。8. 美字加粗，顏色color:#F36，大小18px;9. 文席慕容，三個字，12px，顏色#999，不加粗*//*1. 詩放在div的層中id=content，寬400px，全文字體大小14px;*/*{font-size: 14px;}#content{width:400px;}/*2. 標題放在h1中。每段文字放在p中*//*3. 標題文字大小18px，顏色#06F，居中對齊*/h1{font-size: 18px; /*字體大小*/color: #06F; /*字體顏色*/text-align: center; /*文本對齊方式*/}/*4. 每段文字縮進2em*//*5. 段中的行高是22px*/p{text-indent: 2em; /*段落文字縮進, em代表1個字符,所以這里是縮進2個字符*/line-height: 22px;}/*6. "胸懷中滿溢著幸福，只因你就在我眼前",加粗，傾斜，藍色*/.xiong{font-weight: bold; /*字體加粗*/font-style: italic; /*斜體*/color: blue;}/*7. 最后一段，顏色#390; 下劃線，鼠標移上去指針變化。*/p:last-child{ /*最后1段*/color:#390;text-decoration: underline; /*下劃線*/}p:last-child:hover{cursor: pointer; /*鼠標為手指效果*/}/*8. 美字加粗，顏色color:#F36，大小18px;*/.mei{font-weight: bold;color: #F36;font-size: 18px;}/*9. 文席慕容，三個字，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>麗的夢和美麗的詩一樣，都是可遇而不可求的，常常在最沒能料到的時刻里出現(xiàn)。</p><p>我喜歡那樣的夢，在夢里，一切都可以重新開始，一切都可以慢慢解釋，心里甚至還能感覺到，所有被浪費的時光竟然都能重回時的狂喜與感激。<span class="xiong">胸懷中滿溢著幸福，只因你就在我眼前</span>，對我微笑，一如當年。</p><p>我喜歡那樣的夢，明明知道你已為我跋涉千里，卻又覺得芳草鮮美，落落英繽紛，好像你我才初相遇。</p> </div> </body> </html>

（3）邊框樣式

盒子模型

1、內(nèi)邊距

2、外邊距

總結

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

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