Pseudo-elements, 虛擬元素

透過CSS產生網頁上的內容

奇異博士

復仇者聯盟

">

Pseudo-elements, 虛擬元素

透過CSS產生網頁上的內容

奇異博士

復仇者聯盟

">

Pseudo-elements, 虛擬元素

透過CSS產生網頁上的內容

奇異博士

復仇者聯盟

">

CSSm3HTML交互練習

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <style>
        /* 先開啟網頁觀察畫面 */

        /* ::before 在元素前面加上內容 */
        #demo1::before {
            content: "強檔電影！";
            color: red;
        }

        /* ::after 在元素後面加上內容 */
        #demo2::after {
            content: "！超級英雄";
            color: blue;
        

    </style>

</head>

<body>
    <h4>Pseudo-elements, 虛擬元素</h4>
    <h4>透過CSS產生網頁上的內容</h4>
    <hr>
    <p id="demo1">奇異博士</p>
    <p id="demo2">復仇者聯盟</p>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <style>
        /* a 元素 href 屬性 為 http 開頭(^)，
           將 字體大小調整為 2rem */
           a[href^="http"]{
            font-size: 2rem;
           }

        /* a 元素 href 屬性 包含(*) pseudo 文字，
           將 文字顏色設定為 tomato */
           a[href*="pseudo"]

           {
            color: tomato;
           }

        /* a 元素 href 屬性 為 selectors.asp 結尾($)，
           將 背景顏色設定為 lightblue */
           a[href$="selectors.asp"]
           {
            background-color: lightblue;
           }

        /* a 元素 target  完全等於 _blank，
           移除文字底線 */
           a[target="_blank"]{
            text-decoration: none;}
        
    </style>

</head>

<body>

    <p><a href="<https://www.w3schools.com/css/css_selectors.asp>" target="_blank">Simple Selectors</a></p>
    <p><a href="<https://www.w3schools.com/css/css_combinators.asp>" target="_blank">Combinators</a></p>
    <p><a href="<https://www.w3schools.com/css/css_pseudo_classes.asp>" target="_blank">Pseudo-classes</a></p>
    <p><a href="<https://www.w3schools.com/css/css_pseudo_elements.asp>" target="_blank">Pseudo-elements</a></p>
    <p><a href="<https://www.w3schools.com/css/css_attribute_selectors.asp>" target="_blank">Attribute Selectors</a></p>
    <p><a href="<https://www.w3schools.com/cssref/trysel.asp>">線上試試看</a></p>

</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        /* 10. 改變滑鼠經過 radio 的樣式 */
        input[type="radio"]:hover {
        cursor: pointer; }

        /* 20. :valid 驗證通過時的樣式設定 */
        input[type="email"]:valid,
        input[type="text"]:valid{
            background-color: lightgreen;}
        

        /* 21. :invalid 驗證不通過時的樣式設定 */
        input[type="email"]:invalid,
        input[type="text"]:invalid{
            background-color: lightcoral;}
        

    </style>
</head>

<body>
    <p><a href="<https://www.w3schools.com/cssref/trysel.asp>">Try CSS Selector</a></p>
    <p><a href="<https://caniuse.com/>">Can I use..</a></p>
    <p><a href="<https://flukeout.github.io/>">CSS Diner (選擇器的小遊戲)</a></p>
    <hr>
    <form>
        <!-- 照上方CSS設定 -->
        <!-- 10. 產生 單選按鈕元素 -->
         <input type="radio">
        

        <!-- 20. 產生 可以輸入 email 的方框 以及 -->
        <!--     產生 可以輸入 文字  的方框，並限制只能輸入大小寫英文 以及 -->
        <!--     產生 可以輸入 文字  的方框，並限制輸入身分證字號格式 -->
             <br><br>
        <!-- 輸入電子郵件的欄位，使用email類型，並提供預設提示文字"Email" -->
        Email:<input type="email" placeholder="Email">
        <br><br>
        <!-- 輸入英文大小寫的欄位，使用text類型，並設定pattern屬性限制只能輸入英文字母，提供預設提示文字"英文大小寫" -->
        Text:<input type="text" pattern="[A-Za-z]{3,5}" placeholder="英文大小寫">
        <br><br>
        <!-- 輸入身分證字號的欄位，使用text類型，並設定pattern屬性限制只能輸入8位數字，提供預設提示文字"身分證字號" -->
        ID:<input type="text" pattern="[A-Z]{1}[0-9]{9}" placeholder="身分證字號">

    </form>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        /* 10. 改變滑鼠經過 radio 的樣式 */
        input[type="radio"]:hover {
        cursor: pointer; }

        /* 20. :valid 驗證通過時的樣式設定 */
        input[type="email"]:valid,
        input[type="text"]:valid{
            background-color: lightgreen;}
        

        /* 21. :invalid 驗證不通過時的樣式設定 */
        input[type="email"]:invalid,
        input[type="text"]:invalid{
            background-color: lightcoral;}
        

    </style>
