css3簡單知識學習

CSS3簡單學習

傾斜div

div

{

transform:rotate(30deg);

}

 

css3圓角邊框

 

div

{

border:2px solid;

border-radius:25px;

-moz-border-radius:25px; /* Old Firefox */

}

 

 

邊框陰影

div

{

box-shadow: 10px 10px 5px #888888;

}

 

 

CSS3 邊框圖片

 

div

{

border-image:url(border.png) 30 30 round;

-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */

-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */

-o-border-image:url(border.png) 30 30 round; /* Opera */

}

 

css3背景

 

CSS3 background-size 屬性

 

background-size 屬性規定背景圖片的尺寸。

 

在 CSS3 以前，背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中，能夠規定背景圖片的尺寸，這就容許咱們在不一樣的環境中重複使用背景圖片。

 

您可以以像素或百分比規定尺寸。若是以百分比規定尺寸，那麼尺寸相對於父元素的寬度和高度。

 

 

div

{

background:url(bg_flower.gif);

-moz-background-size:63px 100px; /* 老版本的 Firefox */

background-size:63px 100px;

background-repeat:no-repeat;

}

 

 

CSS3 background-origin 屬性，規定所屬區域

 

背景圖片能夠放置於 content-box、padding-box 或 border-box 區域。

 

div

{

background:url(bg_flower.gif);

background-repeat:no-repeat;

background-size:100% 100%;

-webkit-background-origin:content-box; /* Safari */

background-origin:content-box;

}

 

CSS3 多重背景圖片

 

 

body

{

background-image:url(bg_flower.gif),url(bg_flower_2.gif);

}

 

 

---------------------------------------------------------------------------------------------------------------

CSS3 文本效果

 

CSS3 包含多個新的文本特性。

 

在本章中，您將學到以下文本屬性：

 

    text-shadow

    word-wrap

 

 

 

h1

{

text-shadow: 5px 5px 5px #FF0000;

}

 

 

CSS3 中，word-wrap 屬性容許您容許文本強制文本進行換行 - 即便這意味着會對單詞進行拆分

p {word-wrap:break-word;}

 

 

在 CSS3 以前，web 設計師必須使用已在用戶計算機上安裝好的字體。

 

經過 CSS3，web 設計師能夠使用他們喜歡的任意字體。

 

當您您找到或購買到但願使用的字體時，可將該字體文件存放到 web 服務器上，它會在須要時被自動下載到用戶的計算機上。

 

您「本身的」的字體是在 CSS3 @font-face 規則中定義的。

 

<style>

@font-face

{

font-family: myFirstFont;

src: url('Sansation_Light.ttf'),

     url('Sansation_Light.eot'); /* IE9+ */

}

 

div

{

font-family:myFirstFont;

}

</style>

 

 

@font-face

{

font-family: myFirstFont;

src: url('Sansation_Bold.ttf'),

     url('Sansation_Bold.eot'); /* IE9+ */

font-weight:bold;

}

 

css3 2D轉換

 

div

{

transform: rotate(30deg);

-ms-transform: rotate(30deg);                 /* IE 9 */

-webkit-transform: rotate(30deg); /* Safari and Chrome */

-o-transform: rotate(30deg);           /* Opera */

-moz-transform: rotate(30deg);               /* Firefox */

}

 

 

 

 

div

{

transform: translate(50px,100px);

-ms-transform: translate(50px,100px);           /* IE 9 */

-webkit-transform: translate(50px,100px);    /* Safari and Chrome */

-o-transform: translate(50px,100px);               /* Opera */

-moz-transform: translate(50px,100px);                  /* Firefox */

}

div

{

transform: rotate(30deg);

-ms-transform: rotate(30deg);                 /* IE 9 */

-webkit-transform: rotate(30deg); /* Safari and Chrome */

-o-transform: rotate(30deg);           /* Opera */

-moz-transform: rotate(30deg);               /* Firefox */

}

 

div

{

transform: skew(30deg,20deg);

-ms-transform: skew(30deg,20deg);       /* IE 9 */

-webkit-transform: skew(30deg,20deg);         /* Safari and Chrome */

-o-transform: skew(30deg,20deg); /* Opera */

-moz-transform: skew(30deg,20deg);    /* Firefox */

}

 

css3 3D轉換

 

 

CSS3 過渡

CSS3 過渡是元素從一種樣式逐漸改變爲另外一種的效果。

 

要實現這一點，必須規定兩項內容：

 

    規定您但願把效果添加到哪一個 CSS 屬性上

規定效果的時長

 

 

 

CSS3 動畫

 

經過 CSS3，咱們可以建立動畫，這能夠在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。

CSS3 @keyframes 規則

 

如需在 CSS3 中建立動畫，您須要學習 @keyframes 規則。

 

@keyframes 規則用於建立動畫。在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改成新樣式的動畫效果。

瀏覽器支持

屬性        瀏覽器支持

@keyframes                                       

animation                                            

 

Internet Explorer 十、Firefox 以及 Opera 支持 @keyframes 規則和 animation 屬性。

 

Chrome 和 Safari 須要前綴 -webkit-。

 

註釋：Internet Explorer 9，以及更早的版本，不支持 @keyframe 規則或 animation 屬性。

實例

 

@keyframes myfirst

{

from {background: red;}

to {background: yellow;}

}

 

@-moz-keyframes myfirst /* Firefox */

{

from {background: red;}

to {background: yellow;}

}

 

@-webkit-keyframes myfirst /* Safari 和 Chrome */

