css簡介
CSS（層疊樣式表）是一種用于描述網頁展示樣式的語言。它可以與html結合使用，通過定義樣式規則來控制網頁的外觀和布局。CSS的核心理念是分離樣式和內容，使得開發者可以更加靈活和高效地管理網頁的外觀和布局。
在HTML中使用CSS
在HTML中使用CSS樣式的方法有多種，以下是其中常見的方法：
- 內部樣式表
內部樣式表是指將CSS樣式寫在HTML文件的<head>標簽內的<style>標簽中，這樣寫的樣式只對當前HTML文件生效。
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
/* 內部樣式表 */
body {
background-color: pink;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is some text.</p>
</body>
</html>
- 外部樣式表
外部樣式表是指將CSS樣式寫在一個單獨的CSS文件中，然后在HTML文件中通過<link>標簽引入該CSS文件，這樣寫的樣式可以被多個HTML文件共享。
在CSS文件中，可以定義多個樣式，每個樣式可以應用到HTML文件中的一個或多個元素。
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is some text.</p>
</body>
</html>
styles.css
/* 外部樣式表 */
body {
background-color: pink;
}
h1 {
color: blue;
}
以上兩種方法都可以實現CSS樣式在HTML中的應用，使用哪種方法取決于具體的需求和場景。通常情況下，外部樣式表更適合大型項目，內部樣式表更適合小型項目或單獨的頁面。
- 在HTML標簽中直接使用CSS樣式
在HTML標簽中直接使用CSS樣式的方法是通過元素的style屬性來實現的。style屬性允許將CSS樣式直接應用于元素，具體語法如下：
<標簽名 style="屬性1: 值1; 屬性2: 值2; 屬性3: 值3; ...">內容</標簽名>
其中，屬性和值的格式與CSS語法相同，多個屬性和值之間使用分號（;）分隔。
例如，下面的代碼將應用一個藍色的背景和白色的文字顏色到<h1>標簽：
<h1 style="background-color: blue; color: white;">Hello World!</h1>
需要注意的是，通過style屬性應用的樣式只對當前元素生效，不會影響其他元素。此外，使用style屬性將樣式直接寫在HTML標簽中可能會使HTML代碼變得復雜和難以維護，因此不推薦在大型項目中頻繁使用該方法。
CSS選擇器
CSS選擇器用于選擇要應用樣式的HTML元素。
元素選擇器
元素選擇器用于選擇特定類型的HTML元素，如<p>、<div>、<h1>等。
/* 選擇所有的<p>元素 */
p {
color: red;
}
ID選擇器
ID選擇器用于選擇具有特定ID的HTML元素，ID在HTML文檔中應該是唯一的。
/* 選擇具有ID為"myDiv"的元素 */
#myDiv {
color: blue;
}
類選擇器
類選擇器用于選擇具有特定類的HTML元素，一個元素可以有多個類。
/* 選擇具有class為"myClass"的元素 */
.myClass {
font-size: 16px;
}
屬性選擇器
屬性選擇器用于選擇具有特定屬性的HTML元素。
/* 選擇具有title屬性的元素 */
[title] {
color: green;
}
/* 選擇title屬性值為"hello"的元素 */
[title="hello"] {
color: purple;
}
后代選擇器
后代選擇器用于選擇某個元素的后代元素，兩個元素之間使用空格分隔。
/* 選擇所有<div>元素內部的<p>元素 */
div p {
font-weight: bold;
}
子元素選擇器
子元素選擇器用于選擇某個元素的直接子元素，兩個元素之間使用大于號>分隔。
/* 選擇<div>元素的直接子元素<p> */
div > p {
text-align: center;
}
相鄰兄弟選擇器
相鄰兄弟選擇器用于選擇某個元素之后緊跟著的兄弟元素，兩個元素之間使用加號+分隔。
/* 選擇class為"first"的元素之后緊跟著的class為"second"的元素 */
.first + .second {
color: orange;
}
通用兄弟選擇器
通用兄弟選擇器用于選擇某個元素之后的所有兄弟元素，兩個元素之間使用波浪號~分隔。
/* 選擇class為"first"的元素之后的所有class為"second"的元素 */
.first ~ .second {
background-color: yellow;
}
偽類選擇器
偽類選擇器用于選擇具有特定狀態的元素，如懸停、訪問過等。
/* 鼠標懸停時改變鏈接的顏色 */
a:hover {
color: red;
}
/* 已訪問過的鏈接改變顏色 */
a:visited {
color: purple;
}
/* 當前活動的鏈接改變顏色 */
a:active {
color: green;
}
偽元素選擇器
偽元素選擇器用于選擇元素的某個部分，如元素的第一行、第一個字母等。
/* 選擇元素的第一行 */
p::first-line {
font-weight: bold;
}
/* 選擇元素的第一個字母 */
p::first-letter {
font-size: 24px;
}
CSS盒模型
CSS盒模型是一個用于描述HTML元素的布局模型。每個HTML元素都被視為一個矩形盒子，包含了內容區域、內邊距、邊框和外邊距四個部分。以下是CSS盒模型的四個部分：
- 內容區域（Content）：元素的實際內容。
- 內邊距（Padding）：內容區域與邊框之間的空白區域。
- 邊框（Border）：內邊距和外邊距之間的邊框線。
- 外邊距（Margin）：邊框與相鄰元素之間的空白區域。
下面是一個CSS盒模型的示意圖：
+----------------------------------------------------+
| Margin |
| +--------------------------------------------+ |
| | Border | |
| | +------------------------------------+ | |
| | | Padding | | |
| | | +----------------------------+ | | |
| | | | Content | | | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| | | +----------------------------+ | | |
| | +------------------------------------+ | |
| +--------------------------------------------+ |
| |
+----------------------------------------------------+
- 相關屬性
width和height
width和height屬性分別用于設置元素的寬度和高度。
/* 設置元素的寬度為200像素，高度為100像素 */
div {
width: 200px;
height: 100px;
}
padding
padding屬性用于設置元素的內邊距，取值可以是像素值、百分比等。
/* 設置元素的上下內邊距為10像素，左右內邊距為20像素 */
div {
padding: 10px 20px;
}
border
border屬性用于設置元素的邊框，取值可以分別指定邊框的樣式、寬度和顏色。
/* 設置元素的邊框樣式為實線，寬度為2像素，顏色為紅色 */
div {
border: solid 2px red;
}
margin
margin屬性用于設置元素的外邊距，取值可以是像素值、百分比等。
/* 設置元素的上下外邊距為10像素，左右外邊距為20像素 */
div {
margin: 10px 20px;
}
- 盒子模型的計算方式
CSS盒子模型的計算方式有兩種，分別是標準盒子模型和IE盒子模型。
標準盒子模型
標準盒子模型的寬度和高度只包括內容區域，不包括內邊距、邊框和外邊距。
IE盒子模型
IE盒子模型的寬度和高度包括內容區域、內邊距和邊框，但不包括外邊距。
可以使用box-sizing屬性來指定使用哪種盒子模型，默認值為content-box，表示使用標準盒子模型。如果將box-sizing設置為border-box，則使用IE盒子模型。
/* 使用標準盒子模型 */
div {
box-sizing: content-box;
}
/* 使用IE盒子模型 */
div {
box-sizing: border-box;
}
CSS樣式屬性
- 文本屬性
color
設置文本顏色，取值可以是預定義的顏色名稱、RGB值、十六進制顏色值等。
/* 使用預定義的顏色名稱 */
p {
color: red;
}
/* 使用RGB值 */
p {
color: rgb(255, 0, 0);
}
/* 使用十六進制顏色值 */
p {
color: #ff0000;
}
font-family
設置字體族，取值可以是字體名稱、字體族名稱、通用字體系列等。
/* 使用字體名稱 */
p {
font-family: Arial, sans-serif;
}
/* 使用字體族名稱 */
p {
font-family: "Times New Roman", serif;
}
/* 使用通用字體系列 */
p {
font-family: serif;
}
font-size
設置字體大小，取值可以是像素值、百分比、em單位等。
/* 使用像素值 */
p {
font-size: 16px;
}
/* 使用百分比 */
p {
font-size: 120%;
}
/* 使用em單位 */
p {
font-size: 1.2em;
}
font-weight
設置字體粗細，取值可以是normal、bold、bolder、lighter或數字值。
/* 使用預定義的字體粗細 */
p {
font-weight: bold;
}
/* 使用數字值 */
p {
font-weight: 700;
}
text-align
設置文本對齊方式，取值可以是left、right、center、justify或inherit。
/* 左對齊 */
p {
text-align: left;
}
/* 右對齊 */
p {
text-align: right;
}
/* 居中對齊 */
p {
text-align: center;
}
/* 兩端對齊 */
p {
text-align: justify;
}
text-decoration
設置文本裝飾，取值可以是none、underline、overline、line-through或inherit。
/* 下劃線 */
a {
text-decoration: underline;
}
/* 刪除線 */
del {
text-decoration: line-through;
}
- 背景屬性
background-color
設置背景顏色，取值可以是預定義的顏色名稱、RGB值、十六進制顏色值等。
/* 使用預定義的顏色名稱 */
body {
background-color: white;
}
/* 使用RGB值 */
body {
background-color: rgb(255, 255, 255);
}
/* 使用十六進制顏色值 */
body {
background-color: #ffffff;
}
background-image
設置背景圖片，取值可以是圖片URL或none。
/* 使用圖片URL */
body {
background-image: url("background.png");
}
/* 不使用背景圖片 */
body {
background-image: none;
}
background-repeat
設置背景圖片的重復方式，取值可以是repeat、repeat-x、repeat-y或no-repeat。
/* 水平和垂直方向都重復 */
body {
background-repeat: repeat;
}
/* 僅水平方向重復 */
body {
background-repeat: repeat-x;
}
/* 僅垂直方向重復 */
body {
background-repeat: repeat-y;
}
/* 不重復 */
body {
background-repeat: no-repeat;
}
background-position
設置背景圖片的位置，取值可以是關鍵詞或像素值。
/* 居中 */
body {
background-position: center;
}
/* 左上角 */
body {
background-position: 0 0;
}
/* 右下角 */
body {
background-position: right bottom;
}
/* 指定像素值 */
body {
background-position: 10px 20px;
}
- 盒模型屬性
width
設置元素的寬度，取值可以是像素值、百分比等。
/* 使用像素值 */
div {
width: 100px;
}
/* 使用百分比 */
div {
width: 50%;
}
height
設置元素的高度，取值可以是像素值、百分比等。
/* 使用像素值 */
div {
height: 50px;
}
/* 使用百分比 */
div {
height: 50%;
}
margin
設置元素的外邊距，取值可以是像素值、百分比等。
/* 設置上、下、左、右外邊距均為10像素 */
div {
margin: 10px;
}
/* 設置上下外邊距為10像素，左右外邊距為20像素 */
div {
margin: 10px 20px;
}
/* 設置上外邊距為10像素，左右外邊距為20像素，下外邊距為30像素 */
div {
margin: 10px 20px 30px;
}
/* 設置上外邊距為10像素，右外邊距為20像素，下外邊距為30像素，左外邊距為40像素 */
div {
margin: 10px 20px 30px 40px;
}
padding
設置元素的內邊距，取值可以是像素值、百分比等。
/* 設置上、下、左、右內邊距均為10像素 */
div {
padding: 10px;
}
/* 設置上下內邊距為10像素，左右內邊距為20像素 */
div {
padding: 10px 20px;
}
/* 設置上內邊距為10像素，左右內邊距為20像素，下內邊距為30像素 */
div {
padding: 10px 20px 30px;
}
/* 設置上內邊距為10像素，右內邊距為20像素，下內邊距為30像素，左內邊距為40像素 */
div {
padding: 10px 20px 30px 40px;
}
border
設置元素的邊框，取值可以是邊框樣式、邊框寬度、邊框顏色等。
/* 設置1像素粗的實線邊框，顏色為黑色 */
div {
border: 1px solid black;
}
/* 設置5像素粗的虛線邊框，顏色為紅色 */
div {
border: 5px dashed red;
}
/* 設置上邊框為1像素實線，顏色為黑色；右邊框為2像素實線，顏色為紅色；下邊框為3像素實線，顏色為綠色；左邊框為4像素實線，顏色為藍色 */
div {
border-top: 1px solid black;
border-right: 2px solid red;
border-bottom: 3px solid green;
border-left: 4px solid blue;
}
box-sizing
設置元素的盒模型的計算方式，取值可以是content-box或border-box。
/* 使用content-box計算盒模型 */
div {
box-sizing: content-box;
}
/* 使用border-box計算盒模型 */
div {
box-sizing: border-box;
}
- 定位屬性
position
設置元素的定位方式，取值可以是static、relative、absolute或fixed。
/* 使用默認的靜態定位 */
div {
position: static;
}
/* 相對定位 */
div {
position: relative;
}
/* 絕對定位 */
div {
position: absolute;
}
/* 固定定位 */
div {
position: fixed;
}
top
設置元素的頂部邊緣相對于其包含元素的頂部邊緣的偏移量，取值可以是像素值、百分比等。
/* 偏移量為10像素 */
div {
top: 10px;
}
/* 偏移量為50% */
div {
top: 50%;
}
bottom
設置元素的底部邊緣相對于其包含元素的底部邊緣的偏移量，取值可以是像素值、百分比等。
/* 偏移量為10像素 */
div {
bottom: 10px;
}
/* 偏移量為50% */
div {
bottom: 50%;
}
left
設置元素的左側邊緣相對于其包含元素的左側邊緣的偏移量，取值可以是像素值、百分比等。
/* 偏移量為10像素 */
div {
left: 10px;
}
/* 偏移量為50% */
div {
left: 50%;
}
right
設置元素的右側邊緣相對于其包含元素的右側邊緣的偏移量，取值可以是像素值、百分比等。
/* 偏移量為10像素 */
div {
right: 10px;
}
/* 偏移量為50% */
div {
right: 50%;
}
- 浮動屬性
float
設置元素的浮動方式，取值可以是left、right或none。
/* 左浮動 */
div {
float: left;
}
/* 右浮動 */
div {
float: right;
}
/* 不浮動 */
div {
float: none;
}
clear
設置元素的清除方式，取值可以是left、right、both或none。
/* 清除左側浮動元素 */
div {
clear: left;
}
/* 清除右側浮動元素 */
div {
clear: right;
}
/* 清除兩側浮動元素 */
div {
clear: both;
}
/* 不清除浮動元素 */
div {
clear: none;
}
- 顯示屬性
display
設置元素的顯示方式，取值可以是block、inline、inline-block、none等。
/* 塊級元素 */
div {
display: block;
}
/* 行內元素 */
span {
display: inline;
}
/* 行內塊級元素 */
img {
display: inline-block;
}
/* 不顯示 */
div {
display: none;
}
- 其他屬性
opacity
設置元素的透明度，取值可以是0~1之間的數字。
/* 完全透明 */
div {
opacity: 0;
}
/* 半透明 */
div {
opacity: 0.5;
}
/* 不透明 */
div {
opacity: 1;
}
z-index
設置元素的堆疊順序，取值可以是數字。
/* 堆疊順序為1 */
div {
z-index: 1;
}
/* 堆疊順序為2 */
div {
z-index: 2;
}
cursor
設置鼠標懸停時的光標形狀，取值可以是pointer、default、text等。
/* 懸停時的光標形狀為手型 */
a {
cursor: pointer;
}
/* 懸停時的光標形狀為默認形狀 */
div {
cursor: default;
}
/* 懸停時的光標形狀為文本輸入形狀 */
input {
cursor: text;
}
visibility
設置元素的可見性，取值可以是visible、hidden或collapse。
/* 可見 */
div {
visibility: visible;
}
/* 不可見 */
div {
visibility: hidden;
}
/* 折疊，對于表格元素有效 */
table {
visibility: collapse;
}
overflow
設置元素溢出內容的處理方式，取值可以是visible、hidden、scroll或auto。
/* 可見，溢出內容不會被裁剪 */
div {
overflow: visible;
}
/* 不可見，溢出內容會被裁剪 */
div {
overflow: hidden;
}
/* 可滾動，出現滾動條 */
div {
overflow: scroll;
}
/* 自動，根據需要自動出現滾動條 */
div {
overflow: auto;
}
