Part1左欄_今日資料(第三週)
第一步:
沿用之前第二週的網頁架構。
第二步:
將左欄div區塊、標題、年分、星期、日期、按鈕個別加上id，id可以用來識別每一個標籤，比如年份2023的標籤就可以使用cur-year來代表。
第三步:
這次是將左欄div區塊、標題、年分、日期、按鈕個別加上class，也就是CSS類別的選擇器，標籤要套用相同格式時就可以使用class，像是年份跟星期的class都有指定default-cursor center，所以年份跟星期都會套用default-cursor center之後的設定。
第四步:
新增style標籤，在裡面可以先放body CSS的格式設定或者其他的格式設定。
第五步:
搜尋Josefin Sans字型，選擇輕300、常規400、半粗體600、之後就可以套用此字形。
第六步:
之後就可以撰寫body主體的CSS格式設定，像是有Josefin Sans字形、margin上下左右邊距離設為0、background-color背景為白色、display是div區域顯示方式，flex是設置是第一個div區塊為列顯示的格式設定和最後align-items用來排列div區塊，stretch是代表延展的意思，可以使高度填滿父類別的容器。
這是之前的結果:
套用CSS格式設定後:
第七步:
default-cursor是將鼠標移至標題或其他文字時一樣是箭頭，變成不能選取。類別裡有default-cursor
的都會套用到此設定。
第八步:
center裡的txet-align代表對齊，而center的格式設定為置中，類別裡有center的都會套用到此設定。
套用CSS格式設定後:
第九步:
設定按鈕button的類別，border-radius是設定按鈕的圓角屬性，500px代表500像素，outline是代表邊框線
，none代表沒有邊框線，margin上下左右邊距為0加上自動調整，background-color背景為透明。
套用CSS格式設定後:
第十步:
設定color類別，color類別裡的color是字形設為白色，background-color背景為類似深藍的顏色，套用到color類別的是左欄div板塊，所以整塊左欄板塊會套用到。還有off-color類別代表跳色，凸顯字體就可以使用跳色，這裡只有標題有套用此類別。
套用CSS格式設定後:
第十一步:
設定id格式的的開頭為#字號，#current-day-info此id是代表左欄板塊，設左欄板塊width寬度為螢幕的34%，
min-height最低高度為100vh，vh(viewport_height)是裝置的螢幕大小的高度，100vh代表佔滿螢幕高度的100%。#app-name-landscape是U110B128 Calendar標題的id，此id的font-size代表字體大小，
padding代表文字與文字間的距離，border-bottom代表框線下邊的的樣式。
套用CSS格式設定後:
第十二步:
設定#current-day-info下是h1、h2標籤的font-size字體大小、font-weight字體寬度、margin左右上下邊距
、padding文字間的內距。#current-day-info是代表左欄板塊的id，左欄板塊以下的h1、h2標籤都會套用到此格式。
套用CSS格式設定後:
第十三步:
設定#current-day-info下#theme-landscape是代表按鈕button的id，一樣設置了display是div區域顯示方式，block代表會像上一個div區塊一樣會佔滿位置的空間，然後padding文字間的內距，color字體顏色，border框線顏色寬度、font-size字體大小。#current-day-info #theme-landscape:hover在這裡多了一個hover代表鼠標移到按鈕上時按鈕會變成有點選的效果，
background-color背景是白色 ，opacity是代表透明度，color是黑色字體，這些都是當鼠標移到按鈕上時的效果。
套用CSS格式設定後:
鼠標移到按鈕上時:
留言
張貼留言