網(wǎng)站開(kāi)發(fā)教程CSS簡(jiǎn)介

1、css簡(jiǎn)介 網(wǎng)址： 電話(huà)：400 700 1307 css dhtml簡(jiǎn)介 何為css(層疊樣式表) css的幾種設(shè)置方式 樣式規(guī)則的選擇器 樣式規(guī)則的注釋與有效范圍 用dreamweaver產(chǎn)生css 樣式屬性詳解 dhtml 簡(jiǎn)介 dhtml=html 腳本語(yǔ)言腳本語(yǔ)言 javascript + 層疊樣式表層疊樣式表 css 指定一個(gè)網(wǎng)頁(yè) 的元素 決定元素的大小 顏色和位置 操縱網(wǎng)頁(yè)的元素 dhtml 是制作是制作動(dòng)態(tài)動(dòng)態(tài) html 頁(yè)面的技術(shù)！頁(yè)面的技術(shù)！ dhtml 示例 閃爍文本 移動(dòng)文本 消隱文本 設(shè)置屬性 這個(gè)段落應(yīng)用了樣式 這個(gè)段落按默認(rèn)樣式顯示 什么是樣式？ 指定顯示樣式 樣

2、式規(guī)則 何為層疊樣式表 css是cascading style sheets的簡(jiǎn)寫(xiě)，它 除了可以輕松設(shè)置網(wǎng)頁(yè)元素的顯示位置和 格式處，甚至還能產(chǎn)生濾鏡，圖像淡化， 網(wǎng)頁(yè)淡入淡出的漸變效果。 簡(jiǎn)而言之，css就是要對(duì)網(wǎng)頁(yè)的顯示效果實(shí) 現(xiàn)與word一樣的排版控制。 常用的樣式屬性 屬 性css名稱(chēng)說(shuō) 明 顏色 color 文本屬性font-size字體大小 font-family字體 text-align文本對(duì)齊 邊框?qū)傩?(用于表 單元素) border-style邊框樣式 border-width邊框?qū)挾?border-color邊框顏色 定位屬性 (position) top頂部邊距（上邊距

3、） left左邊距 width寬度 height高度 z-indexz 軸索引號(hào)，用于層 css的幾種方式 內(nèi)聯(lián)樣式表(inline styles) 嵌入樣式表(embedded style sheets) 外部樣式表(linked style sheets) 輸入樣式表(imported sytle sheets) 內(nèi)聯(lián)樣式表 您如果希望某段文字和其他段落的文字顯示風(fēng)格不一樣，那么請(qǐng)采用“行內(nèi) 樣式”。行內(nèi)樣式使用元素標(biāo)簽的 style 屬性定義。 /*關(guān)鍵代碼-*/ 剩余時(shí)間：成交結(jié)束 新舊程度：全新 所 在 地：北京 寶貝數(shù)量：5 件 瀏 覽 量：220 次 另送價(jià)值50元的充電器套裝！

4、(一個(gè)充電器，兩節(jié)充電電池)可使用半年以 應(yīng)用樣式 p font-size:20px; color:blue; text-align:center 我是段落 1 我是段落 2 我是段落 3 我們的樣式絕對(duì)統(tǒng)一 嵌入樣式表 樣式表 樣式規(guī)則 所有的段落都采用 p 樣 式，保證樣式統(tǒng)一 行內(nèi)樣式表局限于某個(gè)標(biāo)簽，如果希望本網(wǎng)頁(yè)內(nèi)的所以 同類(lèi)標(biāo)簽都采用統(tǒng)一樣式，這時(shí)應(yīng)采用內(nèi)嵌樣式。 選擇器 用分號(hào)隔開(kāi) 在標(biāo)簽對(duì)中定義的每條樣 式規(guī)則的基本格式如下： selectorproperty:value; property:value; selector:當(dāng)定義一條樣式規(guī)則時(shí)，必須指定受 這條樣式規(guī)則作用的網(wǎng)

