信息發(fā)布與網(wǎng)頁(yè)設(shè)計(jì)-Dreamweaver-11CSS_第1頁(yè)
信息發(fā)布與網(wǎng)頁(yè)設(shè)計(jì)-Dreamweaver-11CSS_第2頁(yè)
信息發(fā)布與網(wǎng)頁(yè)設(shè)計(jì)-Dreamweaver-11CSS_第3頁(yè)
信息發(fā)布與網(wǎng)頁(yè)設(shè)計(jì)-Dreamweaver-11CSS_第4頁(yè)
信息發(fā)布與網(wǎng)頁(yè)設(shè)計(jì)-Dreamweaver-11CSS_第5頁(yè)
已閱讀5頁(yè)，還剩34頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

信息發(fā)布與網(wǎng)頁(yè)設(shè)計(jì)DREAMWEAVER11CSS信息學(xué)院《信息發(fā)布與網(wǎng)頁(yè)設(shè)計(jì)》課題組14一月20232023/1/14111.1樣式表的內(nèi)嵌、外連11.2創(chuàng)建樣式表11.3創(chuàng)建外部樣式表11.4CSS編輯器11.5應(yīng)用CSS樣式表11.6管理CSS樣式表第11章主要內(nèi)容2023/1/14211.1CSS介紹什么是CSS？

CascadingStyleSheets，層疊樣式表CSS的好處擴(kuò)展了HTML的顯示樣式；顯示樣式與數(shù)據(jù)內(nèi)容分離，便于修改樣式或數(shù)據(jù)；可共享，以統(tǒng)一顯示風(fēng)格。當(dāng)前版本：

W3C制定的兩個(gè)版本：CSS1、CSS2。2023/1/143CSS語(yǔ)法選擇符

{屬性名1:屬性值1;…屬性名n:屬性值n} 選擇符一般是: 標(biāo)記名稱：如h1、h2、…p等

類名稱：英文句點(diǎn)開(kāi)始，以英文字符命名，如.abc 擴(kuò)展：filter

CSS語(yǔ)句樣例：

p{font-size:40pt;font-family:隸書;color:green}

CSS中的注釋/*這是CSS中的注釋*/2023/1/144CSS的使用兩種應(yīng)用：外聯(lián)、內(nèi)嵌內(nèi)嵌<styletype="text/css">。。。</style>外聯(lián)

<HEAD>

<linkhref="new.css"rel="stylesheet"type="text/css"></HEAD>文件名.擴(kuò)展名2023/1/145CSS的使用導(dǎo)入 在HTML中用"@import"命令導(dǎo)入樣式表

<styletype="text/css">

@importurl(style.css)</style>2023/1/146CSS內(nèi)嵌樣例<html>

<head><TITLE>CSS樣例</TITLE>

<style

type="text/css">p{font-size:12pt;font-family:隸書}p:first-letter{font-size:400%;float:left}

