亚洲第一影院,国产精品资源网站,黄色漫画在线免费看

開始

CSS（Cascading Style Sheet，可譯為“層疊樣式表”或“級聯樣式表”）是一組格式設置規則，用于控制Web頁面的外觀。

通過使用 CSS樣式設置頁面的格式，可將頁面的內容與表現形式分離。

頁面內容存放在HTML文檔中，而用于定義表現形式的CSS規則則存放在另一個文件中或 HTML文檔的某一部分，通常為文件頭部分。

將內容與表現形式分離，不僅可使維護站點的外觀更加容易，而且還可以使HTML文檔代碼更加簡練，縮短瀏覽器的加載時間。

語法

CSS 語法由三部分構成：選擇器、屬性和值：

       selector {property: value}

選擇器 (selector) 通常是你希望定義的 HTML 元素或標簽，屬性 (property) 是你希望改變的屬性，并且每個屬性都有一個值。屬性和值被冒號分開，并由花括號包圍，這樣就組成了一個完整的樣式

body {color: blue}

多重聲明：

如果要定義不止一個聲明，則需要用分號將每個聲明分開。

p {text-align:center; color:red;}

注釋

    /* p{ color: red} */

CSS引用

內聯樣式(在HTML元素內部)

        <p style="color: red">text</p>

內部樣式表（位于<head>標簽內部）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
	p {
		color: red;
	}
	a {
		color: blue;
	}
</style>
...

外部樣式表（獨立的.css文件）

    <head>
	<title>My first web page</title>
	<link rel="stylesheet" type="text/css" href="web.css" />
</head>

單位

px 象素

       font-size:12px

%百分比

       width:50%

選擇器

