CSS基礎複習-語法操作篇

不推薦新人剛開始就學一大堆框架 ex:bootstrap 之類，導致根本不知道css到底怎麼切變成框架前端，完全不會切版與套樣式。

介紹

現在網路上所看到的所有的資訊多數都是CSS3，雖然2022年IE11要被淘汰，下方也會記錄一下CSS預處理器，為了支援某些瀏覽器的特定寫法，網站的樣式都交給CSS處理。

如何加上 CSS

寫進 HTML

<p style="color:#666666">Hello World!</p>

<link> 引用

 <head>
     <link rel="stylesheet" href="./style.css">
 </head>
 <body>
     <p class="content">Hello World!</p>
 </body>

/* style.css */
 .content {
     color: #666666;
 }

JS 添加樣式

 <p id="helloWorld">Hello World!</p>
 <script>
 window.onload() = function () {
     var dataHelloWorld = document.querySelector("#helloWorld")
     dataHelloWorld.color = "#666666"
 }
 </script>

指定方式

會以外部 link 的方式介紹，主要是因為這也是最常使用的

HTML 標籤（不推薦）
使用時機：

初始化CSS - 每一個瀏覽器呈現樣式都不同，所以初始它
不推薦原因是因為會影響所有的 HTML Tag

 <head>
     <link rel="stylesheet" href="./style.css">
 </head>
 <body>
     <p>Hello World!</p>
 </body>

/* style.css */
 p {
     color: #666666;
 }

id 與 class 指定（推薦）
使用時機：

任何自訂樣式都推薦用這種方式添加樣式

 <head>
     <link rel="stylesheet" href="./style.css">
 </head>
 <body>
     <!-- 使用空格，這樣可以依序被套用樣式 -->
     <p class="color card-content">Hello World!</p>
     <p class="color card-content">Hello World!</p>
     <p class="color card-content">Hello World!</p>
     <!-- 被賦予的樣式，只要給予名稱就會有樣式 -->
     <p id="only" class="color card-content">Hello World!</p>
 </body>

 /* style.css */
 /* class:在 CSS 可以給多個HTML元素使用 */
 .color {
     color: #666666;
 }

 .card-content {
     font-size: 16px;
 }

 /* id:在 CSS 可以給多個HTML元素使用，
       但是JS指定元素時只會授予一個，
       所以不建議給多個元素使用。*/
 #only {
     text-decoration:underline;
 }

attribute (理解即可)
其實很多CSS/JS框架都會操作到這項功能
使用時機：

製作框架

 <head>
     <link rel="stylesheet" href="./style.css">
 </head>
 <body>
     <!-- attribute(屬性)指的是 class 和 target 這種 或是自定義屬性 -->
     <p class="content" target="_blank">Hello World!</p>
 </body>

 /* style.css */
 /* 這樣就是指定 .content 完整的attr target="_blank" */
 .content[target="_blank"] {
     color: #666666
 }
 /*******
 [target] {}                     每個有 target 的 attr
 [target="_blank"] {}            每個有 target="_blank" 完整的attr
 [target~="_blank"] {}           每個有 target="_blank" 包括的attr
 [target|="_blank"] {}           每個有 target="_blank" 開頭的attr
 .content[target^="_blank"] {}   每個 .content 有 target attribute 值 _blank 開頭的
 .content[target$="_blank"] {}   每個 .content 有 target attribute 值 _blank 結尾的
 .content[target*="_blank"] {}   每個 .content 有 target attribute 值 _blank 包含的
 ********/

Pseudo-classes 偽CSS (常用)
有很多偽CSS使用狀態，但最常用為下列情境
使用時機：

元素被一些事件動作 focus/hover
元素有基偶數/開頭結尾/隱藏顯示之分

 <head>
     <link rel="stylesheet" href="./style.css">
 </head>
 <body>
     <p class="content">Hello World!</p>
 </body>

 /* style.css */
 .content:hover {
     color: #666666
 }
 /*******
 .content:hover        元素被滑鼠指標經過未點擊
 .content:focus        元素被滑鼠指標點擊一下關注中 (輸入匡常用)
 .content:checked      元素被滑鼠指標點擊著 (按鈕常用)
 .content:disabled     元素隱藏中 (RWD顯示隱藏常用)
 .content:enabled      元素顯示中 (RWD顯示隱藏常用)
 .content:nth-child(n) 元素每n個會套用樣式 (列表 li /表格 th 常用)
 .content:nth-child(n) 元素每n個會套用樣式 (列表 li /表格 th 常用)
 .content:first-child  元素每第一個會套用樣式 (列表 li /表格 th 常用)
 .content:last-child   元素每最後個會套用樣式 (列表 li /表格 th 常用)
 ********/