JavaWeb學習筆記——css
阿新 • • 發佈：2020-12-18
css
一般用法
- html與css結合的第一種方式：
在標籤的 style 屬性上設定"key：value value；"，修改標籤樣式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html與css結合的第一種方式</title>
</head>
<body>
<!--
需求 1：分別定義兩個 div、span 標籤，分別修改每個 div 標籤的樣式為：邊框 1 個畫素，實線，紅色。
html與css結合的第一種方式：
在標籤的 style 屬性上設定”key:value value;”，修改標籤樣式。
--> - html與css結合的第二種方式：
在 head標籤中，使用 style標籤來定義各種自己需要的css樣式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html與css結合的第二種方式</title>
<!-- style標籤專門用來定義css樣式 -->
<style type="text/css">
/*注意：style標籤內都屬於CSS語言，要使用這種註釋*/ - 把 css樣式寫成一個單獨的 css檔案，再通過 link標籤引入。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html與css結合的第三種方式</title>
<!-- link標籤專門用來引入css樣式程式碼 -->
<link rel="stylesheet" type="text/css" href="03style.css">
</head>
<body>
<!--
把 css樣式寫成一個單獨的 css檔案，再通過 link標籤引入即可複用。
使用 html的 <link rel="stylesheet" type="text/css" href="./styles.css" /> 標籤匯入 css樣式檔案。
-->
<div>div 標籤 1</div>
<div>div 標籤 2</div>
<span>span 標籤 1</span>
<span>span 標籤 2</span>
</body>
</html>
03style.css
@charset "UTF-8";
/*
需求 1：分別定義兩個 div、span 標籤，分別修改每個 div 標籤的樣式為：邊框 1 個畫素，實線，紅色。
*/
div {
border: 1px solid red;
}
span {
border: 1px solid blue;
}
標籤名選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.標籤選擇器Insert title here</title>
<link rel="stylesheet" type="text/css" href="2.標籤名選擇器.css">
</head>
<body>
<!--
需求 1：在所有 div 標籤上修改字型顏色為藍色，字型大小 30 個畫素。邊框為 1 畫素黃色實線。
並且修改所有 span 標籤的字型顏色為黃色，字型大小 20 個畫素。邊框為 5 畫素藍色虛線。
-->
<div>div 標籤 1</div>
<div>div 標籤 2</div>
<span>span 標籤 1</span>
<span>span 標籤 2</span>
</body>
</html>
2.標籤名選擇器.css
@charset "UTF-8";
/*
標籤名選擇器，可以決定哪些標籤使用這個樣式。
標籤名選擇器的格式是：
標籤名 {
屬性：值;
}
需求 1：在所有 div 標籤上修改字型顏色為藍色，字型大小 30 個畫素。邊框為 1 畫素黃色實線。
並且修改所有 span 標籤的字型顏色為紅色，字型大小 20 個畫素。邊框為 5 畫素藍色虛線。
*/
div {
color: blue;
font-size: 30px;
border: 1px yellow solid;
}
span {
color: red;
font-size: 20px;
border: 5px blue dashed;
}
id選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.id選擇器</title>
<link rel="stylesheet" type="text/css" href="3.id選擇器.css">
</head>
<body>
<!--
id選擇器，可以讓我們通過 id屬性選擇性的去使用這個樣式。
需求 1：分別定義兩個 div 標籤，
第一個 div 標籤定義 id 為 id001 ，然後根據 id 屬性定義 css 樣式修改字型顏色為藍色，字型大小 30 個畫素。邊框為 1 畫素綠色實線。
第二個 div 標籤定義 id 為 id002 ，然後根據 id 屬性定義 css 樣式 修改的字型顏色為紅色，字型大小 20 個畫素。邊框為 5 畫素藍色點線。
-->
<div id="id001">div 標籤 1</div>
<div id="id002">div 標籤 2</div>
</body>
</html>
3.id選擇器.css
@charset "UTF-8";
/*
id選擇器，可以讓我們通過 id屬性選擇性的去使用這個樣式。
id 選擇器的格式是：
#id值 {
屬性：值;
}
需求 1：分別定義兩個 div 標籤，
第一個 div 標籤定義 id 為 id001 ，然後根據 id 屬性定義 css 樣式修改字型顏色為藍色，字型大小 30 個畫素。邊框為 1 畫素綠色實線。
第二個 div 標籤定義 id 為 id002 ，然後根據 id 屬性定義 css 樣式 修改的字型顏色為紅色，字型大小 20 個畫素。邊框為 5 畫素藍色點線。
*/
#id001 {
color: blue;
font-size: 30px;
border: 1px green solid;
}
#id002 {
color: red;
font-size: 20px;
border: 5px blue dotted;
}
class選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="4.class選擇器.css">
</head>
<body>
<!--
class型別選擇器，可以通過 class屬性有效的選擇性地去使用這個樣式。
class型別選擇器的格式是：
.class屬性值{
屬性：值;
}
需求 1：修改 class 屬性值為 class01 的 span 或 div 標籤，字型顏色為藍色，字型大小 30 個畫素。邊框為 1 畫素黃色實線。
需求 2：修改 class 屬性值為 class02 的 div 標籤，字型顏色為灰色，字型大小 26 個畫素。邊框為 1 畫素紅色實線。
-->
<div class="class01">div 標籤 class01</div>
<div class="class02">div 標籤</div>
<span class="class01">span 標籤 class01</span>
<span>span 標籤 2</span>
</body>
</html>
4.class選擇器.css
@charset "UTF-8";
/*
class型別選擇器，可以通過 class 屬性有效的選擇性地去使用這個樣式。
class 型別選擇器的格式是：
.class 屬性值{
屬性：值;
}
需求 1：修改 class 屬性值為 class01 的 span 或 div 標籤，字型顏色為藍色，字型大小 30 個畫素。邊框為 1 畫素黃色實線。
需求 2：修改 class 屬性值為 class02 的 div 標籤，字型顏色為灰色，字型大小 26 個畫素。邊框為 1 畫素紅色實線。
*/
.class01 {
color: blue;
font_size: 30px;
border: 1px yellow solid;
}
.class02 {
color: gray;
font-size: 26px;
border: 1px red solid;
}
組合選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="5.組合選擇器.css">
</head>
<body>
<!--
組合選擇器可以讓多個選擇器共用同一個 css樣式程式碼。
組合選擇器的格式是：
選擇器 1, 選擇器 2, ..., 選擇器 n{
屬性：值;
}
需求 1：修改 class="class01" 的 div 標籤 和 id="id01" 所有的 span 標籤，字型顏色為藍色，字型大小 20 個畫素。邊框為 1 畫素紅色實線。
-->
<div class="class01">div 標籤 class01</div> <br />
<span id="id01">span 標籤</span> <br />
<div>div 標籤</div> <br />
<div>div 標籤 id01</div> <br />
</body>
</html>
@charset "UTF-8";
/*
組合選擇器可以讓多個選擇器共用同一個 css樣式程式碼。
組合選擇器的格式是：
選擇器 1, 選擇器 2, ..., 選擇器 n{
屬性：值;
}
需求 1：修改 class="class01" 的 div標籤 和 id="id01" 所有的 span標籤，字型顏色為藍色，字型大小 20 個畫素。邊框為 1 畫素紅色實線。
*/
.class01, #id01 {
color: blue;
font-size: 20px;
border: 1px red solid;
}