碼上歡樂
相關內容    簡體    繁體

04-前端核心技術-CSS基礎屬性

本文轉載自   查看原文   2021-11-20 15:45   163    前端課件

第04章-前端核心技術-CSS基礎屬性

學習目標

  1. 了解CSS是什么

  2. 掌握CSS的簡單使用

  3. 掌握CSS樣式創建和引入的方法重點

  4. 掌握CSS背景的使用重點

  5. 掌握CSS文本的樣式重點

  6. 掌握CSS連接的樣式重點

CSS簡介

什么是 CSS

  • CSS 指層疊樣式表 (Cascading Style Sheets)
  • 定義如何顯示 HTML 元素
  • 多個樣式定義可層疊為一

CSS 語法

CSS 規則由兩個主要的部分構成：**選擇器**，以及一條或多條聲明:

image-20210901174753526

  • 選擇器通常是您需要改變樣式的 HTML元素。
  • 每條聲明由一個屬性和一個值組成。
  • 屬性（property）是您希望設置的樣式屬性（style attribute）。
  • 每個屬性有一個值。屬性和值被冒號分開。

CSS 創建（引入方式）

插入樣式表的方法有三種:

  1. 外部樣式表(External style sheet)
  2. 內部樣式表(Internal style sheet)
  3. 內聯樣式(Inline style)

外部樣式表

外部樣式需要創建獨立的css文件，並且使用link標簽引入，推薦使用

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

內部樣式表

內部樣式直接在html文件內部使用style標簽引入，通常放在head標簽中

1
2
3
4
5
6
7
<head>
	<style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> 
</head>

內聯樣式

內聯樣式直接在某個標簽上通過style屬性的引入，必須依賴與某個標簽，不通用，但是優先級最高

<p style="color:sienna;margin-left:20px">這是一個段落。</p>

多重樣式優先級

（內聯樣式）> （內部樣式）>（外部樣式）> 瀏覽器默認樣式

注意：**如果外部樣式放在內部樣式的后面，則外部樣式將覆蓋內部樣式。**

CSS簡單選擇器

選擇器用於選擇哪些元素

元素選擇器（選一種元素）

1
2
3
p { text-align:center; }

設置HTML文檔中所以 p 標簽的文字居中對齊。

案例01

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> p{ color: red; } </style>
	</head>
	<body>
		<p>前端學習之CSS 元素選擇器</p>
		<p>前端學習之CSS 元素選擇器</p>
		<p>前端學習之CSS 元素選擇器</p>
	</body>
</html>

所有p標簽，無論在哪里都會被修改為紅色字體

效果展示

image-20210901175557124

id 選擇器（選一個）

id 選擇器可以為標有特定id 的 HTML 元素指定特定的樣式。

HTML元素以id屬性來設置id選擇器。CSS 中 id 選擇器以 # 來定義。

1
2
3
4
css
#abc { text-align:center; }

案例02

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> #text{ color: red; } </style>
	</head>
	<body>
		<div id="text">前端學習之CSS id選擇器</div>
	</body>
</html>

ID屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。

效果展示

image-20210901175743301

class 選擇器（選多個）

class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class可以在多個元素中使用。

class 選擇器在HTML中以class屬性表示，在 CSS中，類選擇器以一個點.號顯示：

在以下的例子中，所有擁有 center 類的 HTML 元素均為居中。

案例03

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> .text{ color: red; } </style>
	</head>
	<body>
		<div class="text">
			前端學習之CSS class選擇器
		</div>
		<div class="text">
			第二個DIV
		</div>
		<div class="text">
			三個DIV都是同一個text類，所以文字都是紅色
		</div>
	</body>
</html>

類名的第一個字符不能使用數字！它無法在 Mozilla 或 Firefox 中起作用。

效果展示

image-20210901175818799

三種選擇器優先級

id選擇器（選一個） > class選擇器（選多個） > 元素選擇器 （選一種元素）

CSS 尺寸

尺寸主要指寬度和高度屬性

屬性 描述
height 設置元素的高度。
max-height 設置元素的最大高度。
max-width 設置元素的最大寬度。
min-height 設置元素的最小高度。
min-width 設置元素的最小寬度。
width 設置元素的寬度。