5、頁(yè)元素。 property:指定那些將要被修改的樣式名稱(chēng)，即 css屬性，如color、font-size等。 value:賦給property的值，即css屬性值。 樣式規(guī)則的選擇器 html selector class selector id selector 關(guān)聯(lián)選擇器 組合選擇器 偽元素選擇器 /*-關(guān)鍵代碼-*/ p /*設(shè)置樣式：字體和背景色*/ font-family: system; font-size: 18px; color: #3333cc; h2 background-color: #ccff33; text-align: center; 品種特征方面： 1、蛋魚(yú)：蛋

6、魚(yú).。 2、龍睛：龍睛.。 3、高頭：高頭.。 內(nèi)嵌樣式- html選擇器 html選擇器 應(yīng)用h2樣式 應(yīng)用p樣式 內(nèi)嵌樣式- class類(lèi)選擇器 .myinput border: 1px solid; border-color:#d4bfff; color:#2a00ff 用戶(hù)名 密 碼 class類(lèi)選擇器 應(yīng)用類(lèi)選擇器： class”類(lèi)名“ 類(lèi)選擇器的定義格式為： .類(lèi)名 樣式規(guī)則; class selector 要將一種html標(biāo)簽所創(chuàng)建的各處網(wǎng)頁(yè)元素分成幾類(lèi)，需要將這個(gè) html標(biāo)簽的class屬性設(shè)置為不同的值。 paragraph1 paragraph2 paragraph3 在

7、樣式表中，可以分別為某個(gè)html標(biāo)簽的各個(gè)類(lèi)別定義樣式規(guī)則： p.stopcolor:red p.warningcolor:yellow 在樣式表中，可以為某個(gè)類(lèi)別的所有html標(biāo)簽定義樣式規(guī)則： .blueonecolor:blue 藍(lán)色的題目 藍(lán)色的段落 #fire color:red; font-size: 24px; 我是二級(jí)標(biāo)題，火是這樣的我是二級(jí)標(biāo)題，火是這樣的 內(nèi)嵌樣式- id選擇器 id選擇器 id選擇器的定義格式為： id名 樣式規(guī)則; 應(yīng)用id選擇器：id”id名“ id selector id屬性用來(lái)定義某一個(gè)特定的html元素，一個(gè) 網(wǎng)頁(yè)文件中只能有一個(gè)元素能使用某一i

8、d屬性值， id selector就是為樣式規(guī)則定義語(yǔ)名選擇具有某 一id屬性值的html元素。 text here 在樣式表中，id值為yellowone的html元素的 樣式規(guī)則定義語(yǔ)句如下： 選擇器聲明 關(guān)聯(lián)選擇器是指一個(gè)用空格隔開(kāi)的兩個(gè)或更多的單一選擇器組成的字 符串，例如： p embackground:yellow .special emcolor:red; #top emcolor:blue p.top.top1 strongcolor:green 其中的“p em”就是關(guān)聯(lián)選擇器，它表示段落中的強(qiáng)調(diào)文本 （標(biāo)簽對(duì)中的內(nèi)容）的背景為黃色，而其它地方出現(xiàn)的強(qiáng) 調(diào)文本則不受影響。 關(guān)

9、聯(lián)選擇器定義的樣式規(guī)則的優(yōu)先權(quán)比單一選擇器定義的樣式規(guī)則的優(yōu) 先權(quán)高，即使用在 p embackground:yellow的后面部分定義了如下樣式規(guī)則： embackground:green但是，在段落標(biāo)簽中定義的強(qiáng)調(diào)文本仍用黃 色背景。 組合選擇器 為了減少樣式表的重復(fù)聲明，可以在一條樣式規(guī)則定義語(yǔ)句中組合若干 個(gè)選擇器，每個(gè)選擇器之間用逗號(hào)（，）隔開(kāi)。例如， h1, h2, h3, h4, h5, h6, tdcolor:red; 全局選擇器 希望頁(yè)面所有的標(biāo)記都使用同一種css樣式，又不希望逐個(gè)來(lái)生命，這時(shí) 候可以利用全局生命符號(hào)“*” 外部樣式 根據(jù)樣式文件與網(wǎng)頁(yè)的關(guān)聯(lián)方式又分為： 鏈

