2>.布局
2.CSS與 HTML的結(jié)合方式1> style屬性在標(biāo)簽上加入style屬性. 屬性的值就是css代碼.如：<p style="color:red;" >HelloWord</p>2> style標(biāo)簽在頁面的head標(biāo)簽中, 書寫一個(gè)style標(biāo)簽.在style標(biāo)簽中書寫css代碼.如：<style type="text/css">p {color:blue;}3> link標(biāo)簽引入在頁面head標(biāo)簽中填寫link標(biāo)簽<link type="text/css" rel="stylesheet" href="p.css" />type mime類型rel 類型href css文件路徑
3.CSS的 選擇器1>標(biāo)簽選擇器語法: 標(biāo)簽名 {屬性鍵:屬性值;}如：<style type="text/css">p{color：red;}</style><p>HelloWorld</P>2>ID選擇器id作為唯一標(biāo)識(shí),要唯一語法: #ID {屬性鍵:屬性值;}如：#one{color:red;}<p id="one">HelleWorld</p>3>class選擇器class屬性可以隨意重復(fù).語法: .CLASS名稱 {屬性鍵:屬性值;}如: .one{color:red;}<p class="one">HelleWorld</p><h1 class="one">HelleWorld</h1>
4>選擇器分組語法: 選擇器1,選擇器2...... {屬性鍵:屬性值;}<style type="text/css">.one,#two {color:yellow;}</style><p class="one" >HelleWorld</p><p id="two" >HelleWorld</p><p>HelleWorld</p><p class="one" >HelleWorld</p><h1 class="one" >HelleWorld</h1>5>偽類選擇器指的是選擇的某個(gè)標(biāo)簽的 某種狀態(tài)常見狀態(tài)有4種,a標(biāo)簽最全.l link 沒有點(diǎn)擊過的狀態(tài)v visited 訪問過h hover 鼠標(biāo)懸浮a active 激活狀態(tài)(鼠標(biāo)點(diǎn)下去沒有彈起)如：<style type="text/css">a:link {color:red;}a:visited {color:green;}a:hover {color:blue;}a:active {color:yellow;}</style><a href="HelloWorld.html" >01-結(jié)合方式01.html</a>
4.CSS的基本語法選擇器 {屬性鍵:屬性值;屬性鍵:屬性值1 屬性值2 ....;}如：1、字體p {font-size: 100px;font-family: 黑體;font-style: italic;font-weight: 900;font-variant: small-caps;}同：font :italic small-caps 900 100px 黑體;2、背景body {background-color: pink;background-image: url("001.jpg");background-repeat: no-repeat;background-attachment: fixed;}同：background : green url("001.jpg") no-repeat fixed center; 3、注釋:與java中多行注釋相同/* 注釋內(nèi)容 */5.CSS的常用屬性 單位:(了解)顏色單位 Color Units #RRGGBB rgb ( R,G,B ) Color Name 長度單位 Length Units em ex px像素(常用) pt pc in cm mm 單位換算：1in = 2.54cm = 25.4 mm = 72pt = 6pc 屬性:color ==> 文字顏色font-family ==> 文字樣式font-size ==> 文字大小font-style => 文字樣式(斜體..)font-weight => 文字加粗font-variant => 異性字6.盒子模型1、典型標(biāo)簽：塊級(jí)標(biāo)簽: 占的是一行.行內(nèi)標(biāo)簽: 占行內(nèi)的一部分. 不能嵌套 塊級(jí)標(biāo)簽.塊級(jí): <div> <p> <ol> 行內(nèi): <span> <font> <a>2、div嵌套：<style type="text/css">div{border-color: red;border-width: 1px;border-style: solid;}#one{width: 200px;height: 300px;/*內(nèi)邊距:注意,內(nèi)邊距會(huì)改變自身的寬高.*/padding-left: 100px;}#two{width: 100px;height: 100px;/*外邊距margin-left: 100px;}</style><div id="one"><div id="two"></div></div>3、內(nèi)外邊距的4個(gè)復(fù)合屬性：<style type="text/css">div{/*border-color: red;border-width: 1px;border-style: solid;*/border: 1px solid red;width: 100px;height: 100px;}#one{/*1個(gè)屬性時(shí): 4個(gè)方向.2個(gè)屬性時(shí): 第一個(gè)屬性決定上下 第2個(gè)決定左右3個(gè)屬性時(shí): 上 左右 下4個(gè)屬性時(shí): 上 右 下 左(順時(shí)針)*/padding: 10px 30px 50px 80px;}</style>新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
