Blog：博客園 個人
參考：https://www.w3school.com.cn/css/index.asp
概述
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言，
CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化，
優點
- 使網頁代碼更少，網頁下載更快
- 實作了內容與樣式的分離，使網站維護更快捷
- 使網頁與瀏覽器的兼容性更好
語法結構
每個CSS樣式由兩個組成部分：選擇器和宣告，宣告又包括屬性和屬性值，每個宣告之后用分號結束，
selector {declaration1; declaration2; ... declarationN }
宣告
每條宣告由一個屬性和一個值組成，屬性（property）是您希望設定的樣式屬性（style attribute），每個屬性有一個值，屬性和值被冒號分開，請使用花括號來包圍宣告，
selector {property: value}
如果值為若干單詞，則要給值加引號：
p {font-family: "sans serif";}
多重宣告
如果要定義不止一個宣告，則需要用分號將每個宣告分開，
p {text-align:center; color:red;}
推薦每行只描述一個屬性，例如：
p {
text-align: center;
color: black;
font-family: arial;
}
空格和大小寫
- 是否包含空格不會影響 CSS 在瀏覽器的作業效果；
- 與 XHTML 不同，CSS 對大小寫不敏感，不過存在一個例外：如果涉及到與 HTML 檔案一起作業的話，class 和 id 名稱對大小寫是敏感的，
引入方式
行內樣式(行內樣式)
請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時，
要使用行內樣式，你需要在相關的標簽內使用樣式（style）屬性，Style 屬性可以包含任何 CSS 屬性，例如：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
內部樣式
當單個檔案需要特殊的樣式時，就應該使用內部樣式表，你可以使用 <style> 標簽在檔案頭部定義內部樣式表，例如：
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
外部樣式
當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇，在使用外部樣式表的情況下，你可以通過改變一個檔案來改變整個站點的外觀，每個頁面使用 <link> 標簽鏈接到樣式表，<link> 標簽在（檔案的）頭部：
<head>
<link rel="stylesheet" type="text/css" href="https://www.cnblogs.com/Rohn/archive/2021/02/04/mystyle.css" />
</head>
選擇器
優先級：行內樣式 > id選擇器 > 類選擇器 > 元素選擇器 > 通配符選擇器
元素選擇器(標簽選擇器)
最常見的 CSS 選擇器是元素選擇器，換句話說，檔案的元素就是最基本的選擇器，
如果設定 HTML 的樣式，選擇器通常將是某個 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
類選擇器
類選擇器允許以一種獨立于檔案元素的方式來指定樣式，
類選擇器允許以一種獨立于檔案元素的方式來指定樣式，
該選擇器可以單獨使用，也可以與其他元素結合使用，
語法
我們使用以下語法向這些歸類的元素應用樣式，即類名前有一個點號.，然后結合通配選擇器：
*.important {color:red;}
只想選擇所有類名相同的元素，可以在類選擇器中忽略通配選擇器：
.important {color:red;}
ID選擇器
ID 選擇器允許以一種獨立于檔案元素的方式來指定樣式，
語法
首先，ID 選擇器前面有一個#號，也稱為棋盤號或井號，
例如：
*#intro {font-weight:bold;}
ID 選擇器中可以忽略通配選擇器，前面的例子也可以寫作：
#intro {font-weight:bold;}
參考
ID 選擇器不參考 class 屬性的值，它要參考 id 屬性中的值，例如：
<p id="intro">This is a paragraph of introduction.</p>
通配符選擇器
CSS2 引入了一種新的簡單選擇器 - 通配選擇器（universal selector），顯示為一個星號（*），該選擇器可以與任何元素匹配，就像是一個通配符，
例如，下面的規則可以使檔案中的每個元素都為紅色：
* {color:red;}
背景
CSS 允許應用純色作為背景，也允許使用背景影像創建相當復雜的效果，
屬性
| 屬性 | 描述 |
|---|---|
| background | 簡寫屬性，作用是將背景屬性設定在一個宣告中， |
| background-attachment | 背景影像是否固定或者隨著頁面的其余部分滾動， |
| background-color | 設定元素的背景顏色， |
| background-image | 把影像設定為背景， |
| background-position | 設定背景影像的起始位置， |
| background-repeat | 設定背景影像是否及如何重復， |
背景色
可以使用 background-color 屬性為元素設定背景色，這個屬性接受任何合法的顏色值，
background-color 不能繼承，其默認值是 transparent，transparent 有“透明”之意，也就是說，如果一個元素沒有指定背景色，那么背景就是透明的，這樣其祖先元素的背景才能可見，
例如：
p {background-color: gray; padding: 20px;}
背景影像
要把影像放入背景，需要使用 background-image 屬性，background-image 屬性的默認值是 none，表示背景上沒有放置任何影像，
如果需要設定一個背景影像，必須為這個屬性設定一個 URL 值：
body {background-image: url(/i/eg_bg_04.gif);}
背景定位
可以利用 background-position 屬性改變影像在背景中的位置，
為 background-position 屬性提供值有很多方法，首先，可以使用一些關鍵字：top、bottom、left、right 和 center，通常，這些關鍵字會成對出現，不過也不總是這樣，還可以使用長度值，如 100px 或 5cm，最后也可以使用百分數值，不同型別的值對于背景影像的放置稍有差異，
例如：
p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}
文本
CSS 文本屬性可定義文本的外觀，
通過文本屬性，您可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等，
屬性
| 屬性 | 描述 | CSS |
|---|---|---|
| color | 設定文本的顏色， | 1 |
| direction | 規定文本的方向 / 書寫方向， | 2 |
| letter-spacing | 設定字符間距， | 1 |
| line-height | 設定行高， | 1 |
| text-align | 規定文本的水平對齊方式， | 1 |
| text-decoration | 規定添加到文本的裝飾效果， | 1 |
| text-indent | 規定文本塊首行的縮進， | 1 |
| text-shadow | 規定添加到文本的陰影效果， | 2 |
| text-transform | 控制文本的大小寫， | 1 |
| unicode-bidi | 設定文本方向， | 2 |
| white-space | 規定如何處理元素中的空白， | 1 |
| word-spacing | 設定單詞間距， | 1 |
| hanging-punctuation | 規定標點字符是否位于線框之外， | 3 |
| punctuation-trim | 規定是否對標點字符進行修剪， | 3 |
| text-align-last | 設定如何對齊最后一行或緊挨著強制換行符之前的行， | 3 |
| text-emphasis | 向元素的文本應用重點標記以及重點標記的前景色， | 3 |
| text-justify | 規定當 text-align 設定為 "justify" 時所使用的對齊方法， | 3 |
| text-outline | 規定文本的輪廓， | 3 |
| text-overflow | 規定當文本溢位包含元素時發生的事情， | 3 |
| text-shadow | 向文本添加陰影， | 3 |
| text-wrap | 規定文本的換行規則， | 3 |
| word-break | 規定非中日韓文本的換行規則， | 3 |
| word-wrap | 允許對長的不可分割的單詞進行分割并換行到下一行， | 3 |
表格
CSS 表格屬性可以幫助您極大地改善表格的外觀，
屬性
| 屬性 | 描述 | CSS |
|---|---|---|
| border-collapse | 規定是否合并表格邊框， | 2 |
| border-spacing | 規定相鄰單元格邊框之間的距離， | 2 |
| caption-side | 規定表格標題的位置， | 2 |
| empty-cells | 規定是否顯示表格中的空單元格上的邊框和背景， | 2 |
| table-layout | 設定用于表格的布局演算法， | 2 |
定位
CSS 定位屬性允許你對元素進行定位，
屬性
CSS 定位屬性允許你對元素進行定位，
| 屬性 | 描述 |
|---|---|
| position | 把元素放置到一個靜態的、相對的、絕對的、或固定的位置中， |
| top | 定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移， |
| right | 定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移， |
| bottom | 定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移， |
| left | 定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移， |
| overflow | 設定當元素的內容溢位其區域時發生的事情， |
| clip | 設定元素的形狀，元素被剪入這個形狀之中，然后顯示出來， |
| vertical-align | 設定元素的垂直對齊方式， |
| z-index | 設定元素的堆疊順序， |
框模型
CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式，
元素框的最內部分是實際的內容，直接包圍內容的是內邊距，內邊距呈現了元素的背景，內邊距的邊緣是邊框，邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其后的任何元素，
內邊距、邊框和外邊距都是可選的，默認值是零，但是，許多元素將由用戶代理樣式表設定外邊距和內邊距，可以通過將元素的 margin 和 padding 設定為零來覆寫這些瀏覽器樣式，這可以分別進行，也可以使用通用選擇器對所有元素進行設定：
* {
margin: 0;
padding: 0;
}
在 CSS 中，width 和 height 指的是內容區域的寬度和高度，增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸，
假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距，如果希望這個元素框達到 100 個像素，就需要將內容的寬度設定為 70 像素，請看下圖：
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
Tips：
- 內邊距、邊框和外邊距可以應用于一個元素的所有邊，也可以應用于單獨的邊，
- 外邊距可以是負值，而且在很多情況下都要使用負值的外邊距，
術語
- element : 元素，
- padding : 內邊距，也有資料將其翻譯為填充，
- border : 邊框，
- margin : 外邊距，也有資料將其翻譯為空白或空白邊，
display屬性
- block：將元素變成塊級標簽，可以設定高度和寬度
- inline：將元素變成行內標簽，不能設定高度和寬度
- inline-block：同時具有兩種
- none：標簽消失
例如：
<span style="background-color:gray;height:70px;width:20px;">行內標簽</span>
overflow溢位處理屬性
- Overflow (水平和垂直均設定)
- Overflow-x (設定水平方向)
- Overflow-y (設定垂直方向)
設定水平滾動條：
overflow-x : scroll
設定垂直滾動條：
overflow-y : scroll
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/256293.html
標籤：其他
上一篇：CSS快速入門
下一篇：web開發-tools