</style></head><body><p>惠園是我們共同的家</body></html>用style標(biāo)記內(nèi)嵌樣式單定義P標(biāo)記、首字母大小2023/1/147CSS的代碼輸入在DW中輸入代碼的技巧在代碼視圖狀態(tài)下<、>、{、ㄩ、;、左、右尖括號(hào)，大括號(hào)、空格、分號(hào)的輸入均可觸發(fā)供選擇的下拉列表。雙擊其中的列表項(xiàng)，即可擇其自動(dòng)填入。2023/1/14811.2DW中創(chuàng)建CSS方法一: “窗口”→“CSS樣式”面板上單擊鼠標(biāo)右鍵，選擇“新建”；

方法二: 通過(guò)“CSS樣式”面板上的帶+的按鈕，打開(kāi)“新建CSS樣式”對(duì)話框。2023/1/14911.3選用外部CSS樣式方法一:“窗口”→“CSS樣式”，打開(kāi)“CSS樣式”面板；單擊右上角的下拉菜單；選擇“附加樣式表”；單擊“預(yù)覽”，選擇外部樣式表文件。

方法二:

通過(guò)“CSS樣式”面板上的“附加樣式表”按鈕，打開(kāi)“附加外部樣式表”對(duì)話框。余同方法一。2023/1/1410CSS中的類：CLASS及IDCSS的類class和標(biāo)識(shí)id選擇符class可有區(qū)別的表現(xiàn)相同的HTML元素；id可有區(qū)別的表現(xiàn)相同的HTML元素，內(nèi)容必須唯一；class類由半角英文句點(diǎn)(.)開(kāi)始；標(biāo)識(shí)id由半角英文井號(hào)(#)定義之前。.intro{color:red;font-weight:bold;}#studentid{background-color:silver}2023/1/1411CSS中的類CLASS及IDHTML中應(yīng)用如下：<pclass="intro">網(wǎng)頁(yè)制作</p>

<divid="studentid">id和class不同之處在于：id用在內(nèi)容唯一的元素上，class可用在多個(gè)元素上。2023/1/141211.4CSS編輯器-1類字體字號(hào)樣式行高粗細(xì)變量大、小寫顏色修飾2023/1/141311.4CSS編輯器-2背景<body>、<table>、<td>。。?？赏ㄟ^(guò)添加BGCOLOR屬性，來(lái)設(shè)置不同區(qū)域的背景顏色或圖象。設(shè)置重復(fù)水平位置垂直位置2023/1/141411.4CSS編輯器-3區(qū)塊單詞間距字母間距垂直對(duì)齊文本對(duì)齊文字縮進(jìn)2023/1/141511.4CSS編輯器-3標(biāo)簽SPAN

和

DIV

的區(qū)別DIV(division)是一個(gè)塊級(jí)元素，其左、右無(wú)法再放置其它內(nèi)容。SPAN

是行內(nèi)元素，SPAN

的前后是不會(huì)換行的，它沒(méi)有結(jié)構(gòu)的意義，純粹是應(yīng)用樣式，當(dāng)其他行內(nèi)元素都不合適時(shí)，可以使用SPAN。2023/1/141611.4CSS編輯器-4盒子寬、高浮動(dòng)清除填充邊界2023/1/141711.4CSS編輯器-5邊框樣式寬度顏色2023/1/141811.4CSS編輯器-6列表類型圓點(diǎn)、圓圈方快、數(shù)字大、小寫羅馬數(shù)字大、小寫字母2023/1/141911.4CSS編輯器-7定位層的類型顯示：繼承、可見(jiàn)、隱藏

Z-index

層的位置、大小益處處理剪輯：定義層的可見(jiàn)部分2023/1/142011.4CSS編輯器-8擴(kuò)展分頁(yè)光標(biāo)濾鏡2023/1/1421CSS樣式單的使用-濾鏡效果filter:屬性名（參數(shù)列表）Alpha (90%) 透明度設(shè)置Blur(…) 高速度移動(dòng)的模糊效果Chroma(…) 將指定的顏色設(shè)置為透明Fliph/flipv 水平/垂直翻轉(zhuǎn)Glow(…) 發(fā)光Gray(…) 灰度2023/1/1422CSS樣式單的使用-濾鏡效果Dropshadow() 投影Shadow() 陰影Xray 只顯示輪廓例filter:xray 只顯示文字、圖片的輪廓，似X光效果。2023/1/142311.5應(yīng)用CSS樣式擴(kuò)展分頁(yè)光標(biāo)濾鏡2023/1/142411.6管理CSS樣式編輯CSS樣式修改CSS樣式拷貝CSS樣式刪除CSS樣式2023/1/1425CSS中定義背景圖片body

{display:block;background-image:url(lspbh.jpg);background-repeat:no-repeat}也可以為某個(gè)元素定義背景圖片，只要將根元素名

換成相應(yīng)的元素名即可。2023/1/1426CSS中使用中文在CSS中顯示中文 在CSS第1行添加如下語(yǔ)句，即可在CSS中使用各種中文字體

@charset"gb2312";

2023/1/1427CSS樣式單中的主要屬性名稱

說(shuō)明font-family 字型族名稱font-style 字型樣式font-weight 字型粗細(xì)font-stretch 緊縮、擴(kuò)張font-size 字型大小color 顏色text-indent 文字縮排方式text-align 文字對(duì)齊方式text-shadows 文字陰影text-transform 文字變化2023/1/1428CSS版面屬性名稱

說(shuō)明display 顯示狀態(tài)width 寬度background-color 背景顏色2023/1/1429屬性值的設(shè)定Display屬性Block 塊Inline 字符顯示在同一行l(wèi)ist-item 列表顯示None 不顯示的內(nèi)容background-color屬性設(shè)定背景顏色rgb指定法Border屬性「top」、「bottom」、「left」、「right」。2023/1/1430CSS樣式單的使用絕對(duì) 英寸（in） 1in=2.54cm

厘米（cm） 1cm=0.3937in

毫米（mm） 1mm=0.1cm

磅 （pt） 1pt=1/72in=0.3528mm

派卡（pc） 1pc=12pt=1/6in2023/1/1431CSS樣式單的使用相對(duì)單位em 字母M的寬度； Ex 字母X的高度px 像素點(diǎn) % 百分比絕對(duì)單位In 英寸(1英寸=2.54厘米)。Cm 厘米Mm 毫米。Pt 磅(1磅=1/72英寸)Pc 皮卡(1皮卡=12磅)。如父元素指定font-size=12pt,則其子元素定義Font-size=150%，即18pt。2023/1/1432CSS樣式單的使用塊級(jí) (block) 內(nèi)聯(lián) (inline) 列表項(xiàng) (list-item) 不可見(jiàn)(none)2023/1/1433CSS樣式單的使用-顏色單位四種

顏色名稱、十進(jìn)制(0~255)、十六進(jìn)制(00~ff)、百分比。 content{color:red} content{color:rgb(silver} content{color:rgb(0%,50%,50%)}

content{color:rgb(00,00,ff)}紅綠黃2023/1/1434CSS中的定位CSS定位：相對(duì)/絕對(duì)定位position屬性決定元素位置類型Position=absolute|relative|static

absolute：屏幕上的絕對(duì)位置。

relative：屏幕上的相對(duì)位置。

static： 固有位置。

2023/1/1435CSS中的定位頁(yè)面位置

元素區(qū)域

頁(yè)邊距margin

填充距Padding2023/1/1436

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論