CSS 高階屬性

2021-09-19 17:19:34 字數 2013 閱讀 7414

display| visibility| overflow hidden | cursor | outline | resize | vertical-align | white-space | text-overflow

display

設定或檢索物件是否及如何顯示。

display: none隱藏物件,與它相反的是display:block 除了轉換為塊級元素之外,同時還有顯示元素的意思。

特點:隱藏之後不再保留位置。

visibility

設定或檢索是否顯示物件。

visible:物件可視

hidden:物件隱藏

特點:隱藏之後繼續保留原有位置。

overflow

檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。

visible:不剪下內容也不新增滾動條。

auto:超出自動顯示滾動條,不超出不顯示滾動條。

overflow: hidden; 不顯示超過物件尺寸的內容。

scroll: 總是顯示滾動條。

cursor

設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。

cursor: pointer; 樣式變成小手;

cursor: text; 樣式變成選擇;

cursor: move; 樣式變成移動;

cursor: default; 樣式變成預設。

>

style

="cursor

:default

">

文字li

>

style

="cursor

:pointer

">

文字li

>

style

="cursor

:move

">

文字li

>

style

="cursor

:text

">

文字li

>

ul>

outline

繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素作用。

outline: outline-color | outline-style | outline-width

最直接的寫法是:outline: 0; 或者outline: none; 很少使用邊框。

resize

防止火狐、谷歌等瀏覽器隨意的拖拽文字域。

右下角可以拖拽:

右下角不可以拖拽:

vertical-align

vertical-align: baseline | top | middle | bottom

設定或檢索物件內容的垂直對齊方式。

vertical-align不影響塊級元素中的內容對齊,它只針對於行內元素或行內塊元素;通常用來控制/表單與文字的對齊。

white-space

設定或檢索物件內文字顯示方式。通常使用於強制一行顯示內容。

normal: 預設處理方式;

nowrap: 強制在同一行內顯示所有文字,直到文字結束或遭遇br換行標籤物件才換行。

可以處理中文。

text-overflow

text-overflow: clip | ellipsis 文字溢位

設定或檢索是否使用乙個省略標記(…)標示物件內文字的溢位。

clip: 不顯示省略標記(…),而是簡單的裁切。

ellipsis: 當物件內文字溢位時顯示省略標記(…)

首先強制一行內顯示,再次和overflow屬性搭配使用。

CSS屬性高階

1 hover屬性只會在hover的時候有效果,失去hover後同時失效。2 滑鼠懸浮在元素上時觸發偽元素樣式改變的寫法 bmap after bmap hover after 3 css3 rgb 和 rgba rgb色彩是通過對紅 r 綠 g 藍 b 三個顏色通道的變化和它們相互之間的疊加來得到...

CSS高階屬性

css復合選擇器 1 標籤指定式選擇器 標記指定式選擇器又稱交集選擇器,由兩個選擇器構成,其中第乙個為標記選擇器,第二個為class選擇器或id選擇器兩個選擇器之間 不能有空格。3 並集選擇器 並集選擇器是各個選擇器通過逗號連線組成,任何形式的選擇器 包括標記選擇器 class選擇器 id選擇器等 ...

CSS高階屬性

1.層疊性 層疊性指多種css樣式的疊加。例如當使用內嵌式css樣式表定義p標籤字型大小為12px,外鏈式定義p標籤顏色為紅色,那麼段落文字將顯示為12px紅色 早晨有個好太陽 照的大家懶洋洋 不想上班真荒唐 別人上班我不忙 2.繼承性 繼承性是指書寫css樣式表時,子標籤會繼承父標籤的某些樣式,如...