HTML中的CSS
阿新 • • 發佈：2020-12-10
CSS
HTML對於頁面上元素的樣式，沒有一個很好的辦法進行約束，所以有了css來修改頁面上元素樣式,考慮一個物件的樣式：顏色、大小、位置，邊框，距離。
在HTML當中修改樣式需要依賴CSS(cascading style sheets):層疊樣式表。
層疊：就是在一個物件上，通過多重描述作用到一起形成樣式。
CSS使用的方法
CSS是作用在HTML元素上的樣式描述，所以在使用的時候，有三種方式：
行內式
在元素內部通過style屬性進行css樣式設定：
<!DOCTYPE html>
<html lang="en"> HTML任意標籤都有style屬性
嵌入式
在頁面的內部，通常在頭部，使用style標籤，在style標籤內部編寫樣式，這樣的樣式可以作用在一個頁面多個共性的元素上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h2 {
color: green;
}
</style>
</head>
<body>
< 外鏈式
基於多個HTML共性的CSS，為了方便程式碼的維護，採用外部的CSS檔案進行樣式描述，這個時候需要使用link標籤匯入外部的CSS檔案
檔案結構
被匯入的css檔案
h2 {
color: green;
}
html檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/01_CSS.css">
</head>
<body>
<h2>G</h2>
<h2>G</h2>
<h2>G</h2>
<h2>G</h2>
</body>
</html>
三種使用方式不同，但是css的編寫格式一致：
屬性：值;
而嵌入和外鏈式需要使用大括號對css進行分割
{屬性：值;}
CSS選擇器
CSS是用來描述HTML元素的樣式的，要描述就需要指定描述物件，指定的方式就是選擇器。
基本選擇器
標籤選擇器
通過標籤名稱選擇所有該標籤的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color: pink;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<h6>h1</h6>
<h6>h2</h6>
<h6>h3</h6>
</body>
</html>
id選擇器
通過#id來指定頁面內部對應id值的標籤的樣式，一個頁面當中，id不可以重複，所以，id選擇器只針對單個元素進行修改，和行內樣式有重疊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#red {
color: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<h6 id="red">h1</h6>
<h6>h2</h6>
<h6>h3</h6>
</body>
</html>
類選擇器
通過.class來指定頁面內部對應class值的標籤，類選擇器在整個CSS編寫過程當中使用最頻繁。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.g {
color: green;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p class="g">p3</p>
<h6 id="red">h1</h6>
<h6 class="g">h2</h6>
<h6>h3</h6>
<span class="g">這是一個span</span>
</body>
</html>
關係選擇器
子關係
使用>連線兩個選擇器來表示當前標籤直接巢狀的標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#w_p > span{
color: red;
}
</style>
</head>
<body>
<p id="w_p">
<span>1</span>
<p>
<span>
2
</span>
</p>
</p>
</body>
</html>
後代關係
使用空格連線兩個選擇器來表示當前標籤巢狀的標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*#w_p > span{*/
/*color: red;*/
/*}*/
#w_p span{
color: red;
}
</style>
</head>
<body>
<p id="w_p">
<span>1</span>
<a>
<span>
2
</span>
</a>
</p>
</body>
</html>
後代包含子
並列關係
使用,連線多個選擇器來表示並列的多個標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*#w_p > span{*/
/*color: red;*/
/*}*/
/*#w_p span{*/
/*color: red;*/
/*}*/
#w_p,#w_p1 {
color: red;
}
</style>
</head>
<body>
<p id="w_p">
<span>1</span>
<a>
<span>
2
</span>
</a>
</p>
<p id="w_p1">
<span>1</span>
<a>
<span>
2
</span>
</a>
</p>
</body>
</html>
屬性選擇器
基於基本選擇器和關係選擇器的更加細節一種選擇器
| 選擇器 | 描述 |
|---|---|
| p[age=“18”] | 所有age屬性值為18的元素 |
| p[id^=“w”] | 所有id屬性值以w開頭的元素 |
| p[id$=“p”] | 所有id屬性值以p結尾的元素 |
| p[id*=“p”] | 所有id屬性值包含p的元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p[age="18"]{
color: red;
} /*所有age屬性值為18的元素*/
p[id^="w"]{
color: red;
} /*所有id屬性值以w開頭的元素*/
p[id$="p"]{
color: red;
}/*所有id屬性值以p結尾的元素*/
p[id*="p"]{
color: red;
}/*所有id屬性值包含p的元素*/
</style>
</head>
<body>
<p id="w_p" age="18">
<span>1</span>
<a>
<span>
2
</span>
</a>
</p>
<p id="w_1" age="18">
<span>1</span>
<a>
<span>
2
</span>
</a>
</p>
<p id="b_p2">
<span>1</span>
<a>
<span>
2
</span>
</a>
</p>
<p id="w_p3">
<span>1</span>
<a>
<span>
2
</span>
</a>
</p>
</body>
</html>
偽類選擇器
當觸發某個條件之後執行的選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a {
color: red;
}
a:hover{
color: green;
}
</style>
</head>
<body>
<a href="#">hello world</a>
<a href="#">hello world</a>
<a href="#">hello world</a>
<a href="#">hello world</a>
<a href="#">hello world</a>
<a href="#">hello world</a>
</body>
</html>
CSS選擇器的優先順序
| 優先順序 | 值 |
|---|---|
| 行內 | 1000 |
| id | 100 |
| class | 10 |
| 標籤 | 1 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: green;
}
</style>
</head>
<body>
<p style="color: red">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</body>
</html>
css選擇器的優先順序和python變數的作用域原理類似，遵循就近原則。
CSS字型樣式
顏色
color 屬性來決定字型的顏色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.blue{
color: blue;
}
.red{
color: red;
}
.orange{
color: orange;
}
.green{
color: green;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
大小
font-size 字型大小，單位通常是px，也可以是em，rem或者百分比。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
font-size: 150px;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
字型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
font-family: "Microsoft YaHei UI Light";
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
粗細
font-weight,100-900粗細
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.blue{
color: blue;
}
.red{
color: red;
}
.orange{
color: orange;
}
.green{
color: green;
}
span{
font-size: 150px;
font-family: "Microsoft YaHei UI Light";
font-weight: 900;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
樣式
font-style: 通常進行文字傾斜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.blue{
color: blue;
}
.red{
color: red;
}
.orange{
color: orange;
}
.green{
color: green;
}
span{
font-size: 150px;
font-family: "Microsoft YaHei UI Light";
font-weight: 900;
font-style: italic;/*傾斜*/
font-style: normal;/*正常樣式*/
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
位置
縮排
text-indent: 指定首行縮排距離
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 150px;
font-weight: 900;
text-indent: 20px;
}
</style>
</head>
<body>
<p>
hello world
</p>
</body>
</html>
水平
text-align進行水平方向上文字的位置的設定，包括 left(左) right(右) center(中)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 150px;
font-weight: 900;
text-align: center;
}
</style>
</head>
<body>
<p>
hello world
</p>
</body>
</html>
垂直
CSS當中，文字垂直位置是通過行高進行設定的，通常文字靠下顯示，但是會在行高高度上垂直居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 150px;
font-weight: 900;
line-height: 300px;
}
</style>
</head>
<body>
<p>
hello world
</p>
</body>
</html>
對於a標籤的強調
text-decration 去掉a標籤的下劃線
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">hello world</a>
</body>
</html>
css顏色設定
在css當中通常有四種顏色表達的方式
單詞
使用關於顏色的英文單詞可以快速的描述顏色
red green blue yellow
rgb
工業三原色，使用 r(紅) g(綠) b(藍) 三種顏色進行混色，調和出其他顏色，在CSS當中，每種顏色的由弱到強為 0-255，
rgb(0,0,0) 黑
rgb(255,255,255) 白
rgb(255,0,0) 紅
rgb(0,255,0) 綠
rgb(0,0,255) 藍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 150px;
font-weight: 900;
text-align: center;
line-height: 300px;
color: rgb(0,0,0);
}
</style>
</head>
<body>
<p>
hello world
</p>
</body>
</html>
十六進位制
在css當中採用#6位16進位制數，進行顏色表述，rgb分別佔2位。
255 FF
#FFFFFF #FFF
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.blue{
color: #4085FC;
}
.red{
color: #F13F3F;
}
.orange{
color: #ECBB06;
}
.green{
color: #43996A;
}
span{
font-size: 150px;
font-family: "Microsoft YaHei UI Light";
font-weight: 900;
/*font-style: italic;傾斜*/
font-style: normal;/*正常樣式*/
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
rgba
在rgb的基礎上添加了透明度a,a的取值範圍0-1。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
font-size: 150px;
font-weight: 900;
text-align: center;
line-height: 300px;
color: rgba(0,0,255,0.1);
}
</style>
</head>
<body>
<p>
hello world
</p>
</body>
</html>
元素劃分
塊級元素
塊兒級元素，預設寬度100%佔滿瀏覽器，支援全部的CSS樣式，比如：
<p>
<div>
<h1-6>
<ul> <ol> <dl> <dt> <dd> <li>
行內元素
寬度由內容決定，所以不能進行位置，大小，邊距設定，多個行內元素是居於一行的，比如：
<span>
<a>
<em> <i> <b> <u> <strong>
行內塊元素
支援所有的CSS樣式，但是多個行內塊元素是居於一行，通常是由塊兒級元素或者行內元素轉換過來。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>下面是個p</p>
<p>上面是個p</p>
<a href="#">這是個a</a>
<a href="#">這還是個a</a>
</body>
</html>
三種元素可以通過display方法進行轉換:
| 引數 | 描述 |
|---|---|
| inline | 轉換為行內元素 |
| block | 轉換為塊兒級元素 |
| inline-block | 轉換為行內塊兒元素 |
| none | 隱藏元素 |
CSS大小設定
除了文字之外，其他的HTML元素都可以使用 width 和 height 進行大小設定
| 屬性 | 描述 |
|---|---|
| width | 寬 |
| height | 高 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
width: 800px;
height: 800px;
}
</style>
</head>
<body>
<img src="1.jpg">
</body>
</html>
CSS邊框與背景設定
在CSS當中可以使用backgroud對HTML元素進行背景設定，細分有以下方法：
| 方法 | 描述 |
|---|---|
| background | 背景總的方法，可以支援連寫 |
| background-color | 背景顏色 |
| background-image | 背景圖片 |
| background-size | 背景大小 |
| background-repeat | 重複，repeat, no-repeat, repeat-x, repeat-y |
| background-position | 背景位置 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
height: 100%;
width: 100%;
}
body{
background-image: url("2.jpg");
background-size: 500px auto;
background-repeat: no-repeat;
background-position: center right;
background: url("2.jpg") no-repeat 500px center ;
}
span,p{
background-color: #4085FC;
}
</style>
</head>
<body>
<span>
hello world
</span>
<p>
hello world
</p>
</body>
</html>
在HTML當中，任何一個元素都有邊框，使用border進行設定
| 屬性 | 描述 |
|---|---|
| border | 邊框 |
| border-left | 左邊框 |
| border-right | 右邊框 |
| border-top | 頂部邊框 |
| border-bottom | 底部邊框 |
| border-radius | 圓角 |
| box-sizing:border-box; | 取消邊框佔位 |
對邊框的描述有三個引數
粗細：邊框線條的粗細，不佔元素寬度
樣式：線條顏色 虛線(dashed)，實線（solid），點狀線(dotted)
顏色: 就是顏色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 2px black solid;
width: 500px;
height: 600px;
text-align: center;
line-height: 500px;
border-radius: 50%;
}
</style>
</head>
<body>
<div>
hello world
</div>
</body>
</html>
CSS邊距
css當中有內邊距（padding）和外邊距(margin)，
margin 是邊框距離父元素的距離
padding 是邊框和內容之間的距離
padding會改變原來的邊框大小
padding 和 margin都可以四個方向單獨設定
| 方向 | 描述 |
|---|---|
| padding-left margin-left | 左邊距 |
| padding-right margin-right | 右邊距 |
| padding-top margin-top | 上邊距 |
| padding-bottom margin-bottom | 下邊距 |
padding和margin可以支援多引數連寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent{
width: 800px;
height: 800px;
border: 2px black solid;
padding: 100px; /*內邊距，邊框和內容之間的距離*/
}
.child{
width: 200px;
height: 200px;
border: 100px blue solid;
margin: 200px;*/
}
.child{
width: 200px;
height: 200px;
border: 100px blue solid;
margin: 200px; /*外邊距距離上下左右各200*/
margin: 200px 400px; /*外邊距距離上200 左400*/
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
margin也可以用在塊元素水平居中
magin: 0 auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.borderd{
background-image: url("border.jpg");
width: 179px;
height: 320px;
margin: 0 auto;
}
.borderd > img{
margin: 8px;
width: 165px;
height: 255px;
}
</style>
</head>
<body>
<div class="borderd">
<img src="atm.jpg">
</div>
<hr>
<div class="borderd">
<img src="atm.jpg">
</div>
</body>
</html>
css位置設定
文件流
HTML預設是從上到下，從左到右進行元素分佈的，塊兒級元素佔一行，行內元素從左到右排列在一行。
浮動
浮動可以使塊級元素可以從左到右進行排列，但是會脫離當前的文件流，上浮一層。
浮動採用float屬性，有以下特徵：
1、浮動分為left和right，注意浮動和元素的先後順序，寫在前面的元素先浮動。
2、浮動後的元素會脫離當前的文件流，所以不會佔用當前文件流的高度，導致父元素閉合。
3、浮動的物件按照浮動的值進行水平排列，如果超出父元素的寬度自動折行
4、浮動之後脫離原來的文件流，如果上面有沒有浮動的元素會覆蓋，如果下面有沒有浮動的元素會補齊，文字除外
css 位置
css位置，可以使用浮動進行設定，float:left[right],但是單純浮動不夠靈活還是需要另外技術點來確定元素的位置。這個技術點叫做定位。
在這個技術點開始之前，先看一下清除浮動和元素溢位的處理。
浮動可以實現好多佈局，但是也帶來了很多問題，尤其是：
1、父元素高度問題
2、換行問題
基於上述問題，在浮動之後，需要清除浮動對父元素和下面不浮動的元素帶來的影響，清除浮動有以下三種方式。
1、給父元素固定高度。
2、使用overflow: hidden;屬性
3、使用消除浮動的css屬性 clear:both; 這個功能和上述的功能不一樣，不是針對父元素，而是針對換行，浮動過程當中使用clear：both，浮動元素會換行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent{
border: 1px black solid;
/*height: 500px; 第一種清除浮動*/
/*overflow: hidden; overflow 清除浮動*/
}
.parent div{
float: left;
width: 400px;
height: 400px;
}
.c1{
background-color: red;
}
.c2{
background-color: green;
}
.c4{
background-color: blue;
}
.c3{
background-color: black;
clear: both;
}
</style>
</head>
<body>
<div class="parent">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3">
</div>
<div class="c4" style="float: none;">
</div>
</div>
</body>
</html>
溢位處理
在css樣式設定過程當中，經常會遇到子元素的寬高大於父元素，這個時候需要對超出的部分進行設定。
| 屬性 | 描述 |
|---|---|
| hidden | 超出部分隱藏 |
| scroll | 超出部分自適應,新增兩個方向的滾動條 |
| auto | 超出部分自適應,超出新增方向新增滾動條 |
| visible | 超出部分預設 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent{
width: 400px;
height: 400px;
border: 2px black solid;
/*overflow: hidden; /*超出部分隱藏*/
overflow: scroll; /*超出部分自適應,新增兩個方向的滾動條*/
/*overflow: auto; /*超出部分自適應,超出新增方向新增滾動條*/
/*overflow: visible; /*超出部分預設*/
}
.c1{
width: 500px;
height: 300px;
background-color: rgba(255,255,0,0.2);
}
</style>
</head>
<body>
<div class="parent">
<div class="c1"></div>
</div>
</body>
</html>
定位
開發者可以使用position進行定位操作：
| 引數 | 描述 |
|---|---|
| absolute | 絕對定位，參照頁面進行定位 |
| relative | 相對定位，相對父元素 |
| fixed | 固定定位，基於視窗 |
| static | 靜態，預設值無效果 |
在position的使用過程當中，必須配合方向描述定位的位置
| 方向 | 翻譯 |
|---|---|
| top | 上 |
| bottom | 下 |
| left | 左 |
| right | 右 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 100px auto;
}
.child{
width: 200px;
height: 200px;
background-color: green;
/*position: absolute;*/
/*position: relative;*/
/*position: fixed;*/
/*position: static;*/
position: absolute;
bottom: 100px;
right: 500px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
<div class="parent">
<div class="child">
</div>
</div>
<div class="parent">
<div class="child">
</div>
</div>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>