</head>

<body>
    <p><a href="<https://www.w3schools.com/cssref/trysel.asp>">Try CSS Selector</a></p>
    <p><a href="<https://caniuse.com/>">Can I use..</a></p>
    <p><a href="<https://flukeout.github.io/>">CSS Diner (選擇器的小遊戲)</a></p>
    <hr>
    <form>
        <!-- 照上方CSS設定 -->
        <!-- 10. 產生 單選按鈕元素 -->
         <input type="radio">
        

        <!-- 20. 產生 可以輸入 email 的方框 以及 -->
        <!--     產生 可以輸入 文字  的方框，並限制只能輸入大小寫英文 以及 -->
        <!--     產生 可以輸入 文字  的方框，並限制輸入身分證字號格式 -->
             <br><br>
        <!-- 輸入電子郵件的欄位，使用email類型，並提供預設提示文字"Email" -->
        Email:<input type="email" placeholder="Email">
        <br><br>
        <!-- 輸入英文大小寫的欄位，使用text類型，並設定pattern屬性限制只能輸入英文字母，提供預設提示文字"英文大小寫" -->
        Text:<input type="text" pattern="[A-Za-z]{3,5}" placeholder="英文大小寫">
        <br><br>
        <!-- 輸入身分證字號的欄位，使用text類型，並設定pattern屬性限制只能輸入8位數字，提供預設提示文字"身分證字號" -->
        ID:<input type="text" pattern="[A-Z]{1}[0-9]{9}" placeholder="身分證字號">

    </form>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>border-radius</title>
    <style>
        div {
            background-color: lightgreen;
        }

        .normalBorder {
            /* 用border畫出四邊邊框 */

        /* 可以這樣寫border: 3px solid black ; */

            /* 簡寫 border: width || style || color  */
            border-width: 3px;
            border-style: solid;
            border-color: black;
        }

        .leftBorder {
            /* 用border畫出左邊框 */

            /* 可以這樣寫border-left: 3px solid black; */
            
            /* border-width 簡寫
               一個值: 全部
               兩個值: 上下 左右
               三個值: 上 左右 下
               四個值: 上 右 下 左 (順時針方向) */
               border-style: solid;
               border-color: black;
               border-width: 0 0 0 3px;
            
        }

        .multiStyle {
            /* 用border畫出四邊邊框，且四邊為不同style */

            /*可以直接這樣寫 border: 8px solid black;
            border-style: dashed dotted double solid; */
            
            /* border-style 簡寫
               一個值: 全部
               兩個值: 上下 左右
               三個值: 上 左右 下
               四個值: 上 右 下 左 (順時針方向) */
               border-width: 8px;
               border-color: black;
               border-style: dashed dotted double solid;
            
        }

        .radiusBorder {
            /* 用border-radius改變四邊邊框的角 */

            /* 可以直接這樣寫border: 6px solid black;
            border-radius: 10px; */
            
            /* border-radius 簡寫
               一個值: 全部
               兩個值: 左上+右下 右上+左下
               三個值: 左上 右上+左下 右下
               四個值: 左上 右上 右下 左下 (順時針方向) */
               border: 6px solid black;
               border-radius: 10px 0 0 10px ;
            
        }
    </style>
