前端 day02 CSS
生活随笔
收集整理的這篇文章主要介紹了
前端 day02 CSS
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
目錄
- CSS
- 1、代碼的三種引入方式
- 2、CSS選擇器
- 3、常用樣式
- 盒子模型
- 1、內(nèi)邊距
- 2、外邊距
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><!--css代碼引入3種方式:1.內(nèi)聯(lián)樣式方式(最不推薦,重用性不好)2.內(nèi)部樣式方式(老師上課使用,為了避免切換頁面)3.外部樣式方式(企業(yè)推薦方式,重用性最好)優(yōu)先級: 就近原則--><!--2.內(nèi)部樣式位置特點: 寫在style標簽內(nèi)部格式:<style>css代碼</style>作用: 操作當前頁面所有符合要求的標簽元素備注:屬性type="text/css",含義是當前內(nèi)容為文本的css代碼,這個屬性可有可無--><style type="text/css">div{color: blue;}</style><!--3.外部樣式位置特點: css代碼寫在外部的css文件中,文件擴展名.css作用: 重用性好,所有頁面只要引用外部的css文件都可以應用對應的樣式使用步驟:1.創(chuàng)建css目錄,在css目錄下創(chuàng)建out.css文件,編寫樣式2.在當前頁面引用外部的out.css文件語法:<link href="引用的外部css文件路徑" type="text/css" rel="stylesheet">rel="stylesheet",含義引用的資源是樣式表--><link rel="stylesheet" href="css/out.css"></head> <body> <!-- 1.行內(nèi)樣式位置(內(nèi)嵌位置)特點:寫在html標簽內(nèi)部,格式:style="", 只能操作當前一個標簽 --> <div style="color: red">天氣不錯</div> <div>天氣不錯</div> <div>天氣不錯</div> </body> </html>2、CSS選擇器
簡單選擇器
選擇器之間優(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>偽類、并集、交集選擇器
3、常用樣式
(1)背景樣式
(2)文本樣式和字體樣式
(3)邊框樣式
<style>#box {width: 200px;height: 200px;/*邊框樣式操作*//*例如1:分別設置邊框線顏色為紅色、粗細為10px、線的樣式為實線solid*/border-color: red;border-width: 10px;border-style: solid;/*例如2:設置線的樣式為虛線dashed */border-style: dashed;/*例如3:設置線的樣式為雙線double */border-style: double;/*例如4:設置邊框圓角的半徑為50px */border-radius: 50px;/*例如5:簡寫方式設置邊框樣式:粗細5px,線的樣式為實線,線的顏色為綠色 */border: 5px solid green;}</style>盒子模型
1、內(nèi)邊距
<style>#box {width: 200px;height: 200px;border: 1px solid black;/*盒子模型介紹:css將每個標簽都看成一個盒子,盒子與盒子之間、盒子與里面內(nèi)容之間都是有距離的,標簽之間的嵌套就是盒子之間的嵌套。盒子模型的作用:通過設置盒子相關的距離,從而實現(xiàn)布局。分為內(nèi)邊距和外邊距兩種方式布局。*//*內(nèi)邊距操作布局:設置標簽邊框線到內(nèi)容的距離*//*例如1:上內(nèi)邊距50px */padding-top: 50px;/*例如2:右內(nèi)邊距50px */padding-right: 50px;/*例如3:下內(nèi)邊距50px */padding-bottom: 50px;/*例如4:左內(nèi)邊距50px */padding-left: 50px;/*例如5:簡寫方式,同時設置上內(nèi)邊距50, 左右100px, 下150px*/padding: 50px 100px 150px;/*例如6:簡寫方式,同時設置上下內(nèi)邊距100, 左右150px */padding: 100px 150px;/*例如7:簡寫方式,同時設置上下左右內(nèi)邊距150px */padding: 150px;/*例如8:簡寫方式,設置上內(nèi)邊距50, 右100px, 下150px, 左200px*/padding: 50px 100px 150px 200px;}</style>2、外邊距
<style>#box {width: 200px;height: 200px;border: 1px solid black;/*盒子模型介紹:css將每個標簽都看成一個盒子,盒子與盒子之間、盒子與里面內(nèi)容之間都是有距離的,標簽之間的嵌套就是盒子之間的嵌套。盒子模型的作用:通過設置盒子相關的距離,從而實現(xiàn)布局。分為內(nèi)邊距和外邊距兩種方式布局。*//*外邊距布局操作:當前標簽邊框線到其他標簽邊框線的距離*//*例如1:上外邊距50px */margin-top: 50px;/*例如2:右外邊距50px */margin-right: 50px;/*例如3:下外邊距50px */margin-bottom: 50px;/*例如4:左外邊距50px */margin-left: 50px;/*例如5:簡寫方式,同時設置上外邊距50, 左右100px, 下150px*/margin: 50px 100px 150px;/*例如6:簡寫方式,同時設置上下外邊距100, 左右150px */margin: 100px 150px;/*例如7:簡寫方式,同時設置上下左右外邊距150px */margin: 150px;/*例如8:簡寫方式,設置上內(nèi)邊距50, 右100px, 下150px, 左200px*/margin: 50px 100px 150px 200px;/*例如9:設置塊級標簽div在父元素中水平居中對齊塊級標簽特點:后面有一個換行*/margin: auto;}</style>總結
以上是生活随笔為你收集整理的前端 day02 CSS的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 整理各种模板(准备随时弃坑)
- 下一篇: 4、制作通孔焊盘