CSS

標籤：hover   bre   大小   put   迴圈   設定   樣式表   ace   取值   span 一個沒有語義的行內標籤base這個標籤可以設定超連結的預設跳轉方式title

對於div,p等區塊層級元素 正常文字的換行(亞洲文字和非亞洲文字)元素擁有預設的white-space:normal,當定義的寬度之後自動換行： html <div id="wrap">正常文字的換行(亞洲文字和非亞洲文字)元素擁有預設的white-space:normal,當定義</div> css #wrap{white-space:normal; width:200px; }

background:rgba(254, 255, 200, 0.75); 例如上面代碼所示，前三個參數分別是分別是 R、G、B 三原色，範圍是 0-255。第四個參數是背景透明度，範圍是 0-1，如 0.5 代表透明度 50%。這個屬性使我們在瀏覽器中也可以做到像 Win7 一樣的半透明半透明效果。 css3圓角範例程式碼 /*FireFox 文法 */ -moz-border-radius: 6px 6px 6px 6px; -moz-border-radius-topright: 6

尖角在上面：代碼：[html]<html> <head> <title>尖角div</title> <style type="text/css"> #top { width:400px; height:250px; border:3px solid; /* 邊框寬度為3px */ position:relative; } .sp1,.sp2 { display:block; height:

position俗稱定位，主要取值及作用如下：Position本不複雜，混淆應用比較難理解，主要規則如下：脫離文檔流除 static屬性值之外，其他值都會使元素脫離文檔流（float也會導致元素脫離文檔流）。對 Width、height的影響1) Absolute的參考點為最近可作為參考點的父元素（position為absolute、relative、fixed的元素）、fixed的參考點瀏覽器視窗、relative的參考點為元素正常位置。2) 元素本身值為inherit時a)

針對不同的瀏覽器寫不同的CSS code的過程，就是CSS hack。樣本如下：#test { width:300px; height:300px; background-color:blue; /*firefox*/ background-color:red\9; /*all ie*/ background-color:yellow; /*ie8*/

剛開始接觸web的時候是在大學的時候，寫的第一個網頁就是登陸頁面，當時採用表格的布局方式，中規中矩的。接觸到css之後，都是採用div+css的方式進行布局，實現了表現與結構的分離，非常的靈活。雖然早已經接觸了css的布局方式，但是不經常使用，導致很多東西都已經忘記了。而最近又在搗鼓css的布局，就想在這裡進行記錄一下，就當做自己的學習筆記了。css盒子模型是css中一個比較核心的概念。在網頁中我們可以把所有的網頁元素都看成是一個盒子，一個盒子包括外邊距、邊框、內邊距，和內容四個部分組成的，如。

優先順序： 外部樣式 優先順序，即：同名的選取器右邊的會覆蓋左邊1.內部樣式表 2.使用link標籤，在文檔中聲明使用外接資源，最常用的一種方式。css外部樣式表指定編碼的@CHARSET="utf-8"; 需要放在第一行。 3.@方式，引入css,注意這個是非同步載入的，在整個html載入之後才載入，會導致頁面閃爍。不推薦使用。 4.內聯樣式表,優先順序最高最直白，但不能複用不容易維護。 

