css使用筆記

最近寫一個前台頁面，因為不用考慮太多相容性問題，嘗試了很多css3的東西，記錄下。

1、漸變和邊框陰影

最初的視覺稿，上面有很多地方顔色使用了漸變，為了不使用圖檔，用了很挫的方式來實作：從圖檔漸變開始、中間、結束部分，用gimp的吸管擷取顔色，然後轉換成css的漸變。不過因為漸變每個浏覽器支援方式不太一樣，有一些線上生成css的網站還是不錯的，比如這個和這個。

邊框陰影，也就是box-shadow屬性。按照mdn的文檔，值的組成是這樣的：

現在的浏覽器支援的不錯了，有些框外面加點陰影，效果會好點。

2、綁定事件

很多地方為了突出（其實大部分因為上頭有人說要弄的炫一點），需要在滑鼠移動過去之後，增加點效果。比如增加padding、改變顔色或者展示浮出層。css有一些dynamic pseudo-classes（不知道怎麼翻譯，從這裡抄過來的），可以選擇有指定狀态的元素。比較常見的應該就是hover，在滑鼠移入，但沒有觸發元素的時候（the :hover pseudo-class applies while the user designates an element with a pointing device, but does not necessarily activate it）。

比如，菜單中，如果滑鼠移動到某個菜單項，但是還沒有點選的時候，需要突出這個菜單項，可以這麼做（這裡菜單項是個簡單的a元素）：

[cce lang=”css”]

ul#main-nav > li > ul > li > a {

display: block;

width: 100%;

text-decoration: none;

font-size: 13px;

color: black;

}

ul#main-nav > li > ul > li > a:hover {

color: #fe9900;

font-size: 14px;

[/cce]

這樣，在滑鼠移動到菜單項上，會使下面一個選擇器生效，将目前的字型放大，顔色變色。

3、css選擇器

上面那個例子，已經用了一些css選擇器了，這裡再記錄下其他用到的選擇器：

id選擇器（#id）：頁面上帶了id屬性的，精确而且友善

類選擇器(.class)：元素class屬性帶的，用的應該也是最多的

直接選擇元素(tagname)：直接使用元素名稱，我一般習慣和class或者id共用，不太喜歡給全局某個元素加上很多樣式，雖然統一，但是場景太多，有些地方不好控制。

屬性選擇器([attr=”xxx”])：這個用來相容老的标簽比較好，比如表格單元格要居中顯示，原先可能會直接寫成：

[cce lang=”html”]

<td valign="middle"></td>

但是表格加了樣式後，這些屬性會失效（這個沒去找原因），可以在樣式表中這樣寫：

td[valign='middle'] {

vertical-align: middle;

這樣就能給在标簽中加了valign屬性的元素，再加上vertical-align的樣式屬性了。

僞選擇器：前面用到了:hover這個僞類，其他類似的還有:focus等，能夠用來辨別元素的不同狀态。另一類僞類選擇器，可以從一堆元素中篩選需要的元素，對我最有用的就是:nth-child了。:nth-child(an+b)像一個函數，通過設定不同的a和b，計算出可以取的正整數：

tr:nth-child(2n+1) /* 表格中的奇數行，也可以用tr:nth-child(odd)表示 */

tr:nth-child(2n+0) /* 偶數行，也可以用tr:nth-child(even)表示 */

另外還有一個很有用的僞選擇器，是可以建立僞元素，這樣就可以在需要的元素前後增加自己需要的東西（圖示等）。

.btn-icon-add::before {

content: url(“icons/edit_add.png”);

這樣能在加了btn-icon-add class的元素前面，增加一個元素，内容是url中的圖檔。這裡遇到過一個問題，就是到底用一個冒号，還有兩個冒号。在ff和chrome中，一個冒号和兩個冒号都可以，但是ie8（其他ie沒試過）隻能識别一個冒号的。google了一下，有人說是兩個冒号是css3定義的，為了差別css2中定義的其他僞選擇器，但是可以用一個冒号，以保持向下相容。

組合選擇器：用的最多的應該就是空格、>、+等，空格表示空格後面元素是前者的後裔，和>的差別是>表示直接子元素。加号表示臨近的兄弟元素。不過目前沒法選擇父元素，這個比較惡心。

轉載自：https://coolex.info/blog/363.html