注：width: 200px; margin: auto;可以讓 區塊元素 居中。

注：給上級元素添加text-align: center屬性可以讓 內聯元素 居中，因為內聯元素等同於文字處理。

案例04

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> .text1{ width: 200px; height: 50px; background-color: #DC143C; } </style>
	</head>
	<body>
		<div class="text1">
			寬度為200px|高度為50px
		</div>
	</body>
</html>

效果展示

image-20210901180355250

CSS 背景顏色

屬性 描述
background-color 設置背景顏色（red、#00aaff、#0af、rgb(0,255,0)、rgba(0,255,0,1)、hsl(360,10%,1%)）

rgb

RGB是從顏色發光的原理來設計定的，通俗點說它的顏色混合方式就好像有紅、綠、藍三盞燈，當它們的光相互疊合的時候，色彩相混，而亮度卻等於三者亮度之總和，越混合亮度越高，即加法混合。

  • 紅色（R）
  • 綠色（G）
  • 藍色（B）

hsl

HSL 即色相、飽和度、亮度（英語：Hue, Saturation, Lightness）。

  • 色相（H）是色彩的基本屬性，就是平常所說的顏色名稱，如紅色、黃色等。
  • 飽和度（S）是指色彩的純度，越高色彩越純，低則逐漸變灰，取 0-100% 的數值。
  • 亮度（L），取 0-100%，增加亮度，顏色會向白色變化；減少亮度，顏色會向黑色變化。
值 描述
hue - 色相 定義色相 (0 到 360) - 0 (或 360) 為紅色, 120 為綠色, 240 為藍色
saturation - 飽和度 定義飽和度; 0% 為灰色， 100% 全色
lightness - 亮度 定義亮度 0% 為暗, 50% 為普通, 100% 為白

案例05

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> #bg{ height: 200px; /* 1.顏色單詞 */ background-color: red; /* 2.三位16進制 */ background-color: #F56; /* 3.六位16進制 */ background-color: #0000FF; /* 4.rgb(255,255,255) */ background-color: rgb(10,255,125); /* 5.rgba(255,255,255,1) */ background-color: rgba(10,255,125,1); /* 6.hsl(360,100%,100%) */ background-color: hsl(0,100%,50%); /* 7.hsla(360,100%,100%,1) */ background-color: hsla(0,100%,50%,0.1); } </style>
	</head>
	<body>
		<div id="bg"></div>
	</body>
</html>

效果展示

image-20210901181614524

CSS 背景圖片

背景圖片包括多個屬性，可以分別設置也可以合並設置

屬性 描述
background-color 設置背景顏色（red、#00aaff、#0af、rgb(0,255,0)、rgba(0,255,0,1)、hsl(360,10%,1%)）
background-image 設置背景圖片（url(img/logo.png)）
background-repeat 設置背景圖片是否重復（no-repeat、repeat）
background-attachment 設置背景圖片是否固定（scroll、fixed）
background-position 設置背景圖片的位置（left、right、top、bottom、center、%、px）
background-size（不可合並） 設置背景的大小（px、%、cover、contain）

注意：background屬性設置多個背景時，用逗號分隔開來。

background-size屬性

值 描述
像素 設置背景圖片高度和寬度。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為 auto(自動)
百分比 將計算相對於背景定位區域的百分比。第一個值設置寬度，第二個值設置的高度。如果只給出一個值，第二個是設置為“auto(自動)”
cover 此時會保持圖像的縱橫比並將圖像縮放成將完全覆蓋背景定位區域的最小大小。
contain 此時會保持圖像的縱橫比並將圖像縮放成將適合背景定位區域的最大大小。

如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css"> #bg{ background-color: #8B0000; background-color: url('image/banner.jpg'); background-repeat: no-repeat repeat; background-attachment: fixed; background-position: center top; } </style>
或者
<style type="text/css"> #bg{ background: #ffffff url('banner.jpg') no-repeat fixed center top; } </style>

案例06

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> #bg{ background: #8B0000 url('image/banner.jpg') no-repeat fixed center top; background-size: 80% 200px; } </style>
	</head>
	<body>
		<div id="bg">
			<br/><br/><br/><br/><br/>
			哈哈
			<br/><br/><br/><br/><br/>
		</div>
	</body>
</html>

效果展示

image-20210926090252861

CSS 文本

文本屬性有很多，常用的如下，描述中括號內的內容需要重點記憶

屬性 描述
color 設置文本顏色（純文字）
direction 設置文本方向（ltr：[left to right]；rtl）
unicode-bidi 設置文本是否被重寫（bidi-override）
letter-spacing 設置字符間距 （像素單位px，百分比單位）
word-spacing 設置字（單詞間的空格）間距（像素單位px，百分比單位）
white-space 設置元素中空白的處理方式（pre：保留空格和換行；pre-line：只保留換行；nowrap：不保留空格和換行；normal：默認）
vertical-align 設置元素的垂直對齊（表格、圖片、內聯元素）（top、middle、bottom）
text-align 水平對齊元素中的文本（內聯子元素）（left、right、center）
text-decoration 向文本添加上、中、下划線（overline、line-through、underline、none）
text-indent 縮進元素中文本的首行（像素單位px，百分比單位）
text-transform 控制元素中的字母（lowercase、uppercase）

案例07

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>

<span class="hljs-tag">&lt;<span class="hljs-title">head</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">title</span>&gt;</span>HTML CSS樣式<span class="hljs-tag">&lt;/<span class="hljs-title">title</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>&gt;</span><span class="css">
		<span class="hljs-id">#direction</span><span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">direction</span>:<span class="hljs-value"> rtl</span></span>;<span class="hljs-comment">/*direction和unicode-bidi必須同時使用*/</span>
			<span class="hljs-rule"><span class="hljs-attribute">unicode-bidi</span>:<span class="hljs-value"> bidi-override</span></span>;<span class="hljs-comment">/*只有使用該屬性重寫文字，文字方向才會改變*/</span>
			<span class="hljs-rule"><span class="hljs-attribute">letter-spacing</span>:<span class="hljs-value"> <span class="hljs-number">10px</span></span></span>;<span class="hljs-comment">/*字母間距10像素*/</span>
			<span class="hljs-rule"><span class="hljs-attribute">word-spacing</span>:<span class="hljs-value"> <span class="hljs-number">10px</span></span></span>;<span class="hljs-comment">/*單詞間距10像素*/</span>
			<span class="hljs-rule"><span class="hljs-attribute">white-space</span>:<span class="hljs-value"> pre-wrap</span></span>;<span class="hljs-comment">/*控制是否正常顯示空格和換行*/</span>
			<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> blueviolet</span></span>;
		<span class="hljs-rule">}</span></span>
		<span class="hljs-id">#direction</span> <span class="hljs-tag">span</span><span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> crimson</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">18px</span></span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">text-decoration</span>:<span class="hljs-value"> line-through</span></span>;
		<span class="hljs-rule">}</span></span>
	</span><span class="hljs-tag">&lt;/<span class="hljs-title">style</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"direction"</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-title">span</span>&gt;</span>天地不仁<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span> Hello world
	<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>



