CSS

大家通過學習html已經可以做出簡單的網頁了，但是想要做出複雜的網頁就不能局限於html這一門語言了。通過學習CSS可以極大提高效率、做出精美的網頁。一、樣式表是什嗎？層疊樣式表（英語：Cascading Style Sheets，簡寫 CSS），是一種用來格式化文檔、添加樣式的電腦語言。樣式表分為：1.外部樣式表在head元素中添加<link>標籤連結到css樣式表<link rel="stylesheet"

用margin還是用padding這個問題是每個學習CSS進階時的必經之路。CSS邊距屬性定義元素周圍的空間。通過使用單獨的屬性，可以對上、右、下、左的外邊距進行設定。也可以使用簡寫的外邊距屬性同時改變所有的外邊距。——W3School邊界(margin)：元素周圍產生額外的空白區。“空白區”通常是指其他元素不能出現且父元素背景可見的地區。——CSS權威指南padding稱呼為內邊距，其判斷的依據即邊框離內容本文的距離，而我

margin我很少會用到，一般用到也只是相對的去調整一個層的位置以達到一定效果。因為最近正在著手更新自己使用的主題，所以研究了一下各種布局的實現方法。發現使用margin負值形成的布局結構要比我們一般用層嵌套層再去分別左右浮動的方式要靈活很多。margin

前幾天的晚上較全面的去看了下css的一些文檔和資料，大部分的樣式運用都沒什麼大問題了，只是有些許較陌生，但是也知道他們的存在和實現的是什麼樣式。今天主要想在這篇學習筆記中寫的也不多，主要是針對:before和:after寫一些內容，還有幾個小樣式略微帶過的介紹下。什麼是:before和:after？ 該如何使用他們？:before是css中的一種虛擬元素，可用於在某個元素之前插入某些內容。:after是css中的一種虛擬元素，可用於在某個元素之後插入某些內容。下面我們先跑個簡單的代碼測試下效果：

我們知道在頁面上傳入小表徵圖有多種方式，比如我們使用比較多的是css sprite背景圖片定位，就是將很多小表徵圖整合到一張大圖，然後使用CSS定位背景。還有一種比較現代的方式是使用font字型表徵圖，它利用@font-face原理載入表徵圖字型庫，然後調用表徵圖。使用css

