css層疊樣式初學

一、css簡介

　　1、層疊樣式表：疊加效果，不同css對同一html修飾，沖突部分，優先級高作用，不沖突部分，共同作用

　　2、css作用

　　　　(1)修飾html
　　　　(2)替代了標簽自身的顏色，字號等屬性，提高復用性
　　　　(3)html內容與樣式分離，便于后期維護

　　3、css引入方式

　　　　(1)內嵌樣式

　　　　<div style="color:red;font-size:100">內嵌方式</div>

　　　　(2)內部樣式（寫在head中）

　　　　<style type="text/css">

　　　　　　div{color:red;font-size:100}

　　　　　　input{color:red;font-size:100}

　　　　</style>

　　　　(3)web全局樣式

　　　　　　1.創建css文件

　　　　　　2.鍵入：div{color:red;font-size:200px}

　　　　　　3.引入該css文件

　　　　　　　　<link ref="stylesheet" href="cssDemo.css" type="text/css">

　　　　(4)@import方式

　　　　　　基本不用，原因遲滯于html加載css，不支持js動態修改，部分低ie版本不支持

　　　　小結：

　　　　　　style:告知瀏覽器使用css去解析

　　　　　　ref:css和html的關系

　　　　　　引入寫在head中

　　　　　　內部樣式也寫在head中

二、css選擇器

　　1、基本選擇器

　　　　(1)、標簽/元素選擇器

　　　　　　<style>
　　　　　　　　div{color:red;font-size:10px}
　　　　　　</style>

　　　　(2)、id選擇器

　　　　　　<style>
　　　　　　　　#div1{color:red;font-size:10px}
　　　　　　</style>
　　　　　　<div id="div1">id選擇器</div>

　　　　(3)、class選擇器

　　　　　　<style>
　　　　　　　　.style1{color:red;font-size:10px}
　　　　　　　　.style2{color:pink;font-size:10px}
　　　　　　</style>
　　
　　　　　　<div class="style1">id選擇器1</div>
　　　　　　<div class="style1">id選擇器2</div>
　　　　　　<div class="style2">id選擇器3</div>
　　優先級總結：id選擇器>類選擇器>標簽選擇器

　　2、屬性選擇器

　　　　<style>
　　　　　　input[type='text']{background-color:green}
　　　　　　input[type='password']{background-color:yellow}
　　　　</style>
　　　　<form>
　　　　　　name<input type="text" value=""/>
　　　　　　password<input type="password" value=""/>
　　　　</form>

?　　3、a標簽偽元素選擇器

　　　　語法：鼠標放到鏈接上有四種狀態

　　　　靜止狀態 a:link{css屬性}
　　　　懸浮狀態 a:hover{css屬性}
　　　　點擊狀態 a:active{css屬性}
　　　　釋放狀態 a:visited{css屬性}

　　　　<style type="text/css">
　　　　　　a:link{background-color:white}
　　　　　　a:hover{background-color:pink}
　　　　　　a:active{background-color:red}
　　　　　　a:visited{background-color:green}
　　　　</style>
　　　　<a href="#">hit me</a>

?　　4、層疊選擇器

　　　　語法：適用于div嵌套，給其中指定的元素修飾

　　　　<style>
　　　　　　#div1 .div1class span{color:red;font-size:100px}
　　　　　　.body2 .div2class span{color:pink;font-size:50px}
　　　　</style>

三、css屬性

　　1、文字屬性

　　　　font-size:字體大小

　　　　font-family:字體類型

　　2、文本屬性

　　　　color:顏色

　　　　text-decoration:下劃線

　　　　　　屬性值：none/underline

　　　　text-align:對齊方式

　　　　　　屬性值：left/right/center

　　3、背景屬性
　　　　background-color:背景顏色
　　　　background-image:背景圖片
　　　　background-repeat:平鋪方式
　　　　屬性值：repeat-x/repeat-y/repeat
　　4、列表屬性
　　　　list-style-type
　　　　　　屬性值很多，用時查
　　　　可以在li前面加圖片，效果很棒
　　　　格式：list-style-image:url("xxx.gif");
　　5、尺寸屬性
　　　　width:寬
　　　　height:高
　　6、顯示屬性
　　　　display
　　　　　　屬性值：none/inline
　　　　<style type="text/css">
　　　　　　span{display:none;color:red}
　　　　</style>
　　　　<script type="text/javascript">
　　　　　　function deal(){
　　　　　　　　document.getElementById("span").style.display="inline";
　　　　　　}
　　　　</script>
　　　　<form>
　　　　　　username<input type="text" value="">
　　　　　　<span id="span">對不起您的輸入有誤！</span><br>
　　　　　　password<input type="password" value=""><br>
　　　　　　<input id="btn" type="button" value="button" οnclick="deal()">
　　　　</form>
　　7、浮動屬性
　　　　float:
　　　　　　屬性值：
　　　　　　　　left:向左浮
　　　　　　　　right：向右浮動
　　　　clear:
　　　　　　屬性值：
　　　　　　　　left:清除左浮動
　　　　　　　　right：清除右浮動
　　　　　　　　both:左右均清除
　　　　<style type="text/css">
　　　　　　#div1{background-color:red;width:50px;height:60px;float:left}
　　　　　　#div2{background-color:green;width:50px;height:60px;float:left}
　　　　　　#div3{background-color:pink;width:50px;height:60px;float:left}
　　　　</style>
　　　　<div id="div1"></div>
　　　　<div id="div2"></div>

　　　　<div id="div3"></div>

　　8、盒子模型

　　查資料