[13th-铁人赛]Day 2:Modern CSS 超详细新手攻略 - 入门

WHO? WHAT?

CSS到底是谁?
CSS的全名为Cascading Style Sheets,其中的style是样式,因此CSS就是用来描述网页样式的工具。

WHEN?

HTML在1993年出现,CSS却在1996年才出现第一版,代表在前3年,HTML是光着身子的!CSS的出现大幅增加了网页的方便性、易读性,以及最重要的美观性!

WHY?

大家一定听过这个比喻:如果HTML是名词的话,那麽CSS就是形容词!这里用图片和大家说明:
https://ithelp.ithome.com.tw/upload/images/20210906/20141395g4VfYcWrbZ.png
这是纯HTML的网页

https://ithelp.ithome.com.tw/upload/images/20210907/20141395m76H0HbKMJ.png
加上CSS

可以看出差别在於排版、字体大小并可以使网页变成彩色世界。

HOW?

https://ithelp.ithome.com.tw/upload/images/20210907/20141395JQWtx50Wdv.jpg

  1. Selector:将欲改变元素的标签写在选择器,标签、id、class皆可(一般较建议使用class),但选择器会影响权重的问题,在之後的[权重]章节将会详细说明!
  2. Property:欲改变该元素的什麽样式,如颜色就是color、字体大小就是font-size
    附上常用属性供参考~
  3. Property Value:样式确切的值,如什麽颜色、字体大小的px值

WHERE?

现在已经知道CSS的功能和如何撰写了,那要怎麽把它加进网页中呢?
有三种方式:

  1. Inline Style:将样式写在HTML的标签上
    https://ithelp.ithome.com.tw/upload/images/20210907/20141395UGAfL7pu0v.jpg
  2. Internal Style Sheet:在html的head标签中增加style的标签,并将CSS写入其中
    https://ithelp.ithome.com.tw/upload/images/20210907/20141395eU2gsNAmSO.jpg
  3. External Style Sheet:CSS为独立的css档,在html中以link连结
    https://ithelp.ithome.com.tw/upload/images/20210907/20141395b7W71ZvOGp.jpg
    请重复确认路径是否正确喔!

今天介绍了如何撰写CSS并运用在网页中,如果有任何不清楚的地方再请大家多多指教,也欢迎在留言处问问题!


<<:  资料视觉化 推论统计先 python ANOVA seaborn

>>:  [Day4] Android - Kotlin笔记:RecyclerView Adapter - ListAdapter + DiffUtil

面试题:什麽是 SQL injection?如何预防?

什麽是 SQL injection 透过网页 input 或 url,在送资料的时候带 SQL qu...

Day08-流量限制(三)

前言 昨天有讲到怎麽运用 nginx 来做基本的分流、限流,但因为昨天举的例子比较简单,真实世界的应...

[Day 28] LeetCode - 387 First Unique Character in a String

本篇同步发布於Blog:[解题] LeetCode - 387 First Unique Chara...

D6-用 Swift 和公开资讯,打造投资理财的 Apps { 加上 filter,实作搜寻 上市/上柜 功能 }

列表的确是在有限萤幕空间中,呈现大量资料的一个手法。但从前一篇可以知道,你这个列表会有数千笔资料的时...

【Day 15】switch statement

switch 是 C 提供的另一种条件判断的方式(python 没有的 !),本身只能比较数字或字元...