




版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)與制作CSS樣式基礎(chǔ)學(xué)習(xí)目標(biāo)了解CSS及其特點(diǎn)掌握CSS樣式的引用方法掌握CSS語(yǔ)法規(guī)則掌握CSS基本選擇器的用法掌握運(yùn)用CSS設(shè)置文本樣式的方法傳統(tǒng)HTML標(biāo)記實(shí)現(xiàn)網(wǎng)頁(yè)時(shí)存在以下不足:1)標(biāo)記不足2)網(wǎng)頁(yè)臃腫
3)后期維護(hù)困難4)定位困難在web2.0標(biāo)準(zhǔn)中,網(wǎng)頁(yè)的結(jié)構(gòu)和表現(xiàn)形式分離。“表現(xiàn)形式”由CSS來(lái)負(fù)責(zé)。為什么要學(xué)CSS?3.1CSS概述CSS語(yǔ)法規(guī)則由兩部分組成:選擇器和聲明語(yǔ)句組。
基本語(yǔ)法:
1)選擇器selector:用來(lái)指定需要設(shè)置樣式的HTML元素。2)聲明語(yǔ)句組:通過(guò)屬性和屬性值描述樣式的具體內(nèi)容,多組聲明語(yǔ)句用分號(hào)(;)分隔,聲明語(yǔ)句不分先后順序。selector{ property1:value1; property2:value2; …… propertyn:valuen;}3.2CSS語(yǔ)法規(guī)則h2{font-family:宋體;font-size:15px;color:red;}例如:
2級(jí)標(biāo)題{
字體:宋體;
字體大小:15像素;
字體顏色:紅色;}3.2CSS語(yǔ)法規(guī)則CSS樣式書(shū)寫(xiě)注意事項(xiàng):選擇器嚴(yán)格區(qū)分大小寫(xiě),聲明語(yǔ)句不區(qū)分但一般建議小寫(xiě);樣式中所有符號(hào)都是英文標(biāo)識(shí)符號(hào);單個(gè)屬性值如果包含空格,那么該屬性值應(yīng)該加英文引號(hào);
例font-family:"TimesNewRoman",Times,serif;養(yǎng)成給css加注釋的好習(xí)慣;/*注釋文本*/css不解析空格,可以使用tab、回車鍵、空格鍵來(lái)排版,但屬性值和單位之間不能有空格。例如:font-size:24px;3.2CSS語(yǔ)法規(guī)則標(biāo)簽選擇器類(class)選擇器ID選擇器3.3CSS基本選擇器一、標(biāo)簽選擇器(元素選擇器)HTML的標(biāo)簽名可以直接作為CSS的選擇器,是CSS樣式規(guī)則中最基本的選擇器?;菊Z(yǔ)法:
element{property:value;…}
1)element為HTML的標(biāo)簽,如p、h1、ul等;
2)property:value;為屬性值對(duì)。如color:red;
例如:h1{ text-align:center;}案例:demo3-1.html3.3CSS基本選擇器標(biāo)簽選擇器的特點(diǎn):
1)由標(biāo)簽選擇器定義的規(guī)則不需要對(duì)其進(jìn)行額外地引用,所有由該標(biāo)簽描述的網(wǎng)頁(yè)內(nèi)容會(huì)自動(dòng)按定義的規(guī)則表現(xiàn)樣式。2)這種方法高效且統(tǒng)一,但同時(shí)也是它的缺點(diǎn),不能設(shè)計(jì)差異化的樣式。
3.3CSS基本選擇器二、類選擇器類選擇器可以實(shí)現(xiàn)差異化的樣式定義,它將擁有特定class屬性的HTML元素作為選定對(duì)象,是樣式定義中最常見(jiàn)的一種選擇器。基本語(yǔ)法:
.class{property:value;…}類名(class)由用戶自定義,前面用一個(gè)“.”來(lái)標(biāo)記;3.3CSS基本選擇器二、類選擇器例如:定義
.one{ text-decoration:underline; } .two{ font-style:italic; }引用
<h3class="onetwo"></h3> <pclass="one"></p>
案例:demo3-2.html3.3CSS基本選擇器類選擇器的特點(diǎn):1)只有引用了的樣式才能作用于指定對(duì)象;2)一個(gè)類選擇器可以被多個(gè)元素關(guān)聯(lián);
3)一個(gè)元素也可以引用多個(gè)類選擇器,多個(gè)選擇器之間用空格分隔。
3.3CSS基本選擇器標(biāo)簽類別選擇器(交集選擇器)如:p.one{color:red;}1)選擇器“p.one”表示:關(guān)聯(lián)了class類名為“one”的p段落;2)注意標(biāo)簽定義在類名前面,中間除了點(diǎn)號(hào)不能有空格或其他符號(hào)。
3.3CSS基本選擇器三、ID選擇器主要是針對(duì)具有id屬性的對(duì)象設(shè)置樣式規(guī)則基本語(yǔ)法:
#id{property:value;…}id名由用戶自定義,前面用一個(gè)“#”來(lái)標(biāo)記定義:#user{width:180px;}
引用:<inputtype="text"name="user“id="user"/>3.3CSS基本選擇器ID選擇器的特點(diǎn):1)具有唯一性,ID選擇器只能被引用一次,針對(duì)性強(qiáng);2)一個(gè)元素只能引用一個(gè)ID選擇器。如:id=“#a#b”×3)常用于表單中的控件3.3CSS基本選擇器四、選擇器分組---并集選擇器對(duì)具有相同樣式的多個(gè)選擇器進(jìn)行集體聲明;選擇器之間用逗號(hào)“,”
分隔;h1{color:#0033CC; text-align:center;}h3{color:#0033CC; text-align:center; font-style:italic;}相同樣式集體聲明不同樣式單獨(dú)聲明h1,h3{color:#0033CC;text-align:center;}h3{ font-style:italic; }3.3CSS基本選擇器四、選擇器分組---通配符選擇器利用選擇器分組的原理,我們可以在文檔樣式定義之初對(duì)大量的標(biāo)簽設(shè)置相同的樣式;
例如:body,h1,h2,h3,p,ul,li,a{margin:0;padding:0;}CSS提供了一個(gè)通配符選擇器,用“*”來(lái)描述所有的標(biāo)簽,從而完成文檔的初始化設(shè)置;
*{margin:0px;padding:0px;}3.3CSS基本選擇器一、內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式也稱為行內(nèi)式,通過(guò)標(biāo)記的style屬性來(lái)設(shè)置元素的樣式。
行內(nèi)式只對(duì)其所在的標(biāo)簽及嵌套在其中的子標(biāo)記起作用。使用簡(jiǎn)單,但需要為每個(gè)標(biāo)簽設(shè)置style屬性,后期維護(hù)成本高,代碼“過(guò)胖”。<pstyle=“font-family:'黑體';color:red;”>網(wǎng)頁(yè)</p>3.4CSS樣式的引用二、內(nèi)部樣式表內(nèi)部樣式表也成為內(nèi)嵌式,在HTML文檔的頭部用<style></style>標(biāo)記定義。例如:樣式只對(duì)當(dāng)前文檔有效,所以適用于有特殊樣式需求的單個(gè)文檔。<head><style>h1{text-align:center;}p{font-size:16px;}</style></head>3.4CSS樣式的引用三、外部樣式表
也稱為鏈接式樣式表,是將所有的樣式放在一個(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件中,通過(guò)<link/>標(biāo)記將外部樣式表文件鏈接到指定的HTML文檔中:
例如demo3-3.html<head><linkrel="stylesheet"type="text/css"href="css/demo3-3.css"/></head>3.4CSS樣式的引用三、外部樣式表一個(gè)HTML文件也可以同時(shí)鏈接多個(gè)樣式文件,如下代碼所示:
html結(jié)構(gòu)和css樣式分離,易于維護(hù)和管理,最為實(shí)用。
<head><linkrel="stylesheet"type="text/css"href="css/demo3-1.css"/><linkrel="stylesheet"type="text/css"href="css/demo3-2.css"/></head>3.4CSS樣式的引用四、導(dǎo)入式導(dǎo)入式樣式表與鏈接式樣式表的功能基本相同,只是語(yǔ)法和運(yùn)作方式上略有區(qū)別。導(dǎo)入式在<style>標(biāo)記中通過(guò)@import導(dǎo)入;
<style>
@importurl("css/demo3-3.css");</style>3.4CSS樣式的引用鏈接式和導(dǎo)入式的區(qū)別:鏈接式:在加載頁(yè)面主體部分之前裝載CSS文件,這樣顯示出來(lái)的網(wǎng)頁(yè)從一開(kāi)始就是帶有樣式的,顯示出來(lái)的效果和我們預(yù)期的效果是一致的;導(dǎo)入式:在整個(gè)頁(yè)面加載完成后再裝載CSS文件;當(dāng)網(wǎng)頁(yè)文件比較大或者網(wǎng)速比較慢時(shí),導(dǎo)入式可能會(huì)使客戶端先呈現(xiàn)出HTML結(jié)構(gòu),再看到裝載了CSS樣式之后的文件;兩種方式最后看到的效果是一樣的。3.4CSS樣式的引用1CSS字體2CSS文本CSS字體屬性定義文本的字體系列、大小、加粗、字體樣式、字體變形等。CSS文本屬性可定義文本的外觀。包括文本顏色、文本對(duì)齊方式、文本修飾、文本轉(zhuǎn)換和文本縮進(jìn)、字符間距等。3.5CSS文本樣式(1)字體系列font-familyfont-family屬性用于設(shè)置字體系列。網(wǎng)頁(yè)中常用的字體有宋體、黑體等。例如:p{font-family:"黑體";}可以同時(shí)為文本指定多個(gè)字體作為“后備”,中間以逗號(hào)隔開(kāi),如果瀏覽器不支持第一種字體,則會(huì)嘗試下一種。例如:body{font-family:"timesnewroman",times,serif;}通用字體系列3.5.1CSS字體(2)字體大小font-sizefont-size屬性用于設(shè)置文本大小,該屬性的值可以使用絕對(duì)單位或相對(duì)單位。絕對(duì)單位的使用不允許用戶在瀏覽器中改變文本大小。絕對(duì)長(zhǎng)度單位說(shuō)明絕對(duì)長(zhǎng)度單位說(shuō)明in英寸mm毫米cm厘米pt點(diǎn)3.5.1CSS字體(2)字體大小font-size設(shè)置字體的一般方法如:p{font-size:16px;}案例demo3-4.html相對(duì)單位說(shuō)明用法px相對(duì)于顯示器的屏幕分辨率不能適應(yīng)瀏覽器縮放時(shí)產(chǎn)生的變化,一般不用于響應(yīng)式網(wǎng)站。瀏覽器默認(rèn)的文字大小是16pxem相對(duì)于父元素,1em等于父元素字體大小默認(rèn)情況下(1em=16px),可以通過(guò)公式將像素轉(zhuǎn)換為em,例如32px/16=2emrem相對(duì)于html根元素,CSS3新增的相對(duì)單位通過(guò)修改根元素字體大小,調(diào)整所有字體大小,可以避免字體大小逐層復(fù)合的連鎖反應(yīng)3.5.1CSS字體(2)字體大小font-size1)瀏覽器的默認(rèn)字體都是16px,所有未經(jīng)調(diào)整的瀏覽器都符合:16px=1em=1rem,那么10px=0.625em=0.625rem。2)為了簡(jiǎn)化font-size的換算,一般做如下聲明:html,body{font-size:62.5%;}3)這就使rem值變?yōu)?6px*62.5%=10px,即10px=1rem,這樣處理之后只需要將原來(lái)的px值除以10,就可以換算成rem3.5.1CSS字體(3)字體粗細(xì)font-weightfont-weight屬性用于定義字體的粗細(xì),其可用屬性值如下表所示。
例如:.one{font-weight:bold;}p{font-weight:900;}值描述normal默認(rèn)值。定義標(biāo)準(zhǔn)的字符bold定義粗體字符(最常用)bolder定義更粗的字符lighter定義更細(xì)的字符100~900(100的整數(shù)倍)定義由細(xì)到粗的字符。其中400等同于normal,700等同于bold,值越大字體越粗3.5.1CSS字體(4)字體樣式font-stylefont-style屬性用于定義字體風(fēng)格,如設(shè)置斜體、傾斜或正常字體,其可用屬性值如下:normal:默認(rèn)值,瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式。italic:瀏覽器會(huì)顯示斜體的字體樣式。oblique:瀏覽器會(huì)顯示傾斜的字體樣式。其中oblique一般是讓沒(méi)有斜體屬性的文字通過(guò)傾斜達(dá)到與italic類似的效果,實(shí)際工作中常使用italic。例如:h3{font-style:italic;}3.5.1CSS字體(5)字體變形font-variantfont-variant屬性用于設(shè)置變體(字體變形),僅對(duì)英文字符有效,其可用屬性值如下:normal:默認(rèn)值,瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體。small-caps:顯示小型大寫(xiě)的字體。
中間的字符就是小型大寫(xiě)字母“A”3.5.1CSS字體(6)復(fù)合屬性fontfont屬性可以一次設(shè)置多個(gè)字體屬性,必須按如下順序設(shè)置:font-stylefont-variantfont-weightfont-size/line-heightfont-family
可以省略其中的一個(gè)或多個(gè)屬性,但至少要包括font-size和font-family這兩個(gè)屬性。例p{font:italicbold12px/30pxarial,sans-serif;}3.5.1CSS字體(1)文本顏色colorcolor屬性用于定義文本的顏色,其取值方式有如下3種:預(yù)定義的顏色值,如:"color:red;",還有blue、green等都是常見(jiàn)的預(yù)定義顏色值。十六進(jìn)制值,取值范圍為#000000~#FFFFFF,如#FF0000表示紅色,也可以簡(jiǎn)寫(xiě)為#F00。RGB:R、G、B分別代表光學(xué)三原色的紅色、綠色、藍(lán)色,它們的取值范圍均為0~255,例如RGB(255,0,0)表示紅色,有時(shí)會(huì)進(jìn)一步用RGBA來(lái)表示帶透明度的顏色,A表示透明度,取值范圍是0~1,例如RGBA(255,0,0,0.2)。3.5.2CSS文本(2)文本對(duì)齊方式text-aligntext-align屬性用于設(shè)置文本內(nèi)容的水平對(duì)齊,其可用屬性值如下:left:左對(duì)齊(默認(rèn)值)right:右對(duì)齊。center:居中對(duì)齊。3.5.2CSS文本(3)文本修飾text-decorationtext-decoration用于設(shè)置文本的下畫(huà)線、上畫(huà)線、刪除線等修飾效果,其可用屬性值如下:none:沒(méi)有裝飾(正常文本默認(rèn)值)。underline:下畫(huà)線。overline:上畫(huà)線。line-through:刪除線。3.5.2CSS文本(4)文本轉(zhuǎn)換text-transformtext-transform屬性用于控制英文字符的大小寫(xiě)轉(zhuǎn)換,可用屬性值如下:none:不轉(zhuǎn)換(默認(rèn)值)。capitalize:首字母大寫(xiě)。uppercase:全部字符轉(zhuǎn)換為大寫(xiě)。lowercase:全部字符轉(zhuǎn)換為小寫(xiě)。例如:p{text-transform:lowercase;},可以將整個(gè)段落中的所有英文字符轉(zhuǎn)換成小寫(xiě)字符。3.5.2CSS文本(5)文本縮進(jìn)text-indenttext-indent屬性用于設(shè)置段落首行文本的縮進(jìn);常用em、px或%(基于父元素寬度的百分比)作為單位;通常情況下最簡(jiǎn)單的方式是使用em作為單位,這樣縮進(jìn)的距離和文本的大小對(duì)應(yīng),例如:p{text-index:2em;},表示縮進(jìn)2個(gè)字符。3.5.2CSS文本(6)字間距l(xiāng)etter-spacing/單詞間距word-spacingletter-spacing屬性用于定義字間距,設(shè)置的是字符或字母之間的間隔,允許使用負(fù)值,默認(rèn)為normal;h1{ letter-spacing:10px;}
/*增加了字符之間的間隔*/h3{letter-spacing:-0.2em;}
/*縮小了字符之間的間隔*/未設(shè)置字符間距
設(shè)置了字符間距
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 北師大版八年級(jí)數(shù)學(xué)課外拓展計(jì)劃
- 人教版英語(yǔ)下冊(cè)課時(shí)安排與計(jì)劃
- 聯(lián)大學(xué)堂《幼兒教育心理學(xué)(安陽(yáng)師范)》題庫(kù)附答案
- 鐵路施工冬季安全技術(shù)措施
- 職業(yè)教育師資隊(duì)伍建設(shè)計(jì)劃
- 南苑中學(xué)第二學(xué)期九年級(jí)科學(xué)獨(dú)立作業(yè)質(zhì)量檢測(cè)(一)
- J12共同體聯(lián)盟校七年級(jí)上學(xué)期期中科學(xué)試題
- 初學(xué)者游泳訓(xùn)練計(jì)劃
- 電商平臺(tái)運(yùn)營(yíng)管理人員培訓(xùn)措施
- 制造業(yè)質(zhì)量控制體系與質(zhì)量保證措施
- 2025年中國(guó)冷庫(kù)用叉車數(shù)據(jù)監(jiān)測(cè)研究報(bào)告
- 2025年高考第二次模擬考試物理(浙江卷)(參考答案)-20250416-113627
- 2025年化妝師職業(yè)技能考試試題及答案
- GA 1812.1-2024銀行系統(tǒng)反恐怖防范要求第1部分:人民幣發(fā)行庫(kù)
- 2025中信建投證券股份限公司校園招聘易考易錯(cuò)模擬試題(共500題)試卷后附參考答案
- 2025年山東省泰安市新泰市中考二模化學(xué)試題(原卷版+解析版)
- 2025年雞蛋市場(chǎng)調(diào)查報(bào)告
- 《陸上風(fēng)電場(chǎng)工程概算定額》NBT 31010-2019
- 關(guān)于中國(guó)文化遺產(chǎn)北京故宮的資料
- 新中考考試平臺(tái)-考生端V2.0使用手冊(cè)
- 培養(yǎng)基模擬灌裝方案
評(píng)論
0/150
提交評(píng)論