前言：
div
css
兩個(gè)html標(biāo)簽
1 div:塊標(biāo)簽
<div></div> 標(biāo)簽內(nèi)部的內(nèi)容會(huì)換行 默認(rèn)自己獨(dú)占
2 span:行內(nèi)的塊標(biāo)簽
<span><span> 標(biāo)簽內(nèi)部的內(nèi)容不會(huì)換行
一 css
css 層疊樣式表
作用:
渲染頁面
提高工作效率
css 的格式：
選擇器{屬性:值;屬性1:值1;}
css 的使用：
方式1：內(nèi)聯(lián)樣式表
通過標(biāo)簽的style屬性設(shè)置樣式例如style = "font-size：6"(不建議 不利于以后改寫)
方式2:內(nèi)部樣式表 在當(dāng)前頁面中使用的樣式通過head標(biāo)簽的style子標(biāo)簽導(dǎo)入
通過#+id找到
例如:
<style>
#id01{
background-color: #0f0;
}
</style>
方式3:外部樣式表 有獨(dú)立的css文件
通過head標(biāo)簽的link子標(biāo)簽導(dǎo)入
例如:
<link rel="stylesheet" href="css/1.css" type="text/css"/>
CodeDemo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#id01{
color: #ccc000;
}
</style>
<link rel="stylesheet" href="../css/1.css" type="text/css" />
</head>
<body>
<!--
css 語法 選擇器{屬性:值;屬性1:值1;}
內(nèi)聯(lián)樣式表 方式 （和語法的格式有點(diǎn)不同阶牍，但是這種方式不建議使用 艺智，不利于改寫）
-->
<div style="font-size: 3cm;">你好</div>
<!--
內(nèi)部樣式表 方式
內(nèi)部樣式表 在當(dāng)前頁面中使用的樣式通過head標(biāo)簽的style子標(biāo)簽導(dǎo)入
-->
<div id="id01">你好</div>
<!--
外部樣式表 方式
外部樣式表 有獨(dú)立的css文件通過head標(biāo)簽的link子標(biāo)簽導(dǎo)入
-->
<div id="id02">你好</div>
</body>
</html>
外部樣式表的css code： 1.css
#id02{
color: red;
}
注： 以上方式2， 方式3， 使用了id 選擇器 以下會(huì)講解
二 css 的選擇器
1 id選擇器
要求:
html元素必須有id屬性且有值 <xxx id="id1"></xxx>
css中通過"#"引入,后面加上id的值 #id1{...}
2 class選擇器
要求:
html元素必須有class屬性且有值 <xxx class="cls1"/>
css中通過"."引入,后面加上class的值 .cls1{...}
和id選擇器的區(qū)別一個(gè)通過. 引入 一個(gè)通過#
3 元素選擇器
直接用元素(標(biāo)簽)名即可 xxx{...}
注 ：使用此標(biāo)簽的元素都會(huì)被設(shè)置
4 屬性選擇器★(元素選擇器派生的)
要求:
html元素必須有一個(gè)屬性不論屬性是什么且有值 <xxx nihao="wohenhao"/>
css中通過下面的方式使用
元素名[屬性="屬性值"]{....}
例如:
xxx[nihao="wohenhao"]{....}
屬性選擇器操作在元素選擇器的基礎(chǔ)上
5 后代選擇器（針對(duì)嵌套標(biāo)簽 類似元素選擇器）
語法：
選擇器 空格 后代選擇器{...} 在滿足第一個(gè)選擇器的條件下找后代的選擇器
個(gè)人理解：
標(biāo)簽1 標(biāo)簽2（嵌套在1中的）{....}
6 錨偽類選擇器（了解 用的不多 但是常見）
了解的選擇器
錨偽類選擇器
a:link {color: #FF0000} /* 未訪問的鏈接 /
a:visited {color: #00FF00} / 已訪問的鏈接 /
a:hover {color: #FF00FF} / 鼠標(biāo)移動(dòng)到鏈接上 /
a:active {color: #0000FF} / 選定的鏈接 */
四個(gè)順序不能亂 否則有的效果出不來 使用的時(shí)候直接粘貼拿來用就行。
code Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#id01{
color: #CCC000;
}
</style>
<style>
.class01{
color: #FF0000;
}
</style>
<style>
span{
color: green;
}
</style>
<!--
屬性選擇器的使用
-->
<style>
span[attr = "aaa"]{
color: blue;
}
</style>
<style>
p font{
color: #0000FF;
}
</style>
<style>
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
</style>
</head>
<body>
<!--
id選擇器 元素含有id且id有值就行 css中通過#id的值引入
-->
<div id="id01">啊哈哈</div>
<!--
class選擇器 元素含有class且class有值就行 css中通過.的值引入
-->
<div class="class01">啊哈哈</div>
<!--
元素選擇器 使用了此元素標(biāo)簽都會(huì)被設(shè)置
-->
<span>Tom</span>
<span>kate</span>
<span attr = "aaa">john</span>
<!--
屬性選擇器 針對(duì)元素選擇器的基礎(chǔ)上 如上文的第三個(gè) span 自定義了個(gè)attr屬性 以及值
-->
<!--
后代選擇器
-->
<p>
<font> p下的font</font>
</p>
<!--
錨偽類選擇器
-->
<a > 移上來試試</a>
</body>
</html>
選擇器使用小結(jié):
id選擇器:一個(gè)元素(標(biāo)簽)
class選擇器:一類元素 值為class 的值就可以
元素選擇器:一種元素
屬性選擇器:元素選擇器的特殊用法
使用的時(shí)候注意:(了解)
若多個(gè)樣式作用于一個(gè)元素的時(shí)候
不同的樣式,會(huì)疊加
相同的樣式,最近原則
若多個(gè)選擇器作用于一個(gè)元素的時(shí)候
越特殊優(yōu)先級(jí)越高 id優(yōu)先級(jí)最高
三 屬性（選擇器會(huì)使用了了解下屬性及其值）
字體
font-family:設(shè)置字體(隸書) 設(shè)置字體家族
font-size:設(shè)置字體大小
font-style:設(shè)置字體風(fēng)格
文本:改變文本的顏色、字符間距滑进，對(duì)齊文本摹迷，裝飾文本，對(duì)文本進(jìn)行縮進(jìn)
color:文本顏色
line-height:設(shè)置行高
text-decoration: 向文本添加修飾郊供。 none underline
text-align:對(duì)齊文本
列表:
list-style-type:設(shè)置列表項(xiàng)的類型 例如:a 1 實(shí)心圓
list-style-image:設(shè)置圖片最為列表項(xiàng)類型 使用的時(shí)候使用 url函數(shù) url("/i/arrow.gif");
背景:
background-color:設(shè)置背景顏色
background-image:設(shè)置圖片作為背景 url
尺寸:
width:
height:
浮動(dòng):
float: 可選值 left right
分類:
clear:設(shè)置元素的兩邊是否有其他的浮動(dòng)元素
值為:both 兩邊都不允許有浮動(dòng)元素
display:設(shè)置是否及如何顯示元素。
none 此元素不會(huì)被顯示近哟。
block 此元素將顯示為塊級(jí)元素驮审，此元素前后會(huì)帶有換行符。
inline 默認(rèn)吉执。此元素會(huì)被顯示為內(nèi)聯(lián)元素疯淫，元素前后沒有換行符
四 框模型:(理解)
一個(gè)元素外面有padding(內(nèi)邊距) border(邊框) margin(外邊距)
padding:元素和邊框的距離
margin:元素最外層的空白
上面這三個(gè)屬性都有簡(jiǎn)寫的屬性
若設(shè)置大小的時(shí)候 四個(gè)值:順序 上右下左
padding:10px 10px 10px 10px
若只寫一個(gè)的話 代表四個(gè)邊使用同一個(gè)值 padding:10px
若只寫兩個(gè)個(gè)的話 代表四個(gè)邊使用同一個(gè)值 padding:10px 20px
若只寫三個(gè)個(gè)的話 代表四個(gè)邊使用同一個(gè)值 padding:10px 20px 30px
border(邊框)
還可以設(shè)置顏色 風(fēng)格
簡(jiǎn)寫屬性:
border:寬度 風(fēng)格 顏色;
border:5px solid red;
solid:實(shí)線
dashed:虛線
double:雙實(shí)線
