CSS

如何引用CSS檔案的內容在一個CSS檔案中，可以通過@import指令來引用另一個CSS檔案，格式如下：@import url("被引用的CSS檔案名稱");例如有a.css和b.css兩個CSS檔案，如果希望在a.css中使用b.css中的選取器，可在a.css檔案中添加如下指令來完成：@import

說明：√屬性繼承　×不繼承　[　]為適應元素類型　無[　]標出為所有元素字型√Font-family√Font-size 9 10 12 14 16 18 24 36 xx-small x-small small medium large x-large xx-large smaller larger√Color√Font-style normal italic oblique√Line-height

提到CSS，很多Web開發人員都不陌生。它是在 Web 應用程式中控制展現的標準技術。CSS 與 HTML 和 JavaScript 一起，構成了 Ajax 應用的基礎。對於 CSS，已經有很多圖書和文章進行過詳細的介紹。本文不介紹 CSS 文法的細節，而是從一些實際開發中會遇到的問題出發，討論一些與具體實踐相關的話題。下面首先介紹 CSS 中的一些重要概念，可以協助讀者加深對 CSS 的理解。本文中以 CSS 2.1 規範來進行說明。CSS 的重要概念CSS 的文法非常簡單，包含的元素也很少，

這是一個不太引人注意的問題，在IE瀏覽器下面中英文字型混排的時候，常常會出現不對齊的情況。如圖1所示，在IE下當一行文字同時有英文跟中文的時候，連結底線就會發生折行，也就表示這個時候中英文是沒有對齊的！（FIREFOX不受此問題影響）圖1 IE瀏覽器下面中英文不對齊經過測試，預設的直接在頁面裡設定連結的時候是不會出現這個情況，如圖2！圖2

