香港经典a毛片免费观看播放,国产亚洲精品一区二区久久,亚洲精品av无码重口另类

開(kāi)始

CSS（Cascading Style Sheet，可譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”）是一組格式設(shè)置規(guī)則，用于控制Web頁(yè)面的外觀。

通過(guò)使用 CSS樣式設(shè)置頁(yè)面的格式，可將頁(yè)面的內(nèi)容與表現(xiàn)形式分離。

頁(yè)面內(nèi)容存放在HTML文檔中，而用于定義表現(xiàn)形式的CSS規(guī)則則存放在另一個(gè)文件中或 HTML文檔的某一部分，通常為文件頭部分。

將內(nèi)容與表現(xiàn)形式分離，不僅可使維護(hù)站點(diǎn)的外觀更加容易，而且還可以使HTML文檔代碼更加簡(jiǎn)練，縮短瀏覽器的加載時(shí)間。

語(yǔ)法

CSS 語(yǔ)法由三部分構(gòu)成：選擇器、屬性和值：

       selector {property: value}

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

body {color: blue}

多重聲明：

如果要定義不止一個(gè)聲明，則需要用分號(hào)將每個(gè)聲明分開(kāi)。

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

注釋

    /* p{ color: red} */

CSS引用

內(nèi)聯(lián)樣式(在HTML元素內(nèi)部)

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

內(nèi)部樣式表（位于<head>標(biāo)簽內(nèi)部）

    <!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>
...

外部樣式表（獨(dú)立的.css文件）

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

單位

px 象素

       font-size:12px

%百分比

       width:50%

選擇器

標(biāo)簽選擇器

        <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) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框和外邊距的方式。

margin

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

padding

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

border

border屬性就是用來(lái)描述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用長(zhǎng)度表示為"thin/medium/thick"或長(zhǎng)度單位表示

border-color屬性

border-color屬性用來(lái)顯示BOX邊框顏色，分為border-top-color、border-right-color、border-bottom-color、border-right-color和border-color屬性，屬性值為顏色，可以用十六進(jìn)制表示

border-style屬性

border-style屬性用來(lái)設(shè)置BOX對(duì)象邊框的樣式，它的屬性值為CSS規(guī)定的關(guān)鍵字，平?？床坏絙order是因?yàn)?，初始值是none

屬性值的名稱和代表意義如下：
1. none：無(wú)邊框。
2. dotted：邊框?yàn)辄c(diǎn)線。
3. dashed：邊框?yàn)殚L(zhǎng)短線。
4. solid：邊框?yàn)閷?shí)線。
5. double：邊框?yàn)殡p線。
6. groove、ridge、inset和outset：顯示不同效果的3D邊框（根據(jù)color屬性）。

border屬性為Border的快捷方式，屬性值間用空格隔開(kāi)，順序是"邊框?qū)挾?邊框樣式邊框顏色"，例如：

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

假設(shè)框的每個(gè)邊上有 10 個(gè)像素的外邊距和 5 個(gè)像素的內(nèi)邊距。

如果希望這個(gè)元素框達(dá)到 100 個(gè)像素，就需要將內(nèi)容的寬度設(shè)置為 70 像素，請(qǐng)看下圖：

上, 右, 下, 左的順時(shí)針規(guī)則,簡(jiǎn)寫(xiě)為

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

布局屬性

position屬性

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

static

該值為position的默認(rèn)值，可以省略不寫(xiě)，當(dāng)position取值為static或者沒(méi)有設(shè)置position屬性的時(shí)候，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

相對(duì)定位，相對(duì)于什么位置呢? 偏移文本流中最初的位置。最初位置也就是當(dāng)position取值為static時(shí)的位置，也就是說(shuō)這里的相對(duì)定位是相對(duì)于它在正常情況下的默認(rèn)位置的。

下圖列出了偏移產(chǎn)生前后的位置關(guān)系：

偏移前：

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

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

當(dāng)一個(gè)層設(shè)置了position:relative，而且使得層位置產(chǎn)生相對(duì)偏移時(shí)，并不影響文本流中接下來(lái)的其他層的位置。

absolute

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

注意：如果父容器沒(méi)有設(shè)置position屬性或position值為static時(shí)，將以body的坐標(biāo)原點(diǎn)為參考。

下面我們以三個(gè)圖示來(lái)分別說(shuō)明。

頁(yè)面一：

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

頁(yè)面二：

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

頁(yè)面三：

    <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

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

inherit

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

z-index屬性

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

float屬性

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

    <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基礎(chǔ)知識(shí)

更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系： 360901061

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

【本文對(duì)您有幫助就好】元

2元

5元

10元

20元

自定義

亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

開(kāi)始

語(yǔ)法

注釋

CSS引用

單位

選擇器

文本

box 模型

布局屬性