CSS :first-letter 首字放大

前言

現實身活上許多報章雜誌的文章的排版都十分的講究，讓我常常著迷於這些設計上。今天在網上偶遇了愛貝客這個網站，他的設計以及排版十分的吸引我，裏頭不僅使用了許多CSS3的技術，還使用了前幾日提到的瀑布流排版，不過這不是今天的重點，吸引我的是它在文章開頭使用的首字放大效果，廢話不多說!開始今天的旅程~

CSS text-indent 與 word-spacing 介紹

簡介

本文章簡單的介紹CSS中的兩個在文章排版非常有用的屬性，分別為text-indent(縮進)、word-spacing(字距)。

text-indent

相信大家小時候或是現在都有寫過作文，而作文在文章的最前頭都必須要縮進二~四格空白，在網頁中，你可以使用text-indent來實作這個功能

CSS 透明 所有瀏覽器通用寫法

CSS 透明個瀏覽器通用解法

簡介

有的時候我們需要在網頁頁面上些效果，需要將部分元件設定透明，最常使用的方法就是使用rgba(red, green, blue, alpha)或是opacity的方法去設定，但這式樣在IE中會無法正常地顯示，因此本文提供一個通用的寫法，讓各種瀏覽器都可以支援透明值的設定


filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* Moz + FF */ opacity: 0.5; /* 支持CSS3的瀏覽器（FF 1.5也支持）*/ 
其中IE與Firefox都使用了自己定義的屬性，而標準的屬性是opacity，值可以為小數點，範圍0.0~1.0。

CSS and jQuery 自動判斷視窗大小改變排版

CSS and jQuery 自動判斷視窗大小改變排版

簡介

科技日新月異，各式各樣的電子3C產品被開發出來，Web面臨了一個重大個挑戰，那就是如何針對不同的設備來設計我們的網頁。如果是手機跟PC，是得我們可以很明確地拆分兩個版本的網頁來設計，本篇文章主要探討為在相同類型設備中，面對不同size的螢幕必須自動的改變可是的範圍，這邊我們以當前正紅的Friendsheet作為範例 : 

CSS 超連結無法完全包覆DIV解決辦法

假設使用<a><div></div></a>因該會發現一個問題，就是如果我們滑鼠是在div內容的外面，就無法使用超連結，解決辦法如下，將css display屬性設定

display: block; display: inline-block;

CSS - Overflow清除Float效果的妙用

Overflow清除Float效果的妙用

問題與解決辦法

一、問題引發思考

今天在工作遇到一個很奇妙的問題，使用了clear:both始終無法消除浮動視窗所帶來的不確定div大小，後來在網路上找到了修改overflow這個方法，效果非常好!! 以下為方法來自於mr.mu studio

在使用css設計版面時我們常常會遇到的情況之一，就是用來包覆float子區塊的父區塊無法跟隨float子區塊的高度一併延伸：

而通常我們要解決這種情況，我們會增加一個具有 clear 屬性的元素 (例：具有clear:both設定的div元素) 在float子區塊後面來清除Float效果，讓父區塊可以成功的包覆子區塊：

但是你知道嗎？其實我們也可以用overflow這個屬性來達到清除float的效果。什麼是overflow呢，overflow屬性原本是用來控制當內容超出顯示範圍時，是否出現捲軸效果的屬性，它的預設值是visible，也就是讓內容完全顯示出來，不嵌入顯示捲軸的顯示區域。我們在此要使用的是設定是overflow:auto，也就是為內容嵌入顯示捲軸的顯示區域，但視情況顯示捲軸。(請google以獲得更多overflow的詳細使用方式)

當我們為父區塊設定overflow:auto的屬性後，我們就不需額外去clear掉float的效果了：

本文章內容轉載於 http://www.mrmu.com.tw/2011/02/19/css-overflow-clear-float/

CSS 群控制器

有時候某些標籤所要修改的內容是一樣的，例如我們要將<h1><h2>標籤都設定為粗體字，這時候我們就可以使用CSS中的群控制器來達成，例如 :

h1, h2 {         text-align: right; }

<h1>這個是靠右的段落1</h1> <h2>這個是靠右的段落2</h2>

群控制器是使用逗號將各個選擇器隔開，以達到集體設定的目的。

CSS color 顏色屬性

在CSS中，我們可以用顏色屬性來指定元素的顏色，例如

p{         color:blue; }

顏色屬性有五中方法可以定義 :

color: <color keyword> color: #rrggbb color: rgb(rrr,ggg,bbb) color: rgb(rrr%,ggg%,bbb%) color: inherit