css(cascading style sheet) 層疊樣式表:控制布局和顯示效果。
1、行內樣式
直接寫在標籤裡面,使用style屬性提供的樣式
style屬性的語法
style = "樣式名字1:值1;樣式2...;樣式名字n:值n";
示例:(1)層的樣式
這是乙個文字
(2)字型的樣式
這是乙個文字
2、內嵌樣式
直接寫在head標籤中使用的樣式,直接作用所有標籤裡面的樣式
語法:示例:
3、外部樣式
-> 可以將樣式單獨的寫在乙個style.css中
-> 使用link將其鏈結過來
示例:4、常見的樣式
4.1、邊框樣式
邊框方向:
->border-top
->border-top
->border-right
->border-bottom
邊框屬性:
-> 顏色border-color
-> 樣式border-style
-> 粗細border-weight
語法格式:
細邊框:
示例:djflkdsaj
djflkdsaj
djflkdsaj
djflkdsaj
4.2、margin與padding
margin設定元素的外邊距 padding設定元素的內邊距
-> 如果是單值
margin:0px 表示上下左右均為0
-> 如果是兩個值
margin:10px 20px 表示上下邊距均為10px,而左右均為20px
-> 如果是三個值
margin:10px 20px 30px
表示上邊距為10px
下邊距為30px
左右均是20px
-> 如果是四個值
順序為:top right bottom left
4.3、使用選擇器
(1)標籤選擇器 作用於整個頁面中的所有標籤
標籤名
(2)id選擇器 規範id唯一性
#id名
使用處新增屬性id="id名"
(3)類選擇器
.類名
使用處新增屬性class="類名"
(4)偽選擇器:設定標籤樣式的時候,根據狀態設定不同的樣式
5、 position 及脫離文件流
文件流就是堆砌如果需要控制其位置,需要考慮position屬性設定其定位方式
(1)預設值 static
-> 按順序的文件流堆砌
(2)相對定位 relative
-> 原來所在文件流中的位置一直佔據
-> 設定left等引數的時候,相當於在原有文件流的位置基礎之上左邊偏移量
會由於偏移遮蓋文字,但元素的位置與在文件流原本的位置是相對固定的
(*3)絕對定位 absolute
->該元素就脫離了文件流,可以設定其在瀏覽器窗體中的絕對位置;
->位置隨滾動條滾動而改變(在瀏覽器窗體的位置固定了) ;
->當瀏覽器窗體不斷縮小,最後導致元素位置會重疊,位置互換等情形的發生。
(*4)可視區固定 fixed
->該元素就脫離了文件流,可以設定其在瀏覽器可視區的絕對位置;
->位置不隨滾動條滾動而改變;
->當瀏覽器窗體不斷縮小,最後導致元素位置會重疊,位置互換等情形的發生。當可視區過小,元素可能"消失"。
以上幾種定位的示例:
文文文文文文文文文文文文文文文d1d1
d1文文文文文文文文文文文文文文文
文文文文文文文文文文文文文文文d1d1
d1文文文文文文文文文文文文文文文
文文文文文文文文文文文文文文文d21d21
d21文文文文文文文文文文文文文文文
文文文文文文文文文文文文文文文d22d22
d22文文文文文文文文文文文文文文文
文文文文文文文文文文文文文文文d31d31
d31文文文文文文文文文文文文文文文
文文文文文文文文文文文文文文文d32d32
d32文文文文文文文文文文文文文文文
文文文文文文文文文文文文文文文d41d41
d41文文文文文文文文文文文文文文文
文文文文文文文文文文文文文文文d42d42
d42文文文文文文文文文文文文文文文
css要點總結
css總結 1.box sizing content box border box content box 設定的寬度,高度為content的 border box 設定的寬度,高度為content padding border div 2.dpi scale 1.0 此問題時同學遇到的sublim...
CSS要點總結
css 為定位和浮動提供了一些屬性。定位的基本思想,允許你定義元素框相對於其正常位置應該出現的位置,或者相對于父元素 另乙個元素甚至瀏覽器視窗本身。css1 中首次提出了浮動。div h1 或 p 元素被稱為塊級元素。span 和 strong 等元素稱為 行內元素 因為它們的內容顯示在行中。可以使...
CSS相容要點分析
ie vs ff css 相容要點 doctype 影響 css 處理 ff div 設定 margin left,margin right 為 auto 時已經居中,ie 不行 ff body 設定 text align 時,div 需要設定 margin auto 主要是 margin left...