如何使用Orcas的CSS功能

2021-09-05 16:00:41 字數 1066 閱讀 3882

原文:

在我演示orcas新的css功能時,得到乙個問題問如何使用這些工具來幫助我們分析頁面上的樣式。或明確點說,為什麼頁面不按我們所期待的樣式來顯示呢。在orcas中包含了乙個非常有用的工具,叫做css property grid(樣式屬性**)。它看起來和普通的**沒什麼兩樣,但是它確實包含了更多的內容。

讓我們來看乙個複雜頁面例子:www.msn.com

找到"are sewing circles cool again?"鏈結,為什麼它是這樣格式化的呢,為什麼上面的鏈結是加粗的?看css property grid,在上半部分你可以看到作用於這個元素的選擇符。這裡會列出直接作用於它,和從父元素繼承下來的樣式屬性。在這裡,你可以看到比傳統頁面設計器更詳細的資訊。在這裡我們至少可以知道有哪些規則,但是我們如何才能知道它們的值呢?我們可以選擇每乙個選擇符,然後會在**的下半部分顯示出這個規則的所有屬性值,我們可以按需要來編輯這些值。我們同樣可以把滑鼠移到這些規則選擇符上,會出現這些選擇符完整定義的tooltip。

[tooltip會顯示樣式的原始定義,如果該樣式被寫在同一行,那麼你將會得到一串很長的提示。]

在下面我們就可以看到這些規則是如何被應用的。在這裡,有多個選擇符定義了相同的屬性,有一些被覆蓋了,你可以看到有5個color屬性,但是只有最後乙個是生效的,其它的都被忽略了。

如果你把滑鼠移到某乙個屬性上,它將會顯示它正哪個選擇符所重寫。如果你要知道某個屬性來自哪個規則,你可以單擊它,在上面的檢視中會將該選擇符高亮顯示出來。在這個例子中,值為70%的font-size屬性是從body中繼承而來的,它定義在override.css檔案。(檔名顯示在"summary"下面)。

你可以在檢視編輯這些屬性,或者可以單擊檢視的上半部分來獲得這些選擇符的所有屬性列表。

如何使用WORD的索引功能

索引是根據一定需要,把書刊中的主要概念或各種題名摘錄下來,標明出處 頁碼,按一定次序分條排列,以供人查閱的資料。它是圖書中重要內容的位址標記和查閱指南。設計科學編輯合理的索引不但可以使閱讀者倍感方便,而且也是圖書質量的重要標誌之一。word就提供了圖書編輯排版的索引功能,現將其使用方法介紹如下 如何...

使用CSS實現內容展開功能

先看看 html部分 div class introduce input type checkbox id introduce p 影片講述了職業殺手亞瑟為解救愛人不得不完成一系列不可能的暗殺任務。在一樁看似意外的事件中,亞瑟 畢索 傑森 斯坦森 飾 的紅顏知己梅 楊紫瓊 飾 請求亞瑟解救屢遭毒打的...

Gitee 的 Page 頁面功能如何使用

首先有關 gitee 的頁面功能是在企業版中提供的。個人的倉庫是沒有辦法使用 page 頁面功能的。當你如果有乙個專案是在企業版本下面的話,在專案的倉庫的服務選項下面有乙個 page 的功能。單擊上面的配置功能,然後就會讓你進入到 page 的配置頁面中。在這個頁面中,你可以配置針對你倉庫需要使用的...