Day15 CSS二

今天的影片千万不能跳过呦!拜托拜托~
这边要介绍CSS选择器,是之後编写爬虫程序时的重要夥伴!/images/emoticon/emoticon47.gif

以下为影片中有使用到的程序码

<!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>

如果在影片中有说得不太清楚或错误的地方,欢迎留言告诉我,谢谢您的指教。


<<:  Day15 [实作] 使用 Socket.io 建立聊天室

>>:  Day 14 - 委托单建立、修改及取消

课堂笔记 - 深度学习 Deep Learning (12)

Logistic regression的介绍 Logistic regression就跟其他的回归...

[Day17] Esp32用STA mode + Relay

1.前言 各位有理解loop中很长的咒语吗?不懂得可以多看几次,不要气馁,文章不会跑走,所以继续加油...

DAY 5 html 基础网页

在昨天将 index 成功推上 Github 後,今天该让他有点东西了。 打开 VSCODE 後 按...

[Day3] Cloud Architectures

讲到云端相关的议题,一定会看到的就是 IaaS 、 PaaS 与 SaaS。这几个名词可以算是云端的...

[Day24]创建Table及捞取资料

创建migration迁移档案 首先先使用artisan指令: make:migration 创建一...