【CSS筆記】網頁設計寫CSS常碰到的問題

關閉Chrome 12px字體大小限制

網頁設計時檢查遊覽器相容,發現設定12px以下字體,在goole chrome遊覽器卻都無效,上網查了一下結果,原來chrome遊覽器的預設限制最小字體為12px。
查詢了一下解決方法,就如下面的簡單語法,將chrome字體大小的限制關閉。

*PC桌面版的Chrome27正式取消了-webkit-文字大小調整屬性的支持,實際上是修正了原有的錯誤
 

-webkit-text-size-adjust:none;

 

CSS div背景圖片RWD Background-img

如何讓<div>高度自動調整到背景圖片大小?

另一種可能效率低下的解決方案是將圖像包含在<img/>元素集下visibility: hidden;,然後<div>使background-image

這會將<div>設置為<img/>元素中圖像的大小,但將其顯示使用的是背景。

CSS Flex圖片固定區塊高度寬度垂直左右置中

利用CSS Flex將圖片高寬度max100%對應外部區塊,上下垂直左右置中顯示於區塊中,這樣一來不管圖片大小多大,圖片都能正常比例完整顯示於區塊中。

注意:Flex只支援較新的瀏覽器。

HTML

<div class="box"> 
     <img class="imgcenter" src="http://p3.pstatp.com/origin/2ee200021b01de8df129"> 
</div>

CSS3 :target 選擇器做出onClick效果純CSS的lightbox

CSS3 :target 選擇器

定義和用法

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

imglightbox

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

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

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

CSS3 print 列印紙張大小分頁邊框大小方法

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 | 下載測試頁面

CSS3 蘋果官網範例文字隱藏color: transparent

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

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

CSS中使圖片白色背景轉透明

如果背景顏色為白色,有一種方法可以使用CSS混合模式,添加mix-blend-mode: multiply;CSS屬性:

img{
  mix-blend-mode: multiply;
}

CSS子選擇器大於符號 [>]使用方法、HTML 標籤屬性選擇

選擇器之間使用大於符號

選擇父元素的子元素,不包括子元素的子元素

css選擇器使用大於符號可以選擇不含元素內的其他相同子元素,這個語法簡單的使用符號大於[ > ]在選擇器之間。

以下範例可以看出在CSS語法.div1 > p字體顏色為紅色 ,.div1裡面的子元素<p>div1-P2</p>,因為外面父元素為<span>.div1 > p使用[ > ]符號,所以受引響的只有.div1下一層級的<p><p>div1-P2</p>一樣是呈現原來的黑色文字。若沒有使用[>]符號則連同子元素內的,所有<p>都會受樣式影響呈現紅色文字。

<style type="text/css">
    .div1 > p {
        color: red;
    }

    .div2 p {
        color: red;
    }
</style> 

<div class="div1">
    <p>div1-P1</p>
    <span><p>div1-P2</p></span>
</div>

<div class="div2">
    <p>div2-P1</p>
    <span><p>div2-P2</p></span>
</div>

SEO優化之CSS隱藏關鍵文字

想使用CSS將不必要,但可以增加SEO的關鍵文字隱藏,想要讓google大神搜尋到,又不想在網頁上HTML顯示你這些文字,可以使用下列CSS方法隱藏文字

text-indent:-9999px;

© UCAMC. All rights reserved.
Powered by CITIAR.