</html>

效果展示

image-20210901182419430

CSS3 文字陰影

語法：

text-shadow: h-shadow v-shadow blur color;

注意： text-shadow屬性設置多重陰影文本，用逗號分隔開來。

屬性值 描述
h-shadow 必需。水平陰影的位置。允許負值。
v-shadow 必需。垂直陰影的位置。允許負值。
blur 可選。模糊的距離。
color 可選。陰影的顏色。

案例08

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML CSS樣式</title>
		<style type="text/css"> #content { 
			<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#ffffff</span> <span class="hljs-function">url</span>(<span class="hljs-string">'bg.jpg'</span>) no-repeat fixed <span class="hljs-number">100%</span> <span class="hljs-number">100%</span></span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">background-size</span>:<span class="hljs-value"> <span class="hljs-number">100%</span> <span class="hljs-number">100%</span></span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">word-break</span>:<span class="hljs-value"> break-word</span></span>;<span class="hljs-comment">/*文字自動換行*/</span>
		<span class="hljs-rule">}</span></span>
		<span class="hljs-tag">h1</span> <span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-function">rgba</span>(<span class="hljs-number">5</span>, <span class="hljs-number">66</span>, <span class="hljs-number">77</span>, <span class="hljs-number">0.8</span>)</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> white</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">text-shadow</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#FF0000</span> <span class="hljs-number">5px</span> <span class="hljs-number">5px</span> <span class="hljs-number">2px</span></span></span>;
		<span class="hljs-rule">}</span></span>
		<span class="hljs-tag">h4</span> <span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-function">rgba</span>(<span class="hljs-number">55</span>, <span class="hljs-number">66</span>, <span class="hljs-number">5</span>, <span class="hljs-number">0.6</span>)</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> wheat</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;
		<span class="hljs-rule">}</span></span>
		<span class="hljs-class">.desc</span> <span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-function">rgba</span>(<span class="hljs-number">55</span>, <span class="hljs-number">123</span>, <span class="hljs-number">77</span>, <span class="hljs-number">0.7</span>)</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> white</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;
		<span class="hljs-rule">}</span></span>
		<span class="hljs-id">#content</span> <span class="hljs-class">.pre</span> <span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">white-space</span>:<span class="hljs-value"> pre-line</span></span>;
		<span class="hljs-rule">}</span></span>
	</span><span class="hljs-tag">&lt;/<span class="hljs-title">style</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"content"</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-title">h1</span>&gt;</span>HTML CSS樣式<span class="hljs-tag">&lt;/<span class="hljs-title">h1</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>第一部分 Web前端入門必備<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"desc"</span>&gt;</span>本階段主要學習Web前端開發的基礎技能，包括HTML5、CSS3、JavaScript，學習掌握Web網頁的基本布局、排版、特效、動畫等。HTML是目前最流行的網頁制作語言。CSS樣式表在網頁設計中變得越來越重要。JavaScript是動態腳本語言，是實現網頁動態效果的核心。三者搭配，網頁必成。<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"pre"</span>&gt;</span>
			01、HTML 基本標簽及W3C標准
			02、HTML 語法|標簽|屬性
			03、HTML 文本格式化|實體字符
			04、HTML 圖像|表格|列表|超鏈接
			05、HTML 框架|表單|表單元素
			06、HTML5音視頻多媒體
			07、CSS 基礎語法|簡單選擇器
			08、CSS 背景|文本|字體
			09、CSS 列表|超鏈接|表格樣式
			10、CSS 盒子模型|邊框|輪廓|邊距
			11、CSS 尺寸|定位|顯示|浮動
			12、CSS 偽類|復雜選擇器
			13、JS  基本語法|變量|運算|選擇結構|循環結構
			14、JS  函數|對象|正則表達式|內置對象
			15、JS  DOM對象|BOM對象|瀏覽器適配
			16、實戰：制作天貓商城網頁
		<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
	<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>

 
