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