分享

自主學習課:CSS基本概念-可能創學台南-2021春學W6D2

繼上次的HTML研究,這次學習的是CSS。如果說HTML是用於編輯與排版內容,那麼CSS就是將這些進行一定程度的美化。
階層樣式表(Cascading Stylesheets,CSS),跟HTML一樣,CSS既不是標準程式語言,也不是標記語言,而是一種風格頁面語言(style sheet language)。

結構

先說說CSS的架構
p { color: red; }
這是一段將所有文字的顏色設為紅色的程式碼,整個架構可以稱作規則集(rule set),或直接叫規則(rule),其中的元素包含
  • 選擇器(Selector)就是前面的p,這個p指的是段落元素(paragraph elements),也就代表這段程式碼的對象是段落元素,所做的編輯也只會針對段落元素。
  • 宣告(Declaration)宣告單一一個規則,例如color: red; 指定了這個元素的顏色為紅色。
  • 屬性 (Properties)修改屬性是改變你HTML元素的一種方法,在剛剛的例子,color是段落(p)元素的一種屬性。
  • 屬性值(Property value)屬性值就是位於屬性右邊,在冒號(:)之後,從不同的指示選出一個給予屬性,範例中從許多顏色中選出red給予color。

再來是CSS非常重要的的一個概念,就是塊(box),CSS佈局主要基於「box 模型」。在頁面空間的每個box都有這些屬性:
  • padding內容周圍的空格,例如段落文字周圍。
  • border位於矩形內容外部的實線。
  • margin元素外部的空間。
就想像每個元素都是箱子一般相互堆疊而成。
其他的還有像是改變元素的寬度(width)、背景顏色(background-color)、文字陰影(text-shadow)...等,都是可以再做變化的。

練習

以下是針對CSS所做的實作練習。

美化上次練習HTML的網頁

為自己的粉絲頁做的介紹網頁

學習完基本的CSS概念後,對於能夠將網頁的字元及圖片做美化及帶有自己風格的處理感到興奮,希望之後學習更多相關的知識後,可以作出具設計感的網頁。
分類:日記

*゚▽゚*

評論
上一篇
  • 自然課:春耕-可能創學台南-2021春學W5D5
  • 下一篇
  • 美學課:『賴上藝術』臨摹、寫實、想像-可能創學台南-2021春學W6D2
  • 更多文章
    載入中... 沒有更多了