</html>

效果展示

image-20210926090339893

CSS 字體

CSS字體屬性定義字體，加粗，大小，文字樣式。

Property 描述
font 在一個聲明中設置所有的字體屬性
font-family 指定文本的字體系列
font-size/line-height 指定文本的字體大小
font-style 指定文本的字體斜體（斜體：italic）
font-weight 指定字體的粗細（100：不加粗；900：加粗【bold】）。
font-variant 以小型大寫字體或者正常字體顯示文本。（small-caps）

font屬性合並寫法的順序：

  1. font-style

  2. font-variant

  3. font-weight

  4. font-size/line-height

  5. font-family

如果行高和高度一樣，可以簡單的讓單行文字垂直居中。

1
2
height:50px;
line-height:50px;

字體系列

font-family 屬性應該設置幾個字體名稱作為一種“后備”機制，如果瀏覽器不支持第一種字體，他將嘗試下一種字體。

注意: 如果字體系列的名稱超過一個字，它必須用引號，如Font Family：“宋體”。多個字體系列是用一個逗號分隔指明：

1
2
3
p{ font-family:"楷體","微軟雅黑"; }

CSS單位

絕對單位：（像素單位）

設置一個指定大小的文本，不允許用戶在所有瀏覽器中改變文本大小，確定了輸出的物理尺寸時絕對大小很有用

