iT邦幫忙

0

<新手複習向> <CSS學習第1集/>:{簡單介紹與常見屬性;}

  • 分享至 

  • xImage
  •  
  1. CSS是啥?
    全名為(Cascading Stylesheets),谷哥中文是階層樣式表,是一種風格頁面語言(style sheet language),能讓你在 HTML 文件中的元素(element)上套用不同的頁面樣式(style)。

  2. CSS包含?

    • 選擇器Selectors
      決定你在HTML中的元素會被調整成什麼樣子,但同樣也要注意優先順序。
    • 屬性properties
      用來調整HTML元素的東東。
    • 值Values
      調整HTML元素的東東裡面,會調整成啥樣子。

範例:醫生,我想整容,我希望眼睛可以 上下左右放大 1公分,然後嘴唇 顏色染成 紅色
此時選擇器選擇眼睛,放大是屬性,1公分是值;選擇器選擇嘴唇,顏色是屬性,紅色是值。
大概就會長這樣:

    eyes{
        border:1cm;
        }
    lips{
        background-color:red;
        }
  1. 常用屬性:

    1. 文字屬性
      1. 字體四合一屬性 font
        *後面值依序為(傾斜度-style)(粗細-weight)(大小-size)(字型-family)
      2. 對齊
        1. 縮排text-align(em)
        2. 字間距letter-spacing
        3. 修飾text-decoration(underline/overline/none)
        4. 大小寫text-transform
          (captalize/uppercase/lowercase/none)
    2. 列表三合一屬性 list-style
      *後面值可以為(形狀-type)(圖片-image)(位置-position)
    3. 背景屬性 background
      *後面值可以為(顏色-color)(圖片-image)(重複-repeat)(位置-position)
    4. 溢出屬性 overflow
    5. 浮動屬性 float
    6. 定位屬性 position
  2. 同場加映選擇器:

    1. 元素選擇(直接打上元素 ex.div ul p)
    2. id選擇 (#X)
    3. class選擇 (.X)
    4. 全部選擇 (*)
    5. descendant選擇(X_Y)
    6. 虛擬選擇 (hover常用)
      *同元素權重:descendant>id>class>title

就醬吧
然後就沒有第2集了?


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言