18CSS選擇器-將網頁裝潢設定在HTML標籤中

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>淡水商工</title>

    <style>

     body {

            font-family: 微軟正黑體;            /* 字型 */

            background-image: url(brown.jpg); /* 背景圖 檔名 */

            background-repeat:no-repeat;      /* 背景圖不重複 */

            background-size: 600px 800px;     /* 背景圖寛高。若值為contain會設定維持長寬比,並顯示完整影像;若值為cover會設定圖等比例放大,以填滿顯示區域 */

         }


        h1 {

            color: teal;                    /* 文字顏色 */

            text-align: center;             /* 文字置中 */

            font-style: italic; /* 斜體 */

            line-height: 60px; /* 行高 */

            text-shadow: 5px 5px 10px gray; /* 設定文字陰影的樣式,參數分別意思為 水平方向的陰影大小、垂直方向的陰影大小、 */

                                                                       /* 模糊淡化程度和陰影的顏色 */

        }

        h2 {

            background-color: white;        /* 背景色 */

            color: #4f0087;                 /* 文字顏色 */

        }

    </style>

</head>


<body>

    <h1>我最愛的三個科</h1>

    <h2>資料科</h2>

    <h2>園藝科</h2>

    <h2>餐飲科</h2>

</body>

[補充]

在網頁的文字內容上有時需要劃線以標示重點等等,

可以使用html的 <u> 標籤,

或是CSS的text-decoration屬性。

不過CSS的變化會比較多,

請試看看 text-decoration屬性!


CSS的text-decoration

常見的設定值有

none:無底線,為預設值

underline:文字下的底線。

overline:文字上的線。

line-through:穿過文字的線,可以看做是刪除線。