CSS3學習筆記1-選擇器和新增屬性

来源:http://www.cnblogs.com/xinyiyake/archive/2016/11/16/6069580.html
-Advertisement-
Play Games

前言：之前自學了一些關於CSS3的知識，在學習過程中也遇到過坑，不過總算磕磕絆絆的學習完了關於CSS3的相關知識，於是最近把之前的筆記和代碼整理了一下，也算是一個對CSS3知識的回顧複習吧，也希望能夠對想學這方面知識的小白有所幫助。因為是各種渠道找的資料，學習的不算系統，所以知識點涵蓋的不甚全面，望 ...


前言：之前自學了一些關於CSS3的知識，在學習過程中也遇到過坑，不過總算磕磕絆絆的學習完了關於CSS3的相關知識，於是最近把之前的筆記和代碼整理了一下，也算是一個對CSS3知識的回顧複習吧，也希望能夠對想學這方面知識的小白有所幫助。因為是各種渠道找的資料，學習的不算系統，所以知識點涵蓋的不甚全面，望各位看官不吝指正批評。

CSS3簡介

CSS3是CSS2的“進化”版本，在CSS2基礎上，增強或新增了許多特性， 彌補了CSS2的眾多不足之處，使得Web開發變得更為高效和便捷。

css3現狀

  • 瀏覽器支持程度差，需要添加私有首碼
  • 移動端支持優於PC端
  • 不斷改進中
  • 應用相對廣泛

CSS3新增選擇器

1.屬性選擇器新增

  • E[屬性名^=值]：從頭去匹配這個‘屬性 = 對應值’的E元素
  • E[屬性名$=值]：從尾去匹配這個‘屬性 = 對應值’的E元素
  • E[屬性名*=值]：從任意位置去匹配這個‘屬性 = 對應值’的E元素
  • E[屬性名|=值]：匹配具備該屬性的元素，並且屬性值以對應值開頭並緊接著“-”，如果該屬性的屬性值僅有匹配值，也能匹配到。

2.偽類選擇器

  • E：first-child 找到第一個孩子為E的元素
  • E：last-child 找到最後一個孩子為E的元素
  • E：nth-child（N）找到第N個孩子為E的元素，N以1開始
  • E：nth-child（odd）匹配奇數的孩子為E的元素
  • E：nth-child（even）匹配偶數的孩子為E的元素
  • E：nth-child（3n+1）匹配第3n+1個孩子為E的元素，n從0開始

:nth-of-type使用方法與:nth-child類似。

3.其他選擇器

  • input:focus{} => 選擇獲取焦點的表單
  • Input:checked{} => 選擇被選中的checkbox表單
  • input:enabled{} => 選擇可操控的表單元素
  • input:disabled{} => 選擇不可操控的表單
  • E:target{} => 選擇通過錨點跳轉的當前E元素
  • E:empty{} => 選擇沒有子節點的E元素包括文本節點（基本不用）

偽元素before after

作用：渲染一個虛擬的標簽插入到當前元素的內部前面或後面

總結：

  1. 偽元素預設是行內元素，我們可以進行轉換，在實踐中，我們常用來模擬裝飾標簽
  2. 偽元素是虛擬的，不能通過js去獲取，但可以用類樣式進行覆蓋
  3. 清除浮動的底層原理，就是通過偽元素去清除浮動，節約DOM記憶體
  4. content不能省略，即便裡面沒有內容
  5. 當偽類需要配合iconfont去使用的話需要打開iconfont.css 拿到content裡面對應的值
  6. 當偽元素需要hover的效果的時候不能直接hover 需要藉助於父級 寫法：父級：hover：偽元素

圓角 border-radius

