一、css簡(jiǎn)介

　　1、層疊樣式表：疊加效果，不同css對(duì)同一html修飾，沖突部分，優(yōu)先級(jí)高作用，不沖突部分，共同作用

　　2、css作用

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

　　3、css引入方式

　　　　(1)內(nèi)嵌樣式

　　　　<div style="color:red;font-size:100">內(nèi)嵌方式</div>

　　　　(2)內(nèi)部樣式（寫(xiě)在head中）

　　　　<style type="text/css">

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

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

　　　　</style>

　　　　(3)web全局樣式

　　　　　　1.創(chuàng)建css文件

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

　　　　　　3.引入該css文件

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

　　　　(4)@import方式

　　　　　　基本不用，原因遲滯于html加載css，不支持js動(dòng)態(tài)修改，部分低ie版本不支持

　　　　小結(jié)：

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

　　　　　　ref:css和html的關(guān)系

　　　　　　引入寫(xiě)在head中

　　　　　　內(nèi)部樣式也寫(xiě)在head中

二、css選擇器

　　1、基本選擇器

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

　　　　　　<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>
　　優(yōu)先級(jí)總結(jié)：id選擇器>類(lèi)選擇器>標(biāo)簽選擇器

　　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標(biāo)簽偽元素選擇器

　　　　語(yǔ)法：鼠標(biāo)放到鏈接上有四種狀態(tài)

　　　　靜止?fàn)顟B(tài) a:link{css屬性}
　　　　懸浮狀態(tài) a:hover{css屬性}
　　　　點(diǎn)擊狀態(tài) a:active{css屬性}
　　　　釋放狀態(tài) 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、層疊選擇器

　　　　語(yǔ)法：適用于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:字體類(lèi)型

　　2、文本屬性

　　　　color:顏色

　　　　text-decoration:下劃線

　　　　　　屬性值：none/underline

　　　　text-align:對(duì)齊方式

　　　　　　屬性值：left/right/center

　　3、背景屬性
　　　　background-color:背景顏色
　　　　background-image:背景圖片
　　　　background-repeat:平鋪方式
　　　　屬性值：repeat-x/repeat-y/repeat
　　4、列表屬性
　　　　list-style-type
　　　　　　屬性值很多，用時(shí)查
　　　　可以在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">對(duì)不起您的輸入有誤！</span><br>
　　　　　　password<input type="password" value=""><br>
　　　　　　<input id="btn" type="button" value="button" οnclick="deal()">
　　　　</form>
　　7、浮動(dòng)屬性
　　　　float:
　　　　　　屬性值：
　　　　　　　　left:向左浮
　　　　　　　　right：向右浮動(dòng)
　　　　clear:
　　　　　　屬性值：
　　　　　　　　left:清除左浮動(dòng)
　　　　　　　　right：清除右浮動(dòng)
　　　　　　　　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、盒子模型

　　查資料

轉(zhuǎn)載于:https://www.cnblogs.com/pecool/p/8052022.html

總結(jié)

以上是生活随笔為你收集整理的css层叠样式初学的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。