國家中職骨干教師培訓課程 css 樣式表 教程_第1頁
國家中職骨干教師培訓課程 css 樣式表 教程_第2頁
國家中職骨干教師培訓課程 css 樣式表 教程_第3頁
國家中職骨干教師培訓課程 css 樣式表 教程_第4頁
國家中職骨干教師培訓課程 css 樣式表 教程_第5頁
已閱讀5頁，還剩54頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

國家中職骨干教師培訓課程

網(wǎng)頁制作——Part3

CSS樣式表Part3

CSS樣式表CSS概述

1CSS樣式定義2CSS屬性4網(wǎng)頁中CSS樣式表應用方法

32學習重點、難點CSS定義方法引用方法CSS的屬性及作用

1學習重點

使用CSS樣式表統(tǒng)一部署網(wǎng)頁風格

2學習難點

3層疊樣式表(CSS，CascadingStyleSheet)是一個很神奇的東西，設計者可以通過修改樣式表的定義而使網(wǎng)頁呈現(xiàn)完全不同的外觀，而當網(wǎng)站擁有幾十甚至上百個頁面的時候，修改頁面的樣式表文件即可修改頁面的外面，從而大地減少工作量。CSS概述4CSS概述CSS概念CSS(CascadingStyleSheet,層疊樣式表)是一種標記性語言，與HTML是“表兄弟〞。樣式表技術誕生于1996年，需要瀏覽器支持，現(xiàn)在大多數(shù)瀏覽器都支持CSS。它允許在html文檔中參加樣式，如字體類型、顏色、大小等。對于設計者來說它是一個非常靈活的工具，可以將所有有關于文檔的樣式指定內(nèi)容全部脫離出來，在行內(nèi)定義、在標題中定義，甚至作為外部樣式文件供html調(diào)用而不必再把繁雜的樣式定義編寫在文檔結構中5CSS概述CSS功能與特點：例如顯然，如果頁面中有很多標簽的樣式需要去控制，而且這些樣式可能會經(jīng)常改變，使用這種方法就非常麻煩。6CSS概述使用CSS優(yōu)勢：可以實現(xiàn)網(wǎng)頁結構與格式別離；對網(wǎng)頁布局、字體、背景和其它圖文效果實現(xiàn)更加精確的控制；更好的易用性和擴展性，可以單獨以一個文件的形式出現(xiàn)?？傊?，CSS在當前的網(wǎng)頁設計中已經(jīng)成為不可缺少的技術，小至去除鏈接文字的下劃線，大致實現(xiàn)復雜的視覺和動態(tài)效果，網(wǎng)絡中有大量的CSS代碼，初學者可多參考別人CSS實現(xiàn)網(wǎng)頁樣式的方法。7CSS概述CSS的強大功能：8CSS樣式表由樣式規(guī)那么組成，告訴瀏覽器如何去顯示一個文檔。樣式規(guī)那么一般由樣式符與屬性組成。常用的樣式符有HTML標簽、用戶自定義類和用戶自定義ID等。CSS樣式表定義9CSS樣式定義CSS樣式語法規(guī)那么：樣式符{attributes1:values1;attributes2:values2;…}其中“樣式符〞表示要定義樣式的類型，樣式符可以包括HTML標簽符、用戶自主義類class或用戶自定義ID?！皩傩?attributes)〞表示由CSS標準定義的樣式屬性，“屬性值(values)〞為樣式屬性的值。10CSS樣式定義CSS樣式語法規(guī)那么：關于樣式表的語法，要注意以下幾個問題。屬性必須要包含在{}號之中。屬性和屬性值之間用“:〞分隔。當有多個屬性時，用“;〞進行區(qū)分。在書寫屬性時屬性之間使用空格換行等，并不影響屬性的顯示。如果一個屬性有幾個值，那么每個屬性值之間用空格分隔開。11CSS樣式定義CSS樣式語法規(guī)那么：BODY{ margin-left:0px; margin-top:0px; margin-right:0px; margin-bottom:0px; backgroundcolor:#ff0000; background-repeat:repeat-x;}12CSS樣式定義用戶自定義類作為樣式符定義格式：樣式符.類名{attributes1:values1;attributes2:values2;…}，例：span.blue{color:#0000FF}span.red{color:red}應用樣式時在對應的HTML標簽中參加class屬性，屬性值為樣式表的類名。例：<p>這是一個引用兩個不同span樣式的例子，<spanclass="bule">藍色span</span>與<spanclass="red">紅色span</span></p>13CSS樣式定義樣式符為HTML標記利用用戶自定義類可以實現(xiàn)所有的HTML標簽的樣式選擇，當要到達復雜的樣式效果時〔比方,你想讓主體文字的1段用綠色顯示，第2段用紫色顯示，而第3段用灰色顯示〕，可以采用樣式分類的方法實現(xiàn)。14CSS樣式定義樣式符為HTML標記：例如P.first{color:green}P.second{color:purple}P.third{color:gray}HTML代碼如下：<PCLASS="first">Thefirstparagraph,withaclassnameof"first."</P><PCLASS="second">Thesecondparagraph,withaclassnameof"second."</P><PCLASS="third">Thethirdparagraph,withaclassnameof"third."</P>15CSS樣式定義樣式符為HTML標記類的聲名也可以不針對具體的HTML標記符，這樣定義的類可以被應用于任何HTML標簽，通常稱為在。格式：

.類名{attributes1:values1;attributes2:values2;…}引用時在標簽屬性內(nèi)加上class屬性，屬性值為類名。

16CSS樣式定義用戶自定義ID作為樣式符用戶自主義ID與用戶自定義類的功能相同，其區(qū)別僅為定義語法與引用方法不同。定義格式如下：#ID名{attributes1:values1;attributes2:values2;…}例如：id_selectors.html#yellow{color:yellow}其引用如下所示：<pID="yellow">本段為黃色</p>17CSS樣式定義ID樣式符與類樣式符對照：類選擇符可以重復使用，且可以用在任意元素上，使用任意次。HTML內(nèi)id屬性是唯一的，擁有id的元素才會應用該樣式。ID選擇符的優(yōu)先權高于類選擇符。18CSS樣式定義CSS樣式選擇器：專用于控制鏈接的顯示效果，共4種選擇器：a:link〔沒有接觸過的鏈接〕,用于定義了鏈接的常規(guī)狀態(tài)。a:hover〔鼠標放在鏈接上的狀態(tài)〕,用于產(chǎn)生視覺效果。a:visited〔訪問過的鏈接〕,用于閱讀文章，能清楚的判斷已經(jīng)訪問過的鏈接。a:active〔在鏈接上按下鼠標時的狀態(tài)〕,用于表現(xiàn)鼠標按下時的鏈接狀態(tài)。19CSS樣式定義CSS樣式選擇器：幾點說明：a:link鏈接狀態(tài)是根本的，推薦至少要定義這種鏈接。推薦“a:hover〞鏈接顏色使用紅色，能產(chǎn)生極好的視覺效果以上4中選擇器第4種較少使用，在定義選擇器時，必須嚴格按此順序定義，否那么可能會無效。20CSS樣式表的引用方式有內(nèi)部嵌套和引用外部樣式表文件幾種根本方式。CSS樣式引用21CSS樣式引用html標簽中以style屬性引用樣式例如：<Pstyle="text-indent:1cm;background:yellow;font-family:courier">這是一個直接書寫樣式的段落</p>。22CSS樣式引用頭部標簽嵌套<style></style>引用

網(wǎng)頁<head></head>之間插入樣式表代碼：<STYLETYPE="text/css"><!--H1{color:green;font-size:37px;font-family:impact}P{text-indent:1cm;background:yellow;font-family:courier}--></STYLE>23CSS樣式引用引用外部樣式表文件<head></head>之間通過link引用外部文件：<headrunat="server"><title>文章標題</title>

<linkhref="css/style.css"rel="stylesheet"type="text/css"/></head>

24CSS屬性是控制網(wǎng)頁樣式的根本元素，CSS涉及的屬性極其龐大，包括顏色、尺寸、位置等，可以使用Dreamweaver中的CSS規(guī)那么定義創(chuàng)立CSS樣式規(guī)那么。CSS屬性具有繼承、層疊等特性。CSS屬性25CSS屬性3.4.1屬性單位長度單位：cm/mm/em〔當前字體中m寬度〕/ex〔當前字體中x寬度〕/In/Pt/px單位意義單位意義cm厘米In英寸，1in=2.54cmmm毫米Pt點，1pt=1/72in

px像素pc皮卡，1pc=12pt26CSS屬性3.4.1屬性單位百分比單位：一個百分比值中有可選的正號+或負號-，后跟一個數(shù)字，最后為百分號%，例如p{line-height:200%}表示該段文字的調(diào)試為標準行高的2倍。

27CSS屬性3.4.1屬性單位顏色單位：顏色名稱：十六進制#RRGGBB、十分制GRB〔x,y,z〕、百分比RGB〔100%,0%,0%〕Red/Yellow、#996633、RBG〔255,0,0〕、RGB〔100%,0%,0%〕28CSS屬性3.4.2字體屬性font-family屬性，設置html元素的字體列表，可設置多個值，瀏覽器由前向后低效選擇字體。<styletype="text/css">h3{font-family:times}p{font-family:courier}p.sansserif{font-family:sans-serif}</style>29CSS屬性3.4.2字體屬性font-style屬性，用來設置指定元素的顯示字形樣式，屬性值有normal〔普通、默認值〕/italic〔斜體〕/oblique〔傾斜〕。<styletype="text/css">h1{font-style:italic}h2{font-style:normal}p{font-style:oblique}</style>30CSS屬性3.4.2字體屬性font-size屬性，用來控制字體顯示的大小。

<styletype="text/css">h1{font-size:150%}h2{font-size:130%}p{font-size:100%}.size_a{font-size:30px}.size_b{font-size:30pt}</style>31CSS屬性3.4.2字體屬性font-variant屬性，字型異體，具有nomal與small-caps兩種取值，在正常與小型大寫字母之間切換。<styletype="text/css">p.normal{font-variant:normal}p.small{font-variant:small-caps}</style>32CSS屬性3.4.2字體屬性font-weight屬性，設置字體的粗細，屬性取值可為normal、bold、bolder、light、lighter、100、200、…900，100至900依次從最細漸變到最粗。<styletype="text/css">p.normal{font-weight:normal}p.thick{font-weight:bold}p.thicker{font-weight:900}</style>33CSS屬性3.4.2字體屬性font屬性，字體設置的一種簡略寫法，設置時可以省略某些屬性，應按以下順序出現(xiàn)：font-wight、font-variant、font-style、font-size、font-family。<styletype="text/css">p{font:italicsmall-caps90022pxarial}</style>34CSS屬性3.4.3文本屬性letter-spacing屬性，屬性值可為具體長度，且可以為負值。<styletype="text/css">h1{letter-spacing:-3px}h4{letter-spacing:0.5cm}</style>35CSS屬性3.4.3文本屬性word-spacing屬性，設置文本中單詞(字)間的距離。<styletype="text/css">p.normal{word-spacing:normal}p.length{word-spacing:1.5cm}</style>36CSS屬性3.4.3文本屬性line-height屬性，控制標記符中文本行高。其取值可以是數(shù)字、長度或百分比，normal為默認值。如取值為數(shù)字，那么表示行高為當前字體調(diào)試的倍數(shù)。例如：下例可表示20pt的行高div{font-size:10pt,line-height:2}37CSS屬性3.4.3文本屬性text-decoration，文本修飾屬性，包括none、underline、overline、line-through、blink等值。<styletype="text/css">h1{text-decoration:overline}h2{text-decoration:line-through}h3{text-decoration:underline}a{text-decoration:none}</style>38CSS屬性3.4.3文本屬性text-align/vertical-align，水平對齊/垂直對齊。text-align取值為left、right、center、justify，默認值為left，verticle-align的取值為baseline、sub、super、top、text-top、middle、bottom、text-bottom、<百分比>，baseline為默認值。39CSS屬性3.4.3文本屬性text-transform屬性，用來設置文本格式轉換，取值有none(默許值)、capitalize(首字母大寫)、uppercase(字母大寫)、lowercase(字母小寫)。<styletype="text/css">p.uppercase{text-transform:uppercase}p.lowercase{text-transform:lowercase}p.capitalize{text-transform:capitalize}</style>40CSS屬性3.4.3文本屬性text-indent屬性，首行縮進。取值可以為數(shù)值或都百分比，默認值為0，表示無縮進。<styletype="text/css">p{text-indent:1cm}</style>41CSS屬性3.4.4顏色和背景顏色可按名稱、十六進制#RRGGBB、十分制GRB〔x,y,z〕、百分比RGB〔100%,0%,0%〕。<styletype="text/css">h1{color:#00ff00}h2{color:#dda0dd}p{color:rgb(0,0,255)}</style>42CSS屬性3.4.4顏色和背景

背景：背景可以設置背景顏色background-color和背景圖案background-image屬性。Background-color:

<style>span.highlight{background-color:red}</style>43CSS屬性3.4.4顏色和背景

當同時設置background-color和background-image時，背景圖案優(yōu)先顯示。背景圖案的顯示形式可通過background-repeat、background-attachment、background-position等屬性設置。

。<styletype="text/css">body{background-image:url(images/eg_background3.jpg);background-repeat:repeat}</style>44CSS屬性3.4.4顏色和背景

background-repeat屬性，設置圖片重復顯示方式，取值為repeat(沿縱、橫兩個方向重復,默認)、repeat-x、repeat-y、no-repeat。background-attachment控制指定的背景圖案是否跟隨內(nèi)容一起滾動。取值為scroll(默認)、fixed，默認值為scroll。background-position用于設置指定背景圖案的最初位置。body{background:#00ff00url(images/eg_background3.jpg)no-repeatfixedcenter;}</style>45CSS屬性3.4.5邊框屬性邊界屬性：margin-left、margin-right、margin-top、margin-bottom分別設置頁面元素左、右、上、下邊界的寬度，取值可以為長度、百分比或auto。使用margin可以同時設置四個方向的邊界寬度。

<styletype="text/css">p.margin{margin:2cm4cm3cm4cm}</style>46CSS屬性3.4.5邊框屬性邊框屬性邊框寬度：border-left-width、border-right-width、border-top-width、border-bottom-width分別用來設置左、右、上、下4個邊框的寬度，取值可以是thin、medium、thick、length、medium。border-width可以同時設置四個方向的邊框寬度。47CSS屬性3.4.5邊框屬性邊框顏色：border-left-color、border-right-color、border-top-color、border-bottom-color分別用來設置左、右、上、下4個邊框的顏色。border-color可以同時設置四個方向的邊框顏色。48CSS屬性3.4.5邊框屬性邊框樣式：border-left-style、border-right-style、border-top-style、border-bottom-style分別用來設置左、右、上、下4個邊框的樣式，取值可以為none、dotted、dashed、solid、double、groove、ridge、inset、outset，默認值為none。border-style可以同時設置四個方向的邊框樣式，如果僅指定一個值，那么四個邊都采用同樣的樣式，如果指定了2個或3個值，那么沒有指定樣式的邊框采用其對邊的樣式。49CSS屬性3.4.5邊框屬性邊框的所有屬性可以使用border屬性完成，并且寬度、顏色和樣式?jīng)]有順序要求。<styletype="text/css">p.margin{margin:2cm4cm3cm4cm}</style>50CSS屬性3.4.5邊框屬性填充屬性：padding-left、padding-right、padding-top、padding-bottom屬性用于設置左、右、上、下填充區(qū)的寬度。也可使用paddding屬性同時設置四個方向的填充寬度。

