css簡介
-
什么是css
層疊樣式表谤逼，css是對html進(jìn)行樣式修飾的語言 層疊:是每一層的覆蓋疊加揩懒，如果不同的css樣式對同一個(gè)html標(biāo)簽進(jìn)行修飾 樣式有沖突的部分應(yīng)用優(yōu)先級(jí)高的，不沖突的部分共同作用葫笼。 樣式表:是css屬性樣式的集合 -
css的作用
- 修飾html坐榆，使html樣式更加好看
- 提高樣式代碼的復(fù)用性
- html的內(nèi)容與樣式相分離，便于后期的維護(hù)
-
css的引入方式和書寫規(guī)范
(1)內(nèi)嵌樣式 內(nèi)嵌樣式是把css的代碼嵌入到html標(biāo)簽中 <div style="color:red;font-size:25px">內(nèi)嵌樣式</div> 語法: 1>使用style熟悉篡诽，將樣式嵌入到html標(biāo)簽中 2>屬性的寫法:屬性:屬性值 3>多個(gè)屬性之前使用分號(hào);隔開 不建議使用 (2)內(nèi)部樣式 在head標(biāo)簽中使用style標(biāo)簽進(jìn)行css的引入 <style type="text/css"> div{ color:green; font-size:25px } </style> 語法: 1>使用style標(biāo)簽進(jìn)行引入 <style type="text/css"> 屬性:type 告知瀏覽器使用css的解析器解析代碼 2>屬性的寫法:屬性:屬性值 3>多個(gè)屬性之前使用分號(hào);隔開 (3)外部樣式 將css樣式抽取成一個(gè)單獨(dú)的css文件崖飘，使用時(shí)引用。 <link rel="stylesheet" type="text/css" href="../../css/css.css"> 語法: 1>創(chuàng)建一個(gè)css文件杈女。將css屬性寫在css文件中 2>在head中使用link標(biāo)簽進(jìn)行引入 <link rel="stylesheet" type="text/css" href="../../css/css.css"> 3>屬性的寫法:屬性:屬性值 4>多個(gè)屬性之前使用分號(hào);隔開 (4)@import方式 <style type="text/css"> @import url("css地址"); </style> link與@import方式的區(qū)別: a. link所有瀏覽器都支持朱浴，@import部分低版本的IE不支持 b. import方式是等待html加載完畢之后再加載 c. import方式不支持js的動(dòng)態(tài)修改
css選擇器
-
基本選擇器
(1)元素選擇器 語法：html的標(biāo)簽名{css屬性} 示例: <style type="text/css"> span{color:red;font-size:100px;} </style> <span> 元素選擇器 </span> (2)id選擇器 id唯一性 語法：#id的值{css屬性} 示例: <style type="text/css"> #div1{ background-color:red; } #div2{ background-color:pink; } </style> <div id="div1">hello,css1</div> <div id="div2">hello,css2</div> (3)class選擇器 語法:.class的值{css屬性} 示例： <style type="text/css"> .div_class1{ color: aqua; font-size: 30px; } .div_class3{ background-color: blanchedalmond; font-size: 20px; } </style> <div class="div_class1">css1,class</div> <div class="div_class1">css2,class</div> <div class="div_class3">css3,class</div> 選擇器優(yōu)先級(jí):id > class > 元素 -
屬性選擇器
語法:基本選擇器[屬性='屬性值']{css屬性} 示例: <style type="text/css"> input[type='text']{ background-color: yellow; } input[type='password']{ background-color: pink; } </style> <form> username:<input type="text"/><br/> password:<input type="password"/><br/> </form> -
偽元素選擇器
a標(biāo)簽的偽元素選擇器 語法: 靜止?fàn)顟B(tài) a:link{css屬性} 懸浮狀態(tài) a:hover{css屬性} 觸發(fā)狀態(tài) a:active{css屬性} 完成狀態(tài) a:visited{css屬性} 示例: <style type="text/css"> a:link{color: black} a:hover{color: blue} a:active{color: green} a:visited{color: yellow} </style> <a href="#">偽元素選擇器</a> -
層級(jí)選擇器
語法:父級(jí)選擇器 子級(jí)選擇器 ..... 示例: <style type="text/css"> #d1 .dd2 span{ color: red; } </style> <div id="d1"> <div class="dd1"> <span>span1-1</span> </div> <div class="dd2"> <span>span1-2</span> </div> </div> <div id="d2"> <div class="dd1"> <span>span1-1</span> </div> <div class="dd2"> <span>span1-2</span> </div> </div>
css屬性
-
文字屬性
font-size:大小 font-family:字體類型 -
文本屬性
color:顏色 text-decoration:下劃線 屬性值:none underline text-align:對齊方式 屬性值:left center right -
背景屬性
background-color:背景顏色 background-image:背景圖片 屬性值:url("圖片地址") background-repeat:平鋪方式 屬性值:默認(rèn)橫縱向平鋪 repeat:橫縱向平鋪 no-repeat:不平鋪 repeat-x:橫向平鋪 repeat-y:縱向平鋪 -
列表屬性
list-style-type:列表項(xiàng)前的小標(biāo)志 list-style-image:列表前的小圖片 屬性值:url("圖片地址") <ul> <li>程序員</li> <li>程序員</li> <li>程序員</li> <li>程序員</li> </ul> <style type="text/css"> ul{list-style-image: url("images/forward.gif");} </style> -
尺寸屬性
width:寬度 height:高度 <div id="d1">div1</div> <style type="text/css"> #d1{background-color: red;width: 200px;height: 200px;} </style> -
顯示屬性
display表示顯示屬性 block 塊級(jí)顯示 none 隱藏 inline 行級(jí)顯示 -
浮動(dòng)屬性
float: 屬性值: left right clear:清除浮動(dòng) left right both 缺點(diǎn)：(1)影響相鄰元素不能正常顯示 (2)影響父元素不能正常顯示
css盒子模型
盒子模型
border:10px solid green (簡寫)
border-width:邊框?qū)挾? border-style:邊框的線型
border-color:邊框的顏色
border-top:上邊框
border-bottom:下邊框
border-left:左邊框
border-right:右邊框
padding:
代表邊框內(nèi)壁與內(nèi)部元素之間的距離
padding:10px; 距離上下左右10px
padding:1px 2px 3px 4px; 距離上1px 右2px 下3px 左4px
padding:1px 2px; 距離上下1px 左右2px
padding:1px 2px 3px; 上1px 下3px 左右2px
margin:
代表邊框外壁與其他元素之間的距離
margin:10px; 距離上下左右10px
margin:1px 2px 3px 4px; 距離上1px 右2px 下3px 左4px
margin:1px 2px; 距離上下1px 左右2px
margin:1px 2px 3px; 上1px 下3px 左右2px