</head>

<body>
    <p><a href="<https://html-css-js.com/css/generator/border-radius/>">Online Border Radius Generator</a></p>
    <hr>
    <div class="normalBorder">
        <p>一般框線</p>
    </div>
    <br>
    <div class="leftBorder">
        <p>左邊線</p>
    </div>
    <br>
    <div class="multiStyle">
        <p>多樣式</p>
    </div>
    <br>
    <div class="radiusBorder">
        <p>圓角</p>
    </div>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>background</title>
    
    <!-- 和背景(background-___)相關的CSS設定 -->

    <!-- 10. 在body放入一張背景圖片 (圖片可以使用 ../img/logo.png )
            background-image: url("") -->

    <!-- 20. 如何讓圖片不要重複? 水平重複? 垂直重複?
            background-repeat: repeat | no-repeat | repeat-x | repeat-y -->

    <!-- 30. 如何背景圖如何固定，不隨著視窗捲動而跟著捲動?
            background-attachment: fixed | scroll -->

    <!-- 40. 如何設定背景圖片位置?
            background-position: [長度 | 百分比 | left | center | right]
                                 [長度 | 百分比 | top | center | bottom] -->
        
<style>
        body {

            background-image: url("../img/logo.png");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center center;

            background-size: 80%;
        }

        p {
                font-size: 30px;
                color: black;
                text-align: center;
                padding: 20px;
                margin: 10px;
                
        }
</style>
</head>

<body>
    <p>來東京冒險吧！٩(｡・ω・｡)و</p>
    <p>航海王史上首創！！大型主題樂園！！</p>
    <p>草帽一行人的地盤在東京的象徵‧東京鐵塔！</p>
    <p>僅在此才可以體驗的遊樂設施</p>
    <p>觀賞現場娛樂表演</p>
    <p>享受美食的餐廳和購買限定商品的商店等‧‧</p>
    <p>草帽一行人為您準備了很多的冒險 </p>
    <p>等待您的光臨！！</p>

    <p>來東京冒險吧！٩(｡・ω・｡)و</p>
    <p>航海王史上首創！！大型主題樂園！！</p>
    <p>草帽一行人的地盤在東京的象徵‧東京鐵塔！</p>
    <p>僅在此才可以體驗的遊樂設施</p>
    <p>觀賞現場娛樂表演</p>
    <p>享受美食的餐廳和購買限定商品的商店等‧‧</p>
    <p>草帽一行人為您準備了很多的冒險 </p>
    <p>等待您的光臨！！</p>

    <p>來東京冒險吧！٩(｡・ω・｡)و</p>
    <p>航海王史上首創！！大型主題樂園！！</p>
    <p>草帽一行人的地盤在東京的象徵‧東京鐵塔！</p>
    <p>僅在此才可以體驗的遊樂設施</p>
    <p>觀賞現場娛樂表演</p>
    <p>享受美食的餐廳和購買限定商品的商店等‧‧</p>
    <p>草帽一行人為您準備了很多的冒險 </p>
    <p>等待您的光臨！！</p>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <style>
        .fit {
            /*試試看將寬度設定為400px; 高度設定為100px; */
            width: 400px;
            height: 100px;
            border: 8px solid black;
            
        }

    </style>
</head>

<body>
    <img class="fit" src="../img/sunny.jpg">

    <!-- 試試object-fit -->
     <br>
        <h1>Fill<h1> 
    <img class="fit" src="../img/sunny.jpg" style="object-fit: cover;">
    
    <br>
        <h1>Cover<h1> 
     <img class="fit" src="../img/sunny.jpg" style="object-fit: contain;">
    
     <br>
        <h1>Contain<h1> 
     <img class="fit" src="../img/sunny.jpg" style="object-fit: none;">
   
     <br>
        <h1>None<h1> 
     <img class="fit" src="../img/sunny.jpg" style="object-fit: scale-down;">

     <br>
        <h1>Scale-down<h1> 
     <img class="fit" src="../img/sunny.jpg" style="object-fit: fill;">
     
     
</body>

</html>