第二章 CSS基本屬性

2022-07-25 10:30:27 字數 2377 閱讀 9475

1、css:層疊樣式表

乙個元素允許同時應用多種樣式,頁面元素最終的樣式即為多種樣式的疊加效果。

2、css樣式優先順序

行內樣式表》內部樣式表》外部樣式表【就近原則】

id選擇器》類選擇器》標籤選擇器

3、文字屬性:(縮寫形式)

font:風格 粗細 大小/行高  字型1,字型2,字型3;

font-weight(粗細100-900)

font-size(大小)

font-family(字型)font-style(風格)

行距、對齊等:

line-height (行高)

text-align (對齊)  text-decoration(文字修飾)

letter-spacing (字元間距)white-space (空白處理)

【注意事項】

4、背景相關屬性: background (縮寫形式):color image repeat attachment position ;

background-color(背景色)

background-image(背景圖 )

background-repeat(背景圖重複方式)

background-position(位置座標、偏移量)【右下為正】

background-size(背景圖大小)【cover覆蓋、contain原圖按比例拉伸、百分比】

background-attachment (背景影象是否固定)【scroll預設隨頁面滾動、fixed固定、inherit繼承】

list-style (列表風格)

屬性值 方式 語法實現 示例

none 無風格 list-style:none; 刷牙

洗臉disc 實心圓 list-style:disc; ● 刷牙

● 洗臉

circle 空心圓 list-style:circle; ○ 刷牙

○ 洗臉

square 實心正方形 list-style:square; ■ 刷牙

■ 洗臉

decimal 數字 list-style:decimal 1. 刷牙

2. 洗臉

6.處理溢位(overflow):

?overflow 的取值可以是 visible | hidden | scroll | auto , 其中 visible 是預設值。

?值 visible 表示不裁減內容,也不新增滾動條,強制顯示元素內容;

?hidden 表示裁減內容,而且不顯示超出物件尺寸的內容;

?scroll 表示裁減內容,同時提供滾動條;

?auto 表示只有在必要時才裁減內容並新增滾動條。

注:如果我們要使用 overflow 屬性,那麼該元素的 position 屬性必須指定

為絕對定位(absolute)

例:position: absolute;overflow: scroll;

7.指定裁剪區域(clip):

?clip屬性可以確定定位物件的裁減區域

?取值為 rect (top right bottom left) | auto

?其中 top、 right、 bottom 和 left用於指定上、 右、 下、 左 4 個方向上的裁減長度

?取值為長度值或 auto。 如果任意一邊使用 auto,則相當於該邊沒有進行裁減。

注:如果我們要使用 clip 屬性,那麼該元素的 position 屬性必須指定

為絕對定位(absolute)

例:clip: rect(50px 200px auto auto);

8、元素可見性(display 屬性和 visibility 屬性):

?display 屬性確定乙個元素是否應顯示在頁面上以及如何顯示。

?它的取值包括: none、 block、 inline等。

?none:元素在頁面隱藏起來,不僅元素看不見,而且元素也將退出當前的頁面布局層,不占用任何空間。

?block(塊級): 可以強制將 html中的內嵌元素變為塊級元素,從而引起後續物件換行

?inline(內嵌級):css強制將 html 中的塊級元素變為內嵌元素。

?visibility 屬性控制定位的元素是否可見。

?取值包括: visible(可見)、hidden(隱藏)和inherit(繼承),預設值為 inherit(即繼承父級元素的顯示屬性)。

?visibility 屬性與 display 屬性的不同之處在於:

?visibility當隱藏元素時,visibility 屬性定義的元素仍然為保留原有的顯示空間。

?display 當隱藏元素時,display 屬性定義的元素在頁面隱藏起來,不僅元素看不見,而且元素也將退出當前的頁面布局層,不占用任何空間。

CSS基本屬性

一 visibility屬性 display none 隱藏元素 visibility 顯示 隱藏的 取值 1 visible 預設的可見的 2 hidden 隱藏 依然佔據頁面空間 3 collapse 使用在 元素上 刪除一行和一列的時候不影響 的整體布局 diplay 和 visibility...

CSS基本屬性

background 背景 background color 背景色 background image 背景 background repeat 背景圖平鋪方式 簡寫 background gray url xx.png no repeat 背景色,背景,平鋪方式 font 字型 font styl...

搞定css基本屬性

css層疊樣式表,級聯樣式,簡稱才是樣式表 實現了內容和表示的分離 css和html之間的關係 html是負責網頁的結構 css 是負責構建html元素的樣式 css作用 1.以統一的方式實現樣式的定義 2.提高頁面樣式的可重用性和可維護性 內聯樣式 行內樣式 內部樣式 在head標籤中 外部樣式表...