CSS3基礎入門01

本文轉載自查看原文 2019-04-15 22:53 680 css教程/ css3教程/ 前端開發教程參考/ CSS3基礎入門

CSS3 基礎入門 01

CSS3 基礎入門 01

前言

相對於css2來說，css3更新了很多的內容，其中包括選擇器、顏色、陰影、背景、文本、邊框、新的布局方案、2d、3d、動畫等等。

而如果想要學習css3的諸多部分，不妨按照選擇器、布局、樣式等分類來學。

主流瀏覽器和瀏覽器前綴

目前來講，主流瀏覽器包括谷歌瀏覽器、火狐瀏覽器、safari瀏覽器、opera瀏覽器和ie瀏覽器。

而五大瀏覽器又對應着不同的內核：

•Trident    IE
•Gecko      firefox
•Presto     opera
•Webkit    （Safari內核,Chrome內核原型,它是蘋果公司自己的內核，也是蘋果的Safari瀏覽器使用的內核）
•Blink         (由Google和Opera Software開發的瀏覽器排版引擎)

瀏覽器內核是每一個瀏覽器的核心，瀏覽器的性能和功能都依托於內核來實現。

在我們使用某些css3的屬性的時候，是需要加上瀏覽器內核前綴的，例如-webkit-border-radius:10px;。

如果在開發過程中，需要大量的寫瀏覽器前綴，可以通過編輯器的插件或者通過在線的平台進行前綴補全。

自動補全瀏覽器前綴:http://autoprefixer.github.io

css3 選擇器

在css3中，主要新增加了屬性選擇器和偽類選擇器，通過這些選擇器，我們能夠很方便的進行樣式的選取。

屬性選擇器:

E[attr] 選擇具有某個屬性的元素
E[attr=value] 選擇某個屬性等於指定值的元素
E[attr^=value] 選擇某個屬性值以value開始的元素
E[attr$=value] 選擇某個屬性值以value結尾的元素
E[attr*=value] 選擇某個屬性值中包含value的元素
E[attr~=value] 屬性列表中包含有value
E[attr|="value"] 指定了屬性名，並且屬性值是value或者以“value-”開頭的值（比如說zh-cn）;

下面是關於上述選擇器的具體案例：

E[attr] 選擇具有某個屬性的元素

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>測試</title>
    <style>
        div[class] {
            color:red;
        }
    </style>
</head>
<body>
    <div class="test">
        hello,world
    </div>
    <div>
        test
    </div>
</body>
</html>

E[attr=value] 選擇某個屬性等於指定值的元素

示例:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>測試</title>
    <style>
        div[class='d1'] {
            color:red;
        }
    </style>
</head>
<body>
    <div class="test">
        hello,world
    </div>
    <div class="d1">
        test
    </div>
</body>
</html>

E[attr^=value] 選擇某個屬性值以value開始的元素.

示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>測試</title>
    <style>
        div[class^='te'] {
            color:red;
        }
    </style>
</head>
<body>
    <div class="test">
        hello,world
    </div>
    <div class="ta">
        test
    </div>
</body>
</html>

E[attr$=value] 選擇某個屬性值以value結尾的元素

示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>測試</title>
    <style>
        div[class$='st'] {
            color:red;
        }
    </style>
</head>
<body>
    <div class="test">
        hello,world
    </div>
    <div class="ta">
        test
    </div>
</body>
</html>

E[attr*=value] 選擇某個屬性值中包含value的元素

示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>測試</title>
    <style>
        div[class*='pl'] {
            color:red;
        }
    </style>
</head>
<body>
    <div class="test">
        hello,world
    </div>
    <div class="ta pl">
        test
    </div>
</body>
</html>

E[attr~=value] 屬性列表中包含有value

示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>測試</title>
    <style>
        div[class~='pl'] {
            color:red;
        }
    </style>
</head>
<body>
    <div class="test">
        hello,world
    </div>
    <div class="ta pl">
        test
    </div>
</body>
</html>

E[attr|="value"] 指定了屬性名，並且屬性值是value或者以“value-”開頭的值（比如說zh-cn)

示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>測試</title>
    <style>
        div[class|='pl'] {
            color:red;
        }
    </style>
