前端快速入門學習3——CSS介紹與選擇器

1.概述

CSS全名是cascading style sheets,中文名層疊樣式表。
用于定義網頁樣式和布局的樣式表語言。
通過 CSS，你可以指定頁面中各個元素的顏色、字體、大小、間距、邊框、背景等樣式，從而實現更精確的頁面設計。

HTML與CSS的關系：HTML相當于毛坯房，CSS是裝修。

CSS 通常由選擇器、屬性和屬性值組成，多個規則可以組合在一起，以便同時應用多個樣式

選擇器的聲明中可以寫無數條屬性
聲明的每一行屬性，都需要以英文分號結尾;
聲明中的所有屬性和值都是以鍵值對這種形式出現的;

CSS三種導入方式：
1.內聯樣式（Inline Styles）
2.內部樣式表（Internal Stylessheet）
3.外部樣式表（External Stylesheet）
三種導入方式的優先級：內聯樣式>內部樣式表>外部樣式表
內聯樣式：

<head><link rel="stylesheet" href="style.css"><style>h2{color: red;font-size: 30px;}</style>
</head>
<body>
<h1 style="color: yellowgreen;">這是一個內聯樣式</h1>
<h2>二級標題標簽，應用內部樣式</h2>
<h3>三級標題標簽,使用外部樣式</h3>
</body>

style.css

h3{color: aqua;font-size: 20px;
}

效果：
在這里插入圖片描述

2.選擇器

選擇器是 CSS中的關鍵部分，它允許你針對特定元素或一組元素定義樣式

(1)元素選擇器

<head><style>h1{color: red;font-size: 30px;}</style>
</head>
<body>
<h1>這是一個元素選擇器</h1>
</body>

（2）類選擇器

<head><style>.highlight {color: red;font-size: 30px;}</style>
</head>
<body>
<h1 class="highlight">這是一個類選擇器</h1>
</body>

（3）id選擇器

<head><style>#unique {color: blue;font-size: 25px;}</style>
</head>
<body><h2 id="unique">這是一個ID選擇器</h2>
</body>

（4）通用選擇器

<head><style>* {font-family: KaiTi;font-size: 20px;color: green;}</style>
</head>
<body><h2 id="unique">這是一個ID選擇器</h2><p>這是一個簡單的HTML示例1。</p><p>這是一個簡單的HTML示例2。</p>
</body>

（5）子元素選擇器

<head><style>.father > .son {color: yellow;font-size: 20px;}</style>
</head>
<body><div class="father"><p class="son">這是一個子元素選擇器</p></div>
</body>

（6）后代選擇器

<head><style>.father .grandson {color: orange;font-size: 10px;}</style>
</head>
<body><div class="father"><p class="son">這是一個子元素選擇器</p><div><p class="grandson">這是一個后代選擇器</p></div>
</body>

（7）兄弟選擇器

<head><style>h3 + p {color: pink;font-size: 18px;}</style>
</head>
<body><p>這是一個普通的標簽</p><h3>這是相鄰兄弟選擇器示例</h3><p>這是另一個P標簽</p>
</body>

（8）偽類選擇器

偽類是用來添加一些選擇器的特殊效果。
如鏈接的不同狀態都可以以不同的方式顯示

a:link {color:#FF0000;} /* 未訪問的鏈接 */
a:visited {color:#00FF00;} /* 已訪問的鏈接 */
a:hover {color:#FF00FF;} /* 鼠標劃過鏈接 */
a:active {color:#0000FF;} /* 已選中的鏈接 */

注意：在CSS定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。

注意：在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。

注意：偽類的名稱不區分大小寫。

<head><style>#element:hover{background-color: lightblue;}</style>
</head>
<body><p id="element">這是一個偽類選擇器</p>
</body>

在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/76859.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/76859.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/76859.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！