CSS3 :target 選擇器

定義和用法

URL 後面帶有錨名稱#(錨點),指向文檔內某個具體的元素。這個被鏈接的元素就是目標元素(target element)。

imglightbox

:target 選擇器可用於選取當前活動的目標元素。

:target CSS 代表一個唯一的元素(目標元件用)id匹配的URL的片段。

/ *選擇一個ID與當前URL片段匹配的元素* / 
:target  { 
  border : 2px solid black ; 
}
Add a comment

HTML

<ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ul>
Add a comment

CSS3可對顏色做透明,也就是說你在設計網頁上,想要將文字隱藏起來可使用color: transparent這個方法。

蘋果官方網站在CSS設計上,下圖紅色區塊,也是使用這個方式將連結文字隱藏,在對區塊設備背景圖。達到網頁內容有文字,對搜尋有幫助,但在視覺呈現上使用較有彈性的,圖片文字做為背景顯示。

Add a comment

CSS圖片垂直至中與文字對齊指的是什麼意思??如下圖顯示,文字自動對齊圖片中間。

使用CSS排版類似以下圖片與文字版面時,通常會使用圖片向左浮動後,圖片就會因為脫離區塊,文字就會靠上圖片。這樣的情況文字是靠最上層區塊,邊緣開始排列下來,有時在設計上的需求並不理想。

Add a comment

CSS3列印解決許多問題,如@media print可對列印頁面做不同的CSS顯示,設定邊框與頁輸出列印的紙張大小調用,都可以很客製化的去製作所需要的呈現的列印頁面,並且想讓某段落分到下一個頁面,也可用pag-break-after:always;強制分頁。

以下簡單的範例展示這些CSS3很棒的功能。

@page {
    margin: 1cm; /*print邊界*/
    size:210mm 148mm; /*列印紙張大小*/
}
.print{
    page-break-after:always; /*print分頁面*/
}
@media print{
    .imgs{
        width: 100px;
    }
}

範例展示:(可按下遊覽器列印來預覽列印頁面結果)

Demo | 下載測試頁面

Add a comment