</head>
<body>
    <div class="test">
        hello,world
    </div>
    <div class="pl-haha">
        test
    </div>
</body>
</html>

綜合示例：

上面用到了百度文庫的精靈圖。http://static.wenku.bdimg.com/static/wkcommon/pkg/pkg_wkcommon_base_z_a372731.png)

偽類選擇器：

結構偽類選擇器

X:first-child 匹配子集的第一個元素。IE7就可以支持
X:last-child匹配父元素中最后一個X元素
X:nth-child(n)用於匹配索引值為n的子元素。索引值從1開始
X:only-child這個偽類一般用的比較少，比如上述代碼匹配的是div下的有且僅有一個的p，也就是說，如果div內有多個p，將不匹配。
X:nth-of-type(n)匹配同類型中的第n個同級兄弟元素X
X:only-of-type匹配屬於同類型中唯一兄弟元素的X
X:first-of-type匹配同級兄弟元素中的第一個X元素
X:nth-last-child(n)從最后一個開始算索引。
X:nth-last-of-type(n) 匹配同類型中的倒數第n個同級兄弟元素X
X:root匹配文檔的根元素。在HTML（標准通用標記語言下的一個應用）中，根元素永遠是HTML
X:empty匹配沒有任何子元素（包括包含文本）的元素X

目標偽類選擇器

E:target 選擇匹配E的所有元素，且匹配元素被相關URL指向

demo1:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div:target  {
            color: red;
        }
    </style>
</head>
<body>
<a href="#change">click me !</a>

<div id="change">change red...</div>
</body>
</html>

demo2:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            /*border:1px solid red;*/
        }
        a {
            display: block;
            width: 100%;
            height: 30px;
            border-bottom:1px solid red;
            line-height: 30px;
            text-align: center;
        }
        .main {
            width: 100%;
            height: 0;
            border:1px solid blue;
            overflow: hidden;
            transition:1s;
        }
        div:target {
            height: 270px;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#changeheight">click here!</a>
        <div class="main" id="changeheight">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequuntur dolor ea magnam obcaecati quaerat voluptate. Accusamus alias, animi asperiores dicta dignissimos eaque esse, ipsa nulla, reprehenderit sequi sit voluptatem.
        </div>
    </div>
</body>
</html>

UI元素狀態偽類選擇器

E:enabled 匹配所有用戶界面（form表單）中處於可用狀態的E元素
E:disabled 匹配所有用戶界面（form表單）中處於不可用狀態的E元素
E:checked 匹配所有用戶界面（form表單）中處於選中狀態的元素E
E:selection 匹配E元素中被用戶選中或處於高亮狀態的部分

demo:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        input:enabled {
            border:1px solid red;
        }
        input:disabled {
            border:1px solid blue;
        }
        input:checked + span{
            color:red;
        }
        textarea::selection {
            color: blue;
            
        }
    </style>
</head>
<body>
<form action="">
    <input type="text">
    <input type="text" disabled>
    <input type="radio" name="sex" ><span>男</span>
    <textarea name="" id="" cols="30" rows="10">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. A blanditiis commodi culpa expedita, nobis nulla numquam placeat sit veniam. A accusantium eius, id laboriosam natus nesciunt placeat qui quo reprehenderit.
    </textarea>
</form>
</body>
</html>

否定偽類選擇器

E:not(s) （IE6-8瀏覽器不支持:not()選擇器。）

demo:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div:not(.d1){
            color:red;
        }
    </style>
</head>
<body>
<div class="d1">hi!I'm d1 box</div>
<div class="d2">hi!I'm d2 box</div>
<div class="d3">hi!I'm d3 box</div>
</body>
</html>

動態偽類選擇器

E:link
鏈接偽類選擇器
選擇匹配的E元素，而且匹配元素被定義了超鏈接並未被訪問過。常用於鏈接描點上

E:visited
鏈接偽類選擇器
選擇匹配的E元素，而且匹配元素被定義了超鏈接並已被訪問過。常用於鏈接描點上

E:hover
用戶行為選擇器
選擇匹配的E元素，且用戶鼠標停留在元素E上。IE6及以下瀏覽器僅支持a:hover

E:active
用戶行為選擇器
選擇匹配的E元素，且匹配元素被激活。常用於鏈接描點和按鈕上

E:focus 用戶行為選擇器選擇匹配的E元素，而且匹配元素獲取焦點
```
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        input:focus {
            color:red;
        }
    </style>
</head>
<body>
<input type="text" value="hahah">
</body>
</html>
```

在css2+css3中存在很多的選擇器，我們在使用的時候只需要根據實際的使用情況來進行選擇即可。

CSS3 文本屬性

文字陰影:

text-shadow:h-shadow(水平陰影的位置。允許負值。) v-shadow(垂直陰影的位置。允許負值。) blur(模糊的距離。) color(陰影的顏色);

text-shadow 屬性向文本添加一個或多個陰影。該屬性是逗號分隔的陰影列表，每個陰影有兩個或三個長度值和一個可選的顏色值進行規定。省略的長度是 0。

demo1:

demo2:

demo3:

效果展示：

文本換行:

word-wrap

屬性值：
normal
說明：只在允許的斷字點換行（瀏覽器保持默認處理）
break-word
說明：屬性允許長單詞或 URL 地址換行到下一行。
屬性用來標明是否允許瀏覽器在單詞內進行斷句，這是為了防止當一個字符串太長而找不到它的自然斷句點時產生溢出現象。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 40px;
            border:1px solid red;
            word-wrap: break-word;/*開啟之后可以進行換行*/
        }

    </style>
