流媒體音樂 Spotify App 出現了隱藏的 HiFi 圖示
阿新 • • 發佈：2021-05-18
1、什麼是CSS？
- CSS 指層疊樣式表 (Cascading Style Sheets)
- 樣式定義如何顯示 HTML 元素
- 樣式通常儲存在樣式表中
- 把樣式新增到 HTML 4.0 中，是為了解決內容與表現分離的問題
- 外部樣式表可以極大提高工作效率
- 外部樣式表通常儲存在 CSS 檔案中
- 多個樣式定義可層疊為一個
2、CSS發展史
1. CSS1.0
19912月W3C釋出了第一個有關樣式的標準CSS1.0。這個版本中，已經包含了的相關font的相關屬性、顏色與背景的相關屬性、文字的相關屬性、box的相關屬性等。
2. CSS2.0（新增div等）
1985年5月，CSS2.0正式推出。這個版本推薦的是內容和表現效果分離的方式，並開始使用樣式表結構。
3. CSS2.1（添加了浮動，定位等）
2004年2月，CSS2.1正式推出。它在CSS2.0的基礎上略微做了改動，刪除了許多不被瀏覽器支援的屬性。
4. CSS3（添加了圓角，陰影，動畫等）
早在2001年，W3C就著手開始準備開發CSS第三版規範。雖然完整的、規範權威的CSS3標準還沒有塵埃落定，但是各主流瀏覽器已經開始支援其中的絕大部分特性。
3、基礎語法和註釋
CSS 樣式由選擇器和一條或多條以分號隔開的樣式宣告組成。每條宣告的樣式包含著一個 CSS屬性和屬性值。
div { background-color: blue; color: rebeccapurple; font-family: "agency fb"; } /* 這裡就是註釋 */
- css宣告要以分號;結束，宣告以{}括起來
- 建議一行書寫一個屬性
- 若值為若干單詞，則要給值加引號，如 font-family: "agency fb";
4、CSS的使用
1.行內式
行內樣式將樣式定義在具體html元素的style屬性中。行內式寫的CSS耦合度高，只適用於當前元素，在設定某個元素的樣式時比較常用。
<p style="color:red;font-size:50px;">這是一段文字</p>
2.嵌入式
嵌入式通過在html頁面內容開闢一段屬於css的程式碼區域，通常做法為在< head>標籤中巢狀
<style> h1{ color: red; } </style>
3.引用式
在實際開發當中，很多時候都使用引入外聯樣式檔案，這種形式可以使html頁面更加清晰，而且可以達至更好的重用效果。
<link rel="stylesheet" href="css/style.css">
注意：CSS的優先順序為就近原則
5、選擇器
5.1、基本選擇器
通用選擇器
選擇所有 *
* {
......
}
元素選擇器
選擇指定標籤
元素名稱 {
......
}
id選擇器
選擇設定過指定id屬性值的元素 #
#id屬性值 {
......
}
類選擇器
選擇設定過指定class屬性值的元素
.class屬性值 {
......
}
分組選擇器
當幾個元素樣式屬性一樣時，可以共同呼叫一個宣告，元素之間用逗號分隔
選擇器1,選擇器2, ...{
......
}
CSS樣式的優先順序，是根據選擇器的權重來決定的，常見的權重如下，權重越大，優先順序越高
-
通用選擇器：0
-
元素選擇器：1
-
類選擇器：10
-
id選擇器：100
-
內聯樣式：1000
5.2、組合選擇器
- CSS組合選擇器說明了兩個選擇器直接的關係，有如下四種組合方式：
- 後代選取器(以空格分隔)
- 子代選擇器(以大於號分隔）
- 相鄰兄弟選擇器（以加號分隔）
- 普通兄弟選擇器（以波浪線分隔）
後代選擇器
用於選擇指定元素後的所有元素（要在指定標籤內部），以空格分隔
選擇器1 選擇器2 {
......
}
子代選擇器
用於選擇指定標籤元素的所有同級第一代子元素（要在指定標籤內部），以大於號分隔
選擇器1 > 選擇器2 {
......
}
相鄰兄弟選擇器
可選擇緊接在所選元素後的同級元素，以加號分隔
選擇器1 + 選擇器2 {
......
}
普通兄弟選擇器
選擇緊接在所選元素後的所有同級元素，以波浪線分隔
選擇器1 ~ 選擇器2 {
......
}
例項：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 後代選擇器 */
.food li {
color: red;
}
/* 子代選擇器 */
.food > li {
color: blue;
}
/* 相鄰兄弟選擇器 */
.d + p {
color: blueviolet;
}
/* 普通兄弟選擇器 */
#l ~ li {
color: forestgreen;
}
</style>
</head>
<body>
<h3>食物</h3>
<ul class="food">
<li>水果</li>
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
<li>蔬菜</li>
<ul>
<li>黃瓜</li>
<li>花菜</li>
<li>白菜</li>
</ul>
</ul>
<p>相鄰兄弟選擇器1</p>
<div class="d">
<p>相鄰兄弟選擇器2</p>
</div>
<div>
<p>相鄰兄弟選擇器3</p>
</div>
<div class="d">
<p>相鄰兄弟選擇器4</p>
</div>
<p>相鄰兄弟選擇器5</p>
<div>
普通兄弟選擇器
<ul>
<li>java</li>
<li id="l">html</li>
<li>css</li>
<li>js</li>
<ul>
<li>linux</li>
<li>c++</li>
</ul>
</ul>
</div>
</body>
</html>
效果：
5.3、結構偽類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* ul的第一個子元素 */
ul li:first-child {
background-color: red;
}
/* ul的最後一個子元素 */
ul li:last-child {
background-color: blue;
}
/*
選擇當前p元素的父元素的第一個子元素，並且是當前元素才生效
*/
p:nth-child(1) {
background-color: chartreuse;
}
/* 選中當前p元素的父元素下的第二個p元素，並且是當前元素才生效 */
p:nth-of-type(2) {
background-color: #9648ff;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
效果：
5.4、屬性選擇器
- 屬性
- 屬性和值
- 屬性和多值
例項：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
display: inline-block;
width: 50px;
height: 50px;
border-radius: 5px;
background-color: #45ff64;
text-decoration: none;
line-height: 50px;
text-align: center;
}
/* 選擇有id屬性的a標籤 */
/*a[id]{*/
/* background-color: yellow;*/
/*}*/
/* 選擇id屬性值為first的a標籤 */
/*a[id="first"]{*/
/* background-color: yellow;*/
/*}*/
/* 選擇class屬性值含有link的a標籤,只要能截取出link這個詞就行 */
/*a[class *= "link"]{*/
/* background-color: yellow;*/
/*}*/
/* 選擇class屬性值含有獨立的單詞link的a標籤 */
/*a[class ~= "link"]{*/
/* background-color: yellow;*/
/*}*/
/* 選擇href屬性值以http開頭的a標籤 */
/*a[href ^= "http"]{*/
/* background-color: yellow;*/
/*}*/
/* 選擇href屬性值以http獨立唯一單詞開頭的a標籤 */
/*a[href |= "http"]{*/
/* background-color: yellow;*/
/*}*/
/* 選擇href屬性值以com結尾的a標籤 */
a[href$="com"]{
background-color: yellow;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" title="百度連結" class="first link" id="first">1</a>
<a href="https://www.jingdong.com" class="link link" >2</a>
<a href="ab.doc" class="link item" target="_blank" >3</a>
<a href="xxx.pdf" class="llllllllllinnkkkkk" >4</a>
<a href="http" class="linkitem" >5</a>
<a href="http http" class="link end" >6</a>
</p>
</body>
</html>
效果：
6、美化頁面
原因：
- 有效的傳遞頁面資訊
- 美化網頁，頁面漂亮，才能吸引使用者
- 凸顯頁面的主題提
- 高使用者的體驗
6.1、字型樣式
font-family
文字字型，該屬性設定文字的字型。 font-family屬性應該設定幾個字型名稱作為一種"後備"機制，如果瀏覽器不支援第一種字型，他將嘗試下一種字型， 所以儘量將不常見的字型靠前，將最常見的字型放置在最後，作為替補。
注意：
1）只有當字型名中含有空格或#、$之類的符號時（如 New York），才需要在font-family宣告中加引號：
body {
font-family: "arial black";
}
2）多個字體系列是用一個逗號分隔指明
p{
font-family: 微軟雅黑,黑體,"agency fb";
}
font-size
字型大小
body {
font-size: 50px; /*字型大小50px*/
}
#span1 {
font-size: 25px; /*字型大小25px*/
}
font-style
字型風格，該屬性最常用於規定斜體文字。 屬性值：normal、italic、oblique
1）normal：文字正常顯示；
2）italic：文字斜體顯示；
3）oblique：文字傾斜顯示，oblique是將文字強制傾斜。
說明：一般情況下，字型有粗體、斜體、下劃線、刪除線等諸多屬性，但是不是所有字型都具有這些屬性，一些不常 用字型可能只有正常體，若使用italic屬性則沒有效果，所以需要oblique屬性強制傾斜
font-weight
字型加粗，該屬性設定文字的粗細。
100 ~ 900：為字型指定了 9 級加粗度。如果一個字型內建了這些加粗級別，那麼這些數字就直接對映到預定義的級別。
說明一點：頁面中想要突出顯示的字型一般用span標籤包含，然後修改樣式
例項：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
/*font-style: italic;*/
/*font-weight: bold;*/
/*font-size: 20px;*/
/*font-family: 楷體;*/
/* 可以使用font一次性設定 */
font:italic bold 20px "Arial Black",楷體;
}
</style>
</head>
<body>
<h1>沉入綠影，品茶心</h1>
<p>
喜歡茶，有一種茶有個極其風雅的名字，叫飄雪。飄雪是茉莉花茶。我不敢用這種茶葉沏茶，因為是會失眠的。茶有千好，只是吃茶的壞處只有一項，就是吃多了會失眠。失眠是讓人苦惱的事情。這就是吃茶的唯一的壞處。
</p>
<p>
沒有茶的日子是荒蕪的。寂靜的影，在燈下閱讀的喜悅，一壺清茶是必須的裝飾。茶用味道說話，它在述說，不管你聽不聽得懂。茶若濃了，是悲傷;茶若淡了，是歡喜。淡到沒有味時，茶就陷入沉思，不再說話。
</p>
<p>
Are you learning another language? Maybe you're trying to get to grips with it for work or study, or maybe you're trying to master it just for the fun of it? Language learning is nothing new, of course, but technology has made it easier than ever to grasp.
</p>
</body>
</html>
效果：
6.2、文字樣式
color
body {
color:blue;
}
h1 {
color:#00ff00;
}
h2 {
color:rgb(255,0,0);
}
/* 最後一個引數是透明的，取值0~1 */
h3 {
color:rgba(255,0,0,0.5);
}
text-align
設定文字對齊方式：
- center 居中
- right 居右
- left 居左
- justify 兩端對齊
body {
text-align:center;
}
text-decoration
- underline 對文字新增下劃線，與HTML的u元素相同。
- overline 對文字新增上劃線。
- line-through 對文字新增中劃線，與HTML中的s和 strike 元素相同。
- none 關閉原本應用到元素上的所有裝飾。
h3 {
text-decoration:underline;
}
text-indent
/* 2em就代表縮排兩個字 */
p.ident2 {
text-indent: 2em;
}
6.3、超連結偽類和陰影
- :hover
- text-shadow
例項：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 初始顏色 */
a{
color: blue;
text-decoration: none;
display: block;
}
/* 滑鼠懸停時的狀態 */
a:hover{
color: darkorange;
font-size: 40px;
}
/* text-shadow: 陰影顏色 水平延伸距離 垂直延伸距離 陰影模糊值
水平距離和垂直距離可以為負，對應一個平面直角座標系的座標軸上的值
*/
.price {
text-shadow: red 10px 10px 2px;
}
</style>
</head>
<body>
<p>
<img src="img/a.jpg" alt="">
</p>
<p>
<a href="#">碼出高效：Java開發手冊</a>
</p>
<p>
<a href="#">作者: 楊冠寶</a>
</p>
<p >
<a class="price" href="#">￥99</a>
</p>
</body>
</html>
效果：
6.4、背景和漸變
background-color
設定元素的背景顏色
body{
background-color: white;
}
background-image
設定背景影象
body{
background-image: url("img/a.jpg");
}
background-repeat
設定背景影象以何種方式鋪展
body{
background-image: url("img/a.jpg");
background-repeat: repeat-y;
}
- repeat：全部鋪滿，預設
- repeat-x：只會鋪滿水平方向
- repeat-y：只會鋪滿垂直方向
- no-repeat：背景影象不會重複，只有一個
漸變
語法：
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
- direction：用角度值指定漸變的方向（或角度）。
- color-stop1, color-stop2,...：用於指定漸變的起止顏色。
- 如果在起止顏色後有半分比：表示在當前方向上的此百分比處此顏色漸變開始
例子：
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
6.5、盒子模型
border、padding、margin三個屬性構成了盒子模型。
border
設定所有的邊框屬性。
1）可同時設定邊框的寬度、樣式、顏色
table, th, td {
border: 1px solid black;
}
table {
width:100%; height:50px;
}
2）使用border-width、border-style、border-color單獨設定
table,td {
border-width: 1px;
border-style: dotted;
border-color: green;
}
3）border-collapse
- 設定是否將表格邊框摺疊為單一邊框。
- 屬性值：separate（預設，單元格邊框獨立）、collapse（單元格邊框合併）
table {
border-collapse : collapse;
}
margin
設定一個元素所有外邊距的寬度，或者設定各邊上外邊距的寬度。
p.margin {
margin: 2px 4px 3px 4px;
}
單獨設定各邊的外邊距：margin-top、margin-left、margin-bottom、margin-right
p.margin{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
*{
margin: auto auto;
}
*{
margin: 100px auto;
}
說明：
- auto：自動，可以理解為居中的意思。瀏覽器自動計算外邊距。
- 需要是一個塊級元素，且有寬度大小
- margin: auto auto：第一個auto表示上下外邊距自動計算，第二個auto表示左右外邊距自動計算。但是上下外邊距在自動計算時不會生效，而左右外邊距會生效，表現為居中狀態, 想要實現上下居中需自行計算
padding
設定元素所有內邊距的寬度，或者設定各邊上內邊距的寬度。
如果在表的內容中控制文字到邊框的內邊距，使用td和th元素的填充屬性：
td {
padding:15px;
}
單獨設定各邊的內邊距：padding-top、padding-left、padding-bottom、padding-right （同上）
預設按照上右下左的順序設定 （同上）
注意：元素的大小= margin + border + padding + 內容寬度
6.6、圓角邊框
- border-radius
- 也可以設四個值，也是順時針對應四個角
- 因此我們可以畫不同的圖形
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 100px;
height: 100px;
border: 2px solid red;
border-radius: 0 100px 0 0;
}
.div2{
width: 100px;
height: 50px;
border: 2px solid red;
margin: 30px;
border-radius: 50px 50px 0 0;
}
/* 圖片的大小為50x50 */
img {
border-radius: 25px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<img src="img/a.jpg" alt="">
</body>
</html>
效果：
6.7、陰影
- box-shadow
- 引數：
- 陰影水平偏移值（可為負）
- 陰影垂直偏移值 （可為負）
- 陰影模糊值 （不可為負）
- 的陰影外延值（可為負）
- 陰影的顏色
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 60px;
margin: 0 auto;
}
img{
border-radius: 25px;
box-shadow: 10px 10px 80px 2px red;
}
</style>
</head>
<body>
<div>
<img src="img/a.jpg" alt="">
</div>
</body>
</html>
效果：
6.8、浮動
display
display 屬性規定元素應該生成的框的型別。這個屬性用於定義建立佈局時元素生成的顯示框型別。
| 值 | 描述 |
|---|---|
| none | 此元素不會顯示 |
| inline | 此元素將會顯示為行內元素，元素前後沒有換行符 |
| inline-block | 行內塊級元素，既是是行內元素，也是塊級元素 |
| block | 此元素將會顯示為塊級元素，元素前會帶有換行符 |
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>
塊級元素
</div>
<span>行內元素</span>
</body>
</html>
效果：
float
float的屬性值有none、left、right。
- 只有橫向浮動，並沒有縱向浮動。
- 會將元素的display屬性變更為block。
- 浮動元素的前一個元素不會受到任何影響（如果你想讓兩個塊狀元素並排顯示，必須讓兩個塊狀元素都應用 float）。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="father">
<div class="layer1"><img src="img/1.jpg" alt=""></div>
<div class="layer2"><img src="img/2.jpg" alt=""></div>
<div class="layer3">為使用者甄選海量的高清美圖，用更流暢、更快捷、更精準的搜尋體驗，帶你去發現</div>
</div>
</body>
</html>
div{
margin: 10px;
padding: 5px;
}
.father{
border: 2px solid black;
}
.layer1 {
border: 1px solid black;
float: left;
}
.layer2 {
border: 1px solid black;
float: left;
}
.layer3 {
border: 1px solid black;
float: left;
}
效果：
與display對比：
- display
- 方向不可控
- float
- 會出現父級邊框塌陷問題
對於上面出現父級邊框塌陷問題解決
clear
/*
clear: right;右側不允許有浮動元素
clear: left;左側不允許有浮動元素
clear: both;兩側不允許有浮動元素
clear: none;
*/
解決方法：
1、為父級元素設一個足夠大的高度
.father{
border: 2px solid black;
height: 500px;
}
2、在父級div中最後新增一個空div
/* 空div的class值為clear */
.clear{
margin: 0;
padding: 0;
clear: both;
}
3、overflow
/* 沒有設定高度，高度由塊內元素決定 */
.father{
border: 2px solid black;
overflow: hidden;
}
4、父類新增一個偽類：after
.father:after{
content: "";
display: block;
clear: both;
}
小結:
-
設定父元素的高度
簡單，元素假設有了固定的高度，就會被限制 -
浮動元素後面增加空div
簡單，程式碼中儘量避免空div -
overflow
簡單，下拉的一些場景避免使用 -
父類新增一個偽類:after_(推薦)
寫法稍微複雜一點，但是沒有副作用，推薦使用
6.9、定位
相對定位
- 設定相對定位
- position: relative
- 相對於原來的位置，進行指定的偏移，相對定位的話，它仍然在標準文件流中，原來的位置會被保
- 相對移動
- top
- right
- bottom
- left
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 300px;
height: 300px;
padding: 10px;
border: 2px solid red;
margin: 0 auto;
}
a {
display: block;
width: 100px;
height: 100px;
background-color: fuchsia;
text-align: center;
line-height: 100px;
text-decoration: none;
color: white;
}
#box a:hover{
background-color: blue;
}
.a2,.a4{
position: relative;
left: 200px;
bottom: 100px;
}
.a5{
position: relative;
left: 100px;
bottom: 300px;
}
</style>
</head>
<body>
<div id="box">
<a class="a1" href="#">連結1</a>
<a class="a2" href="#">連結2</a>
<a class="a3" href="#">連結3</a>
<a class="a4" href="#">連結4</a>
<a class="a5" href="#">連結5</a>
</div>
</body>
</html>
效果：
絕對定位
- position: absolute
- 定位:基於xxx定位，上下左右~
- 沒有父級元素定位的前提下，相對於瀏覽器定位
- 假設父級元素存在定位，我們通常會相對於父級元素進行偏移~
- 在父級元素範圍內移動
- 相對於父級或瀏覽器的位置，進行指定的偏移，絕對定位的話，它不在在標準文件流中，原來的位置不會被保留
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 5px;
}
#father{
border: 1px solid red;
}
.d1 {
background-color: #45ff64;
position: absolute;
left: 10px;
}
.d2 {
background-color: fuchsia;
}
.d3 {
background-color: blue;
}
</style>
</head>
<body>
<div id="father">
<div class="d1">段落一</div>
<div class="d2">段落二</div>
<div class="d3">段落三</div>
</div>
</body>
</html>
效果：
固定定位
- position: absolute
- 元素的位置相對於瀏覽器視窗是固定位置
- 移動與上面一樣有四個方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){ /* 絕對定位相對於瀏覽器 */
width: 100px;
height: 100px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
div:nth-of-type(2) { /* 固定定位 */
width: 50px;
height: 50px;
position: fixed;
background-color: #8187ff;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
效果：
與絕對定位對比：
- 絕對定位是對於滑動條在最上邊定位的，也就是初始位置，會隨著滑動條移動而移動
- 固定定位是不會移動的
z-index
-
z-index 屬性指定一個元素的堆疊順序。
-
擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
-
屬性值
- auto：預設。堆疊順序與父元素相等。
- number：設定元素的堆疊順序。
- inherit：規定應該從父元素繼承 z-index 屬性的值。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
<ul>
<li><img src="img/bg.png" alt=""></li>
<li class="text">心花怒放</li>
<li class="bg"></li>
<li>主演：黃渤 徐崢</li>
<li>時間：2014-09-30</li>
</ul>
</div>
</body>
</html>
#content{
margin: 0;
padding: 0;
width: 300px;
overflow: hidden;
border: 2px solid red;
font-size: 12px;
line-height: 25px;
text-align: center;
}
ul,li{
margin: 0;
padding: 0;
list-style: none;
}
/* 父級元素確定相對定位 */
ul{
position: relative;
}
.text,.bg {
/* 確定絕對定位，相對於ul */
position: absolute;
width: 300px;
height: 25px;
bottom: 56px;
}
.text{
z-index: 999;
}
.bg{
background-color: #8187ff;
/* 設定透明度 0~1 */
opacity: 0.8;
}
效果：