CSS的背景屬性 CSS的偽元素選擇器

2021-10-06 18:35:15 字數 1592 閱讀 8518

屬性選擇器:

e【attr】 存在attr屬性即可

e【attr=val】 屬性值完全等於val

e【attr*=val】 屬性值裡包含val字元並且在「任意」位置

e【attr^=val】 屬性值裡包含val字元並且在「開始」位置

e【attr$=val】 屬性值裡包含val字元並且在「結束」位置

偽元素選擇器

e::first-letter 文字的第乙個單詞或字 (如 中文 日文 韓文等)

e::first-line 文字第一行

e::selection 可改變選中文字的樣式

e::before和e::after

在e元素內部的開始位置和結束位置建立乙個元素 該元素為行內元素 並且需要結合content屬性使用

div::before

div::after

css背景

背景(image)

語法: background-image: url(的路徑)

背景平鋪(repeat)

語法: background-repeat: no-repeat; /* 不平鋪 */ 查手冊

背景位置(position)

語法:background-position : length || length

background-position : position || position

背景附著

語法:background-attachment : scroll | fixed

scroll : 背景影象是隨物件內容滾動

fixed : 背景影象固定

背景簡寫

background屬性的值的書寫順序官方並沒有強制標準的 為了可讀性 建議大家如下寫:

background : 背景顏色 背景位址 背景平鋪 背景滾動 背景位置

背景透明(css3)

background: rgba(0,0,0,0.3);

最後乙個引數是alpha透明度 取值範圍 0~1 之間

背景縮放

通過background-size設定背景的尺寸 就像我們設定img的尺寸一樣 在移動web開發中做螢幕適配應用非常廣泛 其引數設定如下 :

a) 可以設定長度單位(px)或百分比(設定百分比時, 參照盒子的寬高)

b) 設定為cover時 會自動調整縮放比例 保證始終填充滿背景區域 如有溢位部分則會被隱藏

c) 設定為 contain 會自動調整縮放比例 保證始終完整顯示在背景區域

多背景(css3)

以逗號分隔可以設定多背景 可用於自適應布局

文字的裝飾

text-decoration 通常我們用於給鏈結修改裝飾效果

none(預設,定義標準文字)

underline(定義文字下的一條線)

overline(定義文字上的一條線)

line-through(定義穿過文字下的一條線)

css偽類和偽元素屬性

對css中基本選擇器和屬性選擇器以及偽類選擇器做了總結,但是提到偽類,與之相對應的必然是偽元素。那麼,二者到底有什麼不能說的秘密呢?接下來 先歸類下兩者 偽類的種類 偽元素的種類 兩者的使用方法 css3為了區分兩者,已經明確規定了偽類用乙個冒號來表示,而偽元素則用兩個冒號來表示。pseudo cl...

CSS 屬性 偽類和偽元素的區別

可以明確兩點,第一兩者都與選擇器相關,第二就是新增一些 特殊 的效果。這裡特殊指的是兩者描述了其他css無法描述的東西。這裡用偽類 first child和偽元素 first letter來進行比較。p i first child first second 偽類 first child 新增樣式到第...

css的背景屬性

1.background color背景顏色 預設值是transparent 透明的 當同時定義了背景影象和顏色時,背景影象將覆蓋在背景顏色之上 divclass 2.背景background image 預設水平垂直平鋪 background image url 路徑 background rep...