2>.布局
2.CSS與 HTML的結合方式1> style屬性在標簽上加入style屬性. 屬性的值就是css代碼.如：<p style="color:red;" >HelloWord</p>2> style標簽在頁面的head標簽中, 書寫一個style標簽.在style標簽中書寫css代碼.如：<style type="text/css">p {color:blue;}3> link標簽引入在頁面head標簽中填寫link標簽<link type="text/css" rel="stylesheet" href="p.css" />type mime類型rel 類型href css文件路徑
3.CSS的 選擇器1>標簽選擇器語法: 標簽名 {屬性鍵:屬性值;}如：<style type="text/css">p{color：red;}</style><p>HelloWorld</P>2>ID選擇器id作為唯一標識,要唯一語法: #ID {屬性鍵:屬性值;}如：#one{color:red;}<p id="one">HelleWorld</p>3>class選擇器class屬性可以隨意重復.語法: .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>偽類選擇器指的是選擇的某個標簽的 某種狀態常見狀態有4種,a標簽最全.l link 沒有點擊過的狀態v visited 訪問過h hover 鼠標懸浮a active 激活狀態(鼠標點下去沒有彈起)如：<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-結合方式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中多行注釋相同/* 注釋內容 */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、典型標簽：塊級標簽: 占的是一行.行內標簽: 占行內的一部分. 不能嵌套 塊級標簽.塊級: <div> <p> <ol> 行內: <span> <font> <a>2、div嵌套：<style type="text/css">div{border-color: red;border-width: 1px;border-style: solid;}#one{width: 200px;height: 300px;/*內邊距:注意,內邊距會改變自身的寬高.*/padding-left: 100px;}#two{width: 100px;height: 100px;/*外邊距margin-left: 100px;}</style><div id="one"><div id="two"></div></div>3、內外邊距的4個復合屬性：<style type="text/css">div{/*border-color: red;border-width: 1px;border-style: solid;*/border: 1px solid red;width: 100px;height: 100px;}#one{/*1個屬性時: 4個方向.2個屬性時: 第一個屬性決定上下 第2個決定左右3個屬性時: 上 左右 下4個屬性時: 上 右 下 左(順時針)*/padding: 10px 30px 50px 80px;}</style>新聞熱點
疑難解答