方法一：首先固定表格寬度，即給表格一個寬度值（數值，非百分比） 方法二：強制不換行　　div{//white-space：不換行;normal 預設;nowrap強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象white-space:nowrap; } 方法三：自動換行　　div{ word-wrap: break-word; //word-break設定強行換行;normal 亞洲語言和非亞洲語言的文本規則，允許在字內換行word-break: normal; }

隨著CSS3的發布，國外研究正如火如荼，但在國內還有很多人抱著IE不支援CSS3的想法，始終無動於衷不肯去學習。但是曆史告訴我們，好的東西必將盛行，CSS3也終將也會替代CSS2，下面就和大家分享一個用CSS3打造的可摺疊樹狀菜單。樹狀菜單相信大家都不會陌生，我們一般用css+JS

書中說道一個關鍵的點，視覺的錯覺：視覺的中點在偏上一點的位置(默默對自己說，不要用像素，別給自己挖坑。。。).center-display .object{ position: absolute; width: 0.5em; height: 0.5em; top: 0; bottom: 0.8em; left: 0; right: 0; margin: auto auto; border-radius: 50%; background-color:

Atitti css3 新特性attilax總結 圖片光暈效果2透明漸層效果2文字描邊2背景展開2 CSS3 選取器（Selector）4@Font-face 特性7Word-wrap & Text-overflow 樣式9Word-wrap9Text-overflow10文字渲染（Text-decoration） 描邊12CSS3 的多欄版面配置（multi-column layout）13邊框和顏色（color, border）14CSS3 的漸層效果（Gradient）15線性漸層1

css參考手冊：http://www.phpstudy.net/css3/http://www.css88.com/book/css/呈現3d效果：-webkit-transform-style:preserve-3d;透視距離：-wenkit-perspective:300;視角：-webkit-perspective-origin:25% 75%；/*數字正負均可*/旋轉和變換：transform: translatex(-90px) translatez(90px)

css的屬性很多，每一個屬性的值也很多，組合起來便有成千上萬種。不同屬性之間的相互組合也可以產生不同的樣式，css真是一種優美的樣式設計語言。下面對工作中常見的易混淆的屬性和值進行總結：1. line-height(行高) 帶單位與不帶單位的區別：我們知道行高是可以繼承的。當父元素的行高值沒有帶上單位時，子項目使用自己的字型尺寸並計算出行高（子項目的行高=父元素中 line-height 的值 * 子項目的字型尺寸）。當父元素的行高值帶有單位時，父元素先根據自己的字型尺寸計算出行高（絕對單位

1.等腰三角形.isosceles{ width: 0; height: 0; border:30px solid; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; border-bottom-color: red;}2.直角三角形.right{ width: 0; height: 0;

一、元素選擇符1. ** { margin: 0; padding: 0;}在我們看比較進階的選取器之前，應該認識下這個眾所周知的清空選取器。星號呢會將頁面上所有每一個元素都選到。許多開發人員都用它來清空`margin`和`padding`。當然你在練習的時候使用這個沒問題，但是我不建議在生產環境中使用它。它會給瀏覽器憑添許多不必要的東西。`*`也可以用來選擇某元素的所有子項目。#container * { border: 1px solid black;}它會選中`#container`

CSS3 可以將常值內容設計成像報紙一樣的多欄版面配置。像下面這樣：這樣的布局稱為“多欄版面配置”。對多列屬性分別進行學習：對於 column 的所有屬性，ie10+ 支援，firefox 不支援 column-span。除 firefox 外，所有瀏覽器都不支援 column-fill 屬性。1. column-count: 需要分割的列數

網站換膚，之前感覺總是很神奇啊，今天就來總結一下。我寫的就是兩種思路。首先都需要建一個css檔案夾，裡面存放不同顏色的css檔案：blue.css； red.css； yellow.css； green.css 在這幾個檔案中分別寫好要改變的樣式。接下來就是html檔案，首先第一種思路：唯寫一個link標籤（不推薦，原因請繼續閱讀）。代碼如下：

【CSS】過渡、動畫和變換1. 使用過渡過渡效果一般是由瀏覽器直接改變元素的CSS屬性實現的。例如，如果使用:hover選取器，一旦使用者將滑鼠移至上方在元素之上，瀏覽器就會應用跟選取器關聯的屬性。 Example There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By the

元素的高度自適應網頁布局中有時候有的高度需要根據內容調整，所以不能固定，今天就來說說，最小高度自適應屬性：min-height 最小高度，但IE6不識別該屬性，height在IE6中類似min-height屬性；以下是解決BUG問題方法：hack1：min-height:value; _height:value;（IE6能識別底線"_"和星號" * "，IE7能識別星號" * "，但不能識別底線"_"，而firefox兩個都不能認識）hack2：min-height:value;