CINNO Research：2021 年國內 AMOLED 面板廠全年投產面積大幅增加 57.0%
阿新 • • 發佈：2022-03-14
如何學習
-
CSS是什麼
-
CSS怎麼用
-
CSS選擇器（重點+難點）
-
美化網頁（文字、陰影、超連結、列表、漸變）
-
盒子模型
-
浮動
-
定位
-
網頁動畫（特效效果）
1.1什麼是CSS
Cascading Style Sheet 層疊級聯樣式表
CSS：表現（美化介面）
字型、顏色、邊距、高度、寬度、背景圖片、網頁定位、網頁浮動...
1.2 發展史
CSS1.0
CSS2.0 DIV（塊）+CSS ，HTML與CSS結構分離的思想 網頁變得簡單，SEO
CSS2.1 浮動，定位
CSS3.0 圓角，陰影，動畫... 瀏覽器相容性
1.3快速入門
style
基本入門
建議使用這種規範
CSS的優勢：
-
內容和表現分離
-
網頁結構表現統一，可以實現複用
-
樣式十分豐富
-
建議使用獨立於html的css檔案
-
使用SEO，容易被搜尋引擎收錄
1.4CSS匯入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 內部樣式 -->
<style>
h1{
color: greenyellow;
}
</style>
<!-- 外部樣式 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--優先順序：就近原則-->
<!--行內樣式：在標籤元素中，編寫一個style屬性，編寫樣式即可-->
<h1 style="color: red">我是標題</h1>
</body>
</html>
擴充套件：外部樣式兩種寫法
-
連結式：
html
<!-- 外部樣式 -->
<link rel="stylesheet" href="css/style.css"> -
匯入式：
@improt是CSS2.1特有的！
<!-- 匯入式 -->
<style>
@import url("style.css");
</style>
2、選擇器
作用：選擇頁面上的某一個或者某一類元素
2.1 基本選擇器
1、標籤選擇器：選擇一類標籤 --》標籤{}
2、類選擇器 class：選中所有class屬性一致的標籤，跨標籤 --》.類名{}
3、id選擇器：全域性唯一！--》#id名{}
注：優先順序： id > class > 標籤
2.2層次選擇器
1、 後代選擇器：在某個元素的後面 祖爺爺 爺爺 爸爸 你
/*後代選擇器*/
body p{
background: brown;
}
2、子選擇器 一代，兒子
/*子選擇器*/
body>p{
background: #0b79ed;
}
3、相鄰兄弟選擇器 同輩
/*相鄰兄弟選擇器： 只有一個，相鄰（向下）*/
.active + p{
background: green;
}
4、通用選擇器
/*通用兄弟選擇器：當前選中元素的向下的所有兄弟元素*/
.active~p{
background: greenyellow;
}
2.3結構偽類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--避免使用，class和id選擇器-->
<style>
/*ul的第一個子元素*/
ul li:first-child{
background: aqua;
}
/*ul的最後一個子元素*/
ul li:last-child{
background: darkorchid;
}
/* 選中 p1 : 定位到父元素，選擇當前的第一個元素
選擇當前p元素的父級元素，選中父級元素的第一個
並且是當前元素才生效
按照順序選擇
*/
p:nth-child(1){
background: yellow;
}
/*選中父元素下的p元素的第二個
按照型別選擇
*/
p:nth-of-type(2){
background: red;
}
/*a:hover{*/
/* background: yellow;*/
/*}*/
</style>
</head>
<body>
<!-- <a href="">123456</a>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
2.4屬性選擇器
id + class 結合