<styletype="text/css">td.test1{padding:1.5cm}td.test2{padding:0.5cm2.5cm}</style>51CSS屬性浮動屬性CSS浮動屬性允許網(wǎng)頁制作者將文本浮動在一個元素的周圍。float屬性，將元素的內(nèi)容浮動到頁面的左邊緣或右邊緣。取值為left、right、none，默認值為none。clear屬性，指定一個元素是否允許有元素漂浮在它的旁邊。取值為none、left、right、both，默認值none。<style>span{font-family:楷體_gb2312;font-size:20pt;float:left}.ss{clear:left}</style><span>漂浮屬性</span><p>允許網(wǎng)頁制作者將文本環(huán)繞在一個元素的周圍。去除屬性指定一個元素是否允許有元素漂浮在它的旁邊。</p><span>漂浮屬性</span><pclass="ss">允許網(wǎng)頁制作者將文本環(huán)繞在一個元素的周圍。去除屬性指定一個元素是否允許有元素漂浮在它的旁邊。</p>52CSS屬性定位屬性定位屬性用于控制元素在頁面上的位置，實現(xiàn)頁面內(nèi)元素之間的重疊。position屬性，元素在頁面的定位方式，值可以是static(按html格式規(guī)那么正常定位)、relative(定位在于頁面前一個元素的

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論