CSS技術(shù)基本概述

1、html標記的組合就是html語言，瀏覽器根據(jù)html標記的含義進行解析和顯示html標記及標記屬性的規(guī)范寫法： 所有開始標記都有結(jié)束標記 標記名和屬性名小寫 屬性值加雙引號或單引號掌握常用html標記： 文字、標題、段落 、層 、列表 和、超鏈接、 圖像、換行等重點理解：表格 與、()的使用 利用表格進行布局重點理解：表單 標記及表單控件標記（、等）的用法 理解表單提交數(shù)據(jù)的過程 數(shù)據(jù)如何打包（表單元素名稱=表單元素值） 數(shù)據(jù)發(fā)送至何處（action屬性） 數(shù)據(jù)發(fā)送的形式（method屬性：getpost）css概述css細節(jié)本篇教學目的在于css入門，能夠運用css的幾種基本用法，能夠看懂

2、和理解比較復雜一些的css用法css定義css的產(chǎn)生第一個css示例css的好處css（c cascade s style s sheet） 級聯(lián)（層疊）樣式表 是由w3c組織制定的一種用來定義樣式規(guī)則（如字體、顏色和位置）的語言 能讓網(wǎng)頁制作者有效地定制、改善網(wǎng)頁的顯示效果html中，文本的格式化（樣式設置）可以使用一些特定的標記，比如粗體標記，標記等樣式標記散落于html語言中，使得內(nèi)容和格式化的代碼混雜一起，難以區(qū)分。解決方法是改用獨立的技術(shù)css 示例示例css語句的構(gòu)成： 樣式樣式 應用樣式的場所場所css語句的構(gòu)成： 樣式樣式 應用樣式的場所場所 pcolor : red; 在這里

3、，頁面中的 元素是應用樣式的場所，css中，元素名稱兩邊不加屬性名color代表字體顏色屬性值red一條樣式樣式屬性名和值之間用冒號（：）分隔，每條樣式最后加一個分號（；）應用于 元素的所有樣式放置在一對大括號之間樣式包括：樣式屬性名樣式屬性值css語句的構(gòu)成： 樣式樣式（屬性名、屬性值） 應用樣式的場所場所 pcolor : red; 這條css語句的作用：選擇頁面上的所有元素，將內(nèi)容的字體顏色設置為red稱之為p選擇符也叫做“選擇符選擇符”css語句里添加更多樣式： 可以添加若干條樣式（屬性名、屬性值） pcolor : red;font-size:32px; 這條css語句的作用：將頁面

4、上元素的內(nèi)容的字體顏色設置為red，大小設置為32像素;css的引入有多種方式，第一個示例采用在頁面文件中直接引入css樣式，方法如下： css pcolor:red; 第一段文字 在html頁面中直接引入css，需要在元素里增加一對樣式開始和結(jié)束標記（）標記屬性type值為text/csscss語句置于標記之間 css pcolor:red; 第一段文字 內(nèi)容的樣式采用獨立的css原始內(nèi)容樣式 應用p選擇符選擇頁面中的元素以下寫法都可以：css不區(qū)分大小寫，推薦全部小寫 pcolor : red;font-size : 32px; p color : red; font-size : 32p

5、x; 包含多條樣式時，習慣第一種寫法css語句的構(gòu)成： （若干條）樣式樣式 樣式的屬性名 樣式的屬性值 應用樣式的場所場所選擇符選擇符 pcolor : red; p選擇符一條樣式樣式屬性名樣式屬性值css將html格式與內(nèi)容分離，有利于對內(nèi)容進行統(tǒng)一的格式設置和修改css樣式相比html格式化標記的功能更加豐富和強大不采用css示例采用css示例css樣式css選擇符css的引入方式css樣式的級聯(lián)html中的格式化標記（如等）功能有限，css樣式的功能更加強大css包括各種樣式屬性，用于控制字體、顏色、對齊方式和邊距以及位置等 css樣式種類繁多，無須一一記憶字體的樣式屬性主要包括文字的字

6、體、大小、顏色、顯示效果等示例向雷鋒同志學習！僅通過html如何實現(xiàn)該效果font-family：指定字體 可以指定多個字體，字體之間以逗號（, ,)分隔 按順序依次查找計算機中有無指定的字體，有則顯示，無則查找下一個，如果都沒有查到，采用默認字體font-family:微軟雅黑,楷體,宋體;font-size：字體大小 常用單位：px（像素），pt（點） 40px：px代表像素單位，單位通常不要省略 font-size: 40px; color：字體顏色 可以用預定義的顏色名稱 可以用十六進制代碼 顏色拾取 color:red; color:#ff0000; font-weight：控制字體

7、的粗細 取值：normal, bold, lighter, bolder，默認normalfont-style：控制文字傾斜 取值：italic，normal，默認normaltext-decoration：控制下劃線等 取值：underline（下劃線），line-through（中劃線），overline（上劃線） font-weight: bold; font-style:italic; text-decoration:underline; 示例屬性屬性含義含義屬性值屬性值font-family字體各種字體font-style字體樣式italic、oblique、normalfont-v

8、ariant小體大寫small-capsfont-weight字體粗細normal、bold、bolder、lighterfont-size字體大小absolute、relative、%color字體顏色顏色值背景屬性包括背景顏色、背景圖像以及背景圖像的控制background-color：設置元素的背景色示例 background-color: silver;background-image：設置元素的背景圖像background-repeat：設置背景圖像的重復 取值：no-repeat（不重復），repeat（在水平和垂直方向上重復），repeat-x和repeat-y（分別在水平和垂直

9、方向上重復），默認repeat background-image: url( “bg.jpg” ) ; 示例可以用相對地址或絕對地址示例屬性屬性含義含義屬性值屬性值background-color背景色顏色值background-image背景圖案圖片路徑(相對，絕對)background-repeat 背景圖案重復方式repeat-x | repeat-y | no-repeat| repeat文本屬性包括對齊方式、文字間距、行距等text-align：設置文本的水平對齊方式 取值：left，center，right，默認left示例 text-align: center;css樣式屬性和h

10、tml屬性很多寫法不完全一致，比如：text-align（css中），align（html標記屬性）html中一些格式化標記，比如（粗體）（斜體）等，在css中，通過新的樣式屬性來展現(xiàn) 傳統(tǒng)html中用于格式化的標記（，等）不再推薦使用，推薦采用css來實現(xiàn)相比html格式化標記，css提供的樣式功能更加豐富示例 p font-family:微軟雅黑,楷體,宋體; color:red; font-size:32px; font-weight:bold; font-style:italic; text-decoration:underline; 第一段文字第二段文字在css看來，html元素都有

11、一個邊框css邊框?qū)傩栽O置元素邊框的顏色、寬度、樣式等border-style（邊框樣式）：控制邊框的外觀 取值：none(無邊框)，solid(實線)，dashed（虛線)，dotted（點線），double（雙線），groove(凹槽)，inset（凹邊），ridge（凸槽），outset（凸邊）border-color（邊框顏色）： 取值：顏色名，或十六進制border-width（邊框?qū)挾龋?通常采用像素單位示例border屬性：通過該屬性同時設置邊框樣式、寬度、顏色 border: 5px solid green;多個值之間以空格空格分隔，多個值的順序隨意示例定義邊框的一側(cè)：可以定

12、義任何一側(cè)(上、下、左、右）的邊框的樣式、寬度或顏色 border-top border-bottom border-left border-right 比如：定義邊框上側(cè)border-top-style: dashed;border-top-width:5px;border-top-color:green; border-top: 10px dashed navy;示例 div border:5px solid blue;border-top:10px dashed navy; 對于邊框上側(cè)：border-top樣式覆蓋了border樣式屬性屬性含義含義屬性值屬性值border-width邊

13、框?qū)挾龋ㄋ倪叄?通常采用像素單位border-color邊框顏色（四邊） 顏色值border-style邊框樣式（四邊） dotted | dash | solid | double | groove | ridge | inset | outsetborder邊框所有屬性border-top-width上邊框?qū)挾萣order-top-color上邊框顏色border-top-style上邊框樣式border-top 上邊框所有屬性height和width屬性控制元素矩形區(qū)域的大小 常用單位：px（像素），pt（點）示例width:200px;height:200px;補白補白元素內(nèi)容與邊框之

14、間有一層“補白補白”（也叫“填充”）元素內(nèi)容區(qū)邊框補白補白補白補白補白補白padding屬性控制元素內(nèi)容與邊框之間的補白屬性屬性含義含義屬性值屬性值padding-left內(nèi)容與左邊框的補白通常采用像素單位padding-top內(nèi)容與上邊框的補白padding-right內(nèi)容與右邊框的補白padding-bottom內(nèi)容與下邊框的補白padding同時設置四側(cè)的補白示例元素與元素之間有一層邊界邊界元素內(nèi)容區(qū)補白補白補白補白補白補白補白補白元素內(nèi)容區(qū)元素b邊框元素a邊框邊邊 界界margin屬性控制元素之間的邊界示例屬性屬性含義含義屬性值屬性值margin-top上邊界常用單位像素margin-

15、right右margin-bottom下margin-left左margin同時設置“盒模式盒模式”： css中，每個元素被看待成一個“盒子盒子”box，這個盒子有“邊框邊框”，盒子內(nèi)容與邊框之間有“補白補白”，盒子與盒子之間有“邊界邊界”定位類型由position屬性指定 position取值：absolute和relative指定定位類型后，可用下列屬性來提供具體位置 left：左邊的位置偏移 right: 右邊的位置偏移 top：頂部的位置偏移 bottom：底部的位置偏移positon取值absolute時，表示相對于父元素；position取值relative時，表示相對于自身 le

16、ft取值25px，absolute下，元素左邊將偏離父元素25像素； relative下，元素左邊距離自身原始位置偏移25像素absolute示例1absolute示例2樣式屬性display，描述元素如何顯示 取值：block，inline，list-item，none 理解：元素在網(wǎng)頁上的顯示占據(jù)一塊矩形區(qū)域（盒模式），display屬性控制該矩形區(qū)域如何顯示 block：使元素顯示在下一行 none：使得元素隱藏不顯示示例示例 body font-family:微軟雅黑,楷體,宋體; 你好，歡迎光臨飲料鋪!卡布奇諾，15元來自意大利的咖啡，口味香濃綠茶，10元來自中國的茶飲，清涼爽口里嵌

17、套的元素繼承了body的字體樣式繼承的覆蓋 body font-family:微軟雅黑,楷體,宋體; p font-family: 華文行楷,微軟雅黑; 你好，歡迎光臨飲料鋪!卡布奇諾，15元來自意大利的咖啡，口味香濃綠茶，10元來自中國的茶飲，清涼爽口p的字體樣式覆蓋從body繼承的字體樣式示例在css里，被應用的樣式規(guī)則總是最具體的 比如，如果有一個樣式，定義了一個更具體的，則瀏覽器會執(zhí)行更具體的那條樣式 body font-family:微軟雅黑,楷體,宋體; p font-family: 華文行楷,微軟雅黑; 一個元素的css樣式屬性，（部分地）會被嵌套在其內(nèi)的元素（子孫元素）所繼承繼

18、承的樣式可以被子孫元素重新定義的相同樣式所覆蓋哪些屬性可以繼承？ 主要是字體相關(guān)的樣式（如字體、顏色、大小、粗斜體等） 其它大部分屬性不被繼承 如邊框、位置等 根據(jù)理解，動手驗證，不用死記硬背示例css樣式css選擇符css的引入方式css樣式的級聯(lián)css語句中的選擇符選擇符（selector)定義了樣式應用的場所（對象），即受樣式影響的是哪些html元素三種主要類型的選擇符： html標記標記選擇符 class（類）選擇符 id選擇符理解理解html標記選擇符標記選擇符就是html標記（不加），如：p，div，body如果在css中將某個html標記定義成選擇符，則在css所應用的網(wǎng)頁中，所

19、有的這種html標記都按照相應的樣式進行顯示示例用html標記比如段落作為html選擇符定義的樣式規(guī)則，將影響所有段落，如果想采用不同樣式，可以創(chuàng)建不同的樣式類，通過類選擇符應用不同樣式類定義：選擇符直接以點（.）開頭，后跟類名(任意合法名稱)，即“.類名類名”應用：類選擇符根據(jù)html標記的class屬性進行選擇，選擇class屬性等于該“類名”的任何html標記 .類名 樣式1；樣式2； 選擇class屬性為“類名”的任何元素類選擇符的應用：使用html標記的classclass屬性 .style1 樣式 .style2 樣式 段落內(nèi)容1段落內(nèi)容2示例class = “style1”cla

20、ss = “style2”選擇class為“style1”的元素選擇class為“style2”的元素 .style 樣式; 段落內(nèi)容選擇class為“style”的任何元素示例 層內(nèi)容類選擇符選擇類選擇符選擇class屬性等于該類名的屬性等于該類名的任何元素任何元素idid： html標記（元素）的可選屬性，一個html元素可以設置id屬性值，標識該html元素html標記（元素）的name屬性在一個頁面中，id值是唯一的，name屬性值可以重復 段落內(nèi)容 段落內(nèi)容 如果一個html標記設置了id屬性，可以通過“idid選擇符選擇符”設置該html標記的樣式id選擇符定義和應用 定義：以（#

21、 #）開頭后跟id值，即“# #idid值值” 應用：id選擇符根據(jù)html標記的id屬性進行選擇，選擇id屬性值等于該“id值”的任意一個元素 #style 樣式; 段落內(nèi)容html標志可以有id屬性，值為任意合法名稱示例選擇id為“style”的任意一個元素類選擇符和id選擇符: 一個頁面，類選擇符可以重復使用，多個html標記的class屬性值是可以相同的 一個頁面中，html標記的id值是唯一的，id選擇符通常用于為某一個特定的html元素設置樣式示例三種選擇符: html標記選擇符(標記名不加) 根據(jù)html標記名進行選擇 類選擇符(用. .定義) 根據(jù)html標記的class屬性進

22、行選擇 id選擇符(用# #定義) 根據(jù)html標記的id屬性進行選擇課堂練習，問以下選擇符的含義： table 樣式 td .td #titlepanel 組合選擇器 可以在一條css語句中定義若干個選擇器，每個選擇器之間用逗號（，）分隔 p,h1,h2color:red; font-weight:bold; 元素的文本內(nèi)容都為紅色，粗體示例關(guān)聯(lián)選擇器 只選擇特定元素的子孫元素 div pcolor:red; font-weight:bold; 只選擇嵌套在div元素里的p元素兩者之間以空格空格進行分隔htmlheadbodytitledivpp div p color:red; font-

23、weight:bold; 選擇不不選擇示例htmlbodypp .style p color:red; font-weight:bold; 選擇選擇class為”style”的元素內(nèi)嵌套的p元素不不選擇htmlbodypp #style p color:red; font-weight:bold; 選擇id為”style“的元素內(nèi)嵌套的p元素課堂練習，問以下選擇符的含義： ：學習網(wǎng)頁源碼時，能看懂各種選擇符的含義 .grid .grid table #grid table 新浪首頁源文件中的css .grid,table 要求要求 .grid table td 偽類選擇器： 對同一個html元

24、素的各種狀態(tài)的一種定義方式 比如：對于超鏈接（）的正常狀態(tài)、訪問過的狀態(tài)、光標移動上去的狀態(tài)常用偽類選擇器： a:hover 光標移動到超鏈接上時的狀態(tài) a:visited 超鏈接訪問過后的狀態(tài)示例css樣式css選擇符css的引入方式css樣式的級聯(lián)html文檔內(nèi)定義內(nèi)部樣式表鏈接外部樣式表嵌入外部樣式表直接定義html標記的style屬性（內(nèi)聯(lián)樣式） css pcolor:red; 第一段文字 只在該頁面內(nèi)有效在文件里(后綴名為css)定義各種樣式規(guī)則，頁面中創(chuàng)建到該文件的外部鏈接bodybackground-color:#d2b48c;border:10px solid gray;padding:20px;font-family:微軟雅黑;藍色部分寫在單獨的樣式文件（后綴名為css)文件里不需要標記一個樣式文件可被多個文檔引入樣式文件示例 css . 之間的標記鏈接外部樣式文件相對或絕對地址鏈接示例1 鏈接示例2定義好的外部樣