CSS3 :target 選擇器

定義和用法

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

imglightbox

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

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

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

Comment

HTML

<ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ul>

css

ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
ul li{
    background-color: gray;
    padding: 10px;
}
ul li:hover{
    background-color: rgb(138, 138, 138);
}
@media screen and (min-width:768px) {
    ul{
        display: flex;
    }
    ul li{
        flex:1;
    }
}

(可縮放視窗測試效果。)

Comment

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

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

Comment

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

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


此編排需求常應用在blog的側邊欄位上,因為內容標題的文字多少不一定,若在上方開始排列起文字,可能使得少的文字內容標題顯得空洞。最好的方式在設計的排版上讓文字與圖片垂直至中對齊,就可以解決以上問題,如下圖顯示。

如何能夠使文字與圖片垂直至中對齊

HTML 使用最基本的LIST排列出我們要的清單:

<ul class="align-st">
        <li><a href="#" class="img-link"><img src="/images/1.jpg"></a><h3><a href="#" class="title-link">煙霧魔法師 El Vendedor de Humo 動畫短片-紫紅色的神奇迷霧魔法</a></h3></li>
        <li><a href="#" class="img-link"><img src="/images/2.jpg"></a><h3><a href="#" class="title-link">
皮納塔駱駝HOLA LLAMIGO動畫短片</a></h3></li>
        <li><a href="#" class="img-link"><img src="/images/3.jpg"></a><h3><a href="#" class="title-link">諸神年少時荒唐事Apocalyptos</a></h3></li>
        <li><a href="#" class="img-link"><img src="/images/4.jpg"></a><h3><a href="#" class="title-link">肥肥圓圓的長頸鹿要喝口水都難</a></h3></li>
</ul>

圖片是使用像素較大的尺寸,這邊是利用css設定寬度,並且使用百分比設定寬度,讓它能容下在不一定寬度的欄位內。

css:

<style>
        *{
            margin:0;
            padding: 0;
        }
        .wrapper{
            width: 800px;
            margin:0 auto;
        }
        .align-st li{
            display: flex;
        }
        .align-st h3{
            align-self:center;
            display: block;
            float: right;
            width: 50%;
        }
        .align-st .img-link{
            width: 50%;
            display:block;
            margin-right: 20px;
        }
        .align-st img{
            max-width: 100%;
        }
 </style>

主要原理在於應用了display:flex;,使得內容排列為flex,為文字區塊做右浮動,設定內容文字使用align-self:center;,就可以顯示這樣的效果。

DEMO | DOWNLOAD 範例下載

參考 http://www.w3schools.com/cssref/css3_pr_align-self.asp

Comment

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

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

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

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

Demo | 下載測試頁面

Comment

Copyright © 2018 ucamc