</head>
<body>
    <div class="box">
        aaaaaasaaaaaaaaaaaaa
    </div>
</body>
</html>

word-break

屬性值：
break-all
說明：它斷句的方式非常粗暴，它不會嘗試把長單詞挪到下一行，而是直接進行單詞內的斷句
Keep-all
說明：文本不會換行，只能在半角空格或連字符處換行。

demo:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 40px;
            border:1px solid red;
            word-break: break-all;
        }

    </style>
</head>
<body>
    <div class="box">
        aaaaaasaaaaaaaaaaaaa
    </div>
</body>
</html>

font-face

@font-face是CSS3中的一個模塊，他主要是把自己定義的Web字體嵌入到你的網頁中，隨着@font-face模塊的出現，我們在Web的開發中使用字體不怕只能使用Web安全字體（@font-face這個功能早在IE4就支持）.

語法規則

@font-face語法說明：

1、YourWebFontName:此值指的就是你自定義的字體名稱，最好是使用你下載的默認字體，他將被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
2、source:此值指的是你自定義的字體的存放路徑，可以是相對路徑也可以是絕路徑；
3、format：此值指的是你自定義的字體的格式，主要用來幫助瀏覽器識別，其值主要有以下幾種類型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
4、weight和style:這兩個值大家一定很熟悉，weight定義字體是否為粗體，style主要定義字體樣式，如斜體。

demo:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        @font-face {
            font-family: "zhangsan";
            src: url("./SourceHanSansCN-Heavy.otf");
        }
        div {
            font-family: "zhangsan";
            color:red;
        }
    </style>
</head>
<body>
    <div>hello,world</div>
</body>
</html>

字體圖標

我們在實際開發過程中，經常需要在網頁當中涉及到一些圖標，我們除了使用雪碧圖的形式以外，還可以采用字體圖標的形式來設置這些圖標。

常見的第三方圖標網站：

Font Awesome http://www.fontawesome.com.cn/
IconFont https://www.iconfont.cn/
Themify Icons https://themify.me/themify-icons
Material Design Iconic Font https://zavoloklom.github.io/material-design-iconic-font/index.html
Weather Icons https://erikflowers.github.io/weather-icons/
icomoon https://icomoon.io/app/#/select

上面的字體圖標庫都有着各自的特色，在應用的過程中，可以根據自己的實際開發需要來進行選擇。

CSS3 背景屬性

相對於之前的css2當中的背景體系，css3當中的背景進行了更加細致的功能。

Background-origin 背景原點

說明：指定background-origin屬性應該是相對位置

屬性值：

padding-box 背景圖像填充框的相對位置
border-box 背景圖像邊界框的相對位置
content-box 背景圖像的相對位置的內容框
注：默認值為：padding-box;

Background-clip 背景裁切

說明：background-clip 屬性規定背景的繪制區域。

屬性值：

