小編給大家分享一下css樣式屬性有哪些,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
十年的臨海網(wǎng)站建設(shè)經(jīng)驗(yàn),針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù),響應(yīng)快,48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同,自動(dòng)調(diào)整臨海建站的顯示方式,使網(wǎng)站能夠適用不同顯示終端,在瀏覽器中調(diào)整網(wǎng)站的寬度,無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站,都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì),從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“臨海網(wǎng)站設(shè)計(jì)”,“臨海網(wǎng)站推廣”以來(lái),每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。CSS 的屬性vertical-align
用來(lái)指定行內(nèi)元素(inline)或表格單元格(table-cell)元素的垂直對(duì)齊方式。
就像定義說(shuō)的,這個(gè)屬性允許你垂直對(duì)齊文本。它對(duì)于順序指示器(st
,nd
等)、需要的輸入星號(hào)(*
)或沒(méi)有正確居中的圖標(biāo)特別有用。vertical-align
取其中一個(gè)值:super | top | middle | bottom | baseline (default) | sub | text-top | text-bottom
,或從基線開(kāi)始的長(zhǎng)度(px
,%
,em
,rem
等等)。
baseline: 使元素的基線與父元素的基線對(duì)齊。HTML規(guī)范沒(méi)有詳細(xì)說(shuō)明部分可替換元素的基線,如 ,這意味著這些元素使用此值的表現(xiàn)因?yàn)g覽器而異。
sub:使元素的基線與父元素的下標(biāo)基線對(duì)齊。
super:使元素的基線與父元素的上標(biāo)基線對(duì)齊。
text-top:使元素的基線與父元素的上標(biāo)基線對(duì)齊。
text-bottom:使元素的底部與父元素的字體底部對(duì)齊。
middle:使元素的中部與父元素的基線加上父元素x-height
(譯注:x高度)的一半對(duì)齊。
注意vertical-align
只對(duì)行內(nèi)元素、表格單元格元素生效:不能用它垂直對(duì)齊塊級(jí)元素。
資源:https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
writing-mode
屬性定義了文本水平或垂直排布以及在塊級(jí)元素中文本的行進(jìn)方向。為整個(gè)文檔設(shè)置書(shū)時(shí),應(yīng)在根元素上設(shè)置它(對(duì)于 HTML 文檔應(yīng)該在 html 元素上設(shè)置)。 它采用以下值之一horizontal-tb (default) | vertical-rl | vertical-lr
。
horizontal-tb:對(duì)于左對(duì)齊(ltr)腳本,內(nèi)容從左到右水平流動(dòng)。對(duì)于右對(duì)齊(rtr)腳本,內(nèi)容從右到左水平流動(dòng)。下一水平行位于上一行下方。
vertical-rl:對(duì)于左對(duì)齊(ltr)腳本,內(nèi)容從上到下垂直流動(dòng),下一垂直行位于上一行左側(cè)。對(duì)于右對(duì)齊(rtr)腳本,內(nèi)容從下到上垂直流動(dòng),下一垂直行位于上一行右側(cè)。
vertical-lr:對(duì)于左對(duì)齊(ltr)腳本,內(nèi)容從上到下垂直流動(dòng),下一垂直行位于上一行右側(cè)。對(duì)于右對(duì)齊(rtr)腳本,內(nèi)容從下到上垂直流動(dòng),下一垂直行位于上一行左側(cè)。
資源:https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
font-variant-numeric
CSS屬性控制數(shù)字,分?jǐn)?shù)和序號(hào)標(biāo)記的替代字形的使用。
它采用以下這些值之一:normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions
。
此屬性對(duì)于設(shè)置數(shù)字樣式很有用。 根據(jù)情況,你可能希望顯示老式的數(shù)字或帶有斜杠的零,對(duì)于這些情況,font-feature-settings
很有用。
請(qǐng)注意,font-variant-numeric
是font-feature-settings
組屬性的一部分。 諸如font-variant-caps
或font-variant-ligatures
之類的屬性也屬于該組。
還要注意,像所有font-feature-settings
屬性一樣,你的字體需要實(shí)現(xiàn)上述功能才能正常工作。 我使用的字體是Fira Sans
。
資源:https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric
每當(dāng)我們有不想讓用戶選擇的文本,或者相反,如果發(fā)生了雙擊或上下文單擊,希望選擇所有文本時(shí),user-select
屬性將非常有用。
此屬性采用以下值之一:none | auto | text | all
。
none:元素及其子元素的文本不可選中。 請(qǐng)注意這個(gè)Selection
對(duì)象可以包含這些元素。 從Firefox 21開(kāi)始,none
表現(xiàn)的像-moz-none
,因此可以使用-moz-user-select: text
在子元素上重新啟用選擇。
autoauto
的具體取值取決于一系列條件,具體如下:
::before
和::after
偽元素上,采用的屬性值是none
contain
user-select
采用的屬性值為all
,則該元素采用的屬性值也為all
user-select
采用的屬性值為 none
,則該元素采用的屬性值也為none
text
text:用戶可以選擇文本。
all:在一個(gè)HTML編輯器中,當(dāng)雙擊子元素或者上下文時(shí),那么包含該子元素的最頂層元素也會(huì)被選中。
資源:https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
clip-path
CSS 屬性可以創(chuàng)建一個(gè)只有元素的部分區(qū)域可以顯示的剪切區(qū)域。區(qū)域內(nèi)的部分顯示,區(qū)域外的隱藏。剪切區(qū)域是被引用內(nèi)嵌的URL定義的路徑或者外部svg的路徑,或者作為一個(gè)形狀例如circle()
。clip-path
屬性代替了現(xiàn)在已經(jīng)棄用的剪切clip
屬性。
此屬性采用以下值之一:circle() | ellipse() | polygon() | path() | url()
。
由于這是對(duì)該屬性的介紹,因此,這里不會(huì)深入研究每個(gè)值。
我使用最多的兩個(gè)值是circle
和polygon
。circle(radius at pair)
值有兩個(gè)參數(shù),第一個(gè)參數(shù)是圓的半徑,第二個(gè)參數(shù)是表示圓心的點(diǎn)。polygon(pair, pair, pair ...)
值取3個(gè)或更多的點(diǎn),表示一個(gè)三角形、一個(gè)矩形等等。
shape-outside
的CSS 屬性定義了一個(gè)可以是非矩形的形狀,相鄰的內(nèi)聯(lián)內(nèi)容應(yīng)圍繞該形狀進(jìn)行包裝。 默認(rèn)情況下,內(nèi)聯(lián)內(nèi)容包圍其邊距框;shape-outside
提供了一種自定義此包裝的方法,可以將文本包裝在復(fù)雜對(duì)象周圍而不是簡(jiǎn)單的框中。它采用與clip-path
相同的值。
clip-path
定義用戶如何查看元素,shape-outside
定義其他HTML元素如何查看元素。
資源:https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside
最后,backgroundclip
CSS屬性設(shè)置元素的背景是否擴(kuò)展到其border
、padding
或content
框之下。
此屬性采用以下值之一:border-box (default) | padding-box | content-box | text
下圖是結(jié)合上面 7 個(gè)屬性實(shí)現(xiàn)的布局,讓大家加深一下印象。
以上是css樣式屬性有哪些的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!