目錄
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;