CSS基礎

一、CSS簡介

CSS 的全稱是 Cascading Style Sheet（層疊樣式表），它主要用來控制網頁的樣式。
CSS 的選擇器區分大小寫，因此要謹慎使用大寫。
可以設置以下內容：
顏色 color、背景 background、字體 font、位置position、顯示 display、邊框 border、內邊距 padding、外邊距 margin、行高 line-height、裝飾 text-decoration、過渡 transtion、變化 transform、動畫 animation
使用 CSS 樣式主要有三種方式：

• 內聯樣式——你可以直接在 HTML 元素里使用style屬性。
• 內部樣式——你可以在style標簽里面聲明樣式規則。
• 外部樣式——你可以創建一個.css文件，然后在文件中編寫樣式規則，最后在文檔中引用該文件。

盡管前兩個方式也有人使用，但大部分開發人員更喜歡外部樣式表，因為它可以將樣式與元素分開，這提高了代碼的可讀性和重用性。
CSS 背后的思想是，通過選擇器來定位 DOM（文檔對象模型）的元素，然后將各種樣式規則應用在元素上，從而改變元素在頁面上的顯示方式。

二、更改文本的顏色

通過修改元素的style屬性的color值來改變文本顏色。

<h2 style="color: blue;">更改文本的顏色</h2>

行內style最好以;來結束。

三、使用元素選擇器來設置元素的樣式

行內樣式可以修改h2元素的顏色為紅色。

<h2 style="color: red;">h2紅色</h2>

當我們只需要改變元素的某個樣式時，行內樣式最簡單直觀。當我們需要同時改變元素的很多樣式時，層疊樣式表往往是一個更好的選擇。

在代碼的頂部，創建一個style聲明區域

<style> </style>

在style樣式聲明區域內，可以創建一個元素選擇器，應用于所有的h2元素。例如，如果你想所有h2元素變成紅色，可以添加下方的樣式規則：

<style>h2 {color: red;}//可以對某個元素設置樣式 </style>

注意，在每個元素的樣式聲明區域里，左右花括號（{和 }）一定要寫全。你需要確保所有樣式規則位于花括號之間，并且每條樣式規則都以分號結束。

四、使用 class 選擇器設置單個元素的樣式

CSS 的class具有可重用性，可應用于各種 HTML 元素。

<style>.blue-text {color: blue;} </style>

在<style>樣式聲明區域里，創建了一個名為blue-text的class選擇器。
可以將 CSSclass選擇器應用到一個HTML元素里。

<h2 class="blue-text">class選擇器</h2>

注意：在style樣式區域聲明里，class需以.開頭。而在 HTML 元素里，class屬性的前面不能添加.。

五、使用 class 選擇器設置多個元素的樣式

通過 CSS class 選擇器，多個 HTML 元素可以使用相同的 CSS 樣式規則。
如果有多個p元素，加class就有CSS樣式，不加就沒有。

謝謝你的堅持閱讀ovo喲，讓我們一起加油吖

總結

以上是生活随笔為你收集整理的CSS基础_Day01的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。