CSS基本選擇器實(shí)用_第1頁
CSS基本選擇器實(shí)用_第2頁
CSS基本選擇器實(shí)用_第3頁
CSS基本選擇器實(shí)用_第4頁
CSS基本選擇器實(shí)用_第5頁
已閱讀5頁，還剩29頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

會(huì)計(jì)學(xué)1CSS基本選擇器實(shí)用項(xiàng)目一：制作個(gè)人主頁項(xiàng)目描述：

為了展示自己的才藝，記錄自己的心事，分享自己的興趣愛好，某同學(xué)決定制作一個(gè)個(gè)人網(wǎng)站。項(xiàng)目目標(biāo)：能夠使用（X）HTML搭建網(wǎng)頁的結(jié)構(gòu)；學(xué)會(huì)在HTML中引入CSS；能夠?qū)ξ淖趾蛨D片進(jìn)行簡(jiǎn)單的修飾。

項(xiàng)目任務(wù)：任務(wù)1－－－編寫網(wǎng)站首頁結(jié)構(gòu)任務(wù)2－－－超鏈接到其它頁面任務(wù)3－－－實(shí)現(xiàn)網(wǎng)站首頁的文字效果任務(wù)4－－－實(shí)現(xiàn)首頁和二級(jí)頁面的背景效果第1頁/共34頁任務(wù)三：實(shí)現(xiàn)個(gè)人主頁的文字效果技能目標(biāo)：1、能夠在html頁中以多種方式引入CSS；2、能夠?qū)ξ谋具M(jìn)行修飾知識(shí)目標(biāo)：了解CSS的概念；CSS引入網(wǎng)頁的方法CSS語法規(guī)則，命名規(guī)則與文字相關(guān)的CSS屬性名、屬性值第2頁/共34頁相關(guān)知識(shí)：CSS的概念和語法1.1基本CSS選擇器1.2在HTML中使用CSS的方法1.3復(fù)合選擇器1.4CSS的繼承特性1.5第3頁/共34頁

CSS概念

CascadingStyleSheet層疊樣式表。CSS作用在網(wǎng)頁中實(shí)現(xiàn)網(wǎng)頁結(jié)構(gòu)內(nèi)容和表現(xiàn)形式的分離，將原來由HTML語言所承擔(dān)的一些與結(jié)構(gòu)無關(guān)的功能剝離出來，改由CSS來完成。1.1CSS的概念和語法第4頁/共34頁CSS的標(biāo)準(zhǔn)目前有三個(gè)CSS標(biāo)準(zhǔn)。CSS1、CSS2和CSS3。CSS1于1996年12月通過，CSS2則于1998年5月通過。CSS3在CSS2的基礎(chǔ)上增加了很多新的樣式和效果。但現(xiàn)在支持CSS3的瀏覽器版本要求較高。

CSS文檔中大小寫不敏感1.1CSS的概念和語法第5頁/共34頁

在介紹CSS語法之前，先思考一個(gè)生活中的問題。1.1CSS的概念和語法第6頁/共34頁

張飛

{

身高:185cm;

體重:105kg;

性別:男;

性格:暴躁;

民族:漢族;}第7頁/共34頁

這個(gè)表實(shí)際上是由3個(gè)要素組成的，即姓名、屬性和屬性值。第8頁/共34頁

CSS的作用就是設(shè)置網(wǎng)頁的各個(gè)組成部分的表現(xiàn)形式。因此，如果把上面的表格換成描述網(wǎng)頁上一個(gè)標(biāo)題的屬性表，可以設(shè)想應(yīng)該大致如下：第9頁/共34頁

2級(jí)標(biāo)題{

字體:宋體;

大小:15像素;

顏色:紅色;

裝飾:下劃線

}第10頁/共34頁

再進(jìn)一步，如果把上面的表格用英語寫出來：

h2{font-family:宋體;font-size:15px;color:red;text-decoration:underline;}第11頁/共34頁