10、接（link ）外部樣式表 導(dǎo)入（import）外部樣式表 樣式文件 p . 網(wǎng)頁(yè)2網(wǎng)頁(yè)3網(wǎng)頁(yè)1 鏈接外部樣式表 使用link（鏈接）標(biāo)簽 ，語(yǔ)法： 第一步：創(chuàng)建樣式表文件newstyle.css 第二步：把樣式文件和網(wǎng)頁(yè)關(guān)聯(lián) 樣式文件：樣式文件： newstyle.css p . onel.htmanother.htm 第三步：瀏覽查看各網(wǎng)頁(yè) 演示演示：鏈接樣式表示例樣式表示例 導(dǎo)入外部樣式表 使用import導(dǎo)入 ，語(yǔ)法： import 樣式表文件.css; import url(樣式表文件.css); 操作步驟同鏈接樣式表 導(dǎo)入樣式表 使用import聲明的例子語(yǔ)句如下： 外部樣式文件外

11、部樣式文件 樣式的混合使用 行內(nèi)樣式表、內(nèi)嵌樣式表、外部樣式表各有優(yōu)勢(shì)，實(shí)際的開(kāi)發(fā)中常常 需要混合使用： 有關(guān)整個(gè)網(wǎng)站統(tǒng)一風(fēng)格的樣式代碼，放置在獨(dú)立的樣式文件*.css 某些樣式不同的頁(yè)面，除了鏈接外部樣式文件，還需定義內(nèi)嵌樣式 某張網(wǎng)頁(yè)內(nèi)，部分內(nèi)容”與眾不同“，采用行內(nèi)樣式 對(duì)于某個(gè)html標(biāo)簽： 1）如果有多種樣式，如果規(guī)定 的樣式?jīng)]有沖突，則疊加； 2）如果有沖突，則最先考慮行 內(nèi)樣式表顯示，如果沒(méi)有，再 考慮內(nèi)嵌樣式顯示，如果還沒(méi) 有，最后采用外面樣式表顯示， 否則就按html的默認(rèn)樣式顯示； 內(nèi)嵌樣式內(nèi)嵌樣式 行內(nèi)樣式行內(nèi)樣式 某個(gè)html標(biāo)簽 樣式規(guī)則的注釋與有效范圍 樣式表中的注

12、釋 使用“/*要注釋的內(nèi)容*/”格式進(jìn)行注釋?zhuān)⑨尣荒芮?套，例如，“/*xxx/*yyy*/xxx*/”這樣的注釋是不允 許的。 樣式規(guī)則的繼承 所有嵌套在某個(gè)html標(biāo)簽中的html標(biāo)簽都會(huì)繼承外 層標(biāo)簽設(shè)置的樣式規(guī)則。 樣式規(guī)則的優(yōu)先級(jí) id選擇器class選擇器html標(biāo)簽選擇器 內(nèi)聯(lián)樣式表嵌入樣式表鏈接樣式表 樣式屬性分類(lèi) css中的樣式屬性非常之多，大體上可以分為以 下幾類(lèi)： 字體 文本 邊框 背景 列表 位置 布局 其它 字體 font-family：字體類(lèi)型 font-size 絕對(duì)大小的設(shè)置為xx-small、x-small、small、medium、large、 x-lar

13、ge、xx-large中的任意一個(gè)，xx-small為最小取值，xx- large為最大取值。 相對(duì)大小的設(shè)置可以為larger或smaller. 絕對(duì)單位有：px、mm、 cm、 in、 pt、 pc. 相對(duì)單位有：em、ex、% color 三種表示方法：rrggbb、rgb(r, g, b)、red. font-weight：字體粗細(xì) font-style：字體斜體 text-decoration：下劃線、頂劃線、刪除線、閃爍 text-transform：英文字母大小寫(xiě) font：合并設(shè)置字體樣式 例如，pfont:italic bold 12pt times, serif font-

