iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Modern Web

網頁前端基礎&Vue.js系列 第 12

CSS框線與清單樣式(DAY12)

這一篇文章會介紹如何在html元素中設定框線的顏色、寬度粗細和樣式,也會介紹需要用到什麼樣的css屬性來指定元素周圍4邊的個別樣式。而在清單的樣式中會介紹到無序、有序、圖片清單的相關屬性。

  • 框線樣式

  1. 顏色
    屬性:border-color:
  2. 寬度粗細
    屬性:border-width:
    (屬性值可以用medium、thin、thick或是尺寸單位px、em等)
  3. 樣式
    屬性:border-style:
    (常用屬性值:solid、dotted、dashed、double)
  4. 元素周圍4邊的個別樣式
    屬性: border-top-color:border-top-width:border-top-style:
    (top、right、bottom、left可指定元素的哪一邊)
  5. 圓弧邊框
    屬性: border-radius:
  6. 樣式速寫法
    屬性:border:border-top:
    https://ithelp.ithome.com.tw/upload/images/20210923/20140225YvRudmFzoJ.png
<head>
    <style>
        h1 {
            border-top: solid thick aliceblue;
            /*元素上方框線樣式*/
            border-bottom: solid thick antiquewhite;
            /*元素下方框線樣式*/
        }
        video {
            border-radius:10px;
        }        /*圓弧邊框*/
    </style>
</head>
<body>
    <h1>台東熱氣球嘉年華</h1>
    <video src="IMG_4736.MOV" controls></video>
</body>
  • 清單樣式

  1. 類型
    屬性:list-style-type:
    常用屬性值:
    無序:sqare、disc、circle、none(不使用符號)
    有序: decimal、trad-chinese-informal
  2. 位置
    屬性:list-style-position:
    屬性值:inside、outside(於li元素之內、外)
  3. 圖片
    屬性:list-style-image:url(" ")
    補充:使用圖片清單這個屬性其實很在定位和調整大小時很麻煩,圖片長寬過大時整個圖片清單的位置會跑掉,故不建議使用這個方法。可以使用table表格的方式來將圖片清單定位,像是:
    https://ithelp.ithome.com.tw/upload/images/20210923/20140225tus8iVwK1D.png

清單樣式範例:

https://ithelp.ithome.com.tw/upload/images/20210923/20140225aDw3EgAm7E.png

<head>
    <style>
        .one {
            list-style-type: circle;
            list-style-position:outside;
        }
        .two {
            list-style-type: decimal;
            list-style-position: inside
        }
        
    </style>
</head>
<body>
    <ul class="one">
        <li>computer</li>
        <li>mouse</li>
        <li>audio</li>
        <li>outside屬性</li>
    </ul><hr />
    <ul class="two">
        <li>computer</li>
        <li>mouse</li>
        <li>audio</li>
        <li>inside屬性</li>
    </ul><hr />
</body>

結語

這篇文章介紹了CSS框線和清單的各種樣式和屬性,下一篇將會介紹網頁和元素的背景相關屬性,包括背景顏色、圖片、透明度、背景的位置、滾動以及背景的動態變換等等!


上一篇
CSS文字樣式相關屬性(DAY11)
下一篇
CSS背景屬性與動態效果(DAY13)
系列文
網頁前端基礎&Vue.js30

尚未有邦友留言

立即登入留言