{

from {background: red;}

to {background: yellow;}

}

 

@-o-keyframes myfirst /* Opera */

{

from {background: red;}

to {background: yellow;}

}

 

CSS3 動畫

 

當您在 @keyframes 中建立動畫時，請把它捆綁到某個選擇器，不然不會產生動畫效果。

 

經過規定至少如下兩項 CSS3 動畫屬性，便可將動畫綁定到選擇器：

 

    規定動畫的名稱

    規定動畫的時長

 

 

什麼是 CSS3 中的動畫？

 

動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果。

 

您能夠改變任意多的樣式任意多的次數。

 

請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。

 

0% 是動畫的開始，100% 是動畫的完成。

 

爲了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。

 

 

改變背景色和位置

 

@keyframes myfirst

{

0%   {background: red; left:0px; top:0px;}

25%  {background: yellow; left:200px; top:0px;}

50%  {background: blue; left:200px; top:200px;}

75%  {background: green; left:0px; top:200px;}

100% {background: red; left:0px; top:0px;}

}

 

 

 

CSS3 多列

 

經過 CSS3，您可以建立多個列來對文本進行佈局 - 就像報紙那樣！

 

在本章中，您將學習以下多列屬性：

 

    column-count

    column-gap

    column-rule

 

 

 

 

 

CSS3 用戶界面

 

在 CSS3 中，新的用戶界面特性包括重設元素尺寸、盒尺寸以及輪廓等。

 

在本章中，您將學到如下用戶界面屬性：

 

    resize

    box-sizing

    outline-offset

 

 

 

 

聽覺樣式表

 

聽覺樣式表可把語音合成與音響效果相組合，使用戶能夠聽到信息，而無需進行閱讀。

 

聽覺呈現可用於：

 

    視覺能力低弱的人士

    幫助用戶學習閱讀

    幫助有閱讀障礙的用戶

    家庭娛樂

在汽車中使用

 

 

 

 

 

css顏色

 

 

顏色值

 

CSS 顏色使用組合了紅綠藍顏色值 (RGB) 的十六進制 (hex) 表示法進行定義。對光源進行設置的最低值能夠是 0（十六進制 00）。最高值是 255（十六進制 FF）。

 

 

從 0 到 255 種紅綠藍值可以組合出總共超過一千六百萬種不一樣的顏色（根據 256 x 256 x 256 計算）

 

-----------------------------------css部分-------------------------------------------------

css連接：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>test css</title>
    <!--
a:link {color:#FF0000;}    /* 未被訪問的連接 */
a:visited {color:#00FF00;} /* 已被訪問的連接 */
a:hover {color:#FF00FF;}   /* 鼠標指針移動到連接上 */
a:active {color:#0000FF;}  /* 正在被點擊的連接 */

    -->
    <style type="text/css">
    a:link {
        color: #FF0000;
    }
    
    a:visited {
        color: #00FF00;
    }
    
    a:hover {
        color: #FF00FF;
    }
    
    a:active {
        color: #0000FF;
    }
    </style>
</head>

<body>
    <a href="#">test 1</a>
    <p><b>註釋1：</b>爲了生效hover在link,visited以後</p>
    <p><b>註釋2：</b>爲了生效active在link,visited,hover以後</p>
</body>

</html>

 

 

 

 

css列表

要修改用於列表項的標誌類型，能夠使用屬性 list-style-type：

ul {list-style-type : square}

常規的標誌是不夠的。你可能想對各標誌使用一個圖像，這能夠利用 list-style-image 屬性作到：

ul li {list-style-image : url(xxx.gif)}

簡寫列表樣式

爲簡單起見，能夠將以上 3 個列表樣式屬性合併爲一個方便的屬性：list-style，就像這樣：

li {list-style : url(example.gif) square inside}

 

css表格：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>test css</title>

    <style type="text/css">

    table,

    th,

    td {

        border :5px solid blue;

    }

    th{

             background-color: green;

             color: white;

    }

    </style>

</head>

<body>

    <table>

        <th>first name</th>

        <th>second ^-^ name</th>

        <tr>

            <td>Mr</td>

            <td>Li</td>

        </tr>

        <tr>

            <td>Miss</td>

            <td>Zhang</td>

        </tr>

    </table>

</body>

</html>

 

Css水平對齊

 

Margin水平對齊

.center

{

margin-left:auto;

margin-right:auto;

width:70%;

background-color:#b0e0e6;

}

使用 position 屬性進行左和右對齊

 

使用 float 屬性來進行左和右對齊.right

{

float:right;

width:300px;

background-color:#b0e0e6;

}

 

CSS 尺寸 (Dimension) 屬性容許你控制元素的高度和寬度。一樣，它容許你增長行間距。

 

<html>

<head>

<style type="text/css">

img.normal

{

height: auto

}

 

img.big

{

height: 160px

}

 

img.small

{

height: 30px

}

</style>

</head>

<body>

 

<img class="normal" src="/i/eg_smile.gif" />

<br />

<img class="big" src="/i/eg_smile.gif" />

<br />

<img class="small" src="/i/eg_smile.gif" />

 

 

 

CSS 分類屬性容許你規定如何以及在何處顯示元素。

設置光標格式

<span style="cursor:sw-resize">

 

 

定義透明效果的 CSS3 屬性是 opacity。

 

相鄰兄弟選擇器使用了加號（+），即相鄰兄弟結合符（Adjacent sibling combinator）。

 

 

 

 

------------來自w3cschool