HTML&CSS Day4 CSS 嵌入方式 與 選擇器
<html>
</html>
***************************************************
<style type="text/css">
<head>
<title>charset</title>
<!-- 內部樣式表 -->
<style>
/* CSS註釋方式*/
/*書寫樣式中 空格 換行不影響*/
/* div{width: 100px; */
/* height: 100px; */
/* background:blue;} */
/* 導入外部樣式 方法1*/
/* 使用import 寫在 style */
/* @import url("190923_CSS_01.css"); */
</style>
<!-- 導入外部樣式 方法2 -->
<!-- 使用link 寫在 head -->
<link rel="stylesheet" href="190923_CSS_01.css">
</head>
<body>
<!-- 內部樣式表 內聯樣式表 外部樣式表 -->
<!-- 內聯樣式表 -->
<!-- <div style="width:100px;height: 100px; background: red; "> -->
<!-- </div> -->
<!-- 內部樣式表 -->
<!-- 外部樣式表
@import ->由CSS提供 導入CSS 2.先載入html 後載CSS
由CSS2.1 提供 老伺服器無法相容
link ->可以導入不同ex iss ; 2.與頁面同時導入
可用DOM 操作
-->
<div></div>
</body>
***************************************************
<style type="text/css">
/* 1.類型選擇符
語法 元素{}
*/
/* 對所有標籤修改 */
h1{
background: red;
}
p{
color:red;
}
/*2. Class 選擇器 對個別字幅修改 */
/* 語法 .class Name{} */
.h11{
color:blueviolet;
}
.h12{
color:green;
}
/*3. ID選擇器
類似於身份證字號 唯一的
語法
＃ID Name{} */
#view1{
width:50px;
height: 50px;
background: red;
}
#view2{
width:50px;
height: 50px;
background: blue;
}
/* 4.包含選擇符 */
/* 針對不同對象指名 */
.wordP{
color:blueviolet;
}
.view1 .wordP{
background:burlywood;
}
.view2 .wordP{
background:yellowgreen;
}
/* 偽類選擇器 須依照順序 否則無效果 */
/* 未點擊 */
a:link{
color:green;
}
/* 點擊過 */
a:visited{
color: red;
}
/* 鼠標滑入 */
a:hover{
color:yellow;
}
/*鼠標點擊 */
a:active{
color:orange;
}
/* 6.通配符 */
/* 所有元素 用於重置 以後學習 */
</style>
<body>
<p >hello</p>
<p >world</p>
<h1 class="h11">Html 基礎</h1>
<h1 class="h12">CSS 基礎</h1>
<h1 class="h12">js 基礎</h1>
<div id="view1"> </div>
<div id="view2"> </div>
<div class="view1">
<h3 class="wordP"> 第一個view </h3>
<br />
<p> HTML1</p>
</div>
<div class="view2">
<h3 class="wordP"> 第二個view </h3>
<br />
<p> HTML2</p>
</div>
<a href="https://www.google.com">google</a>
</body>
留言
張貼留言