大数据WEB阶段（三）CSS
CSS
一、概述
二、在html中引入css樣式的方式
內(nèi)嵌式
這種設(shè)置方式不推薦大量使用， 會(huì)造成頁面結(jié)構(gòu)的混亂 ， 不理與后期的維護(hù)及擴(kuò)展 。
<div style="border:10px solid red; font-size:50px">這是一個(gè)div </div>內(nèi)聯(lián)式
這種方式將所有的css代碼放在一個(gè) style標(biāo)簽內(nèi)部統(tǒng)一管理 。 初步實(shí)現(xiàn)了html與css代碼分離
<style type="text/css" media="screen" id="test">#d1{border:10px solid green;font-size:10px;} </style>外聯(lián)式
這種方式是將所有的css代碼放在一個(gè)獨(dú)立的文件中進(jìn)行統(tǒng)一管理 ，真正實(shí)現(xiàn)了html與css的分離
<link rel="stylesheet" href="demo.css" />三、div、span、p標(biāo)簽
- 這三個(gè)標(biāo)簽都可以看做是一個(gè)容器 ， 可以用來包裹其他的html內(nèi)容 ， 被包裹起來的內(nèi)容形成了一個(gè)組 ， 可以通過css樣式對這一組的內(nèi)容統(tǒng)一設(shè)置樣式 。
- div : 獨(dú)占一行， 標(biāo)簽可以把文檔分割為不同的獨(dú)立的部分
- span ： 并非獨(dú)占一行， 多個(gè)span會(huì)并排排列 ，直到一行排滿才會(huì)換行 。 該標(biāo)簽 用于組合文檔中的行內(nèi)元素 。
- p： 獨(dú)占一行 ， 但是元素會(huì)自動(dòng)在其前后創(chuàng)建一段空白 ， 是段落標(biāo)簽 。
- 元素的類型：
- 塊級元素 ： 默認(rèn)情況下會(huì)獨(dú)占一行 ， 如： div 、p 、 h1~h6 、hr
- 行級元素 ： 默認(rèn)情況下 ， 多個(gè)元素可以處在同一行 ， 如： span、input 、font
四、選擇器
基本選擇器：
標(biāo)簽名選擇器
通過標(biāo)簽的名稱選中相應(yīng)的標(biāo)簽
格式：元素名{} ， 如div{}<div>ddd</div>類選擇器
通過標(biāo)簽上的class屬性 ， 可以把標(biāo)簽設(shè)置為一個(gè)類別 ，而后通過類選擇器進(jìn)行選擇后修飾
格式： .c1{ /*css屬性*/ key:value;}<div class="c1">ddd</div><span class="c1">span</span><p class="c1">p</p>ID選擇器
通過標(biāo)簽上的ID屬性 ， 可以為標(biāo)簽設(shè)置編號 ， id的值在整個(gè)html文檔中是獨(dú)一無二的 ， 可以通過id選擇器選中標(biāo)簽的id進(jìn)行修飾 。
格式：#id{css屬性} 如：#c{}<div id="c">dddddd</div>擴(kuò)展選擇器
后代選擇器
在父選擇器選中的元素內(nèi)部 ， 再選中指定的后代元素進(jìn)行修飾 。
要求：選中所有div下所有的span標(biāo)簽 格式：div span{}<div><span>s1</span><span>s2</span><span>s3</span> </div>子元素選擇器
在父選擇器選中元素的內(nèi)部 ， 選中指定的子元素進(jìn)行樣式的修飾 。
要求： 只選中 父元素層下一層的子元素 ，而不選中父元素的孫子元素 格式： 父元素>子元素{} 如： div>span<div><span>s1</span><div><span>s2</span></div></div> 注意 ： 只能選中s1 而選不中s2 .分組選擇器
一次選中多個(gè)標(biāo)簽來統(tǒng)一設(shè)置樣式 。
要求： 同時(shí)對div ， span 進(jìn)行設(shè)置 格式： div,span{}<div>ddd</div> <span>sss</span>屬性選擇器
通過元素的屬性選中元素進(jìn)行修飾 。
要求：只對提交按鈕進(jìn)行修飾 格式：元素名[屬性名=屬性值]{} 可以只寫屬性名而不寫屬性值， 表示選中有該屬性的元素 如： input[type="submit"]{}<input type="text" /><input type="password" /><input type="submit" />相鄰兄弟選擇器
如果兩個(gè)元素具有相同的父元素 ， 并且是緊挨著的 ， 這兩個(gè)元素就是相鄰兄弟元素 ，可以通過兄元素A選中第元素B
要求： 選中同一div中與span緊鄰的后一個(gè)元素 格式： 大哥+小弟 如：#s1+span{}<div><span id="s1">ss</span><span>s22</span> </div>偽元素選擇器
狀態(tài)：
:visited –> 表示被點(diǎn)擊之后的狀態(tài)
要求：對超鏈接不同狀態(tài)的樣式進(jìn)行修飾 css: a:link{}a:hover{}a:active{}a:vidited{}html: <a href="#">超鏈接</a>五、外邊距、邊框 、內(nèi)邊距
外邊距： margin
1. margin-top:上邊距 2. margin-left: 左邊距 3. margin-bottom ：下邊距 4. margin-right: 右邊距 5. margin：1px 2px 3px 4px ; /*上 右 下 左*/ 6. margin：1px 2px ; /*上下 左右*/ 7. margin：1px; /*上下左右*/ 8. 注意：垂直外邊距合并的現(xiàn)象:外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。邊框：border
1. border: 5px solid green; 2. border-top: 5px solid green; 3. border-bottom: 5px solid green; 4. border-left: 5px solid green; 5. border-right: 5px solid green;內(nèi)邊距： padding
1. padding-top: 20px; 2. padding-left: 20px; 3. padding-bottom: 20px; 4. padding-right: 20px; 5. padding: 20px 1px 2px 4px; /* 上 下 左 右 */ 6. padding: 20px 2px;/*上下 左右*/ 7. padding: 20px;/*上下左右*/六、常用CSS屬性
總結(jié)
以上是生活随笔為你收集整理的大数据WEB阶段（三）CSS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java中的八种锁
- 下一篇： 大数据WEB阶段（四）JavaScrip