目錄
4、元素 ID 選擇器：嚴格的定義---頁面比較特別的組成，比如標題、佈局
一：CSS 概述
1、CSS 的作用：統一的方式定義外觀
相對於原始的html：屬性可以用來設置樣式，比如 border、width、cols
二：CSS 基礎語法
1、如何用？--多種方式，供靈活選擇
方式一：內聯方式---html 元素有個 style 屬性
style="color:red;"
----適用於單個元素
方式二：內部樣式表---當前頁面裏樣式重用
head 裏添加一個 style，將 CSS 樣式定義
<style>
p
{
}
</style>
方式三：外部樣式表
單獨定義一個文件/.css---定義樣式
html頁面，引入樣式文件
優先建議使用“外部樣式表”---實現內容和表現分離，從而提高可維護度和可重用性
換皮膚：a.html/b.html/c.html....
s1.css
s2.css
s3.css
2、重複:沒有衝突的取並集，重複定義的依靠優先級
優先級：就近原則
內聯方式 > 內部或者外部樣式表
如果優先級別相同，以最後一次定義爲準
*** 補充：
內聯方式：方便快速演示( 如, Boss演示)
外部樣式表：便於維護
三：選擇器：誰選擇使用{}中定義的樣式
1、元素選擇器---html中的標籤名稱
p{}
h1{}
h2{}
優點：使用簡單，爲某種標籤定義樣式
缺點：跨類別、同一種下的細分
2、類選擇器
CSS中：
.s1 {
...
}
例如：
.s1{//點 名字
border：1px solid red; //邊框： 尺寸 實線/虛線等 顏色
}
HTML中：
<標籤 class="s1” >
3、分類選擇器：定義更清晰，同一種下的細分
CSS 中：
input.txt {}
input.btn {}
html 中：
<p class="txt"></p>--error
<input class="" />
4、元素 ID 選擇器：嚴格的定義---頁面比較特別的組成，比如標題、佈局
CSS 中：
#a1 {}
html中：
<標記 id="a1" >
5、派生選擇器：以層次關係作爲定義
CSS 中：
div a {...}
div.left a {...}
ul li ol li a {...}
HTML 中：
<div class="left">
txt
<a>ddd</a>
</div>
6、選擇器分組：需要爲一些元素定義它們樣式中相同的部分時
CSS 中：
p,input.txt,#a1{....}
7、僞類：在不同狀態下的樣式
XXX:link {}---未訪問過
XXX:active {}---激活
XXX:hover {}---懸浮、懸停--鼠標移入
XXX:visited {}---已訪問過的
XXX:focus {}---獲得焦點( 如, 選中文本框 )
四：常用的單位
尺寸:%/px/pt
顏色：#dddddd
//pt： 絕對, 不根據屏幕大小變化, 根據人的肉眼. 基準爲9pt-->字體
//px: 相對 -->長寬高
可見／隱藏／滾動條／自動(多滾動條，少可見)
visible／hidden／scroll／auto
五：尺寸
width/height
overflow:visible/hidden/scroll/auto;
六：邊框
1、定義所有的邊框
border:1px solid red;---簡寫方式
等同於：
border-width:1px;
border-style:solid;
border-color:red;
2、定義單邊的邊框
border-left:1px solid red;
border-right:1px solid green;
top/bootom
七：框模型（box modal，盒子模型）--間距
處理元素內容（height/width）、邊框(border)、內邊距(padding)和外邊距(margin)的方式，設置，會導致元素所佔的面積變大
1、margin：外邊距
2、padding：內邊距
//從上往下, 從左往右
3、寫法
margin:30px;--四個方向，左邊/上邊優先
margin-left:;---單方向
margin-right:;
margin-top:;
margin-bottom:;
簡寫1：4個值
margin:10px 20px 30px 40px;--順時針
top right bottom left
簡寫2：2個值
margin:10px 20px;
4、特殊寫法
margin:0px auto;---居中顯示
分析：
佈局
背景,表格,導航
八：背景
background-color:;--背景色
background-image:url(a.jpg);--背景圖片
background-repeat:repeat/no-repeat/repeat-x/repeat-y;---平鋪，漸變色的效果
background-position:left top;
10px 20px
background-attachment:fixed/scroll;--背景圖像的附着方式，可以實現類似於水印的效果
九：文本
color:;--顏色
font-size:;--大小
font-family:value1,value2,..;--字型
text-align:center/left/right;--水平對齊
font-weight:normal/bold;--加重
text-decoration:none/underline;--是否有下劃線
text-indent:10px;---設置首行縮進
line-height:;—行高
十：表格---表格特有的樣式
border-collapse:collapse;
vertical-align:top/middle/bottom;---垂直方向上的對齊，設置單元格中的垂直對齊
十一：浮動
默認情況下，流模式佈局
float:left/right;---讓元素脫離原有的佈局，浮動起來，停靠到包含框的左側或者右側----修改默認佈局
clear:both/left/right;--清除附近浮動元素所帶來的影響
課堂練習一：
新建一個 html 頁，使用內聯方式爲 P 元素定義樣式：文本爲紅色，背景色爲灰色
使用內部樣式表的方式爲 h1 元素定義樣式：文本爲綠色
使用外部樣式表爲 h2 定義樣式：文本爲黃色，字體大小爲 10pt
十二：顯示
1、html元素有默認的顯示方式：塊級、行內
對於行內元素設置高度或者寬度
2、需要修改默認的顯示方式
display:static/block/inline/none(常結合js代碼實現元素的動態顯示或者消失);
//靜態 塊級 行內 不顯示
十三：列表特有的樣式
list-style-type:none;--設置列表項的標示符
list-style-image:;--設置圖片爲標示符
十四：定位
1、默認流模式，修改原有的定位方式
float：設置浮動，不能隨意設置位置
相對定位
絕對定位
2、position:;--修改定位方式，脫離原有的層
a、相對定位：沒有偏移屬性，位置不變，因爲偏移是相對於原有位置；移動，原有區域依然保留
b、絕對定位：沒有偏移屬性，位置不變，有偏移，相對於最近的已定位的祖先元素；原有區域不保留
3、偏移屬性：
top/left/bottom/right:20px;
4、堆疊順序
z-index:-1;---層
十五：光標屬性
cursor:default/pointer/help/wait/../image;
