一文介紹 CSS 的定義方法-前端問答-PHP中文網

一文介紹 CSS 的定義方法

PHPz

發布： 2023-04-21 14:08:37

原創

1116 人瀏覽過

CSS (Cascading Style Sheets) 是一種用於網頁樣式設計的語言。它透過定義樣式來控制網頁的外觀和佈局。本文將介紹 CSS 的定義方法。

CSS 的定義

內部定義

在HTML 檔案中，可以在<head> 標籤中使用<style> 標籤來定義CSS 樣式，這樣的定義稱為內部樣式。

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

登入後複製

在這個例子中，我們定義了  元素的文字顏色為紅色。所有的 CSS 樣式都應該寫在 <style> 標籤中。

外部定義

在 HTML 檔案中，也可以使用外部樣式表。外部樣式表是一個包含 CSS 樣式的單獨文件，其後綴名為 .css。可以使用 <link> 標籤將其引入 HTML 檔案中。

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

登入後複製

此程式碼將外部樣式表 style.css 引入 HTML 文件中。 href 屬性指定了樣式表的位置。

行內定義

除了內部和外部定義樣式之外，還可以在 HTML 元素中行內定義樣式。這樣的定義方式稱為行內樣式。

<p style="color: red;">Hello World!</p>

登入後複製

在這個範例中，我們使用 style 屬性為  元素定義了顏色樣式。

CSS 的語法

CSS 的語法由選擇器、屬性和值所組成。我們可以使用選擇器來選擇某個頁面元素，然後為其設定屬性和值。

選擇器

選擇器是用來選擇元素的識別碼。以下是一些常見的選擇器類型：

標籤選擇器：選擇頁面中所有該標籤類型的元素，例如p、div、a。
類別選擇器：選擇頁面中具有相同類別的元素，如 .carousel。
ID 選擇器：選擇頁面中具有相同 ID 的元素，如 #header。
屬性選擇器：根據元素的屬性值來選擇元素，如 [type="text"] 選擇所有 type 值為 text 的元素。
偽類選擇器：對特定狀態的元素進行樣式設置，如 :hover、:active。

屬性和值

屬性是一個樣式的特定特徵，如顏色、字體大小、內邊距等等。值是應用在屬性上的具體樣式，如 red、12pt、20px 等等。

以下是一些常見的屬性和值：

color：設定文字顏色，如 color: red;。
font-family：設定字體系列，如 font-family: Arial, sans-serif;。
font-size：設定字體大小，如 font-size: 16px;。
background-color:設定背景顏色，如 background-color: #f0f0f0;。
border：設定邊框，如 border: 1px solid black;。
margin：設定元素外邊距，如 margin: 10px;。
padding：設定元素內邊距，如 padding: 10px;。
width：設定元素寬度，如 width: 100px;。
height：設定元素高度，如 height: 100px;。

CSS 的範例

以下範例示範如何設定ID 選擇器的顏色和寬度屬性：

<head>
  <style>
    #header {
      background-color: #333333;
      color: #ffffff;
      width: 100%;
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="header">
    <h1>Hello World!</h1>
  </div>
</body>

登入後複製

在這個範例中，我們為具有ID 為header 的元素設定了背景顏色、文字顏色、寬度和文字對齊。我們使用了標籤選擇器來選定標題元素 <h1>。