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 透明度