很久沒有研究css了，成天用各種架構也基本都不需要自己寫，最近要做一個相簿頁面，碰到的第一個問題就是如何排布。先給出設計稿，然後再說說樣式如何寫分析一下，有一個容器，容器有padding，每一行的每一個item之間又有margin，首先想到的是這樣.container {    padding: 10px;} .container .item {    float: left;    width:

今天，我將要向你介紹一些你以前可能不知道的CSS工具。這些工具都是計量單位，就像像素或者相對單位,但是很可能你從來沒聽說過它們！讓我們一探究竟吧。rem我們將從你已經熟悉的東西開始。em單位被定義為當前字型大小。例如，如果你在body元素上設定一個字型大小，那麼在body元素內的任何子項目的em值都等於這個字型大小。<body>    <div class="test">Test</div></body&

滑鼠滑過元素，使得元素的樣式發生改變我們定義一個按鈕標籤代碼如下: <button class="px-button">BUTTON</button> 我們首先設定按鈕的背景顏色為灰色： 代碼如下: .px-button{background-color: grey;} 我們要使得滑鼠滑過按鈕的時候，讓其變為藍色，我們只需要增加hover選取器： 代碼如下:

1 2 3 4 5 .opacity{  filter:alpha(opacity=50);       /* IE

對於用 css 實現一個輪播圖的緣由，是那時候剛開始接觸前端，完全還不懂 js。但是有一個項目(就是一個用來應付面試的作品)需要做一個輪播的效果，當時第一反應就是用 css3 自訂動畫 -webkit-animation。做出來的效果自己覺得還可以，唯一的不足就是滑鼠點擊切換 banner 圖和指定到某個圖。如果項目中不需要切換變換圖片的需求，用 css3 做，何嘗不是一種辦法。不多說，先上代碼： html 代碼如下：<div class="test">

手機瀏覽自適應網頁，Safari瀏覽器往往能自動識別並排版，圖片寬度是佔滿螢幕的，那麼在不用閱讀器的時候如何做成這樣的效果呢？如圖，這裡要讓圖片寬度佔滿螢幕。因為圖片是在一個p標籤內，而且是Markdown轉換成html格式的，所以需要用jquery動態把樣式加給這個p標籤。css代碼：CSS@media screen and (max-width: 768px){    .img-width{      

濾鏡原本是 SVG 規範中的一部分。然而，當濾鏡的用途變得更廣泛時，W3C 也開始給 CSS 增加了一些常用的濾鏡效果。CSS 濾鏡非常強大又好用，你可以用它來模糊，變亮或飽和度以調整映像。這些濾鏡可以單獨使用也可以和其它的濾鏡組合使用，濾鏡的 CSS 文法是這樣的：filter: <filter-function> [<filter-function>]* |

CSS代碼:  代碼如下複製代碼 .list{margin: 0px 10px 20px;text-align: left; }.list ul{list-style-type: none;margin: 0px;padding: 0px;}.list li{background: url(/news/images/line.gif) repeat-x bottom; /*列表底部的虛線*/width: 100%; }.list li a{color:

字型font:font-style | font-variant | font-weight | font-size | line-height | font-family ;Margin & Paddingmagin: magin-top | margin-right | margin-bottom | margin-left;P {magin:20px;}P {magin:20px 10px;}P {magin:20px 10px 100px;}

類別選取器 在 CSS 中，類別選取器以一個點號顯示：  代碼如下複製代碼     .center {text-align: center} 在上面的例子中，所有擁有 center 類的 HTML 元素均為置中。在下面的 HTML 程式碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選取器中的規則。  代碼如下複製代碼    

一般的 position:fixed; 實現方法以我的部落格為例，在右下角 <div id="top">...</div> 這個 HTML 元素使用的 CSS 代碼如下：  代碼如下複製代碼 #top{position:fixed;bottom:0;right:20px;} 實現讓 <div id="top">...</div> 元素固定在瀏覽器的底部和距離右邊的20個像素。在 IE6

固定漂浮這種效果拖動時難免會產生抖動自己對CSS還是蠻有好感的，找來找去找到了天涯，仔細一看是純CSS的，沒有使用JS效果我覺得它比之前看到的要精簡些不用嵌套多餘的DIV 簡單的看一下CSS樣式部分：  代碼如下複製代碼 body { background-image:url(text.txt); /* for IE6 */background-attachment:fixed; }#bottomNav { background-color:#096; z-index:999;

z-index規範參考　　•在 W3C CSS2.1 規範中，每個元素都具有三維的空間位置，除我們所熟悉的水平和垂直位置外，元素還可在 "Z軸" 方向上層層相疊、依次向前排開； •元素在 "Z 軸" 方向上的呈現順序，由層疊上下文和層疊層級決定。在文檔中，每個元素僅屬於一個層疊上下文。在給定的層疊上下文中，每個元素都有一個整型的層疊層級，它描述了在相同層疊上下文中元素在 "Z軸"

css()方法在使用上具有多樣性，我們先來瞭解css()方法基本知識。css() 方法設定或返回被選元素的一個或多個樣式屬性。返回 CSS 屬性如需返回指定的 CSS 屬性的值，請使用如下文法：css("propertyname");下面的例子將返回首個匹配元素的 background-color 值：執行個體$("p").css("background-color");設定 CSS 屬性如需設定指定的 CSS

jquery的css格式為("屬性","參數")如果要擷取width的百分比輸入以下代碼就可以了math.round(($("#js_top_ment").width()/$(document).width())*100)方法二var cssrules=document.stylesheets[0].cssrules||document.stylesheets[0].rules;