###css的簡(jiǎn)介

####什么是css

概念：層疊樣式表，css是對(duì)html進(jìn)行樣式修飾語(yǔ)言

層疊：就是層層覆蓋疊加，如果不同的css樣式對(duì)同一html標(biāo)簽進(jìn)行修飾，樣式有沖突的部分應(yīng)用優(yōu)先級(jí)高的，不沖突的部分共同作用

樣式表：就是css屬性樣式的集合

####css的作用

修飾html的 使其html樣式更加好看

提高樣式代碼的復(fù)用性

html的內(nèi)容與樣式相分離 便于后期維護(hù)。類似于Android中的Style。

####css的引入方式和書寫規(guī)范

(1)內(nèi)嵌樣式內(nèi)嵌樣式是把css的代碼嵌入到html標(biāo)簽中<div style="color:red;font-size: 100px;">你好啊 小朋友</div>語(yǔ)法：(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:red;font-size: 100px;}</style>語(yǔ)法：(1)使用style標(biāo)簽進(jìn)行css的引入<style type="text/css">屬性：type：告知瀏覽器使用css解析器去解析(2)屬性的寫法：屬性：屬性值(3)多個(gè)屬性之間使用分號(hào);隔開(3)外部樣式（用得最多）將css樣式抽取成一個(gè)單獨(dú)css文件 誰(shuí)去使用誰(shuí)就引用<link rel="stylesheet" type="text/css" href="demo1.css"/>語(yǔ)法：(1)創(chuàng)建css文件 將css屬性寫在css文件中(2)在head中使用link標(biāo)簽進(jìn)行引入<link rel="stylesheet" type="text/css" href="css文件地址"/>rel:代表要引入的文件與html的關(guān)系type：告知瀏覽器使用css解析器去解析href：css文件地址(3)屬性的寫法：屬性：屬性值(4)多個(gè)屬性之間使用分號(hào);隔開 (4)@import方式<style type="text/css">@import url("css地址");</style>link與@import方式的區(qū)別：(1)link所有瀏覽器都支持 import部分低版本IE不支持(2)import方式是等待html加載完畢之后再加載(3)import方式不支持js的動(dòng)態(tài)修改 復(fù)制代碼

###css選擇器

1、基本選擇器(1)元素選擇器語(yǔ)法：html標(biāo)簽名{css屬性}示例：<span>hello css!!!</span><style type="text/css">span{color:red;font-size:100px; }</style>(2)id選擇器 id唯一性語(yǔ)法：#id的值{css屬性}示例：<div id="div1">hello css1!!!</div><div id="div2">hello css2!!!</div><style type="text/css">#div1{background-color: red;}#div2{background-color: pink;}</style>(3)class選擇器語(yǔ)法：.class的值{css屬性}示例：<div class="style1">div1</div><div class="style1">div2</div><div class="style2">div3</div><style type="text/css">.style1{background-color: red}.style2{background-color: pink}</style>***選擇器的優(yōu)先級(jí)：id>class>元素，優(yōu)先級(jí)高的會(huì)覆蓋低的2、屬性選擇器語(yǔ)法：基本選擇器[屬性=‘屬性值’]{css屬性}示例：<form action="">name:<input type="text" /><br/>pass:<input type="password" /><br/></form><style type="text/css">input[type='text']{background-color: yellow}input[type='password']{background-color: pink}</style> 3、偽元素選擇器a標(biāo)簽的偽元素選擇器語(yǔ)法：靜止?fàn)顟B(tài) a:link{css屬性}懸浮狀態(tài) a:hover{css屬性}觸發(fā)狀態(tài) a:active{css屬性}完成狀態(tài) a:visited{css屬性}示例：<a href="#">點(diǎn)擊我吧</a><style type="text/css">a:link{color:blue}a:hover{color:red}a:active{color:yellow}a:visited{color:green}</style> 4、層級(jí)選擇器語(yǔ)法：父級(jí)選擇器 子級(jí)選擇器 .....示例：<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><style type="text/css">#d1 .dd2 span{color:red}</style> 復(fù)制代碼

###css屬性

1、文字屬性font-size:大小font-family:字體類型 2、文本屬性color:顏色text-decoration:下劃線屬性值：none underline text-align:對(duì)齊方式屬性值：left center right<div>hello css!!!</div><a href="#">click me!!!</a><style type="text/css">div{color:red;text-decoration: underline;text-align: right }a{text-decoration: none;}</style>3、背景屬性background-color:背景顏色background-image:背景圖片屬性值：url("圖片地址");background-repeat:平鋪方式屬性值：默認(rèn)橫向縱向平鋪repeat:橫向縱向平鋪no-repeat:不平鋪repeat-y：縱向repeat-x：橫向body{background-color: black;background-image: url("images/dog.gif");background-repeat: repeat-y;}4、列表屬性list-style-type:列表項(xiàng)前的小標(biāo)志屬性值：太多了list-style-image:列表項(xiàng)前的小圖片屬性值：url("圖片地址");<ul><li>黑馬程序員</li><li>黑馬程序員</li><li>黑馬程序員</li><li>黑馬程序員</li></ul><style type="text/css">/* ul{list-style-type: decimal-leading-zero;} */ul{list-style-image: url("images/forward.gif");}</style>5、尺寸屬性 width:寬度height:高度<div id="d1">div1</div><div id="d2">div2</div><style type="text/css">#d1{background-color: red;width: 200px;height: 200px;}#d2{background-color: pink;width: 200px;height: 200px;}</style>6、顯示屬性display:屬性值：none:隱藏block:塊級(jí)顯示inline：行級(jí)顯示<form action="">name:<input id="name" type="text" /><span id="span">對(duì)不起 輸入不符合要求</span><br>pass:<input id="pass" type="password" /><br><input id="btn" type="button" value="button" /></form><style type="text/css">span{color:red;display: none}</style><script type="text/javascript">document.getElementById("btn").onclick = function(){document.getElementById("span").style.display = "inline";};</script>7、浮動(dòng)屬性float:屬性值：left rightclear:清除浮動(dòng) left right both缺點(diǎn)： (1)影響相鄰元素不能正常顯示(2)影響父元素不能正常顯示 復(fù)制代碼

###css盒子模型

相關(guān)的概念與Android類似，如下圖所示：

盒模型中相關(guān)的概念有：

border:border-width:邊框的寬度border-color:邊框的顏色border-style:邊框的線型border-top:上邊框border-bottom:下邊框border-left:左邊框border-right:右邊框padding:代表邊框內(nèi)壁與內(nèi)部元素之間的距離padding:10px;代表上下左右都是10pxpadding:1px 2px 3px 4px;上右下左padding:1px 2px;上下/左右padding:1px 2px 3px;padding-top:單獨(dú)設(shè)置margin:代表邊框外壁與其他元素之間的距離margin:10px;代表上下左右都是10pxmargin:1px 2px 3px 4px;上右下左margin:1px 2px;上下/左右margin:1px 2px 3px;margin-top:單獨(dú)設(shè)置 復(fù)制代碼 超強(qiáng)干貨來(lái)襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的Java EE之旅02 CSS基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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