版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)
文檔簡介
css簡介
css是什么？
css選擇器
css基本語法
css樣式
css盒狀模型
css的定位
DIV+CSS
5
CSS是什么呢?
CSS是CascadingStyleSheets（級聯(lián)樣式表）的縮寫。
CSS是一種樣式表語言，用于為HTML文檔定義布局。例如，CSS
涉及字體、顏色、邊距、高度、寬度、背景圖像、高級定位等方面。
HTML可以用于為網(wǎng)站添加布局效果，但有可能被誤用。而CSS則
提供了更多選擇，而且更為精確、完善?，F(xiàn)在所有瀏覽器都支持
CSSo
「HTML是定義網(wǎng)頁內(nèi)容，CSS則是定義內(nèi)容樣式，一般的話,
護樣式分離，既可以方便維護，也可以實現(xiàn)代碼重用。
◎在HTML中」。何引入CSS（1）
方法1：行內(nèi)樣式表（style屬性）
使用HTML屬性style
<html>
<head>
vtitle>例子〈/title〉
</head>
<bodystyle="background-color:#FFOOOO;,'>
vp>這個頁面是紅色的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>這個頁面是紅色的v/p>
</body>
</html>
在HTML中如何引入CSSQ）
方法3：外部樣式表（引用一個樣式表文件）
外部樣式表就是一個擴展名為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)越之處在于：多個HTML文檔可以同時引用、
?個樣式表。換句話說，可以用一個CSS文件來控制多個HTML文檔
的布局
\對外部樣式表的修
style.css改將影響所有引用
它的HTML文檔。
曾言晅11
引用同一個樣式表的所有HTML文檔
◎在HTML中如何引入CSS。）
外部樣式表（引用一個樣式表文件）
<html>
<head>
<itle>我的文檔</title>
<1inkrel="stylesheet"type="text/css"
href="style.css"/>
</head>
<body>
<h1>我的第一個樣式表</h1>
</body>
</html>
body{
background-color：#FF0000；
}
◎在HTML中如何引入CSS。）
外部樣式表（引用一個樣式表文件）
<html>
<head>
我的文檔〈/title〉
<1inkrel="stylesheet"type="text/css
href="style.css"/>
</head>
<body>
<h1>我的第一個樣式表</h1>
</body>
</html>
body{
background-color：#FF0000；
}
css選擇器
selector{property:value
個
值：
選擇器：
比如說
表明花括號
background-color
中的屬性設(shè)
屬性的值可以是
置將應(yīng)用于
“和FOO。?！?/p>
哪些元素例如后于設(shè)置
HTML代表紅色）.
例如徵權(quán)）背旻色的屬性
ifbackgrc>und-colo『'
標記選擇器
每一種HTML標記的名稱都可以作為相應(yīng)的標記選擇器的名稱。例
如，p選擇器就是用于聲明中所有<p>標記的樣式風格。
<style>
P(
colonred;
font-size:25px;
)
</style>
屋性值屋性值
IIII
hlicolor:red;font-size:14px;}
選擇器聲明聲明
派生選擇器
派生選擇器的結(jié)果是同時選中各個基本選擇器所選擇的范圍。任何
形式的選擇器（包括標記，class,id選擇器等）都可以作為并集選擇器
的一部分。通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式
Iistrong{
font-style：italic；
font-weight：normal；
)
|HTML|
<pxstrong>我是粗體字，不是斜體字，因為我不在列表m
中，所以這個規(guī)則對我不起作用</strongx/p>
<ol>
<1i><st「ong>我是斜體字。這是因為strong元素位于Ii
元素內(nèi)。</strong></1i>
<li>我是正常的字體。</li>
</ol>
css選擇器
id選擇器
id選擇器的使用方法與class選擇器基本相同，不同之處在
與id選擇器只能在HTML頁面中使用一次，針對行更強。
#red{color：red；}
#green{color：green；}
<pid="「ed">這個段落是紅色。</p>
<pid="green">這個段落是綠色。</p>
id選擇器可以用于多個標記，但是一個id在一個HTML頁面中最
多只能賦予一個HTML標記。
選擇器為標有特定id的HTML元素指定特定的樣式
選擇器以來定義
id選擇器與派生選擇器
id選擇器和派生選擇器
在現(xiàn)代布局中，id選擇器常常用于建立派生選擇器
#sidebarp{
font-style：itaiic；
text-align：right；
margin-top：0.5em；
css選擇器
類選擇器
類別選擇器的名稱可以由用戶自定義，屬性和值跟標記選
擇器一樣，也必須符合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)、
鼠標懸停狀態(tài)、活動狀態(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、偽類名稱對大小寫不敏感
K7T
css基本語法
屬性值的單位
絕對量
像素(pixel,px)、英寸(inch,in)、厘米
(centimeter,cm)、毫米(millimeter,mm)、
磅(point,pt)、12點活字(pica,pc)
相對量
em(字母m的高度)、ex(字母x的高度)、%
(百分比)
______________________________________________________________7
ns基本語法
4s基本語法
顏色值
/*英文單詞red*/
p{color:#red；}
/*使用十六進制的顏色值#ffOOOO*/
p{color：#ffOOOO；}
/*為了節(jié)約字節(jié)，我們可以使用CSS的縮寫形式*/
p{color:#f00；}
/*我們還可以通過兩種方法是用RGB值*/
p{color：rgb(255,0,0)；}
p{color：rgb(1OO%,O%,O%)；}
4s基本語法
記得寫引號
/*如果值為若干單詞，則要給值加引號*/
p{font-family："sansserif",arial；}
SS基本語法
多重聲明
/*若定義不止一個聲明，則需要用分號將每個聲明分外
最后一條規(guī)則不需要加分號，因為分號在英語中是一個分
隔符號，不是結(jié)束符號。然而，大多數(shù)有經(jīng)驗的設(shè)計師會
在每條聲明的末尾都加上分號，這么的好處是，當你從現(xiàn)
有的規(guī)則中增減聲明時，會盡可能的減少出錯的可能性*/
p{text-align：center；color：red；}
/*建議在每行只描述一個屬性，以便增強可讀性*/
P{
text-align：center；
color：black；
font-family：arial；
"S基本語法
格和大小不寫敏感
多數(shù)規(guī)則包含不止一個聲明
多重聲明和空格的使用使得樣式表更容易被編輯
是否包含空格不會影響CSS在瀏覽器的工作效果，同樣，與
XHTML不同，CSS對大小寫不敏感
不過存在一個例外：如果涉及到與HTML文檔一起工作的
話，class和id名稱對大小寫是敏感的
body{
color：#000；
background：#fff；
margin：0；
padding：0；
font-family：Georgia,PaIatino,serif；
*s基本語法
選擇器的分組
可以對選擇器進行分組
這樣被分組的選擇器就可以分享相同的聲明
用逗號將需要分組的選擇器分開
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è)置字體風格
?font-variant〃以小型大寫字體或者正常字體顯示文本
?font-weight//設(shè)置字體粗細
?font-size〃設(shè)置字符尺寸
簡寫屬性，將有關(guān)字體的所有屬性設(shè)置在一個聲明中
P{
font-style：italic；
font-weight：bold；
font-size：30px；
font-family：arial,sans-serif；
css基本語法
文本屬性J-----------------
?text-indent〃縮進元素中文本首行
?text-align〃對齊元素中文本
?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元素可以說是一種中性元素，因為它不對文檔本身添加
任何東西
?但是與CSS結(jié)合使用的話，span可以對文檔中的部分文本增
添視覺效果
?用div組織元素
8n的使用局限在一個塊元素內(nèi)，而div可以被用來組織一
或多個塊元素
y
盒狀模型
border
盒狀模型(boxmodel)margin
用于描述一個為HTMLpadding
元素形成的矩形盒子
涉及為各個元素
調(diào)整外邊距
(margin)、邊
框(border)、element
內(nèi)邊距(padding)
內(nèi)容的具體操
width
邊框?qū)傩?/p>
dotted
?border-width
?border-color
dashed
?border-style
IIIthick
css定位
浮動元素(float)
?可以通過CSS屬性float令元素向左或向右浮動
?也就是說，令盒子及其中的內(nèi)容浮動到文檔(或者是上層盒子)
的右邊或者左邊
—這個管子向左浮動
<-
<-
一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定位
浮動元素(float)
#picture{
float：left；
width：100px；
)
HTML
<divid="picture">
<imgsrc="bi11.jpg"alt="Bi11Gates">
</div>
<p>causasnaturalesetantecedentes,
idciroetiamnostrarumvoluntatum...</p>
CSS定位
元素的絕對定位
?絕對定位
?position屬性的值設(shè)為absolute
?相對于最近的已定位祖先或body的精確位置
?如果在祖先元素上添加“pos讓ion:relative”，則絕對定位元
素相對于它進行偏移
?否則，元素相對與body進行偏移
css定位
元素的相對定位
相對定位
應(yīng)將position屬性的值設(shè)為relative
其位置是相對于它在文檔中的原始位置計算而來的
#box_relative{
position：relative；
-------------1
left：30px；
top：20px；
top:20Px$
框1left:30px[框3
I______
框2
用z-index進
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年安徽省安全員《A證》考試題庫及答案
- 2025年陜西省安全員-A證考試題庫附答案
- DB45T-木材加工企業(yè)安全規(guī)范編制說明
- 學前教育管理學 課件
- 單位管理制度展示匯編人員管理
- 半導體行業(yè)分析：AI需求推動運力持續(xù)增長互聯(lián)方案重要性顯著提升
- 2022年河北省張家口市第二十中學中考模擬英語試題（原卷版）
- 《本胃癌腹腔鏡》課件
- 2025年中國糖果市場深度評估及投資方向研究報告
- 電影投資行業(yè)競爭格局及投資價值分析報告
- 護理查房股骨骨折
- 舉辦活動的申請書范文
- 瑤醫(yī)目診圖-望面診病現(xiàn)用圖解-目診
- 2022年四級反射療法師考試題庫（含答案）
- 新《安全生產(chǎn)法》培訓測試題
- 政務(wù)禮儀-PPT課件
- 特種涂料類型——耐核輻射涂料的研究
- 化工裝置常用英語詞匯對照
- 物資采購管理流程圖
- 無牙頜解剖標志
- 標準《大跨徑混凝土橋梁的試驗方法》
評論
0/150
提交評論