網頁Web-CSS-選擇器 (行內樣式、類別樣式、ID樣式、標籤樣式、串接樣式表)

  • 784
  • 0
  • Web
  • 2022-08-16

網頁Web-認識CSS篇

1.行內樣式

2.類別樣式(Class)

3.ID樣式(ID)

4.標籤樣式(<HTML>)

5.CSS套用優先權

串接樣式表

 

 

 


1.行內樣式
//html 設定背景顏色
<body bgcolor="gray">
...
</body>

//CSS 設定背景顏色
<body style="background-color:#96fed1">
...
</body>

 

//HTML設定文字顏色
<font color="green">綠Green</font><br>
<font color="#227700">天空</font><br>
<font size="5">文字大小</font><br>

<hr>
    
//CSS設定文字顏色
//也可以套用在空標籤
<span style="屬性1:值1;屬性2:值2"></span>

<p style="color:#227700">綠Green</p>
<span style="color:blue">天空</span><br>
<p style="font-size:30px;color:#67b735">文字大小</p><br>

自訂樣式表
類別class樣式
CSS行內樣式表寫法:
<p style="color:green">第1行文字</p>
<p style="color:green">第2行文字</p>
<p style="color:green">第3行文字</p>
<p style="color:green">第4行文字</p>
<p style="color:green">第5行文字</p>

 

現在有一個需求需要把綠色文字改成藍色文字,
如果要一次改這5行文字時,必須要改5次

<p style="color:blue">第1行文字</p>
<p style="color:blue">第2行文字</p>
<p style="color:blue">第3行文字</p>
<p style="color:blue">第4行文字</p>
<p style="color:blue">第5行文字</p>

那如果是一次要改50個地方,甚至一次要改100個地方,是不是開始覺得*********

像這種時候就要使用類別樣式,請繼續往下閱讀


2.類別樣式

1.建立類別樣式

<style>
.txtblue{
    color:blue;
}
</style>

2.套用類別樣式

<p class="txtblue">第1行文字</p>

這樣只要修改類別樣式裡的值所有被套用的類別會一起修改。

.txtblue{
    color:blue;
}

完整程式碼:

<head>
<title>123</title>

<style>
.txtblue{
    color:blue;
}
</style>

</head>
<body>	

	套用類別樣式
	<p class="txtblue">第1行文字</p>
	<p class="txtblue">第2行文字</p>
	<p class="txtblue">第3行文字</p>
	<p class="txtblue">第4行文字</p>
	<p class="txtblue">第5行文字</p>
</body>

 


1.多建立幾個類別樣式

2.再類別樣式裡建立一個以上的屬性

<style>
.txtblue{
    color:blue;
}

.txtred{
    color:red;
    font-size:30px;
}
</style>


 


在類別中套用一個樣式以上

<style>
.txtblue{
    color:blue;
}

.font50{
    font-size:50px;
}
</style>

</head>
<body>	
	<p class="txtblue font50">AAA</p>
</body>

3.id樣式

1.標籤的id名字是唯一的不能重複

<h1 id="myHeader">My Header</h1>

2.專用的id樣式 (前面加上"#")

<style>
#myHeader {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
} 
</style>

完整程式碼:

<html>
<head>
<style>
#myHeader {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
} 
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

 


4.標籤樣式
<html>
<head>
<style>
h1{
	color: Red;
    font-family:'Odibee Sans','cursive';
	font-weight: bold;
	border: 1px #336699 solid;
	
}

h2{
	color: #0000CC;
	font-family: ParkAvenue BT;
	font-weight: bold;
	border: 3px #669900 double;
}

h3{
	border: 3px orange  dotted;
}

h4{
	border: 3px orange  dashed;
}

</style>
</head>
<body>

<h1>今天是星期五天氣晴</h1>
<h2>今天是星期五天氣晴</h2>
<h3>今天是星期五天氣晴</h3>
<h4>今天是星期五天氣晴</h4>

</body>
</html>

 

 

5.優先套用: 行內樣式>ID樣式>類別樣式>標籤樣式

 

 

 

<html>
<head>
<style>
h1{
	color: Red;
    font-family:'Odibee Sans','cursive';
	font-weight: bold;
	border: 1px #336699 solid;
	
}

#myh1{
	color:orange;
}

.color_pink{
	color:pink;
}

</style>
</head>
<body>

<h1 class="color_pink" id="myh1" style="color:blue">今天是星期五天氣晴</h1>

</body>
</html>
一次套用多個類別樣式

套用時使用空白間隔class="color_pink size30"

<html>
<head>
<style>
.color_pink{
	color:pink;
}

.size30{
	font-size:30px;
}

</style>
</head>
<body>

<h1 class="color_pink size30">今天是星期五天氣晴</h1>

</body>
</html>

 

混合樣式標籤樣式+類別樣式
<html>
<head>

<title>標籤樣式</title>


<style>
h1{
	color: Red;
        font-family: 'Odibee Sans', cursive;
	font-weight: bold;
	border: 1px #336699 solid;
	
}

h2{
	color: #0000CC;
	font-family: ParkAvenue BT;
	font-weight: bold;
	border: 3px #669900 double;
}

.txt1{
	color:green;

}

</style>

</head>
<body>
<h1>今天是 <span class="txt1">星期五</span>天氣晴</h1>
<h1>今天是 <span class="txt1">星期五</span>天氣晴</h1>
<h1>今天是 <span class="txt1">星期五</span>天氣晴</h1>

<h2>今天是 <span class="txt1">星期五</span>天氣晴</h2>
<h2>今天是 <span class="txt1">星期五</span>天氣晴</h2>
<h2>今天是 <span class="txt1">星期五</span>天氣晴</h2>
</body>
</html>

 


串接樣式表

在網站資料夾內建立CSS資料夾
CSS資料夾內建立一個.css檔
例如:
mystyle.css

在mystyle.css裡,先建立

1個類別樣式、1個ID樣式、1個標籤樣式

css/mystyle.css

h1{
	color: Red;
        font-family: 'Odibee Sans', cursive;
	font-weight: bold;
	border: 1px #336699 solid;
	
}

#myfont{
	color: #0000CC;
	font-family: ParkAvenue BT;
	font-weight: bold;
	border: 3px #669900 double;
}

.txt1{
	color:green;

}


 

 


page/page1.html

嵌入 css/mystyle.css

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

page/page1.html即可套用css/mystyle.css裡的樣式

完整程式碼:

<html>
<head>

<title>標籤樣式</title>
<link rel="stylesheet" type="text/css" href="../css/mystyle.css">

</head>
<body>
<h1>今天是 <span class="txt1">星期五</span>天氣晴</h1>
<h1>今天是 <span id="myfont">星期五</span>天氣晴</h1>
<h1>今天是 <span class="txt1">星期五</span>天氣晴</h1>

</body>
</html>

 

YiruAtStudio - 關於我 - 意如