CSS的思想就是首先指定對(duì)什么“對(duì)象”進(jìn)行設(shè)置，然后指定對(duì)該對(duì)象的哪個(gè)方面的“屬性”進(jìn)行設(shè)置，最后給出該設(shè)置的“值”。因此，概括來說，CSS就是由3個(gè)基本部分——“對(duì)象”、“屬性”和“值”組成的。第12頁/共34頁CSS基本語法 選擇符{屬性名1:屬性值1;

屬性名2:屬性值2;…}選擇符：指被設(shè)樣式的對(duì)象{}：表示此符號(hào)內(nèi)的一組樣式是對(duì)指定對(duì)象設(shè)置的。屬性名:屬性值：具體的樣式CSS注釋：/*被注釋內(nèi)容*／1.1CSS的概念和語法注意冒號(hào)和分號(hào)第13頁/共34頁1.2基本CSS選擇器

在CSS的3個(gè)組成部分中，“對(duì)象”是很重要的，它指定了對(duì)哪些網(wǎng)頁元素進(jìn)行設(shè)置，因此，它有一個(gè)專門的名稱——選擇器（selector）。第14頁/共34頁1.2.1標(biāo)記選擇器

標(biāo)記選擇器中的“標(biāo)記”指XHTML中的標(biāo)記。CSS可以定義幾乎所有HTML標(biāo)記中內(nèi)容的樣式。例如body、h1-h6、p、a、div、ul等。例：對(duì)HTML語言中的分段標(biāo)記P進(jìn)行字體定義：

p{font-family:"宋體";}第15頁/共34頁1.2.2

類別選擇器

表示方法：在字符的前面加前綴句點(diǎn)“.”來表示類別選擇器。引用方法：在此處定義的類名在頁面中的元素用class屬性的值來引用。例：定義了一個(gè)類選擇器title1，用來定義字體的大?。?title1{font-size:12px;}在頁面中使用定義的樣式：<divclass="title1">學(xué)校網(wǎng)站開發(fā)</div>注意：類名不能以數(shù)字開頭。CSS的類名只能包含字母和數(shù)字。第16頁/共34頁

<html><head><title>class選擇器</title><styletype="text/css">.red{color:red; /*紅色*/font-size:18px; /*文字大小*/}第17頁/共34頁

.green{color:green; /*綠色*/font-size:20px;/*文字大小*/}</style></head>第18頁/共34頁

<body><pclass="red">class選擇器1</p><pclass="green">class選擇器2</p><h3class="green">h3同樣適用</h3></body></html>第19頁/共34頁1.2.3ID選擇器

表示方法：字符前加“#”。引用方法：在元素的id屬性中引用。例如：＃title2{font-size:larger;font-weight:bold;}這個(gè)CSS規(guī)則只能用在具有這個(gè)id屬性的元素上，

<divid="title2">學(xué)校網(wǎng)站開發(fā)</div>第20頁/共34頁

練習(xí)：若html中有如下代碼：<divid=“head”>我是頁頁頭部</div><divid=“cont”>我是正文部分</div>若想將以上文字的顏色設(shè)置為紅色，則需要怎樣設(shè)置選擇器？第21頁/共34頁1.2.4通用選擇器表示方法：*作用：指定的樣式可應(yīng)用在頁面里的所有元素。例如：把頁面中所有支持字體屬性的樣式都設(shè)為“宋體”：*{font-family:"宋體";}第22頁/共34頁1.3在HTML中使用CSS的方法

1.3.1行內(nèi)式在HTML標(biāo)記中使用style屬性，直接寫入需要定義的樣式。

例如：<pstyle="color:Blue;font-size:large">內(nèi)嵌樣式表<p>

其中各個(gè)屬性之間用“;”隔開，屬性與屬性值之間用“:”隔開。

第23頁/共34頁

<pstyle="color:#FF0000;font-size:20px;text-decoration:underline;">正文內(nèi)容1</p><pstyle="color:#000000;font-style:italic;">正文內(nèi)容2</p><pstyle="color:#FF00FF;font-size:25px;font-weight:bold;">正文內(nèi)容3</p></body></html>第24頁/共34頁1.3.2內(nèi)嵌式

在HTML文檔頭部標(biāo)記<HEAD>中，用<STYLE>標(biāo)記來存放樣式表代碼。

例如：在<STYLE>標(biāo)記中加入樣式表代碼，書寫格式如下：<styletype="text/css">

選擇器{屬性名a：屬性值a；屬性名b：屬性值b}</style>第25頁/共34頁

<html><head><title>頁面標(biāo)題</title><styletype="text/css">

p{color:#0000FF;font-size:25px;}第26頁/共34頁

</style></head><body><p>這是第1行正文內(nèi)容……</p><p>這是第2行正文內(nèi)容……</p><p>這是第3行正文內(nèi)容……</p></body></html>第27頁/共34頁1.3.3外部樣式表的引入

網(wǎng)站中有單獨(dú)的CSS文件（擴(kuò)展名為CSS），在主文檔中調(diào)用CSS文件。調(diào)用的方法:1、鏈接式在頁面的頭部標(biāo)記<HEAD>中加入使用link標(biāo)記及其屬性格式：<linkhref=“樣式文件名"rel="stylesheet"type="text/css"/>

第28頁/共34頁

2、導(dǎo)入式

在頁面的頭部標(biāo)記<HEAD>中使用@import

使用方法：@importurl(“樣式文件名);

第29頁/共34頁1.4文字常用的屬性名、屬性值1、文字屬性字體（font-family）文字大小（font-size）文字樣式（font-style）文字粗細(xì)（font-weight）2、文本屬性首行縮進(jìn)（text-indent）文本顏色（color）文本對(duì)齊屬性（text-align）文本修飾（text-decoration）第30頁/共34頁知識(shí)點(diǎn)小結(jié)CSS規(guī)則格式？CSS選擇器的基本類型？選擇器｛屬性名：屬性值；屬性名：屬性值；｝標(biāo)記選擇器、類選擇器、ID選擇器CSS引入的方式？行內(nèi)式、內(nèi)嵌式、鏈接

溫馨提示

  • 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ì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論