Java 新手學習 CSS樣式列表 排版 格式布局


1,樣式表分為  內聯樣式表   內嵌樣式表  外部樣式表  三種。

 內聯樣式表是直接寫在標簽里面的  比如 <p style=“”></p>  <div style=""></div>

 內嵌樣式表是必須寫在head 標簽里面的  比如 

 <style>

 p{樣式}

</style> 只針對body 里的p 標簽 改變樣式

也可以是

<style>

div{樣式(樣式可以自己設定)比如 width:200px; height:50px; border:1px solid red; top:10px; left:20px;  那么div層標簽的效果會是寬200高50 邊框線為1像素 實線 紅色實線的框, 當然也可以添加更多的樣式效果在里面}

</style>只針對body里的div標簽 改變樣式

這是用標簽名做的 選擇器  比如p層標簽、div層標簽

還有一種class選擇器  都是“."開頭的  比如

<head><style>

 .(點后面隨便起名字方便記住就行 但是不能單獨用數字命名 可以字母加數字 但數字不可以在開頭 列如 a1 但不能是 1a)

{樣式}</style></head>

這種選擇器在head標簽里寫完了 要在body里的層標簽 里引用  比如

<body>

<div class="上面點后邊起好的名字”></div>這樣div層標簽就會執行class的樣式指令了

<p class=“”></p>這個p標簽也會執行class的指令

</body>   class選擇器可以重復使用  也就是說可以同時被多個標簽引用

還有一種ID選擇器  這個在head的標簽里以#開頭   比如

<head><style>

#(名字){樣式}</style></head>

<body>

<div id="(名字)“></div>

</body> 這種選擇器的應用方式跟class一樣 但是class可以被重復使用 id不能重復使用  也就是說#ab 只能在body里出現一次   如果是不同名字的# 可以被多次使用

 比如#aa  可以跟#bb 同時出現在body里面

選擇器種類里還有三種符合選擇器

1)用,逗號隔開  表示並列  比如

<head><style>

p,span,div{樣式}

</style></head> 這樣p標簽span標簽和div標簽可以同時執行樣式的指令

2)用空格隔開  表示后代  比如

<head><style>

div p{樣式}

</style></head>只有div標簽里的p標簽執行此命令 比如

<body>

<div><p></p></div>

</body>這中情況下是執行 div p 樣式指令的

3)(.)表示篩選  這種情況跟用空格功能基本一樣

 

格式與布局

1)position:fixed  鎖定位置是相對於瀏覽器的

2)position:absolute  是絕對位置   這個有兩種情況

  一種是外層沒有position:absolute或者是relative的情況下,創建的div是相對於瀏覽器定位的

 另一種是外層有position:absolute或者relative,那么div就會相對於外層的邊框定位

3)position:relative 是相對於默認位置的定位 (絕對定位是在頁面上面進行定位,相對定位是真實的在頁面里面占有某一塊區域,有上下左右值的時候只是進行

 形狀上的平移,真實占有的位置不變)

 

分層  z-index    在z軸方向分層,層數越高越不容易被蓋住, z-index層數默認為1

 

float:left  right

overflow:hidden;  為超出部分隱藏   overflow:visible;顯示

超鏈接的樣式  

<style>

a:link  每點擊是原來的樣子

a:visited  訪問過的鏈接樣式

a:hover  鼠標指向是的樣式  也就是把鼠標放在上面顯示的樣式

  opacity  透明度


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM