1、什麼是CSS
如何學習
- CSS是什麼
- CSS怎麼用
- CSS選擇器（重點，難點）
- 美化網頁（文字，陰影，超連結，清單，界面。。。。）
- 盒子模型
- 浮動
- 定位
- 網頁動畫（特效）
1.1、什麼是CSS
Cascading Style Sheet 層疊級聯樣式表
CSS：表現（美化頁面）
字型，顔色，邊距，高度，寬度，圖檔
1.3、快速入門
練習格式：
style
基本入門
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--規範 <style> 中可以編寫css的代碼，每一個聲明最好使用分好結尾
文法：
選擇器{
聲明1；
聲明2；
聲明3；
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是标題</h1>
</body>
</html>
建議使用這種規範
css的優勢
- 内容和表現分離
- 網頁結構表現統一，可以實作複用
- 樣式十分豐富
- 建議使用獨立于html的css檔案
- 利于SEO，容易被搜尋引擎收錄！
1.4、css四種導入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部樣式-->
<style>
h1{
color: green;
}
</style>
<!--外部樣式-->
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!--優先級：覆寫原則-->
<!--行内樣式：在标簽中，編寫一個style屬性，編寫樣式即可-->
<h1 style="color: red">我是标題</h1>
</body>
</html>
2、選擇器
作用：選擇頁面上的某個或者某一類元素
2.1、基本選擇器
1.标簽選擇器：選擇一類标簽 标簽{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--标簽選擇器會選擇頁面上所有的這個标簽-->
h1{
color: red;
}
p{
color: green;
font-size: 80px;
}
</style>
</head>
<body>
<h1>學Java</h1>
<h1>學Java</h1>
<p>聽課</p>
</body>
</html>
2.類選擇器class：選擇所有class屬性一緻的标簽，可以跨标簽 .類名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*類選擇器的格式： .class的名稱{}
好處：可以多個标簽歸類，是同一個class
*/
.yt{
color: #4db331;
}
.you{
color: #a63037;
}
</style>
</head>
<body>
<h1 class="yt">标題1</h1>
<h1 class="you">标題2</h1>
<h1 class="you">标題3</h1>
<p class="you">段落</p>
</body>
</html>
3.ID選擇器：全局唯一，不能重複 #id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id選擇器, id必須保證全局唯一!
#id名稱{}
幾個選擇器中不遵循就近原則，固定的
優先級：id選擇器> class選擇器 > 标簽選擇器
*/
#yt{
color: red;
}
</style>
</head>
<body>
<h1 id="yt">标題1</h1>
<h1>标題2</h1>
<h1>标題3</h1>
<h1>标題4</h1>
</body>
</html>
幾個選擇器中不遵循就近原則，固定的
優先級：id選擇器> class選擇器 > 标簽選擇器
2.2、層次選擇器
1.後代選擇器：在某個元素後面
<style>
/*後代選擇器 空格*/
body p{
background-color: #a63037;
color: #59ca28;
}
</style>
2.子選擇器, 一代 兒子
/*子選擇器 大于符号*/
body>p{
background-color: yellow;
}
3.相鄰兄弟選擇器 同輩
/*相鄰兄弟選擇器 ：隻有一個，向下 加号*/
.active + p{
background-color: blue;
}
4.通用選擇器
/*通用兄弟選擇器，目前選中元素的向下的所有兄弟元素*/ .active~p{ background-color: chartreuse; }
2.3、結構僞類選擇器
僞類：
/*ul的第一個子元素 */ ul li:first-child{ background-color: #a63037; } /*ul的最後一個子元素 */ ul li:last-child{ background-color: #4db331; }
2.4、屬性選擇器（常用）
id + class結合
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .demo a{ float: left; display: block; height: 50px; width: 50px; border-radius: 30px; background: #4db331; text-align:center; color: gray; text-decoration: none; margin-left: 5px; font:bold 20px/50px Arial; } /*屬性名 或者 屬性名=屬性值（正則） = 絕對等于 *= 包含這個元素 ^= 以這個元素開始 $= 以這個結尾 */ /*存在id屬性的元素 a[屬性]{}*/ /* a[id]{ background: yellow; } a[title]{ background: red; } */ /*class 中有links的元素*/ a[class *="links"]{ background: blue; } /*選中href中以http開頭的元素*/ a[href^=http]{ background: yellow; } a[href $= pdf]{ background:red; } </style></head><body><p class="demo"> <a href="http://www.baidu.com" class="links item first" id="first">1</a> <a href="" class="links item active" target="_blank" title="test">2</a> <a href="images/123.html" class="links item">3</a> <a href="images/123.png" class="links item">4</a> <a href="images/123.jpg" class="links item">5</a> <a href="abc" class="links item">6</a> <a href="/a.pdf" class="links item">7</a> <a href="/abc.pdf" class="links item">8</a> <a href="abc.doc" class="links item">9</a> <a href="abcd.doc" class="links item last">10</a></p></body></html>
= 絕對等于*= 包含這個元素^= 以這個元素開始$= 以這個結尾
3、美化網頁元素
3.1、 為什麼要美化網頁
1、有效的傳遞資訊
2、頁面漂亮，吸引客戶
3、凸顯主題
4、提高使用者體驗
span标簽：重點要突出的字，使用span标簽套起來
3.2、字型樣式
<head> <meta charset="UTF-8"> <title>Title</title> <!-- font-family：字型 font-size:字型大小 font-weight: 字型粗細 color:字型的顔色 --> <style> body{ font-family: 楷體; color: #4db331; text-align: center; } h1{ font-size: 50px; } .p1{ font-weight: bold; } </style></head>
3.3、文本樣式
1、顔色 color rgb rgba
2、文本對齊方式 text-align = center
3、首行縮進 text-indent: 2em;
4、行高 line-height
5、裝飾 text-decoration
6、文本圖檔對齊 vertical-align
3.4、文本陰影和超連結僞類
<style> /*預設的顔色*/ a{ text-decoration: none; color: black; } /*滑鼠懸浮的狀态*/ a:hover{ color: #59ca28; } /*滑鼠按住未釋放的狀态*/ a:active{ color: red; } #price{ text-shadow: #59ca28 10px 10px 10px; } </style>
正常情況下，基本上隻使用：
a:hover{ color: #59ca28; }
3.5、清單
list-style:
none 去掉原點
circle 空心原點
decimal 數字
3.6、背景
背景圖檔
<style> div{ width: 1000px; height: 700px; border: 1px solid red; background-image: url("images/a.PNG");//預設全部是平鋪的 } .div1{ background-repeat: repeat-x; } .div2{ background-repeat: repeat-y; } .div3{ background-repeat: no-repeat; } </style>
4、盒子模型
4.1、 什麼是盒子模型
margin: 外邊距
padding：内邊距
border: 邊框
4.2、邊框
<style> body{ /*body 總有一個預設的外邊距margin*/ margin: 0px; } /*border: 粗細，樣式，顔色*/ #box{ width: 300px; height: 150px; border: 1px solid red; } form{ background: gray; } div:nth-of-type(1) input{ border: 3px solid black; } </style>
border: 3px solid black;
實線：solid
虛線：dashed
4.3、内外邊距
外邊距的妙用：居中
margin: 0 auto;
上下左右
4.4、圓角邊框
border-radius:10px;
4.5、盒子陰影
box-shadow: 10px 10px 1px
5、浮動
5.1、标準文檔流：
文檔流指的是元素排版布局過程中，元素會預設自動從左往右，從上往下的流式排列方式
塊級元素：獨占一行
h1~h6 p div 清單、、、、、
行内元素：不獨占一行
span a img .....
行内元素可以包含在塊級元素中，反之不可以
5.2、display
display:block;
block 塊元素
inline 行内元素
inline-block 是塊元素，但是可以内聯，在一行
none:消失
5.3、float
1、左右浮動 float
float:right;
float:left;
5.4、父級邊框塌陷問題
clear:right; 右側不允許有浮動元素
clear: left; 左側不允許有浮動元素
clear: both; 兩側不允許有浮動元素
clear: none;
解決方案
1、增加父級元素高度
2、增加一個空的div标簽，清楚浮動
<div ></div>.clear{ clear:both; margin:0; padding:0;}
3、overflow
在父級元素中增加一個 overflow:hidden;
overflow: scroll;//産生滾動條
4、父類增加一個僞類：after
#father:after{ content:''; display:block; clear:both;}
小結：
1.浮動元素後面增加div
簡單，代碼中盡量避免空的div
2.設定父元素的高度
簡單，元素假設有了固定的高度，就會被限制
3.overflow
簡單，下拉的一些場景避免使用
4.父類增加一個僞類：after
推薦使用，但寫法複雜
5.5、對比
-
diplay
方向不可以控制
-
float
浮動起來會脫離标準文檔流
6、定位
6.1、相對定位
position: relative;
相對于原來的位置，進行指定的偏移，仍然在标準文檔流中，原來的位置會被保留
上左下右
top left bottom right
6.2、絕對定位
定位：基于xxx定位，上下左右
1、沒有父類元素定位的前提下，相對于浏覽器定位
2、如果父類元素存在，通常相對于父類元素偏移
不在原來的位置
6.3、固定定位
position: fixed
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)