1
2
3
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

相對大小：(可變單位)

  1. Em**：相對於**直接上級的元素的字體大小來設置大小
  2. Rem：相對於html的元素字體大小來設置大小
  3. 百分比：相對於元素自身的大小來設置大小

  4. vw : 1vw 等於視口寬度的1%

  5. vh : 1vh 等於視口高度的1%

  6. vmin : 選取 vw 和 vh 中最小的那個

  7. vmax : 選取 vw 和 vh 中最大的那個

瀏覽器默認大小和普通文本段落一樣，是16像素（16px=1em）。

如果上級元素的字體大小為20px，則（20px=1em）。

1
2
3
4
css
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

上面的例子，em的文字大小是與前面的例子中像素一樣。

不過，如果使用 em 單位，則可以在所有瀏覽器中調整文本大小。

CSS 超鏈接屬性

鏈接的樣式，可以用任何CSS屬性（如顏色，字體，背景等）。特別的鏈接，可以有不同的樣式，這取決於他們是什么狀態。

這四個鏈接狀態是：

  • a:link - 正常，未訪問過的鏈接

  • a:visited - 用戶已訪問過的鏈接

  • a:hover - 當用戶鼠標放在鏈接上時

  • a:active - 鏈接被點擊的那一刻

注意： a:hover 必須在 a:link 和 a:visited 之后寫，需要嚴格按順序才能看到效果。

注意： a:active 必須在 a:hover 之后。

案例09

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style> a:link { color: #000000; } /* 未訪問鏈接*/ a:visited { color: #00FF00; } /* 已訪問鏈接 */ a:hover { color: #FF00FF; } /* 鼠標移動到鏈接上 */ a:active { color: #0000FF; } /* 鼠標點擊時 */ </style>
	</head>
	<body>
		<a href="" target="_blank">這是一個鏈接</a>
	</body>
	</body>
</html>

效果展示

image-20210901183514940

CSS后代選擇器

后代選擇器（descendant selector）又稱為包含選擇器。使用符合空格

后代選擇器可以選擇作為某元素后代的元素。

舉例來說，如果您希望只對 ul 元素中的 li元素應用樣式，而不對ol元素中的li元素應用樣式，可以這樣寫：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css"> ul li { line-height: 50px; } </style>
	</head>
	<body>
		<ul>
			<li><a href="">系統管理</a></li>
			<li><a href="">會員管理</a></li>
		</ul>
	</body>
</html>

作業

制作如下藝術字效果

image-20210901183821124

制作如下按鈕效果

image-20210901183842376

制作如下按鈕button效果

要求實現hover和active狀態的樣式

image-20210901183905654

實現如下菜單效果

要求實現hover和active狀態的樣式，整體寬度為200px

一級菜單：

背景顏色rgba(0,0,0,0.2)

​ Hover:背景rgba(255,0,0,0.8)

​ Active：背景rgba(0,0,0,0.3)

二級菜單

背景顏色rgba(0,0,0,0.1)

​ Hover:背景rgba(0,0,255,0.8)

​ Active：背景rgba(0,0,0,0.3)

分割線：rgba(0,0,0,0.3)

image-20210901183933603

實現如下進度條

要求：顏色分別是紅綠藍，進度顏色透明0.6

image-20210901184002542

實現如下效果

要求:

hover:整體背景為rgba(0,0,255,0.8);

上面文字為顏色為：wheat

下面文字為顏色為：white

image-20210926090418749

實現如下通訊錄界面

要求：整個html，body最大寬度為750px

image-20210901184050234

    </article>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 05-前端核心技術-CSS排版屬性 06-前端核心技術-CSS布局屬性 07-前端核心技術-CSS動畫特效 01-前端核心技術-HTML基礎 09-前端核心技術-JavaScript基礎語法 《CSS核心技術詳解》 Web前端三大核心技術之HTML 11-前端核心技術-JavaScript Redis核心技術與實戰(基礎部分) Spring 核心技術（1）
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM