基于html5的響應式web設計專題等多個文件中級課件_第1頁
基于html5的響應式web設計專題等多個文件中級課件_第2頁
基于html5的響應式web設計專題等多個文件中級課件_第3頁
基于html5的響應式web設計專題等多個文件中級課件_第4頁
基于html5的響應式web設計專題等多個文件中級課件_第5頁
免費預覽已結束，剩余38頁可下載查看

付費下載

下載本文檔

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

文檔簡介

淺

談

CSSCSS簡介CSS是什么？CSS選擇器CSS基本語法CSS樣式CSS盒狀模型CSS的定位DIV+CSSCSS是什么呢？CSS是CascadingStyleSheets（級聯(lián)樣式表）的縮寫。CSS是一種樣式表語言，用于為HTML文檔定義布局。例如，CSS涉及字體、顏色、邊距、高度、寬度、背景圖像、高級定位等方面。HTML可以用于為網站添加布局效果，但有可能被誤用。而CSS則提供了更多選擇，而且更為精確、完善?，F(xiàn)在所有瀏覽器都支持CSS。

總之HTML是定義網頁內容，CSS則是定義內容樣式，一般的話，內容和樣式分離，既可以方便維護，也可以實現(xiàn)代碼重用。在HTML中如何引入CSS(1)方法1：行內樣式表（style屬性）使用HTML屬性style<html><head><title>例子</title></head>

<bodystyle=“font-size:30px;background-color:#FF0000;"><p>這個頁面是紅色的</p></body></html>XHTML1.1不建議使用行內樣式表在HTML中如何引入CSS(2)方法2：內部樣式表（style元素）采用HTML元素style<html><head><title>例子</title><styletype="text/css">

body{background-color:#FF0000;}

</style>

</head><body><p>這個頁面是紅色的</p></body></html>在HTML中如何引入CSS(3)方法3：外部樣式表（引用一個樣式表文件）外部樣式表就是一個擴展名為css的文本文件。例如，樣式表文件名為style.css，它通常被存放于名為style的目錄中<html><head><title>我的文檔</title><linkrel="stylesheet"type="text/css"href="style/style.css"/>

</head><body></html>在HTML中如何引入CSS(3)使用<link>這種方法的優(yōu)越之處在于：多個HTML文檔可以同時引用一個樣式表。換句話說，可以用一個CSS文件來控制多個HTML文檔的布局在HTML中如何引入CSS(3)外部樣式表（引用一個樣式表文件）<html><head><title>我的文檔</title><linkrel="stylesheet"type="text/css"href="style.css"/></head><body><h1>我的第一個樣式表</h1></body></html>body{background-color:#FF0000;}HTMLCSS在HTML中如何引入CSS(3)外部樣式表（引用一個樣式表文件）<html><head><title>我的文檔</title><linkrel="stylesheet"type="text/css"href="style.css"/></head><body><h1>我的第一個樣式表</h1></body></html>body{background-color:#FF0000;}HTMLCSSCSS選擇器CSS選擇器標記選擇器每一種HTML標記的名稱都可以作為相應的標記選擇器的名稱。例如，p選擇器就是用于聲明中所有<p>標記的樣式風格。<style>p{color:red;font-size:25px;}</style>CSS選擇器派生選擇器派生選擇器的結果是同時選中各個基本選擇器所選擇的范圍。任何形式的選擇器(包括標記，class,id選擇器等)都可以作為并集選擇器的一部分。通過依據元素在其位置的上下文關系來定義樣式<p><strong>我是粗體字，不是斜體字，因為我不在列表當中，所以這個規(guī)則對我不起作用</strong></p><ol><li><strong>我是斜體字。這是因為strong元素位于li元素內。</strong></li><li>我是正常的字體。</li></ol>listrong{font-style:italic;font-weight:normal;}HTMLCSSCSS選擇器id選擇器id選擇器的使用方法與class選擇器基本相同，不同之處在與id選擇器只能在HTML頁面中使用一次，針對行更強。id選擇器可以用于多個標記，但是一個id在一個HTML頁面中最多只能賦予一個HTML標記。id選擇器為標有特定id的HTML元素指定特定的樣式id選擇器以"#"來定義<pid="red">這個段落是紅色。</p><pid="green">這個段落是綠色。</p>#red{color:red;}#green{color:green;}HTMLCSSCSS選擇器id選擇器與派生選擇器id選擇器和派生選擇器在現(xiàn)代布局中，id選擇器常常用于建立派生選擇器#sidebarp{ font-style:italic; text-align:right; margin-top:0.5em; }CSSCSS選擇器

類選擇器類別選擇器的名稱可以由用戶自定義，屬性和值跟標記選擇器一樣，也必須符合css規(guī)范。<h1class="center">Thisheadingwillbecenter-aligned</h1><pclass="center">Thisparagraphwillalsobecenter-aligned.</p>.center{text-align:center}HTMLCSSCSS選擇器

類選擇器類選擇器id一樣，class也可被用作派生選擇器.fancytd{ color:#f60; background:#666; }CSSCSS選擇器

類選擇器類選擇器元素也可以基于它們的類而被選擇<tdclass="fancy">td.fancy{ color:#f60; background:#666; }HTMLCSSCSS選擇器通配選擇器通配選擇器樣式應用于文檔中的所有元素*{property:value}CSSCSS選擇器偽類選擇器偽類選擇器selector:pseudo-class{property:value}CSSCSS選擇器偽類選擇器偽類錨偽類—鏈接的不同狀態(tài)：未被訪問狀態(tài)、已被訪問狀態(tài)、鼠標懸停狀態(tài)、活動狀態(tài)a:link{color:#FF0000}/*unvisitedlink*/a:visited{color:#00FF00}/*visitedlink*/a:hover{color:#FF00FF}/*mouseoverlink*/a:active{color:#0000FF}/*selectedlink*/CSS提示： 1、在CSS定義中，a:hover必須被置于a:link和a:visited之后，才是有效的

2、在CSS定義中，a:active必須被置于a:hover之后，才是有效的

3、偽類名稱對大小寫不敏感CSS基本語法

絕對量像素（pixel，px）、英寸（inch，in）、厘米（centimeter，cm）、毫米（millimeter，mm）、磅（point，pt）、12點活字（pica，pc）相對量em（字母m的高度）、ex（字母x的高度）、%（百分比）屬性值的單位CSS基本語法URL屬性值body{background-image:url(images/bg.gif)}CSSCSS基本語法

顏色值/*英文單詞red*/p{color:#red;}/*使用十六進制的顏色值#ff0000*/p{color:#ff0000;}/*為了節(jié)約字節(jié)，我們可以使用CSS的縮寫形式*/p{color:#f00;}/*我們還可以通過兩種方法是用RGB值*/p{color:rgb(255,0,0);}p{color:rgb(100%,0%,0%);}CSSCSS基本語法

記得寫引號/*如果值為若干單詞，則要給值加引號*/p{font-family:"sansserif",arial;}CSSCSS基本語法

多重聲明/*若定義不止一個聲明，則需要用分號將每個聲明分開。最后一條規(guī)則不需要加分號，因為分號在英語中是一個分隔符號，不是結束符號。然而，大多數有經驗的設計師會在每條聲明的末尾都加上分號，這么的好處是，當你從現(xiàn)有的規(guī)則中增減聲明時，會盡可能的減少出錯的可能性*/p{text-align:center;color:red;}/*建議在每行只描述一個屬性，以便增強可讀性*/p{text-align:center;color:black;font-family:arial;}CSSCSS基本語法

空格和大小不寫敏感多數規(guī)則包含不止一個聲明多重聲明和空格的使用使得樣式表更容易被編輯是否包含空格不會影響CSS在瀏覽器的工作效果，同樣，與XHTML不同，CSS對大小寫不敏感不過存在一個例外：如果涉及到與HTML文檔一起工作的話，class和id名稱對大小寫是敏感的body{ color:#000; background:#fff; margin:0; padding:0; font-family:Georgia,Palatino,serif;}CSSCSS基本語法

選擇器的分組可以對選擇器進行分組這樣被分組的選擇器就可以分享相同的聲明用逗號將需要分組的選擇器分開h1,h2,h2,h3,h5,h6{color:green;}CSSCSS基本語法

顏色與背景colorbackground-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackgroundbody{ background-color:#FFCC66; background-image:url("butterfly.gif"); background-repeat:no-repeat; background-attachment:fixed; background-position:rightbottom;}h1{ color:#990000; background-color:#FC9804;}CSSCSS基本語法字體屬性font-family//設置字體系列font-style//設置字體風格font-variant//以小型大寫字體或者正常字體顯示文本font-weight//設置字體粗細font-size//設置字符尺寸font//簡寫屬性，將有關字體的所有屬性設置在一個聲明中p{ font-style:italic; font-weight:bold; font-size:30px; font-family:arial,sans-serif;}CSSCSS基本語法

文本屬性text-indent//縮進元素中文本首行text-align//對齊元素中文本text-decoration//向文本添加修飾letter-spacing//設置字符間距text-transform//控制元素中的字母CSS盒狀模型

超鏈接屬性a:link{ color:blue; text-decoration:none;}a:visited{ color:purple; text-decoration:none;}a:active{ background-color:yellow; text-decoration:none;}a:hover{ color:red; text-decoration:none;}CSSCSS盒狀模型盒狀模型span和div元素用于組織和結構化文檔，并經常聯(lián)合class和id屬性一起使用用span組織元素span元素可以說是一種中性元素，因為它不對文檔本身添加任何東西但是與CSS結合使用的話，span可以對文檔中的部分文本增添視覺效果用div組織元素span的使用局限在一個塊元素內，而div可以被用來組織一個或多個塊元素CSS盒狀模型盒狀模型盒狀模型（boxmodel）用于描述一個為HTML元素形成的矩形盒子涉及為各個元素調整外邊距（margin）、邊框（border）、內邊距（padding）和內容的具體操作CSS盒狀模型邊框屬性border-widthborder-colorborder-styleborderCSS定位浮動元素（float）可以通過CSS屬性float令元素向左或向右浮動也就是說，令盒子及其中的內容浮動到文檔（或者是上層盒子）的右邊或者左邊CSS定位浮動元素（float）<divid="picture"> <imgsrc="bill.jpg"alt="BillGates"></div><p>causasnaturalesetantecedentes,idciroetiamnostrarumvoluntatum...</p>#picture{ float:left; width:100px;}HTMLCSSCSS定位元素的絕對定位絕對定位position屬性的值設為absolute相對于最近的已定位祖先或body的精確位置如果在祖先元素上添加“position:relative”，則絕對定位元素相對于它進行偏移否則，元素相對與body進行偏移#box_relative{position:absolute;left:30px;top:

溫馨提示

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

評論

0/150

提交評論