border-box 背景被裁剪到邊框盒。
padding-box 背景被裁剪到內邊距框。
content-box 背景被裁剪到內容框
。
注：默認值：border-box;

Background-size 背景尺寸

說明：background-size 規定背景圖像的尺寸

屬性值：

length
規定背景圖的大小。第一個值寬度，第二個值高度。

Percentage(%)
以百分比為值設置背景圖大小

cover
把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域

contain
把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。

多背景設置

css3中支持多背景的設置，可以通過,來划分多個背景。

p{ background:url(demo.gif) no-repeat; //這是寫給不識別下面這句的默認背景圖片
background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat 10px 15px; //這是高級瀏覽器的css多重背景，第一個最上面 
background-color:yellow; //這是定義的默認背景顏色，全部適合 }

CSS3 顏色特性

rgba

RGBA(R,G,B,A)

在傳統的rgb三原色的基礎之上新增加了a也就是Alpha透明度。范圍是0-1之間。

opacity

opacity: value|inherit;

通過opacity這個屬性可以設置元素的不透明度。需要注意的是，通過這個屬性設置不透明度會讓元素內容也變得透明。

HSL和HSLA

HSL色彩模式是工業界的一種顏色標准，它是通過對色調(H)、飽和度(S)、亮度(L)三個顏色通道的改變以及它們相互之間的疊加來得到各式各樣的顏色。HSL顏色標准幾乎包括了人類視力所能感知的所有顏色，是目前運用最廣的顏色系統之一。

HSL即是代表色調，飽和度，亮度三個通道的顏色

而HSLA就是在HSL的基礎上在增加了一個透明度(A)的設置。

grammer：

hsl(H,S,L);
hsl(H,S,L);

H（色調：Hue）：衍生於色盤，其中0和360是紅色，接近120的是綠色，240是藍色；

S（飽和度：Saturation）：值為一個百分比數，0%代表灰度，100%代表最高飽和度；

L（亮度：Lightness）：值也為一個百分比數，其中0%代表最暗，50%為均值，100%表示最亮。

A（透明度：Alpha）：值為0~1之間的一個數，其中0代表不透明，1代表完全透明。

demo1:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
       <title>hsl()和顏色</title>
        <style>

            .demo{width: 400px;height: 240px;margin: 50px auto;}

            .hslL1 { background:hsl(320, 100%, 50%); height:40px; }      

            .hslL2 { background:hsl(320, 50%, 50%); height:40px; }      

            .hslL3 { background:hsl(320, 100%, 75%); height:40px; }      

            .hslL4 { background:hsl(202, 100%, 50%); height:40px; }      

            .hslL5 { background:hsl(202, 50%, 50%); height:40px; }      

            .hslL6 { background:hsl(202, 100%, 75%); height:40px; }  

        </style>
    </head>
    <body>
        <div class="demo">
            <div class="hslL1"></div>
            <div class="hslL2"></div>
            <div class="hslL3"></div>
            <div class="hslL4"></div>
            <div class="hslL5"></div>
            <div class="hslL6"></div>
        </div>
    </body>
</html>

demo2:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>

            .demo{width: 400px;height: 240px;margin: 50px auto;}

            .hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:40px; }      

            .hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:40px; }      

            .hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:40px; }      

            .hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:40px; }      

            .hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:40px; }  

        </style>
    </head>
    <body>
        <div class="demo">
            <div class="hslaL1"></div>
            <div class="hslaL2"></div>
            <div class="hslaL3"></div>
            <div class="hslaL4"></div>
            <div class="hslaL5"></div>
            <div class="hslaL6"></div>
        </div>
    </body>
</html>

目前來講，兩者的兼容性都非常的良好，可以直接進行使用。當然IE9以下是不支持的。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS3基礎入門03 HTML5學習筆記<八>: 1. CSS3基礎之入門基礎知識 CSS3動畫@keyframes基礎 CSS基礎入門 webpack快速入門——CSS進階：自動處理CSS3前綴前端開發-css基礎入門 Java EE入門（二）——CSS基礎 Web基礎--HTML、Css入門【WEB基礎】HTML & CSS 基礎入門（1）初識【WEB基礎】HTML & CSS 基礎入門（8）表單