版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
css簡介
css是什么？
css選擇器
css基本語法
css樣式
css盒狀模型
css的定位
DIV+CSS
5
CSS是什么呢?
CSS是CascadingStyleSheets（級(jí)聯(lián)樣式表）的縮寫。
CSS是一種樣式表語言，用于為HTML文檔定義布局。例如，CSS
涉及字體、顏色、邊距、高度、寬度、背景圖像、高級(jí)定位等方面。
HTML可以用于為網(wǎng)站添加布局效果，但有可能被誤用。而CSS則
提供了更多選擇，而且更為精確、完善。現(xiàn)在所有瀏覽器都支持
CSSo
「HTML是定義網(wǎng)頁內(nèi)容，CSS則是定義內(nèi)容樣式，一般的話,
護(hù)樣式分離，既可以方便維護(hù)，也可以實(shí)現(xiàn)代碼重用。
◎在HTML中」。何引入CSS（1）
方法1：行內(nèi)樣式表（style屬性）
使用HTML屬性style
<html>
<head>
vtitle>例子〈/title〉
</head>
<bodystyle="background-color:#FFOOOO;,'>
vp>這個(gè)頁面是紅色的v/p>
</body>
</html>
◎在HTML中如何引入CSS（2）
方法2：內(nèi)部樣式表（style元素）
采用HTML元素style
<html>
<head>
〈title,例子v/title>
<styletype="text/css,,>
body{background-color:#FF0000;}
</style>
</head>
<body>
vp>這個(gè)頁面是紅色的v/p>
</body>
</html>
在HTML中如何引入CSSQ）
方法3：外部樣式表（引用一個(gè)樣式表文件）
外部樣式表就是一個(gè)擴(kuò)展名為css的文本文件。
例如，樣式表文件名為style.css,它通常被存放于名為style的目錄中
O
「1default.htm
Bstyle
<html>
<head>_Jstyle.css
〈title〉我的文檔v/title>
<linkrehstylesheet"type="text/css"href="style/style.css”/>
</head>
<body>
html>
在HTML中如何引入CSSQ)
使用Vlink＞這種方法的優(yōu)越之處在于：多個(gè)HTML文檔可以同時(shí)引用、
?個(gè)樣式表。換句話說，可以用一個(gè)CSS文件來控制多個(gè)HTML文檔
的布局
\對(duì)外部樣式表的修
style.css改將影響所有引用
它的HTML文檔。
曾言晅11
引用同一個(gè)樣式表的所有HTML文檔
◎在HTML中如何引入CSS。）
外部樣式表（引用一個(gè)樣式表文件）
<html>
<head>
<itle>我的文檔</title>
<1inkrel="stylesheet"type="text/css"
href="style.css"/>
</head>
<body>
<h1>我的第一個(gè)樣式表</h1>
</body>
</html>
body{
background-color：#FF0000；
}
◎在HTML中如何引入CSS。）
外部樣式表（引用一個(gè)樣式表文件）
<html>
<head>
我的文檔〈/title〉
<1inkrel="stylesheet"type="text/css
href="style.css"/>
</head>
<body>
<h1>我的第一個(gè)樣式表</h1>
</body>
</html>
body{
background-color：#FF0000；
}
css選擇器
selector{property:value
個(gè)
值：
選擇器：
比如說
表明花括號(hào)
background-color
中的屬性設(shè)
屬性的值可以是
置將應(yīng)用于
“和FOO。?！?/p>
哪些元素例如后于設(shè)置
HTML代表紅色）.
例如徵權(quán)）背旻色的屬性
ifbackgrc>und-colo『'
標(biāo)記選擇器
每一種HTML標(biāo)記的名稱都可以作為相應(yīng)的標(biāo)記選擇器的名稱。例
如，p選擇器就是用于聲明中所有<p>標(biāo)記的樣式風(fēng)格。
<style>
P(
colonred;
font-size:25px;
)
</style>
屋性值屋性值
IIII
hlicolor:red;font-size:14px;}
選擇器聲明聲明
派生選擇器
派生選擇器的結(jié)果是同時(shí)選中各個(gè)基本選擇器所選擇的范圍。任何
形式的選擇器（包括標(biāo)記，class,id選擇器等）都可以作為并集選擇器
的一部分。通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式
Iistrong{
font-style：italic；
font-weight：normal；
)
|HTML|
<pxstrong>我是粗體字，不是斜體字，因?yàn)槲也辉诹斜韒
中，所以這個(gè)規(guī)則對(duì)我不起作用</strongx/p>
<ol>
<1i><st「ong>我是斜體字。這是因?yàn)閟trong元素位于Ii
元素內(nèi)。</strong></1i>
<li>我是正常的字體。</li>
</ol>
css選擇器
id選擇器
id選擇器的使用方法與class選擇器基本相同，不同之處在
與id選擇器只能在HTML頁面中使用一次，針對(duì)行更強(qiáng)。
#red{color：red；}
#green{color：green；}
<pid="「ed">這個(gè)段落是紅色。</p>
<pid="green">這個(gè)段落是綠色。</p>
id選擇器可以用于多個(gè)標(biāo)記，但是一個(gè)id在一個(gè)HTML頁面中最
多只能賦予一個(gè)HTML標(biāo)記。
選擇器為標(biāo)有特定id的HTML元素指定特定的樣式
選擇器以來定義
id選擇器與派生選擇器
id選擇器和派生選擇器
在現(xiàn)代布局中，id選擇器常常用于建立派生選擇器
#sidebarp{
font-style：itaiic；
text-align：right；
margin-top：0.5em；
css選擇器
類選擇器
類別選擇器的名稱可以由用戶自定義，屬性和值跟標(biāo)記選
擇器一樣，也必須符合css規(guī)范。
.center{text-align：center}
<h1class="center">
Thisheadingwi11becenter-aligned
</h1>
<pclass="center">
Thisparagraphwi11alsobecenter-aligned.
</p>
css選擇器
類選擇器------------------
類選擇器
id一樣，class也可被用作派生選擇器
.fancytd{
color：#f60；
background：#666；
css選擇器
類選擇器
類選擇器
元素也可以基于它們的類而被選擇
td.fancy{
color：#f60；
background：#666；
)
<tdclass="fancy">
css選擇器
通配選擇器)-------------
通配選擇器
樣式應(yīng)用于文檔中的所有元素
*{property：value)
css選擇器
偽類選擇器A
偽類選擇器
selector：pseudo-cIass{property：value}
HCSS選擇器
f偽類選擇器)-------------------------------------
、_________y
偽類
錨偽類一鏈接的不同狀態(tài)：未被訪問狀態(tài)、已被訪問狀態(tài)、
鼠標(biāo)懸停狀態(tài)、活動(dòng)狀態(tài)
a：Iink{color：#FF0000}/*unvisitedIink*P
a：visited{color：#OOFFOO}/*visitedIink*/
a：hover{color：#FFOOFF}/*mouseoverIink*/
a：active{color：#OOOOFF}/*selectedIink*/
提示：1＞在CSS定義中，a:hover"必須被置于a:link和a:visited之后，才是有
效的
2、在CSS定義中，a:active必須被置于a:hover之后，才是有效的
3、偽類名稱對(duì)大小寫不敏感
K7T
css基本語法
屬性值的單位
絕對(duì)量
像素(pixel,px)、英寸(inch,in)、厘米
(centimeter,cm)、毫米(millimeter,mm)、
磅(point,pt)、12點(diǎn)活字(pica,pc)
相對(duì)量
em(字母m的高度)、ex(字母x的高度)、%
(百分比)
______________________________________________________________7
ns基本語法
4s基本語法
顏色值
/*英文單詞red*/
p{color:#red；}
/*使用十六進(jìn)制的顏色值#ffOOOO*/
p{color：#ffOOOO；}
/*為了節(jié)約字節(jié)，我們可以使用CSS的縮寫形式*/
p{color:#f00；}
/*我們還可以通過兩種方法是用RGB值*/
p{color：rgb(255,0,0)；}
p{color：rgb(1OO%,O%,O%)；}
4s基本語法
記得寫引號(hào)
/*如果值為若干單詞，則要給值加引號(hào)*/
p{font-family："sansserif",arial；}
SS基本語法
多重聲明
/*若定義不止一個(gè)聲明，則需要用分號(hào)將每個(gè)聲明分外
最后一條規(guī)則不需要加分號(hào)，因?yàn)榉痔?hào)在英語中是一個(gè)分
隔符號(hào)，不是結(jié)束符號(hào)。然而，大多數(shù)有經(jīng)驗(yàn)的設(shè)計(jì)師會(huì)
在每條聲明的末尾都加上分號(hào)，這么的好處是，當(dāng)你從現(xiàn)
有的規(guī)則中增減聲明時(shí)，會(huì)盡可能的減少出錯(cuò)的可能性*/
p{text-align：center；color：red；}
/*建議在每行只描述一個(gè)屬性，以便增強(qiáng)可讀性*/
P{
text-align：center；
color：black；
font-family：arial；
"S基本語法
格和大小不寫敏感
多數(shù)規(guī)則包含不止一個(gè)聲明
多重聲明和空格的使用使得樣式表更容易被編輯
是否包含空格不會(huì)影響CSS在瀏覽器的工作效果，同樣，與
XHTML不同，CSS對(duì)大小寫不敏感
不過存在一個(gè)例外：如果涉及到與HTML文檔一起工作的
話，class和id名稱對(duì)大小寫是敏感的
body{
color：#000；
background：#fff；
margin：0；
padding：0；
font-family：Georgia,PaIatino,serif；
*s基本語法
選擇器的分組
可以對(duì)選擇器進(jìn)行分組
這樣被分組的選擇器就可以分享相同的聲明
用逗號(hào)將需要分組的選擇器分開
h1,h2,h2,h3,h5,h6{
color：green；
}
y
c5s基本語法
顏色與背景
?color
?background-color
?background-image
?background-repeatuuuyi
?background-attachmentbackground-color：#FFCC66；
background-image：
?background-positionurlCbutterfly.gif"）；
?backgroundbackground-repeat：no-repeat；
background-attachment：fixed；
background-position：rightbottom；
}
hi{
color：#990000；
background-color：#FC9804；
}
字體屬性
?font-family〃設(shè)置字體系列
?font-style〃設(shè)置字體風(fēng)格
?font-variant〃以小型大寫字體或者正常字體顯示文本
?font-weight//設(shè)置字體粗細(xì)
?font-size〃設(shè)置字符尺寸
簡寫屬性，將有關(guān)字體的所有屬性設(shè)置在一個(gè)聲明中
P{
font-style：italic；
font-weight：bold；
font-size：30px；
font-family：arial,sans-serif；
css基本語法
文本屬性J-----------------
?text-indent〃縮進(jìn)元素中文本首行
?text-align〃對(duì)齊元素中文本
?text-decoration〃向文本添加修飾
?letter-spacing〃設(shè)置字符間距
?text-transform〃控制元素中的字母
y
JS盒狀模型
超鏈接屬性A
a
color：blue；
text-decoration：none；
}
a：visited{
color：purple；
text-decoration：none；
)
a：active{
background-color：yeIlow；
text-decoration：none；
a：hover
color：red；
text-decoration：none；
*s盒狀模型
盒狀模型
?span和div元素用于組織和結(jié)構(gòu)化文檔，并經(jīng)常聯(lián)合class和id屬
性一起使用
?用span組織元素
?span元素可以說是一種中性元素，因?yàn)樗粚?duì)文檔本身添加
任何東西
?但是與CSS結(jié)合使用的話，span可以對(duì)文檔中的部分文本增
添視覺效果
?用div組織元素
8n的使用局限在一個(gè)塊元素內(nèi)，而div可以被用來組織一
或多個(gè)塊元素
y
盒狀模型
border
盒狀模型(boxmodel)margin
用于描述一個(gè)為HTMLpadding
元素形成的矩形盒子
涉及為各個(gè)元素
調(diào)整外邊距
(margin)、邊
框(border)、element
內(nèi)邊距(padding)
內(nèi)容的具體操
width
邊框?qū)傩?/p>
dotted
?border-width
?border-color
dashed
?border-style
IIIthick
css定位
浮動(dòng)元素(float)
?可以通過CSS屬性float令元素向左或向右浮動(dòng)
?也就是說，令盒子及其中的內(nèi)容浮動(dòng)到文檔(或者是上層盒子)
的右邊或者左邊
—這個(gè)管子向左浮動(dòng)
<-
<-
一Afloatingimage
…這里的空白由后面的盒子填充Istequidemveteresinterponeturhoneste,qui
velmensebreviveltotoestiunioranno.Utor
permisso,caudaequepilesutequinaepaulatim
vellounum,demoetiamunum,dumcadatelusus
Interdumvolgusrectumvidet,estubipeccat.
Siveteresitamiraturlaudatquepoetas,ut
nihilanteferat,nihililliscomparet,errat.
Siquaedamnimisantique,siperaquedure
Interdumvolgusrectumvidet,estubipeccatSiveteresitamiraturlaudatque
poetas,utnihilanteferat,nihililliscomparet,errat.Siquaedamnimisantique
siperaquedure
CSS定位
浮動(dòng)元素(float)
#picture{
float：left；
width：100px；
)
HTML
<divid="picture">
<imgsrc="bi11.jpg"alt="Bi11Gates">
</div>
<p>causasnaturalesetantecedentes,
idciroetiamnostrarumvoluntatum...</p>
CSS定位
元素的絕對(duì)定位
?絕對(duì)定位
?position屬性的值設(shè)為absolute
?相對(duì)于最近的已定位祖先或body的精確位置
?如果在祖先元素上添加“pos讓ion:relative”，則絕對(duì)定位元
素相對(duì)于它進(jìn)行偏移
?否則，元素相對(duì)與body進(jìn)行偏移
css定位
元素的相對(duì)定位
相對(duì)定位
應(yīng)將position屬性的值設(shè)為relative
其位置是相對(duì)于它在文檔中的原始位置計(jì)算而來的
#box_relative{
position：relative；
-------------1
left：30px；
top：20px；
top:20Px$
框1left:30px[框3
I______
框2
用z-index進(jìn)
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年巴音郭楞道路運(yùn)輸從業(yè)資格證考試內(nèi)容是什么
- 小學(xué)三年級(jí)100道口算題
- 2025年欽州貨運(yùn)上崗證模擬考試題
- 2025年荷澤貨運(yùn)從業(yè)資格證模擬考試駕考
- 華東師大版七年級(jí)數(shù)學(xué)上冊(cè)《第3章整式的加減3.1列代數(shù)式3.1.3列代數(shù)式 》聽評(píng)課記錄
- 湘教版數(shù)學(xué)八年級(jí)下冊(cè)《2.2.1平行四邊形的邊、角性質(zhì)》聽評(píng)課記錄
- 建筑項(xiàng)目經(jīng)理工作總結(jié)
- 初中理科教研組工作計(jì)劃
- 新學(xué)校校辦室工作計(jì)劃
- 平面設(shè)計(jì)師工作計(jì)劃范文欣賞
- 江蘇省鹽城市鹿鳴路初級(jí)中學(xué)2024-2025學(xué)年八年級(jí)上學(xué)期期末考試語文試題（含答案）
- 《反家庭暴力》課件
- 社會(huì)兒童福利院項(xiàng)目可行性研究報(bào)告
- JBT 1306-2024 電動(dòng)單梁起重機(jī)（正式版）
- 2024年輔警招聘考試試題庫含完整答案（各地真題）
- 創(chuàng)新思維課件(完整版)
- DB34∕T 4161-2022 全過程工程咨詢服務(wù)管理規(guī)程
- 注塑成型工藝參數(shù)知識(shí)講解
- 安全生產(chǎn)專業(yè)化管理
- 初中生成長檔案模板
- GB_T 17468-2019 電力變壓器選用導(dǎo)則（高清正版）
評(píng)論
0/150
提交評(píng)論