實現元素的圓角化，使用方式與border、padding和margin類似，可以合寫，也可以單獨設置。

  1. 一個值設置的是盒子的四個角的水平和垂直半徑
  2. 每個角都可以單獨進行設置 其取值順序是左上 右上 右下 左下順時針設置
  3. 可以簡寫 簡寫的邏輯跟padding和margin一樣
  4. 單位支持像素，和百分比（參照的是寬度和高度）
  5. 可以用 水平半徑/垂直半徑 去單獨控制半徑 並且每一個半徑都可以單獨控制
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>dcocument</title>
<style>
ul{margin:0;padding:0;}
li{list-style:none;margin:10px 0 0 0;padding:10px;background:#bbb;}
.test .one{border-radius:10px;}
.test .two{border-radius:10px 20px;}
.test .three{border-radius:10px 20px 30px;}
.test .four{border-radius:10px 20px 30px 40px;}
.test2 .one{border-radius:10px/5px;}
.test2 .two{border-radius:10px 20px/5px 10px;}
.test2 .three{border-radius:10px 20px 30px/5px 10px 15px;}
.test2 .four{border-radius:10px 20px 30px 40px/5px 10px 15px 20px;}
</style>
</head>
<body>
<h2>水平與垂直半徑相同時：</h2>
<ul class="test">
    <li class="one">提供1個參數<br />border-radius:10px;</li>
    <li class="two">提供2個參數<br />border-radius:10px 20px;</li>
    <li class="three">提供3個參數<br />border-radius:10px 20px 30px;</li>
    <li class="four">提供4個參數<br />border-radius:10px 20px 30px 40px;</li>
</ul>
<h2>水平與垂直半徑不同時：</h2>
<ul class="test2">
    <li class="one">提供1個參數<br />border-radius:10px/5px;</li>
    <li class="two">提供2個參數<br />border-radius:10px 20px/5px 10px;</li>
    <li class="three">提供3個參數<br />border-radius:10px 20px 30px/5px 10px 15px;</li>
    <li class="four">提供4個參數<br />border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li>
</ul>
</body>
</html>

陰影box-shadow

語法 box-shadow：水平偏移 垂直偏移 模糊大小 陰影大小 顏色 陰影

  1. 第一個值 ：Npx 陰影向水平方向偏移N個像素 正數往右 負數往左
  2. 第二個值 ：Npx 陰影向垂直方向偏移N個像素 正數往下 負數往上
  3. 第三個值 ：px 模糊大小
  4. 第四個值 ：px 陰影尺寸
  5. 第五個值 ：顏色 預設值是黑色
  6. 第六個參數： 內外陰影 預設是外陰影 內陰影是inset
  7. 陰影可以寫多個，中間用逗號隔開
  8. 陰影可以簡寫，但是需要註意有一些值需要補0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: green;
            margin: 10px auto;
        }
        /* 第一個值 ：Npx  陰影向水平方向偏移N個像素  正數往右 負數往左 */
        div:nth-child(1){
            box-shadow: -10px 0;
        }
        /* 第二個值 ：Npx  陰影向垂直方向偏移N個像素  正數往下 負數往上 */
        div:nth-child(2){
            box-shadow: 0px -10px;
        }

        div:nth-child(3){
            box-shadow: 10px 10px;
        }
        /* 第三個值 ：羽化大小 （模糊的大小） */
        div:nth-child(4){
            box-shadow: 10px 10px 50px;
        }
        /* 第四個值 ：陰影尺寸 */
        div:nth-child(5){
            box-shadow: 0px 0px 10px 5px;
        }
        /* 第五個值 ：顏色 預設值是黑色 */
        div:nth-child(6){
            box-shadow: 0px 0px 10px 5px rgba(100,100,100,0.5);
        }
        /* 第六個值 內外陰影 預設是外陰影 內陰影是inset */
        div:nth-child(7){
            box-shadow: 0px 0px 10px 5px red inset;
        }
        /* 陰影可以寫多組 用逗號隔開*/
        div:nth-child(8){
            box-shadow: 0px 0px 10px 5px red inset,5px 5px 5px 5px pink,10px 10px 5px 5px blue;
        }
        div:nth-child(9){
            box-shadow: 5px 5px red;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

邊框圖片border-image（瞭解，有相容性問題，同時效果難做）

以九宮格的方式來切割圖片，然後把每部分圖片平鋪作為邊框。

值說明：

  • border-image-source:url('border.png'); 圖片路徑
  • border-image-slice:26;圖片切割，不要帶單位，遵從九宮格式切圖法（上下左右各來一刀）
  • border-image-repeat:round或者stretch或者repeat; round沒有瑕疵，stretch預設拉伸，repeat 平鋪（可能有瑕疵）
  • 簡寫：border-image:url('border.png') 26 round;

背景圖片系列（重點）

1.背景圖片的基準點

background-origin：值

  • border-box:忽略邊框 直接從邊框的起始 0 ，0點平鋪
  • padding-box:預設值，忽略padding 直接從padding的起始 0 ，0點平鋪
  • content-box:從內容部分開始平鋪 跟padding有關係
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 800px;
            border: 10px dashed #000;
            background:  url(image/heihei.jpg) 0 0 no-repeat;
             /* padding-box  預設取值，從padding的起始點開始平鋪 padding的大小不會產生影響*/
            /*  border-box 從border的起始點開始平鋪 border的大小不會產生影響 */
            /* content-box 從內容的起始點開始平鋪，會留出padding的位置 */
            background-origin: content-box;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.多重背景

背景圖片之間用逗號隔開，可以寫多組，最先渲染的圖片有可能會遮住後面渲染的圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 800px;
            border: 10px dashed #000;
            background:  url(image/heihei.jpg) 0 0 no-repeat,url(image/hehe.png) right bottom no-repeat,url(image/11051156_1536_864.jpg) no-repeat;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

3.背景大小

background-size:值

  • 當只有一個值的情況下，寬度實現拉伸，並且高度會保持等比例，可以支持px，也可以支持百分比，百分比參照的是這個盒子本身的寬度
  • 當有兩個值的情況下，寬度和高度會分別拉伸到對應的值，可能會變形，可以支持px，也可以支持百分比，百分比參照的是這個盒子本身的寬度
  • contain 當圖片的寬度或者是高度在縮放的時候有一個“碰到”了盒子的邊緣，則停止變化，（寬度或高度滿足一個即可）
  • 在contain的基礎上保證不留白，這就是cover的效果（寬度和高度都需要滿足）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 800px;
            border: 10px dashed #000;
            background:  url(image/Aatrox_1.jpg) 0 0 no-repeat;
            /* 一個值的情況下，寬度會進行拉伸，高度會保持等比例 */
            /* 兩個值的情況下，寬度和高度都會拉伸，可能會產生變形 */
            /* 可以接受百分比  百分比參照的是盒子的寬和高 */
            /* contain 當圖片的寬度或者是高度有一個達到了最大值，整體停止縮放 可能會帶來留白呀*/
            /* cover 在contain的基礎上，保持不留白，繼續放大，知道另外一個邊也得到最大值 */
            background-size:cover;

            /* 預告： background-size會在自適應頁面裡面用到，在全屏輪播圖裡面用到 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

盒子內減box-sizing

之前我們的盒子的實際寬度是 實際寬度 = width + padding + border，而內減屬性會自動幫我們減去padding和border值 ，所以用了內減的盒子實際寬度就等於width，至於padding和border的值會自動被width內減掉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            margin: 10px auto;
        }
        div:nth-child(2){
            padding: 10px;
        }
        div:nth-child(3){
            padding: 10px;
            border: 10px solid hotpink;
        }
        div:nth-child(4){
            padding: 10px;
            border: 10px solid hotpink;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <!-- 一個盒子真正的實際寬度包括 Border + padding + width   
        在css3中，可以藉助於border-sizing去實現盒子自動內減，有兩個值 
        broder-box 
        content-box

        broder-box 內減掉邊框和padding
        content-box 是預設值 該是多少就是多少
    -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>    
</body>
</html>

漸變

1.線性漸變

background:-webkit-linear-gradient(起始位置,顏色一 位置,顏色二 位置 ,顏色三 位置);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 10px auto;
            /* 線性漸變      
                語法：background:linear-gradient(起始位置,顏色一 位置,顏色二 位置 ,顏色三 位置);    
                （1）需要添加私有首碼 
                （2）第一個參數，起始位置  可以接受方位名詞 也可以是一個點
                    也可以是deg 角度  控制的是漸變線的角度 正值是逆時針，負值是順時針
                （3）顏色 可以是任意顏色     
            */
            background: -webkit-linear-gradient(45deg,red 20%,green 60%,blue);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.徑向漸變

background:-webkit-radial-gradient(起始位置,顏色一 位置,顏色二 位置 ,顏色三 位置);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 10px auto;
            /* 徑向漸變 
                語法：background:radial-gradient(起始位置,顏色一 位置,顏色二 位置 ,顏色三 位置);    
                （1）需要添加私有首碼 
                （2）第一個參數，起始位置  可以接受方位名詞 也可以是一個點
                    也可以是像素  不接受deg
                （3）顏色 可以是任意顏色    
            */
            background: -webkit-radial-gradient(150px 150px,red 20%,green 60%,blue 10%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

總結：

  1. 兩種漸變的參數都是一樣的 ，起始位置都接受方位名詞
  2. 線性漸變的起始位置還能接受deg 角度 徑向漸變不能接受deg但是接受px
  3. 需要添加私有首碼
  4. 顏色位置的取值遵守遞增的關係

私有首碼

作用：相容低版本的一些高級瀏覽器，或者一些特定的css3屬性需要添加私有首碼才起作用 每一條css3屬性合理來說都需要添加對應瀏覽器的首碼，以保證其相容性

  • 谷歌 蘋果：-webkit
  • 火狐：-moz-
  • IE：-ms-
  • o：-o-

註意：在手機端，一般來說只需要寫一個-webkit-（針對國內的絕大部分手機端）

添加的位置：大部分都是直接添加到最前面，css2沒有的屬性都是添加在最前面的，有一些是css2就有的屬性是添加在後面的（例如：background：-webkit-linear-gradient（））

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【夯實PHP基礎】UML序列圖總結
    原文地址 序列圖主要用於展示對象之間交互的順序。 序列圖將交互關係表示為一個二維圖。縱向是時間軸，時間沿豎線向下延伸。橫向軸代表了在協作中各獨立對象的類元角色。類元角色用生命線表示。當對象存在時，角色用一條虛線表示，當對象的過程處於激活狀態時，生命線是一個雙道線。 消息用從一個對象的生命線到另一個對 ...
  • Spring（三）__aop編程
    aop( aspect oriented programming ) 面向切麵編程,是對所有對象或者是一類對象編程 幾個重要的概念： 1.切麵(aspect):要實現的交叉功能，是系統模塊化的一個切麵或領域。如日誌記錄。 2.連接點:應用程式執行過程中插入切麵的地點，可以是方法調用，異常拋出，或者要 ...
  • FreeMarker:怎麼使用
    第一個FreeMarker程式 1. 建立一個普通的java項目：testFreeMarker 2. 引入freemarker.jar包 3. 在項目目錄下建立模板目錄：templates 4. 在templates目錄下，建立a.ftl模板文件，內容如下： 5. 建立com.sxt.test.fr ...
  • 設計模式學習之01狀態模式
    主體思想：狀態決定行為。 應用環境：同一對象，在狀態轉換過程中，行為隨著狀態一直在改變。 e.g. 燈初始狀態是關閉的，按一下開啟，再按一下關閉（不要跟我說你家的水晶變色大燈）。在這一個過程中，觸發行為都是按一下開關，電燈會根據自身狀態的不同調用不同的行為去實現。如果我們不適用設計模式去實現著這段邏 ...
  • 【轉載】樂視秒殺：每秒十萬筆交易的數據架構解讀
    隨著樂視硬體搶購的不斷升級，樂視集團支付面臨的請求壓力百倍乃至千倍的暴增。作為商品購買的最後一環，保證用戶快速穩定地完成支付尤為重要。所以在2015年11月，我們對整個支付系統進行了全面的架構升級，使之具備了每秒穩定處理10萬訂單的能力。為樂視生態各種形式的搶購秒殺活動提供了強有力的支撐。 一. 分 ...
  • IE8下CSS3選擇器nth-child() 不相容
    一、代碼 二、預覽效果如上圖，ie9及以上背景色能顯示問題：如上圖，ie8背景色顯示不出來 三、解決方法 四、css其他選擇器 :nth-of-type() 選擇器 ——選擇器匹配屬於父元素的特定類型的第 N 個子元素的每個元素. n 可以是數字、關鍵詞或公式。與:nth-child(n)不同的是後 ...
  • 不要再說找不到前端項目練手了！
    前端學習還是很有趣的，可以較快的上手然後自己開發一些好玩的項目來練手，網上也可以一抓一大把關於前端開發的小項目，可是還是有新手在學習的時候不知道可以做什麼，以及怎麼做，因此， "實驗樓" 就整理了一些前端項目教程，希望可以幫助正在學習前端的小伙伴。 為了方便閱讀，大概把前端可以做的項目分為三類： 游 ...
  • cookie入門
    據我對cookie誕生背景的瞭解，cookie是由網景公司創建的，目的就是將用戶的數據儲存在客戶端上。伴隨的HTML5的出現，現在又有另外一個解決數據離線儲存的方案，就是HTML5中的Web storage，其中兩個重要對象sessionStorage和localStorage可以解決瀏覽器sess ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類