CSS

css Roger Johansson （這個老外彷彿是參與編訂 W3C 的傢伙）前幾天寫了一個關於CSS 3的文章：CSS 3 selectors explained 裡面說了去年12月份w3c最新制定的CSS 3的新標籤、新用法，我用機器翻譯看著也蠻爽的，把看得懂的摘錄下來，大家也學習一下先進經驗。呵呵~在CSS 3裡，假設你做了一個包含以下標籤結構的HTML檔案:<div id="nav-primary"></div>

css|頁面|字串 　　用TABLE和DIV做頁面配置設計的時候,遇到大尺寸的圖片和長英文字串,布局中定義的尺寸都會被破壞,導致頁面配置變形.　　有沒有辦法可以解決呢?　　用CSS的屬性OVERFLOW:hidden可以來控制,這樣超出部分會自動隱藏,這樣做不好的地方是就是這部分的資訊顯示不完全,比如圖片只顯示了一部分.

css 　　如何避免表格因為圖片尺寸或者過長的英文字元而變形撐開，在CSS加入以下代碼就可以防止，同時英文單詞也會按單詞斷行，不是按字母這個。我想說的是這個在CSS2.0是不支援的，但是能解決一些實際問題。    

css|連結|網頁 　　CSS本身沒有直接提供變換HTML連結底線的功能，但只要運用一些技巧，我們還是可以讓單調的網頁連結底線變得豐富多彩。 　　一、基本原理 　　首先，自訂HTML連結底線的第一步是建立一個圖形，在水平方向重複放置這個圖形即形成底線效果。如果要顯示出底線背後的網頁背景，可以使用透明的.gif圖形。　　其次，如果底線圖形的高度較大，則必須適當增加文本的高度，使得一行文本的底部與下一行文本的頂部之間有較大的空間，例如p { line-

css 　　作為一個熱門技術，CSS的發展的確有些緩慢。CSS最早被提議在1994年，最早被瀏覽器支援在1996年，CSS一直被力捧為傳統的以HTML為基礎的web代碼的繼承者。CSS使用樣式表來控制整個網站字型和布局的能力,使它看起來非常有效率、易於設計和有遠見。然而，也一直有荒誕的說法圍繞著CSS，阻礙了網頁設計師學習和掌握這種語言。究竟是什麼讓人們大驚小怪呢？　　我們訪問了大學教師Christopher

css|控制|網頁|顯示|樣式表 　　HTML對於＜font＞內容＜/font＞卷標只有： ＜font color=colorvalue size=fontsize face=字型＞＜/font＞這3種設定，而關於CSS對於＜font＞內容＜/font＞的延伸規格讓我們可以對字型的有更詳細的設定。對於字型的設定：

css|防盜鏈 　　實現方法很簡單　　在CSS中添加以下代碼: img { filter:expression( this.不能去掉 ? "" : ( (!this.complete) ? "" : this.runtimeStyle.filter = ("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "

css 作者：唐國輝         

css|教程|入門教程|文法 1.基本文法CSS的定義是由三個部分構成：選擇符（selector），屬性（properties）和屬性的取值（value）。 基本格式如下： selector { property: value} （選擇符 { 屬性：值}） 選擇符是可以是多種形式，一般是你要定義樣式的HTML標記，例如BODY、P、TABLE……，你可以通過此方法定義它的屬性和值，屬性和值要用冒號隔開： body { color: black}

css|技巧     Web網站可用性的關鍵計量是速度，更確切地說，是頁面能以多快的速度出現在訪問者的瀏覽器視窗裡。影響速度的因素有很多種，包括Web的速度、訪問者的Internet串連情況，以及瀏覽器必須下載的檔案大小。儘管你無法控制伺服器和串連的速度，但是你可以控制構成網站Web頁面的檔案大小。    

 　　DRY就是Donot repeat youself 不要重複。但其實這個名字有點無趣，哪個理論不是消除重複呢，但如何消除才是意義所在。總的來說我認為DRYCSS與OOCSS是兩個極端，所以我將會以對比的方式來講講DRYCSS的內容。使用DRYCSS很簡單，三步。　　1. 分組可複用屬性　　DRYCSS跟OOCSS有點像，第一步都是分組樣式，消除重複，但就像我說的，關鍵在於如何。OOCSS將樣式集合看作對象，所以分組的邏輯是，某個元素本身應該是什麼樣的，而DRYCSS則關注重複，

 　　Windows內建：　　新細明體：PMingLiU　　細明體：MingLiU　　標楷體：DFKai-SB　　黑體：SimHei　　宋體：SimSun　　新宋體：NSimSun　　仿宋：FangSong　　楷體：KaiTi　　仿宋_GB2312：FangSong_GB2312　　楷體_GB2312：KaiTi_GB2312　　微軟正黑體：Microsoft JhengHei　　微軟雅黑體：Microsoft

 我們大部分的設計師依舊在採用傳統的表格版面配置、表現與結構混雜在一起的方式來建立網站。學習使用XHTML+CSS的方法需要一個過程，使現有網站符合網站標準也不可能一步到位。最好的方法是循序漸進，分階段來逐步達到完全符合網站標準的目標。如果你是新手，或者對代碼不是很熟悉，也可以採用遵循標準的編輯工具，例如Dreamweaver MX 2004，它是目前支援CSS標準最完善的工具。   

 下面就展示三個例子： 1、利用 :before 和 :after 添加背景，比如給一段文字前後打引號； 2、利用 :before, :after, box-shadow 實現3D陰影製作效果; 利用 :before, :after, box-shadow 實現照片疊加效果。 複製代碼代碼如下:<!DOCTYPE html> <html lang="zh-cn"> <head&

 <style type="text/css">*{margin:0; padding:0;}html,body{ width:100%; height:100%;}body{ background:#fff url(/eg/eg_2014_01_02_14_50.jpg) center no-repeat;}</style> <div

 　　背景圖片Background

CSS布局常用的方法float:none|left|right 取值：none:　預設值。對象不飄浮left:　文字資料流向對象的右邊right:　文字資料流向對象的左邊 它是怎樣工作的，看個一行兩列的例子 xhtml代碼:<div id="wrap"> <div id="column1">這裡是第一列</div> <div

 　　從thinkcss架構中整理出來的CSs透明代碼，測試了下，對當前主流的Firefox、ie8、Opera以及Chrome的支援都不錯，本代碼是通過ie濾鏡，webkit等屬性，很好的解決了各個瀏覽器的透明問題，相信對大家有用處，以下是代碼：　　view sourceprint?1.transparent{　　2 filter:alpha(opacity=50);　　3 -moz-opacity:0.5;/** Firefox

 　　這個效果要求是每個item元素的高度都是寬度的2倍，我們首先父元素box設定了寬度100%，這裡我們主要利用padding的一個屬性來解決問題，因為padding的寬度如果是百分數來計算的的話　　那麼它的實際值都是相對父元素的寬度來算百分數的值，包括 padding-bottom 和 padding-top

border是最常用的用來製作各種各樣p邊框的CSS屬性,這裡我們整理了使用CSS的border屬性構建變形邊框的方法總結,最主要的還是基於三角形的一些圖形變換:border基礎回顧border 顧名思義就是邊框的意思，在 CSS 中，你可以透過 border 的文法來對邊框做許多樣化的設計變化，例如設定邊框的寬度、樣式、顏色等等，也可以隱藏邊框，原則上 CSS 對於 border 的設計不只局限於 p 區塊或 span