網頁設計

了解CSS繼承的含義以及其重要性 當在CSS中的選擇器上設置一些屬性時，這些屬性會被該選擇器的所有子元素繼承。 我說的是一些，因為並不是所有的屬性都表現出這種行為。 這是因為有些屬性被繼承是有意義的。這幫助我們更簡潔地撰寫CSS，因為我們不需要在每個子元素上再次明確設置這些屬性。 而其他一些屬性則更有意義不被繼承。 想想字體：您不需要將 font-family 應用於您網頁的每個標籤。您只需設置 body 標籤的字體，每個子元素都會繼承它和其他屬性。 另一方面，background-color 屬性被繼承很少有意義。 可繼承的屬性 以下是一個可繼承屬性的列表。該列表並不全面，但這些規則通常是您會使用到的最流行的： border-collapse border-spacing caption-side color cursor direction empty-cells font-family font-size font-style font-variant font-weight font-size-adjust font-stretch font letter-spacing line-height list-style-image list-style-position list-style-type list-style orphans quotes tab-size text-align text-align-last text-decoration-color text-indent text-justify text-shadow text-transform visibility white-space widows word-break word-spacing 這些資訊取自這篇來自Sitepoint的文章。 強制屬性繼承 如果您有一個默認情況下不繼承的屬性，但在子元素中您希望它繼承，您可以將屬性值設置為特殊關鍵字inherit。 例如： body { background-color: yellow; } p { background-color: inherit; } 強制屬性不繼承 相反，您可能會有一個被繼承的屬性，但您希望它不被繼承。 您可以使用revert關鍵字將其還原。在這種情況下，該值會還原為瀏覽器在其默認樣式表中為其提供的原始值。 在實踐中，這很少被使用，大部分情況下您只需設置另一個值來覆蓋那個繼承的值。 其他特殊值 除了剛才提到的inherit和revert特殊關鍵字之外，您還可以將任何屬性設置為：...

了解如何使用CSS屬性user-select來禁用文字選擇功能。 預設情況下，瀏覽器允許我們使用鍵盤或滑鼠來選擇網頁中的文字。例如，在Mac上可以使用cmd-A組合鍵。 那麼如何禁用這個功能，使得我們的網頁更像是一個應用程式，而不是一個文件呢？ 使用user-select: none; CSS屬性即可實現。 根據https://caniuse.com/#feat=user-select-none的資訊，需要使用瀏覽器前綴來實現兼容性： -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 有時，我會通過在body元素上應用user-select: none;來使整個應用程式介面都無法選擇文字，然後可以在特定元素上重新啟用文字選擇，使用以下代碼： user-select: text;