擁有WordPress網站的任何人都會在某個時候遇到需要更改某些代碼的情況。 這並不是說您應該是一名Web開發人員，像專業人士一樣編寫JavaScript和PHP。 更有可能的是，您將需要修改HTML和基本CSS，無論是否是WordPress，任何網頁的基礎知識。
我們提供了關於最常見和 您將需要的適合初學者的HTML代碼。 看看並繼續閱讀。 這次，我們希望向您介紹一些最基本的CSS片段和想法，這些內容將幫助您調整網站的外觀和行為，使其完全符合您的期望。
1.選擇器，類和ID
在CSS中，一切的基礎是選擇器。 簡而言之，它是一個縮寫，告訴代碼目標是什麼。 您可以使用p {}定位網站上所有單獨的段落。 （任何適用於選擇器的代碼都放在花括弧之間。）在許多情況下，這些元素選擇器將與構建網頁所用的HTML標籤對齊（例如p {}定位
或h2 {}和< h2>）。
之後，您便有了課程。 這些是您（或主題/ WP本身）定義的選擇器的特定類型。 如果只想將帖子的H1標題作為目標，則可以使用.post-title {}。 CSS類選擇器由選擇器本身前面的點/句點表示。 這些用於定位整個站點的元素，但不作為基礎元素（例如簡單的H1）。 請注意，基本選擇器沒有點或其他指示符，這意味著它們是基本HTML。
CSS中的ID與類完全相同。 除了兩個小差異。 它們由選擇器前面的＃表示，並為需要特殊樣式的元素的單個特定實例（或有限數量的實例）命名。 例如＃email-subscribe-about-page {}或＃email-subscribe-after-post {}。 這些ID表示，他們不是在選擇特定類型的元素，而是自己選擇單個元素。
p {顏色：紅色； } .class {color：white; } #id {color：blue; }
其他選擇器
由於我們正在討論CSS基礎知識，因此我們不會深入探討更複雜的選擇器，但是它們確實存在。 您還可以定位僅在鏈接懸停時適用的所謂的偽類。 或者是一個屬性選擇器，該選擇器將僅針對附加了特定參數的元素。 另外，您可以使用p :: after和img :: before使CSS相對於元素的位置。
這些可能難以置信的先進性和複雜性，因此對於學習基礎知識而言，您不必擔心這些。 但是，我們確實希望您知道與文檔進行交互的更多特定方法。
2.冒號和分號
上面我們提到，所有CSS代碼都在花括弧之間。 但是，在這些花括弧內，每行定製必須以分號（;）結尾。 這向瀏覽器指示特定樣式已完成。 除可讀性外，CSS的間距無關緊要，但是分號本身是不可協商的。
同樣，在實際CSS樣式和值之間，放置一個常規冒號（:)。 同樣，這裡的間距一點也不重要。 您可以在其一側有空格，既可以有空格，也可以沒有，而且CSS仍會呈現。
請注意，儘管您可以保留這些空格，但通常不應這樣做。 但是，大多數網站和主題都提供CSS 縮小，無論如何都將刪除所有空格。
3. CSS注釋
如果需要在CSS代碼中包含文檔，則可以使用注釋來完成。 CSS注釋使用/ *和* /符號打開和關閉。 注釋您的代碼 這不僅對您以後返回CSS至關重要，對以後的開發人員也很重要。 通常，CSS注釋用於指示特定代碼段的功能。
您可以在上面看到該代碼僅說明了下一個代碼片段的功能。 繼續執行此操作非常重要，因為隨著時間的推移，您的CSS文件會變得非常複雜。
/ *這就是CSS注釋的樣子* / img {display：none; } 4.！重要
很難誇大！important標籤對於CSS的重要性。 雙關打算。 這是最常用的元素之一 CSS，但它也是最被濫用和過度使用的元素之一。
您會看到！important聲明它所在的行將覆蓋該選擇器的任何其他樣式。 樣式表中的任何位置。 因此，如果要確保特定元素始終具有特定顏色，則可以使用！important來實現。 請注意，整個！important標記位於該值和分號之間，而不是在該位置之後。
＃author-name {color：red！important; }＃author-name {color：blue; } 5.顯示：無；
對於新手來說，這個特定的CSS代碼段是最重要的代碼段之一。 它所做的只是使您所針對的任何元素都消失了。 例如，如果您需要一個頁面沒有標題菜單，則只需將以下代碼放入：
使用幾乎出現在每個頁面上的類進行此操作可以將其完全從站點中刪除。 因此，您需要注意將其應用於什麼。
您可以在特定的WordPress帖子或頁面上使用此功能，以從帖子本身中刪除單個元素，例如元數據。 在Divi中，您可以使用以下代碼將單個博客模塊自定義為不包含帖子摘錄：
.home-page-blog .post-content {display：none; } 6.可見性：隱藏；
簡短地說，您也可以使用可視性：hidden; CSS從屏幕上刪除一個元素。 請記住，此顯示與display：none;之間沒有區別。 在您的代碼中。
顯示;無; 代碼將完全從頁面中刪除該元素。 瀏覽器將完全不渲染該元素，因為它已被完全刪除。 具有可見性：隱藏； 元素仍會呈現並載入到頁面中，但它是不可見的。 對於所有功能目的，它仍然存在。 用戶只是看不到它。
因此，通常僅在需要該功能但不希望其顯示時才使用此功能。 就像跟蹤像素或其他會與屏幕上其他元素互動的片段一樣。
＃code-module {可見性：隱藏； } 7.保證金和填充
初次使用CSS的人誤解了邊距和填充。 乍一看它們是相同的，但是一旦您深入研究，就會發現它們完全不同。
邊距是元素周圍的空間。 它是不可見和透明的，甚至可以是負面的。 左邊距較大會將該元素向右推。 然後，較大的頂部邊距將元素推向底部。 負邊距則相反。 例如，負的上邊距將拉高元素。
然後，填充將緩衝元素的大小。 左側的填充將使元素的背景向左延伸。 它本質上是在增加其身體質量。 就像在寒冷的天氣里增加第二件毛衣一樣。 您的身體得到更多填充。 你比以前厚。 這也是CSS中填充的工作方式，因此，您不能使用負填充。
當將其用作代碼時，您可以使用以下默認邊距：15px； 或padding：1vw; 在選擇器周圍保持均勻的間距。 或者，您可以使用上邊距，左上邊距，右上邊距或底部下邊距僅影響該邊，並且每個邊都有不同的級別。 填充也同樣，左填充，等等。
h2 {margin-bottom：25px; padding-left：15vh; } 8.著色元素
從創建網站的第一天開始，更改各種元素的顏色就是其中之一。 在CSS中，您可以通過兩種方式定義顏色。
主要方法是使用其6位十六進位代碼：例如，＃ffffff表示白色，＃000000表示黑色。 您可以使用十六進位代碼定義任何RGB顏色，如果您不知道它們，請不要擔心。 大量的網站和工具 存在以幫助這一點。
第二種方法是使用預定義的顏色詞。 基本顏色（例如藍色，黑色和紅色）是預定義的，您可以使用它們而不必記住任何十六進位代碼。 但是，如果您不需要主要音調，則最好使用十六進位代碼。
使用顏色代碼
在實際使用顏色代碼方面，有多種方法。 對於任何需要更改的文本，只需使用color：#ffffff; 並且該選擇器中的所有文本都會更改。 您可以對帶有顏色的標題標題（例如H1和H2）執行相同的操作。
p {color：white; 背景顏色：＃000; } h3 {背景：綠色； 邊框：＃110011； }
更改諸如background-color：red; 或背景：綠色； 一個元素同樣容易。 添加顏色值。 您還可以使用color：＃000; 選擇器的值，例如a：hover，當它們懸停時會改變鏈接的顏色。 甚至邊框：藍色； 在想要的任何元素周圍放置彩色邊緣。
總結CSS基礎
CSS可能是壓倒性的。 除了交換顏色和顯示/隱藏元素之外，您還可以做更多的事情。 但是，如果您只是學習CSS以及如何通過代碼來操作網站，則對這些特定的基礎知識進行內部化將使您輕鬆閱讀和調整代碼，即使您以前從未打開過代碼編輯器也是如此。
您在網站上經常使用的一些基本CSS是什麼？
文章特色圖片由darkwark / shutterstock.com