14、family: 宋體宋體, sans-serif; font-weight: normal; color: #0000ff; font-style: normal; font-size: 12px; line-height: 140%; text-decoration: underline; 文本段落 text-align：段落水平對(duì)齊 設(shè)置值：center、right、left、justify vertical-align：段落垂直對(duì)齊 設(shè)置值：sub、super、top、middle、bottom、10px、 -10px、相對(duì)于元素行高屬性的百分比 letter-spacing：字母的間距

15、 word-spacing：?jiǎn)卧~的間距 line-height：文本行高 text-indent：縮進(jìn)方式 white-space：排版方式 設(shè)置值：normal、pre、nowrap text-align: center; text-indent: 24px; (可為負(fù)數(shù)可為負(fù)數(shù)) display: block; 邊框、寬度與高度 border-width：邊框?qū)挾?(border-top-width、border-right-width、border-bottom-width、 border-left-width) 設(shè)置值：thin、medium、thick或數(shù)值 border-color

16、：邊框顏色 (border-top-color、border-right-color、border-bottom-color、 border-left-color) border-style：邊框樣式 (border-top-style、border-right-style、border-bottom-style、 border-left-style) 設(shè)置值：none、dotted、dashed、solid、double、groove、ridge、 inset、outset。 border：合并設(shè)置邊框樣式 (border-top、border-right、border-bottom、bor

17、der-left) 例如，a:activeborder:thick double red width：寬度 設(shè)置值：10px絕對(duì)值、50%相對(duì)值 height：高度 border-left-width: 1px; border-left-style: solid; border-left-color: #0000ff; 背景 background-color：背景顏色 background-color:transparent;/*透明色*/ background-image：背景圖片 例如，background- image:url(/logo.g

18、if) background-repeat：背景重復(fù)方式 設(shè)置值：no-repeat、repeat、repeat-x、repeat-y background-position：背景位置 設(shè)置值：left、center、right、20px 20px、20% 70%、top、 bottom background-attachment：固定或滾動(dòng)背景 設(shè)置值：fixed、scroll background：合并設(shè)置背景樣式 例如，background:#00cc00 url(logo.jpg) no-repeat bottom right background-color: #cccccc; ba

19、ckground-image: url(img/bg.gif); background-repeat: repeat-x; background-position: center top; 頁(yè)面和瀏覽器元素的css 表格 表單 超鏈接 鼠標(biāo) 滾動(dòng)條 控制表格 tablecaption-side:bottom; tableborder-collapse:collapse; tr:hovercolor:red; 控制表單 給input添加背景色 一條線的文本框 像文字一樣的按鈕 彩色的下拉框 類(lèi)似excel表格的表單 偽元素選擇器 偽元互選擇器是指對(duì)同一個(gè)html元素的各種狀態(tài)和其所 包括的部分內(nèi)

20、容是一種定義方式。例如，對(duì)于超鏈接標(biāo)簽 ()的正常狀態(tài)（沒(méi)有任何動(dòng)作前）、訪問(wèn)的狀態(tài)、 選中狀態(tài)、光標(biāo)移到超鏈接文本上的狀態(tài)，對(duì)于段落的首 字母和首行，都可使用偽元素選擇器來(lái)定義。 使用偽元素作為選擇器的樣式規(guī)則定義格式： html元素：偽元素屬性：值 常用的偽元素： a:link超鏈接的正常狀態(tài)（沒(méi)有任何動(dòng)作前） a:visited訪問(wèn)過(guò)的超鏈接狀態(tài) a:hover光標(biāo)移動(dòng)到超鏈接上的狀態(tài) a:active選中超鏈接時(shí)的狀態(tài) p:first-line段落中的第一行文本 p:first-letter段落中的第一個(gè)字母 類(lèi)選擇器與偽元素一起使用的格式： html元素.類(lèi)名：偽元素屬性：值 鼠標(biāo)樣式cursor： bodycursor:pointer; 設(shè)置值：help、move、crosshair. 滾動(dòng)條