小高不太行之前端——CSS樣式（基礎）上
提示：下篇馬上問世，在趕了在趕了
提示：
文章目錄
- 小高不太行之前端——CSS樣式（基礎）上
- 前言
- 一、基礎知識
- （一）插入方法【外部/內部/行內】
- 1.外部樣式表
- 2.內部樣式表
- 3.行內樣式
- （二）基本語法【選擇器+宣告】
- 選擇器
- 常規選擇器
- 復合選擇器
- 宣告
- 二、整體布局的渲染
- （一） 盒子模型BOX
- 1.Margin(外邊距) & Padding(內邊距)
- 2.Border(邊框)
- style取值
- 3.Content(內容)
- （二）布局
- （三）元素顯示【溢位/浮動/顯示】
- 1.溢位overflow
- 2. 浮動Float
- 3.display&visiablity
- 下期預告 CSS樣式（基礎）下
前言
浪了n周以后那個小高又回來了，要對CSS下手了，走過路過留下小心心哦
Cascading Style Sheets ,英文啥的不重要 ，記住它叫
樣式表 --就是又快又美地打扮html滴
一、基礎知識
（一）插入方法【外部/內部/行內】
1.外部樣式表
- 創建.css檔案添加樣式
- 每個頁面使用
<link>標簽鏈接到樣式表，<link>標簽在（檔案的）頭部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2.內部樣式表
使用 <style> 標簽在檔案頭部定義內部樣式表
3.行內樣式
對要修飾的元素，在其標簽內使用 style 屬性
<html>
<head>
<!-- 內部樣式 -->
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image: url(img/back6.png);}
</style>
</head>
<body>
<hr>
<hr>
<hr>
<!-- 行內樣式 -->
<p style="color: aliceblue;">從前有座山,山里有座廟</p>
</body>
</html>
運行結果如下：
（二）基本語法【選擇器+宣告】
——>> 選擇器1，選擇器2，……+{宣告1，宣告2，……} <<——
選擇器
常規選擇器
-
id 選擇器
給標有特定 id 的 HTML 元素添加樣式， -
class 選擇器
將擁有該class類的html標簽同時添加相同樣式 -
分組選擇器
將很多具有相同樣式的元素同時添加相同樣式 -
嵌套選擇器
因為html標簽本身可以相互嵌套，因此有許多個類和標簽，運用嵌套選擇能更加精準的找到要渲染的元素
復合選擇器
- 后代選擇器(以空格 分隔)
- 子元素選擇器(以大于 > 號分隔）
- 相鄰兄弟選擇器（以加號 + 分隔）
- 普通兄弟選擇器（以波浪號 ～ 分隔）
因為已有的資源進行了細致的講述，點擊菜鳥教程/css/組合選擇符了解詳細資訊
宣告
宣告就是屬性和一個具體的值構成
屬性千千萬，對于一些常用的屬性小高將在下面著重介紹哦
二、整體布局的渲染
（一） 盒子模型BOX
1.Margin(外邊距) & Padding(內邊距)
因為二者的屬性相同，所以偷個懶
它們都只有上下左右四個屬性，可以用百分比和像素單位來確定值
2.Border(邊框)
任意屬性I可以和屬性II搭配
| 屬性I | 屬性II |
|---|---|
| border | style |
| top | color |
| bottom | width |
| left | – |
| right | – |
style取值
3.Content(內容)
盒子模型的內容自然由打工人填充，重點移步至[三、重要的修飾物件和屬性]
（二）布局
頭部區域、選單導航區域、內容區域、底部區域，
（三）元素顯示【溢位/浮動/顯示】
1.溢位overflow
- visible 默認值，內容不會被修剪，會呈現在元素框之外， hidden 內容會被修剪，并且其余
內容是不可見的， - scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容，
- auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容，
注意：一定要先設定高度，不然你的overflow屬性繡出花來都沒用
2. 浮動Float
-
其取值為左或右或者none
-
可以用clear 屬性指定元素兩側不能出現浮動元素
有時浮動會導致元素的展示達不到理想的效果，所以需要進行控制
3.display&visiablity
下期預告 CSS樣式（基礎）下
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/274412.html
標籤：python
上一篇：TensorFlow2入門指南 | 02 回歸問題實戰
下一篇：python求素數