CSS入門

Khrushchefox發表於2024-10-21
CSS

CSS

層疊樣式表

樣式表 優點 缺點 使用情況 控制範圍
行內樣式表 書寫方便，權重高 沒有實現樣式和結構相分離 較少 控制一個標籤（少）
內部樣式表 部分結構和樣式相分離 沒有徹底分離 較多 控制一個頁面（中）
外部樣式表 完全實現結構和樣式相分離 需要引入 最多 控制整個站點（多） 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CssTest</title>
    <link rel="stylesheet" href="style_demo.css">
    <style>
      h2 {
        color: red;
      }
      p {
        color: blue;
        font-size: 64px;
      }
    </style>
  </head>
  <body>
    <h1 style="color: yellow;">內聯樣式</h1>
    <h2>內部樣式表</h2>
    <h3>外部樣式表</h3>
    <br><br>
    <p>內部樣式表</p>
    <p style="color: red;">內聯樣式</p>
  </body>
</html>

CSS匯入方式優先順序: 內聯樣式>內部樣式表>外部樣式表

選擇器

  • 元素選擇器
  • 類選擇器
.highlight {
  background-color: yellow;
}

<h1 class="highlight">highlight類一級標題</h1>
<h1>一級標題</h1>
  • ID選擇器
#header1 {
  background-color: yellow;
}

<h1 id="header1">header1一級標題</h1>
<h1>一級標題</h1>
  • 通用選擇器
* {
font-family: 'KaiTi';
}
  • 子元素選擇器和後代選擇器
div > .son {
  color: red;
}
div p {
  color: yellow;
}

<div>
  <h1>子元素選擇器示例</h1>
  <p class="son">子元素</p>
  <div>
    <h2>後代選擇器示例</h2>
    <p class="grandson">後代元素</p>
  </div>
</div>
  • 交集選擇器與並集選擇器
h1.important {color: red;
}
h2, p {color: green;}

<h1 class="important">交集選擇器</h1>
<h2>並集選擇器</h2>
<p>並集選擇器</p>
  • 相鄰兄弟選擇器
    可選擇緊接在另一元素後的元素，且二者有相同父元素
h1 + p {color: red;}

<p>文字</p>
<h1>標題</h1>
<p>文字</p>
  • 偽類選擇器
    • a:link 未訪問的連結
    • a:visited 已訪問的連結
    • a:hover 滑鼠移動到連結上
    • a:active 啟用的連結
a:link {color: lightcoral;}
a:visited {color: lightgray;}
a:hover {color: skyblue;}
a:active {color: lightpink;}

<a href="http://www.baidu.com">baidu</a>
<a href="http://www.x-zd.com">x-zd</a>

選擇器優先順序: ID>類>元素

常用屬性

文字字型

  • font-size
  • font-family
  • font-weight, 粗細
  • font-style, 傾斜

選擇器 { font: font-style font-weight font-size/line-height font-family;}

文字外觀

  • color
  • text-align
  • line-height, 行間距
  • text-decoration, 用於給連結修改裝飾效果
值 描述
none 預設。定義標準的文字。 取消下劃線（最常用）
underline 定義文字下的一條線。（常用）
overline 定義文字上的一條線。
line-through 定義穿過文字的一條線。

背景

  • background-color, 如果要設定背景, 元素必須有寬高
  • background-image : none | url(url)
  • background-repeat
引數 作用
repeat 背景影像在縱向和橫向上平鋪（預設的）
no-repeat 背景影像不平鋪
repeat-x 背景影像在橫向上平鋪
repeat-y 背景影像在縱向平鋪
  • background-position
引數 值
length 百分數 | 由浮點數字和單位識別符號組成的長度值
position top | center | bottom | left | center | right 方位名詞

background: 背景顏色 背景圖片地址 背景平鋪 背景位置;

  • background-size

相關文章