CSS基本選擇器資料_第1頁
CSS基本選擇器資料_第2頁
CSS基本選擇器資料_第3頁
CSS基本選擇器資料_第4頁
CSS基本選擇器資料_第5頁
已閱讀5頁，還剩29頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

網(wǎng)站前臺布局與設(shè)計工程一：制作個人主頁工程描述：為了呈現(xiàn)自己的才藝，記錄自己的心事，共享自己的興趣愛好，某同學(xué)準(zhǔn)備制作一個個人網(wǎng)站。工程目標(biāo)：能夠使用〔X〕HTML搭建網(wǎng)頁的構(gòu)造；學(xué)會在HTML中引入CSS；能夠?qū)ξ淖趾蛨D片進(jìn)展簡潔的修飾。工程任務(wù)：任務(wù)1－－－編寫網(wǎng)站首頁構(gòu)造任務(wù)2－－－超鏈接到其它頁面任務(wù)3－－－實現(xiàn)網(wǎng)站首頁的文字效果任務(wù)4－－－實現(xiàn)首頁和二級頁面的背景效果任務(wù)三：實現(xiàn)個人主頁的文字效果技能目標(biāo)：1、能夠在html頁中以多種方式引入CSS；2、能夠?qū)ξ谋具M(jìn)展修飾學(xué)問目標(biāo)：了解CSS的概念；CSS引入網(wǎng)頁的方法CSS語法規(guī)章，命名規(guī)章與文字相關(guān)的CSS屬性名、屬性值相關(guān)學(xué)問：CSS的概念和語法1.1基本CSS選擇器1.2在HTML中使用CSS的方法1.3復(fù)合選擇器1.4CSS的繼承特性1.5

CSS概念CascadingStyleSheet層疊樣式表。CSS作用在網(wǎng)頁中實現(xiàn)網(wǎng)頁構(gòu)造內(nèi)容和表現(xiàn)形式的分別，將原來由HTML語言所擔(dān)當(dāng)?shù)囊恍┡c構(gòu)造無關(guān)的功能剝離出來，改由CSS來完成。1.1CSS的概念和語法CSS的標(biāo)準(zhǔn)目前有三個CSS標(biāo)準(zhǔn)。CSS1、CSS2和CSS3。CSS1于1996年12月通過，CSS2則于1998年5月通過。CSS3在CSS2的根底上增加了很多新的樣式和效果。但現(xiàn)在支持CSS3的掃瞄器版本要求較高。CSS文檔中大小寫不敏感1.1CSS的概念和語法在介紹CSS語法之前，先思考一個生活中的問題。1.1CSS的概念和語法

張飛{身高:185cm;體重:105kg;性別:男;性格:急躁;民族:漢族;}

這個表實際上是由3個要素組成的，即姓名、屬性和屬性值。

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

2級標(biāo)題{字體:宋體;大小:15像素;顏色:紅色;裝飾:下劃線}

再進(jìn)一步，假設(shè)把上面的表格用英語寫出來：h2{font-family:宋體;font-size:15px;color:red;text-decoration:underline;}

CSS的思想就是首先指定對什么“對象”進(jìn)展設(shè)置，然后指定對該對象的哪個方面的“屬性”進(jìn)展設(shè)置，最終給出該設(shè)置的“值”。因此，概括來說，CSS就是由3個根本局部——“對象”、“屬性”和“值”組成的。CSS根本語法 選擇符{屬性名1:屬性值1; 屬性名2:屬性值2;…}選擇符：指被設(shè)樣式的對象{}：表示此符號內(nèi)的一組樣式是對指定對象設(shè)置的。屬性名:屬性值：具體的樣式CSS注釋：/*被注釋內(nèi)容*／1.1CSS的概念和語法留意冒號和分號1.2根本CSS選擇器

在CSS的3個組成局部中，“對象”是很重要的，它指定了對哪些網(wǎng)頁元素進(jìn)展設(shè)置，因此，它有一個特地的名稱——選擇器〔selector〕。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等。例：對HTML語言中的分段標(biāo)記P進(jìn)展字體定義：p{font-family:“宋體“;}

類別選擇器

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

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

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

<body><pclass=“red“>class選擇器1</p><pclass=“green“>class選擇器2</p><h3class=“green“>h3同樣適用</h3></body></html>1.2.3ID選擇器

表示方法：字符前加“#”。引用方法：在元素的id屬性中引用。例如：＃title2{font-size:larger;font-weight:bold;}這個CSS規(guī)章只能用在具有這個id屬性的元素上，<divid=“title2“>學(xué)校網(wǎng)站開發(fā)</div>

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

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

例如：<pstyle=“color:Blue;font-size:large“>內(nèi)嵌樣式表<p>其中各個屬性之間用“;”隔開，屬性與屬性值之間用“:”隔開。

<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>1.3.2內(nèi)嵌式

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

例如：在<STYLE>標(biāo)記中參與樣式表代碼，書寫格式如下：<styletype=“text/css“> 選擇器{屬性名a：屬性值a；屬性名b：屬性值b}</style>

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

p{color:#0000FF;font-size:25px;}

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

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

2、導(dǎo)入式

在頁面的頭部標(biāo)記<HEAD>中使用@import使用方法：@importurl(“樣式文件名);

1.4文字常用的屬性名、屬性值1、文字屬性字體〔font-family〕文字大小〔font-size〕文字樣式〔font-style〕文字粗細(xì)〔font-weight〕2、文本屬性首行縮進(jìn)〔text-indent〕文本顏色〔color〕文本對齊屬性〔text-align〕文本修飾〔text-decoration〕學(xué)問點小結(jié)CSS規(guī)章格式？CSS選擇器的根本類型？選擇器｛屬性名：屬性值；屬性名：屬性值；｝標(biāo)記選擇器、類選擇器、ID選擇器CSS引入的方式？行內(nèi)式、內(nèi)嵌式、鏈

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論