iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0

今天的影片千萬不能跳過呦!拜託拜託~
這邊要介紹CSS選擇器,是之後編寫爬蟲程式時的重要夥伴!/images/emoticon/emoticon47.gif

Yes

以下為影片中有使用到的程式碼

<!doctype html>
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
	<title>初次見面</title>
	<style>
	    p { color:blue; text-align:center;} 
    </style>
</head>
<body>
<p>Hello World!</p>
<p>Hello World!</p>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
	<title>初次見面</title>
	<style>
	    p.p1 { color:blue; text-align:center;} /*p1為classname*/
    </style>
</head>
<body>
<p class="p1">Hello World!</p>
<p>Hello World!</p>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
	<title>初次見面</title>
	<style>
	    *.p1 { color:blue; text-align:center;}
    </style>
</head>
<body>
<h1 class="p1">Hello World!</h1>
<p class="p1">Hello World!</p>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
	<title>初次見面</title>
	<style>
	    #hello1 { color:blue; text-align:center;}
		#hello2 { color:red; text-align:center;}
    </style>
</head>
<body>
<p id="hello1">Hello World!</p>
<p id="hello2">Hello World!</p>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
	<title>初次見面</title>
	<style>
	    [class] { color:blue; text-align:center;}
    </style>
</head>
<body>
<h1 class="p1">Hello World!</h1>
<p class="p2">Hello World!</p>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
	<title>初次見面</title>
	<style>
	    [class="p1"] { color:blue; text-align:center;}
    </style>
</head>
<body>
<h1 class="p1">Hello World!</h1>
<p class="p2">Hello World!</p>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
	<title>初次見面</title>
	<style>
	    h1[class="p1"] { color:blue; text-align:center;}
    </style>
</head>
<body>
<h1 class="p1">Hello World!</h1>
<p class="p2">Hello World!</p>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
	<title>初次見面</title>
	<style>
	    *{ color:blue; text-align:center;}
    </style>
</head>
<body>
<h1 class="p1">Hello World!</h1>
<p class="p1">Hello World!</p>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
	<title>最終檔案</title>
</head>
<body>
<h1>水母的基本介紹</h1>
<p>擷取自<a href="https://zh.wikipedia.org/wiki/%E6%B0%B4%E6%AF%8D">維基百科</a></p>
<br>
<p>水母是無脊椎動物,屬於刺胞動物門中的一類,其中包括水母、海葵、珊瑚、水螅。<br>
全世界的海洋中有超過兩百種的水母,牠們分布於全球各地的水域裡,無論是熱帶的<br>
水域﹑溫帶的水域﹑淺水區﹑約百米深的海洋,甚至是淡水區都有牠們的蹤影。</p>
<img src="DSC_0394.jpg" alt="於海生館拍攝的水母" height="300" width="450">
<ul>
    <li><a href="CSShtml2.html">水母在生物學中的分類</a></li>
	<li><a href="CSShtml1.html">水母的秘密</a></li>
</ul>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
	<title>最終檔案</title>
	<style>
	    div.div1 { background-color:#00ff00;text-align:center;} /*綠*/
		div.div2 { background-color:#33FFFF;text-align:center} /*淺藍*/
		div.div3 { background-color:#D28EFF;text-align:center} /*紫*/
	</style>
</head>
<body>

<div class="div1">
<h1>水母的基本介紹</h1>
<p>擷取自<a href="https://zh.wikipedia.org/wiki/%E6%B0%B4%E6%AF%8D">維基百科</a></p>
<br>
</div>

<div class="div2">
<p>水母是無脊椎動物,屬於刺胞動物門中的一類,其中包括水母、海葵、珊瑚、水螅。<br>
全世界的海洋中有超過兩百種的水母,牠們分布於全球各地的水域裡,無論是熱帶的<br>
水域﹑溫帶的水域﹑淺水區﹑約百米深的海洋,甚至是淡水區都有牠們的蹤影。</p>
<img src="DSC_0394.jpg" alt="於海生館拍攝的水母" height="300" width="450">
</div>

<div class="div3">
<ul>
    <li><a href="CSShtml2.html">水母在生物學中的分類</a></li>
	<li><a href="CSShtml1.html">水母的秘密</a></li>
</ul>
</div>

</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
	<title>最終檔案</title>
	<style>
	    div.div1 { background-color:#00ff00;text-align:center;}
		div.div2 { background-color:#33FFFF;text-align:center;}
		div.div3 { background-color:#D28EFF;text-align:center;}
		span {color:red;}
	</style>
</head>
<body>

<div class="div1">
<h1>水母的基本介紹</h1>
<p>擷取自<a href="https://zh.wikipedia.org/wiki/%E6%B0%B4%E6%AF%8D">維基百科</a></p>
<br>
</div>

<div class="div2">
<p>水母是<span>無脊椎動物</span>,屬於<span>刺胞動物門</span>中的一類,
其中包括水母、海葵、珊瑚、水螅。<br>
全世界的海洋中有超過兩百種的水母,牠們分布於全球各地的水域裡,無論是熱帶的<br>
水域﹑溫帶的水域﹑淺水區﹑約百米深的海洋,甚至是淡水區都有牠們的蹤影。</p>
<img src="DSC_0394.jpg" alt="於海生館拍攝的水母" height="300" width="450">
</div>

<div class="div3">
<ul>
    <li><a href="CSShtml2.html">水母在生物學中的分類</a></li>
	<li><a href="CSShtml1.html">水母的秘密</a></li>
</ul>
</div>

</body>
</html>

如果在影片中有說得不太清楚或錯誤的地方,歡迎留言告訴我,謝謝您的指教。


上一篇
Day14 CSS一
下一篇
Day16 requests模組一
系列文
文組生的Python爬蟲之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言