App下載

CSS選擇器中哪些屬性可以繼承?

猿友 2021-03-03 18:05:00 瀏覽數(shù) (8451)
反饋

如果我們想在 HTML 元素中設置 CSS 樣式,則需要通過 CSS 選擇器進行控制。換句話說,CSS 選擇器就是用于指向需要添加 CSS 樣式的標簽,讓 CSS 樣式知道自己需要作用到那個標簽上去。

 CSS 的繼承性是指被包在內(nèi)部的標簽將擁有外部標簽的樣式性,即子元素可以繼承父元素的屬性。

以下分別介紹了幾種常用的選擇器與其可繼承的屬性。

常用的 CSS 選擇器有:

  • id 選擇器

我們通過設置標簽的 id 屬性來設置id選擇器。CSS 中 id 選擇器以 #? 來定義。如以下則是設置 id 為“box”的 CSS 樣式。為 div 添加一個高度為 100px,寬度為 100px,背景顏色為紅色的樣式。

微信截圖_20210303163408

  • 類選擇器

常用的選擇器還有類選擇器。類選擇器通過設置標簽的 class 屬性去設置樣式。CSS 中 class 選擇器以 來定義。如以下則是設置class 為“box”的 CSS 樣式。為div添加一個高度為 100px,寬度為 100px,背景顏色為藍色的樣式。

截圖2

  • 標簽選擇器

標簽選擇器是為某一類標簽設置 CSS 樣式。在 CSS 中直接以標簽名設置樣式。如以下是設置 div 的 CSS 樣式。給 div 加上一個高度為 100px,寬度為 100px,背景顏色為粉色的樣式。

截圖三

  • 內(nèi)聯(lián)選擇器

我們也可以直接在標簽內(nèi)寫 CSS 代碼。通過加上 style 屬性,就可以在 style 內(nèi)添加 CSS 樣式了。

截圖4

可繼承的屬性:

CSS 中可繼承的屬性有以下幾種。

  • 字體系列屬性 

 font

 組合字體

 font-family

 規(guī)定元素的字體系列

 font-weight

 設置字體的粗細

 font-size

 設置字體的尺寸

 font-style

 定義字體的風格

 font-variant

 設置小型大寫字母的字體顯示文本,這意味著所有的小寫字母均會被轉換為大寫,但是所有使用小型大寫字體的字母與其余文本相比,其字體尺寸更小。

 font-stretch

 允許你使文字變寬或變窄。所有主流瀏覽器都不支持。

 font-size-adjust

 為某個元素規(guī)定一個 aspect 值,字體的小寫字母 "x" 的高度與 "font-size" 高度之間的比率被稱為一個字體的 aspect 值。這樣就可以保持首選字體的 x-height。

  • 文本系列屬性

 text-indent  文本縮進
 text-align  文本水平對齊
 line-height  行高
 word-spacing  增加或減少單詞間的空白(即字間隔)
 letter-spacing  增加或減少字符間的空白(字符間距)
 text-transform  控制文本大小寫
 direction  規(guī)定文本的書寫方向
 color  文本顏色

  • 元素可見性

 visibility  規(guī)定元素是否可見

  • 表格布局屬性

 caption-side  規(guī)定表格標題的放置方式
 border-collapse  為表格設置合并邊框模型
 border-spacing  設置相鄰單元格的邊框間的距離(僅用于“邊框分離”模式)
 empty-cells  設置是否顯示表格中的空單元格(僅用于“分離邊框”模式)
 table-layout  顯示表格單元格、行、列的算法規(guī)則

  • 列表屬性

 list-style-type  設置列表項標記的類型
 list-style-image  使用圖像來替換列表項的標記
 list-style-position  設置在何處放置列表項標記
 list-style  在一個聲明中設置所有的列表屬性

  • 生成內(nèi)容屬性

 quotes  設置嵌套引用(embedded quotation)的引號類型

  • 光標屬性

 cursor  規(guī)定要顯示的光標的類型(形狀)

  • 頁面樣式屬性

 page 檢索或指定顯示對象容器時使用的頁面類型
 page-break-inside  設置元素內(nèi)部的 page-breaking 行為
 orphans  設置或返回一個元素必須在頁面底部的可見行的最小數(shù)量(用于打印或打印預覽)

 speak  規(guī)定內(nèi)容是否將以聲音形式呈現(xiàn)
 speak-punctuation  規(guī)定如何念出標點符號
 speak-numeral  規(guī)定如何念出數(shù)字
 speak-header  指定如何處理表格標題。應該在每個單元格之前朗讀標題,還是僅在標題與前一個單元格不同的單元格之前念出標題。
 speech-rate  規(guī)定說話的速度
 volume  規(guī)定說話的音量
 voice-family  規(guī)定語音的語音家族
 pitch  規(guī)定說話的聲音
 pitch-range
 規(guī)定語音的變化(單調(diào)還是動聽的聲音?)
 stress
 規(guī)定語音中的“壓力”
 richness
 指定語音的豐富程度。(聲音豐富還是稀???)
 azimuth
 設置聲音的來源
 elevation
 設置聲音的來源


以上就是 CSS 選擇器及其繼承屬性的總結。更多教程請登錄W3Cschool官網(wǎng)

推薦好課:HTML、CSS、前端入門


CSS

0 人點贊