標簽選擇器

        <p>this is picture!</p>    
    p{ color:#555}

id選擇器

        <p id="desc">this is picture!</p>    
    <style>
    #desc{ color:#555}
    </style>

class選擇器

        <p class="desc">this is picture!</p>    
    <style>
    .desc{font-weight:#555}
    </style>

群組選擇器

       <span class="first">first</span>
   <p>two</p>
   <div id="second">second</div>
   <style>
      .one,p,#second{color:#f60}
   </style>

后代選擇器

        <div id="firstcard">
       <div class="avatar">
          <img src="abc/a.jpg" width="48" height="48" alt="a的頭像" />
       </div>
    </div>

    <div id="secondcard">
       <div class="avatar">
          <img src="abc/a.jpg" width="48" height="48" alt="a的頭像" />
       </div>
    </div>

    <style>
        .avatar{ padding:3px; border:1px solid #dcdcdc}
        #firstcard .avatar{border:1px solid #f60;}
        #secondcard .avatar{border:1px solid #06f;}
    </style>

文本

font-family
font-size
font-weight
text-decoration
text spacing

box 模型

CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框和外邊距的方式。

margin

Margin屬性分為margin-top、margin-right、margin-bottom、margin-left和margin五個屬性，分別表示BOX里內容離邊框的距離，它的屬性值是數值單位，可以是長度、百分比或auto，margin可以設為負值，造成BOX與BOX之間的重疊顯示

padding

Padding屬性用來描述BOX的邊框和內容之間插入多少空間，和margin屬性類似，它也分為上右下左和一個快捷方式padding

border

border屬性就是用來描述BOX邊框的。

border屬性分為border-width、border-color和border-style

border-width屬性

border-width屬性又分為：border-top-width、border-right-width、border-bottom-width、border-left-width和border-width屬性，border-width用長度表示為"thin/medium/thick"或長度單位表示

border-color屬性

border-color屬性用來顯示BOX邊框顏色，分為border-top-color、border-right-color、border-bottom-color、border-right-color和border-color屬性，屬性值為顏色，可以用十六進制表示

border-style屬性

border-style屬性用來設置BOX對象邊框的樣式，它的屬性值為CSS規定的關鍵字，平常看不到border是因為，初始值是none

屬性值的名稱和代表意義如下：
1. none：無邊框。
2. dotted：邊框為點線。
3. dashed：邊框為長短線。
4. solid：邊框為實線。
5. double：邊框為雙線。
6. groove、ridge、inset和outset：顯示不同效果的3D邊框（根據color屬性）。

border屬性為Border的快捷方式，屬性值間用空格隔開，順序是"邊框寬度邊框樣式邊框顏色"，例如：

        <h1 style="border:.5em outset red">hello!</h1>

假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。

如果希望這個元素框達到 100 個像素，就需要將內容的寬度設置為 70 像素，請看下圖：

上, 右, 下, 左的順時針規則,簡寫為

       margin:10px 20px 30px 40px;
   padding:10px 20px 30px 40px;

布局屬性

position屬性

position屬性有五個取值，分別為：static, relative, absolute, fixed, inherit, 其中“static”為默認值。

static

該值為position的默認值，可以省略不寫，當position取值為static或者沒有設置position屬性的時候，div的顯示方式為按文本流的順序從上至下，或者從左到右順序顯示。

    <div class="style">層一</div>
<div class="style">層二</div>
.style {
    border:1px solid #999900;
    background-color:#CCFF99;
    width:80px;
    height:80px;
    margin-bottom:5px;
}

relative

相對定位，相對于什么位置呢? 偏移文本流中最初的位置。最初位置也就是當position取值為static時的位置，也就是說這里的相對定位是相對于它在正常情況下的默認位置的。

下圖列出了偏移產生前后的位置關系：

偏移前：

    <style type="text/css">
.style1 {
    position:relative;
    height:80px;
    width:80px;
    margin-bottom:10px;
    border:1px solid #000;
    background-color:#acd373;
}
.style2 {
    position:relative;
    height:80px;
    width:80px;
    border:1px solid #000;
    background-color:#f26c4f;
}
</style>
<div class="style1">層一</div>
<div class="style2">層二</div>

偏移后：

    <style type="text/css">
.style1 {
    position:relative;
    left:30px;
    top:30px;
    height:80px;
    width:80px;
    margin-bottom:10px;
    border:1px solid #000;
    background-color:#acd373;
}
.style2 {
    position:relative;
    height:80px;
    width:80px;
    border:1px solid #000;
    background-color:#f26c4f;
}
</style>
<div class="style1">層一</div>
<div class="style2">層二</div>

設置了position:relative而不設置left,top等屬性的時候，層顯示的位置和不設置position屬性或者position值取static時一樣。

當一個層設置了position:relative，而且使得層位置產生相對偏移時，并不影響文本流中接下來的其他層的位置。

absolute

絕對定位，回憶一下，當我們設置position的值為static或者relative時，層依然存在于文本流中，也就是不管位置是否偏移，文本流中依然為它保留了該有的位置。但當層設置了position:absolute并產生偏移（設置了top,left等值）時，該層將完全從文本流中脫離，進而以該層所在的父容器的坐標原點為參考點進行偏移，可以這理解，該層已經和同級容器中的其它元素脫離了關系，也不會對其它元素產生任何影響（當它不存在！）。

注意：如果父容器沒有設置position屬性或position值為static時，將以body的坐標原點為參考。

下面我們以三個圖示來分別說明。

頁面一：

    <style type="text/css">
.style1 {
    height:150px;
    width:150px;
    border:1px solid #000;
    background-color:#a2d39c;
}
.style2 {
    height:50px;
    width:50px;
    border:1px solid #000;
    background-color:#f68e56;
}
.style3 {
    height:50px;
    width:50px;
    border:1px solid #000;
    background-color:#00adef;
}
</style>
<div class="style1">
    <div class="style2"></div>
    <div class="style3"></div>
</div>

頁面二：

    <style type="text/css">
.style1 {
    height:150px;
    width:150px;
    border:1px solid #000;
    background-color:#a2d39c;
}
.style2 {
    position:absolute;
    top:0;
    left:0;
    height:50px;
    width:50px;
    border:1px solid #000;
    background-color:#f68e56;
}
.style3 {
    height:50px;
    width:50px;
    border:1px solid #000;
    background-color:#00adef;
}
</style>
<div class="style1">
    <div class="style2"></div>
    <div class="style3"></div>
</div>

頁面三：

    <style type="text/css">
.style1 {
    position:relative;
    height:150px;
    width:150px;
    border:1px solid #000;
    background-color:#a2d39c;
}
.style2 {
    position:absolute;
    top:10px;
    left:10px;
    height:50px;
    width:50px;
    border:1px solid #000;
    background-color:#f68e56;
}
.style3 {
    height:50px;
    width:50px;
    border:1px solid #000;
    background-color:#00adef;
}
</style>
<div class="style1">
    <div class="style2"></div>
    <div class="style3"></div>
</div>

fixed

固定定位，它的效果類似常見的浮動廣告，無論如何拖動瀏覽器的滾動條，層始終懸浮在瀏覽器的某個位置。只能被Firefox好的支持，IE下需要用JS模擬。

inherit

繼承，和其它屬性的繼承一樣。在這里為繼承父元素中的position值。

z-index屬性

該屬性在設置了position并取值為“absolute”或“relative”時有效，用于控制層在Z- 軸上的排列順序，值為整數（由于不同瀏覽器的兼容性的區別，最好是正整數），取值越大層越在最上面。

float屬性

取值包括inherit，left，right以及默認值none，該屬性用于控制文本流的顯示方向。需要注意的是如果設置了該屬性并取值為left或right后，會影響到該流后面的其它盒子模型。可以通過設置“clear:both;”清除該屬性設置。例如：

    <div class="style1">層一</div>
<div class="style1">層二</div>
<div class="style2">層三</div>
.style1 {
    border:1px solid #999900;
    background-color:#CCFF99;
    width:80px;
    height:80px;
    float:left;
    margin-bottom:5px;
}
.style2 {
    border:1px solid #999900;
    background-color:#CCFF99;
    width:80px;
    height:80px;
    clear:both;
    margin-bottom:5px;
}

css基礎知識

更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯系： 360901061

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對您有幫助就好】元

2元

5元

10元

20元

自定義

日韩久久久精品,亚洲精品久久久久久久久久久,亚洲欧美一区二区三区国产精品 ,一区二区福利

開始

語法

注釋

CSS引用

單位

選擇器

文本

box 模型

布局屬性