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

時間 2019-11-11

標籤 java 新手學習 css 樣式列表排版格式佈局欄目 Java 简体版

原文原文鏈接

1，樣式表分爲內聯樣式表內嵌樣式表外部樣式表三種。瀏覽器

內聯樣式表是直接寫在標籤裏面的好比 <p style=「」></p> <div style=""></div>佈局

內嵌樣式表是必須寫在head 標籤裏面的好比 spa

<style>blog

p{樣式}ci

</style> 只針對body 裏的p 標籤改變樣式it

也能夠是io

<style>class

div{樣式(樣式能夠本身設定）好比 width:200px; height:50px; border:1px solid red; top:10px; left:20px; 那麼div層標籤的效果會是寬200高50 邊框線爲1像素實線紅色實線的框，固然也能夠添加更多的樣式效果在裏面}引用

</style>只針對body裏的div標籤改變樣式float

這是用標籤名作的選擇器好比p層標籤、div層標籤

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

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

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

這種選擇器在head標籤裏寫完了要在body裏的層標籤裏引用好比

<body>

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

<p class=「」></p>這個p標籤也會執行class的指令

</body> class選擇器能夠重複使用也就是說能夠同時被多個標籤引用

還有一種ID選擇器這個在head的標籤裏以#開頭好比

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

<body>

</body> 這種選擇器的應用方式跟class同樣可是class能夠被重複使用 id不能重複使用也就是說#ab 只能在body裏出現一次若是是不一樣名字的# 能夠被屢次使用

好比#aa 能夠跟#bb 同時出如今body裏面

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

1）用，逗號隔開表示並列好比

p,span,div{樣式}

</style></head> 這樣p標籤span標籤和div標籤能夠同時執行樣式的指令

2）用空格隔開表示後代好比

div p{樣式}

</style></head>只有div標籤裏的p標籤執行此命令好比

<body>

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

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

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