相信學過CSS的朋友都知道CLASS這個東西,不知道你平時製作網頁時是怎麼應用的,我是這樣來做DIV布局代碼的．不知道說的清楚不清楚，湊和看吧我把class分為２種，布局class，風格class，布局class是骨架，風格class是衣服舉個例子：比如布局中的左欄首先它的屬性有：是左欄，寬度，背景顏色，字型顏色等１．首先會定義一個class,比如:.layout,主要用來控制頁面整個的大小.layout{width:98%;margin:0

CSS代碼更清晰高效的一些經驗是許多網頁製作者與開發人員都關心的問題。但是大概沒有什麼魔法，可以保證一下就把你的樣式表縮小到百分之多少，合理的CSS 編碼與組織技巧，的確能夠協助你的更有效率地寫出更清晰高效的代碼，自然CSS樣式表大小的縮減還能減少下載的時間。一、排版：1、關鍵詞和操作符之間加適當的空格。2、相對獨立的程式塊與塊之間加空行3、較長的語句、運算式等要分成多行書寫。4、劃分出的新行要進行適應的縮排，使排版整齊，語句可讀。5、長運算式要在低優先順序操作符處劃分新行，操作符放在新行之首。

我們接下來會建立一個xHTML頁面，內含兩個分別被ID為fixedBox與FlowBox的DIV所包含的兩個內容地區，分別為固定寬度與不固定寬度的兩個DIV，現在我們來為這兩個DIV加上圓角。我們所使用的理論是：在為元素添加背景時，背景圖片總是顯示在背景色之上；要建立單色的圓角矩形框，我們可以先建立一個正常的矩形框，然後，使用與背景色一致的圓角圖片來做為這個元素的四圓角背景，就可以組成一個圓角框了。下面分兩種情況—固定大小的框與流式不固定大小的框再詳細說明方法。為固定大小的框添加圓角

一、Float的特性1. 應用於文字圍繞圖片2. 建立一個塊級框3. 多列浮動布局4. 浮動元素的寬度、高度自適應，但可以設定其值。二、核心解決的問題文字圍繞圖片：img標籤與多個文字標籤放置在一個容器中，如果img浮動，文字標籤會圍繞圖片。<img src="../img/a.jpg" style=" width: 100px; height: 200px; float: left;" alt="">

如下：執行個體代碼如下：<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

- 僅作用於區塊層級元素的屬性width，height（這倆可用於替換元素）text—align， text—indent， vertical—align（也可用於表儲存格和替換元素如input/img）background-position(注意百分數和絕對值的區別，同時這個屬性會影響平鋪效果)［基本視覺格式化］1. 框模型： － background包括內容框、內邊距和邊框，外邊距通常是透明的，顯示父元素的背景；2. 水平屬性：－子項目的左（右）margin，左（右）padding，左（

前言em 和 rem 都是靈活可擴充的單位，由瀏覽器轉換為像素值，取決於設計中的字型大小，如果使用值 1em 或 1rem ，它可以被瀏覽器轉換為從 16px 到 160px 或其他任意值。瀏覽器使用 1px ，那麼 1px 始終顯示為完全 1px。em 和 rem 的相同點使用 em 和 rem 單位可以讓我們的設計更加靈活，能夠控制元素整體放大縮小，而不是固定大小em 和 rem 區別區別是瀏覽器根據誰來轉化成 px 值rem 單位如何轉化為像素值當使用 rem

<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title></head><body><div style="border:3px solid silver; width:300px;"> <div id="container" style=

CSS中的定位元模式規定了一個盒子在總體的布局上應該處於什麼位置以及對周圍的盒子會有什麼影響。該模式包括了常規文檔流，浮動，和幾種類型的 position 定位的元素。其中，CSS position 屬性可以取5種值：position: absoluteposition: relativeposition: fixedposition: staticposition: inheritstatic 是 position 預設的屬性值。任何應用了 position:static

扇形製作原理，底部一個純色原形，裡面2個相同顏色的半圓，可以是白色,內部半圓按一定角度變化，就可以產生出扇形效果<html><head> <meta charset="UTF-8"> <title>扇形繪製</title> <style> .shanxing{ position: relative; width: 200px;

前面的話  導航條Tab在頁面中非常常見，本文說詳細介紹CSS實現導航條Tab的三種方法 布局  根據所示，先規定幾個定義，的模組整體叫做導航，由導航標題和導航內容組成。要實現所示的布局效果，有兩種布局方法：語義布局和視覺布局【語義布局】  從語義布局的角度來看，每一個導航標題和其對應的導航內容應該是一個整體<style>body,p{margin: 0;}h2{margin: 0;font-size:100%;}ul{margin: 0;padding: 0;list-style:

要快速進行網頁排版布局，則必須對布局的元素有清晰的瞭解，才不會總是在細節處出錯。這一篇先詳解有關布局的因素作為布局基礎：區塊層級元素and內嵌元素、盒模型、準確定位、元素對齊、樣式繼承。下一篇則重點描述快速布局思路。一、什麼是區塊層級元素和內嵌元素1，區塊層級元素：display:block表現出來的特點是折行的， 一般來說可以包含區塊層級元素和內嵌元素；例外：　　P

如果一個盒子的長寬都為零，那麼它的四條border就會碰到一起，變成實心的，而且每一條border都是一個三角形；我們就可以利用三角形來實現對白框的尖下巴。通過把border上左設定為有顏色，下右設定為透明，在#demo:before放置一個向下的等邊三角形，絕對位置使之頂部與大盒子的下邊框重合。再通過把border上左設定為白色，下右設定為透明，在大三角形裡面放置一個白色小三角形，覆蓋掉一部分顏色，就形成了尖下巴。可以用#demo:before和#demo:after虛擬元素來實現，也可以在大

媒體查詢多用於響應式網頁中。1.初始化設定：在HTML檔案中，網頁頂部<head></head>標籤中插入一句話：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,

一、margin可以為負值在盒模型中，內容區的width/height、padding、border都不能為負值，但是margin例外，它可以為負值。關於margin負值的提示，瞭解不多，日後有機會再補充，此處先貼一個經典應用，margin-left負值結合浮動實現不改變DOM結構的流體布局。<!DOCTYPE html> <html> <head> <meta charset="utf-8">

相容性既然是CSS3的屬性，我們當然要來看看相容性：http://caniuse.com/css-reflections/embed接下來，我們來瞭解box-reflect如何使用？文法如下： -webkit-box-reflect：none | <direction> <offset>? <mask-box-image>? box-reflect:none | <direction> <offset>? <mask-box-