分享

HTML&CSS Day4 CSS 嵌入方式 與 選擇器

<html>
<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>
</html>   
***************************************************  
<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>          
分類:學習

評論
上一篇
  • 下一篇
  • 更多文章
    載入中... 沒有更多了