CSS

  • <pre>標籤文字段行CSS

    剛開始使用Google Code Prettify發現情況如下圖。(程式碼並沒有自動斷行)

  • 關閉Chrome 12px字體大小限制

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

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

    -webkit-text-size-adjust:none;
    

     

  • 使用jQuery 控制CSS變換不同Class樣式,達到同一頁面切換成不同顯示效果。如以下使用圖文模式圖片模式文字模式,分別為三種class(.vw_01、.vw_02.、vw_03)做切換。
     

  • Multi-Level Drop-Down Menu for CSS

    STYLE CSS

    CSS設定裡/---show---/註解中的內容為下拉選單主要呈現的效果。

    (/---show---/之外的CSS樣式可自行更換。本人製作最簡單的格式給各位,為在教學使用上較易理解。)

    * {
        padding: 0;
        margin: 0;
    }
    #cssmenu {
        width: 720px;
        margin-right: auto;
        margin-left: auto;
    }
    /*-------view style----------*/
    .nav,
    .nav ul {
        list-style-type: none;
    }
    .drop a {
        color: #000;
        text-decoration: none;
        font-size: 12px;
        font-family: Arial, Helvetica, sans-serif;
    }
    .drop {
        float: left;
        width: 100px;
        background-color: #0c0;
        position: relative;
        height: 20px;
        line-height: 20px;
    }
    .m4 {
        background-color: #093;
    }
    .drop:hover {
        background-color: #ff0;
        color: #fff;
    }
    .drop ul li:hover {
        background-color: #6c0;
    }
    .drop .dlist {
        background-color: #f00;
        width: 150px;
        position: absolute;
        top: 20px;
        left: 0px;
    }
    .m4 ul {
        background-color: #f60;
    }
    .drop .fly {
        display: block;
        position: relative;
        width: 150px;
    }
    .drop .fly ul {
        position: absolute;
        display: block;
        width: 150px;
        top: 0px;
        right: -150px;
        background-color: #09f;
    }
    .m4 .fly ul {
        background-color: #fc0;
    }
    /*-----------show---------------*/
    .drop ul {
        display: none;
    }
    .drop:hover ul {
        display: block;
    }
    .drop .fly ul {
        display: none;
    }
    .drop .fly:hover ul {
        display: block;
    }
    .drop .fly .fly ul {
        display: none;
    }
    .drop .fly .fly:hover ul {
        display: block;
    }
    .drop .fly .fly .fly ul {
        display: none;
    }
    .drop .fly .fly .fly:hover ul {
        display: block;
    }
    /*-------show-------------*/

    HTML

    <dl class="nav">
        <dd class="drop m1 "><a href="#">HOME</a></dd>
        <dd class="drop m2">
            <a href="#">ABOUT US</a>
            <ul class="dlist">
                <li class="fly">
                    <a href="#">PREVENTION</a>
                    <ul>
                        <li><a href="#">video</a></li>
                        <li class="fly">
                            <a href="#">Dig-web</a>
                            <ul>
                                <li><a href="#">Kodak</a></li>
                                <li><a href="#">Canon</a></li>
                                <li><a href="#">Nikon</a></li>
                                <li><a href="#">Panasonic</a></li>
                            </ul>
                        </li>
                        <li><a href="#">TRUCKS</a></li>
                        <li><a href="#">PLANT</a></li>
                        <li><a href="#">EFFUVIUM</a></li>
                        <li><a href="#">VIEW</a></li>
                    </ul>
                </li>
                <li class="fly"><a href="#">PREVENTION2</a></li>
                <li class="fly"><a href="#">PREVENTION4</a></li>
                <li class="fly"><a href="#">PREVENTION5</a></li>
            </ul>
        </dd>
        <dd class="drop m3">
            <a href="#">DESIGN</a>
            <ul class="dlist">
                <li class="fly">
                    <a href="#">PREVENTION</a>
                    <ul>
                        <li><a href="#">video</a></li>
                        <li class="fly">
                            <a href="#">Dig-web</a>
                            <ul>
                                <li><a href="#">Kodak</a></li>
                                <li><a href="#">Canon</a></li>
                                <li><a href="#">Nikon</a></li>
                                <li><a href="#">Panasonic</a></li>
                            </ul>
                        </li>
                        <li><a href="#">LANDFIL</a></li>
                        <li class="fly">
                            <a href="#">Dig-web</a>
                            <ul>
                                <li><a href="#">Kodak</a></li>
                                <li><a href="#">Canon</a></li>
                                <li><a href="#">Nikon</a></li>
                                <li><a href="#">Panasonic</a></li>
                            </ul>
                        </li>
                        <li><a href="#">TRUCKS</a></li>
                        <li><a href="#">PLANT</a></li>
                        <li><a href="#">EFFUVIUM</a></li>
                        <li><a href="#">VIEW</a></li>
                    </ul>
                </li>
                <li class="fly"><a href="#">PREVENTION2</a></li>
                <li class="fly"><a href="#">PREVENTION4</a></li>
                <li class="fly"><a href="#">PREVENTION5</a></li>
                <li class="fly"><a href="#">PREVENTION2</a></li>
                <li class="fly"><a href="#">PREVENTION4</a></li>
                <li class="fly"><a href="#">PREVENTION5</a></li>
            </ul>
        </dd>
        <dd class="drop m4">
            <a href="#">DRAW</a>
            <ul class="dlist">
                <li class="fly"><a href="#">PREVENTION2</a></li>
                <li class="fly"><a href="#">PREVENTION4</a></li>
                <li class="fly"><a href="#">PREVENTION5</a></li>
                <li class="fly">
                    <a href="#">PREVENTION</a>
                    <ul>
                        <li><a href="#">video</a></li>
                        <li class="fly">
                            <a href="#">Dig-web</a>
                            <ul>
                                <li><a href="#">Kodak</a></li>
                                <li><a href="#">Canon</a></li>
                                <li><a href="#">Nikon</a></li>
                                <li><a href="#">Panasonic</a></li>
                            </ul>
                        </li>
                        <li><a href="#">LANDFIL</a></li>
                        <li class="fly">
                            <a href="#">Dig-web</a>
                            <ul>
                                <li><a href="#">Kodak</a></li>
                                <li><a href="#">Canon</a></li>
                                <li><a href="#">Nikon</a></li>
                                <li><a href="#">Panasonic</a></li>
                            </ul>
                        </li>
                        <li><a href="#">TRUCKS</a></li>
                        <li><a href="#">PLANT</a></li>
                        <li><a href="#">EFFUVIUM</a></li>
                        <li><a href="#">VIEW</a></li>
                    </ul>
                </li>
                <li class="fly"><a href="#">PREVENTION2</a></li>
                <li class="fly"><a href="#">PREVENTION4</a></li>
                <li class="fly"><a href="#">PREVENTION5</a></li>
            </ul>
        </dd>
        <dd class="drop m5">
            <a href="#">FILM</a>
            <ul class="dlist">
                <li class="fly">
                    <a href="#">PREVENTION</a>
                    <ul>
                        <li><a href="#">video</a></li>
                        <li class="fly">
                            <a href="#">Dig-web</a>
                            <ul>
                                <li><a href="#">Kodak</a></li>
                                <li><a href="#">Canon</a></li>
                                <li><a href="#">Nikon</a></li>
                                <li><a href="#">Panasonic</a></li>
                            </ul>
                        </li>
                        <li><a href="#">LANDFIL</a></li>
                        <li class="fly">
                            <a href="#">Dig-web</a>
                            <ul>
                                <li><a href="#">Kodak</a></li>
                                <li><a href="#">Canon</a></li>
                                <li><a href="#">Nikon</a></li>
                                <li><a href="#">Panasonic</a></li>
                            </ul>
                        </li>
                        <li><a href="#">TRUCKS</a></li>
                        <li><a href="#">PLANT</a></li>
                    </ul>
                </li>
                <li class="fly"><a href="#">PREVENTION2</a></li>
                <li class="fly"><a href="#">PREVENTION4</a></li>
                <li class="fly"><a href="#">PREVENTION5</a></li>
            </ul>
        </dd>
        <dd class="drop m5">
            <a href="#">PRODUCT</a>
            <ul class="dlist">
                <li class="fly"><a href="#">PREVENTION2</a></li>
                <li class="fly"><a href="#">PREVENTION4</a></li>
                <li class="fly">
                    <a href="#">PREVENTION</a>
                    <ul>
                        <li><a href="#">video</a></li>
                        <li><a href="#">video</a></li>
                        <li><a href="#">video</a></li>
                        <li><a href="#">video</a></li>
                        <li class="fly">
                            <a href="#">Dig-web</a>
                            <ul>
                                <li><a href="#">Kodak</a></li>
                                <li><a href="#">Canon</a></li>
                                <li><a href="#">Nikon</a></li>
                                <li><a href="#">Panasonic</a></li>
                            </ul>
                        </li>
                        <li><a href="#">LANDFIL</a></li>
                        <li class="fly">
                            <a href="#">Dig-web</a>
                            <ul>
                                <li><a href="#">Kodak</a></li>
                                <li><a href="#">Canon</a></li>
                                <li><a href="#">Nikon</a></li>
                                <li><a href="#">Panasonic</a></li>
                            </ul>
                        </li>
                        <li><a href="#">TRUCKS</a></li>
                        <li><a href="#">PLANT</a></li>
                    </ul>
                </li>
                <li class="fly"><a href="#">PREVENTION2</a></li>
                <li class="fly"><a href="#">PREVENTION4</a></li>
                <li class="fly"><a href="#">PREVENTION5</a></li>
            </ul>
        </dd>
        <dd class="drop m6">
            <a href="#">CANTACT</a>
            <ul class="dlist">
                <li class="fly">
                    <a href="#">PREVENTION</a>
                    <ul>
                        <li><a href="#">video</a></li>
                        <li class="fly">
                            <a href="#">Dig-web</a>
                            <ul>
                                <li><a href="#">Kodak</a></li>
                                <li><a href="#">Canon</a></li>
                                <li><a href="#">Nikon</a></li>
                                <li><a href="#">Panasonic</a></li>
                            </ul>
                        </li>
                        <li><a href="#">LANDFIL</a></li>
                        <li class="fly">
                            <a href="#">Dig-web</a>
                            <ul>
                                <li><a href="#">Kodak</a></li>
                                <li><a href="#">Canon</a></li>
                                <li><a href="#">Nikon</a></li>
                                <li><a href="#">Panasonic</a></li>
                            </ul>
                        </li>
                        <li><a href="#">TRUCKS</a></li>
                        <li><a href="#">PLANT</a></li>
                    </ul>
                </li>
                <li class="fly"><a href="#">PREVENTION2</a></li>
                <li class="fly"><a href="#">PREVENTION4</a></li>
                <li class="fly"><a href="#">PREVENTION5</a></li>
            </ul>
        </dd>
    </dl>

    Demo

    IE6 解決方法

    body {
        _behavior: url("csshover3.htc");/*---ie6支援hover--加入body---*/
    }

    *註解:

    關於CSS鏈結_behavior上增加(" ")這兩個符號解釋為url("csshover3.htc"); ----表示csshover3.htc在此網頁資料夾上。然而一般使用的是url(#);才是所謂的依照檔案位址指定路徑

    例如:有個圖片檔名為img.jpg要設定為body的背景。

    body{
        backgroud-img: url(..images/img.jpg);
    } 
    /*----此img.jpg在外面的images資料夾裡。----*/

    我測試使用("")兩個符號,設定圖片背景img.jpg

    body{
        backgroud-img: url("img.jpg");
    } 
    /*-----------是沒有反應的----------*/

    所以結論為,url("#") 只能設定使用_behavior載入在此網頁本身資料夾上。

    相關資料夾路徑設定方法有:

    [ / ]:下層資料夾 (/imges/img.jpg)
    
    [../ ]:上層資料夾(../imges/img.jpg)

    相信這樣解釋大家能夠了解,csshover將要放在哪裡做連結,比較不會混淆,而達不到功效。

    範例檔案內附csshover3.htc檔案

    下載範例程式碼

    您會有興趣的文章:【jQuery教學】jQuery切換不同CSS樣式style:切換class、切換樣式、轉換不同CSS

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

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

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

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

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

    HTML

    <div class="box"> 
         <img class="imgcenter" src="http://p3.pstatp.com/origin/2ee200021b01de8df129"> 
    </div>
  • 使用50%設定top 與 left,再用margin-top ,margin-left 減去元素的高度寬度。

    如:top:50% 元素的上方對齊頁面正中央了,再用 margin-top:-100px 將元素向上移動一半 (元素高度為 200px),讓中心點對齊頁面正中央。

  • CSS3 :target 選擇器

    定義和用法

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

    imglightbox

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

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

    / *選擇一個ID與當前URL片段匹配的元素* / 
    :target  { 
      border : 2px solid black ; 
    }
  • 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 | 下載測試頁面

  • vh and vw

    vh:表示的是view height,也就是螢幕可視範圍高度的百分比
    vw:表示的是view width,也就是螢幕可是範圍寬度的百分比

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

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

  • 選擇器之間使用大於符號

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

    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>
  • HTML

    <ul>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
    </ul>
  • IE8在css使用max-width時會有如下圖失真的情形發生。
     
  • Apple的遊覽器Safari,原來也有像其他遊覽器如Chrome firefox檢查網頁元素的功能,只是預設隱藏需要手動去打開。

    偏好設定 > 進階 > 在選單中顯示開發人員選單。

  • ColorPicker色盤套件是個讓在Sublime Text下寫CSS時,可以快速的開起選色盤選色的外掛,是個幫助您更有工作效率的好工具,但不知為什麼安裝ColorPicker後發生沒辦法使用的情況

    這邊主要發生的原因在快捷鍵發生衝突convertToUTF8ColorPicker,使得按下相同的ctrl+shift+c,ColorPicker沒有反應,convertoUTF8的預設值GBK的快捷鍵也是ctrl+shift+c。

    主要解決方法是修改了不常用convertToUTF8 GBK的快捷鍵,因為它可以直接使用選單選擇也可以。

  • 在網頁上崁入YouTube iframe視頻時遇到了一個小問題,我需要在YouTube視頻大小取決於100%自動縮放,好使得我的網頁RWD設計能完整呈現。但是當我加入了嵌入代碼,視頻有一個固定的高度和寬度,你可能會認為設定CSS iframe width:100%寬度,視頻就會依照這樣設定,自動向周圍的容器調整,這好了!事實並非如此,寬度是可以100%自動縮放,但是高度就是沒辦法自動100%縮放。

  • Google Code Prettify 顯示程式碼最簡單方法

    google推出的google code prettify,可用很簡單的方式讓程式碼自動分辨顏色,而且可自行調整自由度很高!

    看一個範例

    設定

    最快的方式是使用下列CDN方式。

    <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
  • CSS ::selection

    網站當滑鼠反白時,反白區域的底色通常是藍色,但其實可以透過CSS ::selection選擇元素做背景色和字體顏色樣式的修改,設計此元素非常適合將用戶選擇的文本與您的網站配色方案進行匹配。

    p::-moz-selection { 
        color: red;
    }
    p::selection { 
        color: red; 
    }

    如上所示,您可以::selection對單個元素進行樣式設置。
    IE9+、Opera、Google Chrome 以及Safari 中支持::selection 選擇器。
    Firefox 支持替代的::-moz-selection。