文章目錄
- 一、CSS介紹
- 1. 簡介
- 2. 相關網站
- 3. HTML引入方式
- 二、選擇器
- 1. 標簽選擇器
- 2. 類選擇器
- 3. ID選擇器
- 4. 群組選擇器
- 四、樣式
- 1. 字體樣式
- 2. 文本樣式
- 3. 邊框樣式
- 4. 表格樣式
- 五、模型和布局
- 1. 盒子模型
- 2. 網頁布局
一、CSS介紹
1. 簡介
CSS主要用于控制網頁的外觀，將網頁的格式與內容分離。
通過使用CSS，網頁可以精確地控制字體、顏色、布局、位置等元素，實現個性化的網頁設計。
CSS樣式可以直接存儲在HTML網頁中，也可以單獨保存為外部樣式表文件。
2. 相關網站
CSS 教程
CSS 參考手冊
3. HTML引入方式
- 外部引入
<link rel="stylesheet" href="CSS文件路徑">
- 內部引入
<style>
CSS具體內容，下面的例子都是內部引入
</style>
- 行內引入
<標簽 style=""></標簽>
- 引入方式的區別
| 引入方式 | 位置 | 作用范圍 |
|---|---|---|
| 外部引入 | CSS寫在單獨的css文件中 | 多個頁面 |
| 外部引入 | CSS寫在head頭部style標簽中 | 當前頁面 |
| 行內引入 | CSS寫在標簽的style屬性中 | 當前標簽 |
二、選擇器
1. 標簽選擇器
- 通過標簽名稱，設置CSS樣式
h2 {color: red;
}
- 作用于
<h2>測試頁面</h2>
- HTML頁面效果
2. 類選擇器
- 通過類名稱，設置CSS樣式
.color-style {color: red;
}
- 作用于
<h2 class="color-style">測試頁面</h2>
- HTML頁面效果
3. ID選擇器
- 通過ID名稱，設置CSS樣式
#idname {color: red;
}
- 作用于
<h2 id="idname">測試頁面</h2>
- HTML頁面效果
4. 群組選擇器
- 查找符合條件的標簽，設置CSS樣式
p,h2 {color: red;
}
- 作用于
<h2>測試頁面</h2>
<p>測試段落</p>
- HTML頁面效果
四、樣式
1. 字體樣式
h2 {font-family: Arial;font-size: 30px;font-weight: bold;font-style: italic;color: #000000;
}
- 作用于
<h2>測試頁面</h2>
- HTML頁面效果
- font-family 字體類型
- font-size 字體大小
- font-weight 字體粗細
- font-style 字體風格
- color 字體顏色
2. 文本樣式
h2 {text-align: center;text-decoration: line-throught;line-height: 36px;
}
- 作用于
<h2>測試頁面</h2>
- HTML頁面效果
- text-align 水平對齊 left center right
- text-decoration 文本修飾 underline line-throught overline
- line-height 行高
3. 邊框樣式
h2 {border-width: 1px;border-style: dashed;border-color: red;
}
- 作用于
<h2>測試頁面</h2>
- HTML頁面效果
- border-width 邊框寬度
- border-style 邊框外觀 dashed solid
- border-color 邊框顏色
4. 表格樣式
table,tr,th,td {border: 1px solid;
}
table {caption-side: top;border-collapse: separate;border-spacing: 6px;
}
- 作用于
<table><caption>表格</caption><tbody><tr><td>姓名</td><td>性別</td></tr><tr><td>張三</td><td>男</td></tr></tbody>
</table>
-
HTML頁面效果
-
caption-side 表格標題位置 top bottom
-
border-collapse 表格邊框合并 separate collapse
-
border-spacing 表格邊框間距
五、模型和布局
1. 盒子模型
h2 {width: 300px;overflow: scroll;text-align: center;border: 25px solid green;padding: 25px 25px 25px 25px;margin: 25px 25px 25px 25px;
}
- 作用于
<h2>測試頁面</h2>
- HTML頁面效果
- 所有HTML元素可以看作盒子，包括：邊距，邊框，填充，實際內容
- margin 外邊距 上像素值 右像素值 下像素值 左像素值
- padding 內邊距 上像素值 右像素值 下像素值 左像素值
- content 內容區 width height overflow
-
2. 網頁布局
.header,.footer{width: 500px;height: 60px;background: green;
}
.topnav {width: 500px;height: 50px;background: red;
}
.main{width: 500px;height: 300px;background: blue;}
.left,.right{background: #c9e143;width: 100px;height: 300px;
}
.left{float: left;
}
.right{float: right;
}
- 作用于
<body><div class="header"></div><div class="topnav"></div><div class="main"><div class="left"></div><div class="right"></div></div><div class="footer"></div>
</body>
- HTML頁面效果
，見鬼了)
![[后端卷前端2]](http://pic.xiahunao.cn/[后端卷前端2])
)
![[今來] 神話故事：金馬和碧雞](http://pic.xiahunao.cn/[今來] 神話故事：金馬和碧雞)
![[Java][Map]linkedhashmap的引入](http://pic.xiahunao.cn/[Java][Map]linkedhashmap的引入)
