99re8这里,亚洲一区二区啪啪啪,蜜臀av九区

1. CSS樣式表

CSS(Cascading Style Sheets)，通常稱為CSS樣式表或?qū)盈B樣式表（級聯(lián)樣式表）。

主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局和外觀顯示樣式。

要書寫css樣式，那css樣式書寫的位置在哪呢？

行內(nèi)樣式表

任何HTML標(biāo)簽都擁有style屬性，行內(nèi)樣式是通過標(biāo)簽的style屬性來設(shè)置元素的樣式，如下：

<div style="color: red; font-size: 12px;">青春不常在，抓緊談戀愛</div>

style其實(shí)就是標(biāo)簽的屬性，屬性和值中間是:隔開，多組屬性值之間用;隔開。

行內(nèi)樣式只能控制當(dāng)前的標(biāo)簽和以及嵌套在其中的子標(biāo)簽，會造成代碼冗余，因?yàn)闆]有實(shí)現(xiàn)樣式和結(jié)構(gòu)分離。

內(nèi)部樣式表

內(nèi)部樣式表是將CSS代碼集中寫在HTML文檔的head頭部標(biāo)簽中，并且用style標(biāo)簽定義，其基本語法格式如下：

<head>
    <style type="text/css">
    div {
            color: red;
            font-size: 12px;
         }
    </style>
</head>

style標(biāo)簽一般位于head標(biāo)簽中，當(dāng)然理論上它可以放在HTML文檔的任何地方，type="text/css" 在html5中可以省略。

內(nèi)部樣式表只能控制當(dāng)前的頁面，雖然實(shí)現(xiàn)樣式和結(jié)構(gòu)分離，但是沒有徹底分離。

外部樣式表

外部樣式表是將所有的樣式放在一個或多個以.css為擴(kuò)展名的外部樣式表文件中，通過link標(biāo)簽將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下：

<head>
  <link rel="stylesheet" type="text/css" href="css文件路徑">
</head>

link 是個單標(biāo)簽，link標(biāo)簽需要放在head頭部標(biāo)簽中，并且指定link標(biāo)簽的三個屬性。

屬性	作用
rel	全稱是 relationship，定義鏈接的文件和 html 文檔之間的關(guān)系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。
type	定義所鏈接文檔的類型，在這里需要指定為“text/css”，表示鏈接的外部文件為css樣式表。我們都可以省略
href	全稱是Hypertext Reference，意思是超文本引用，定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。

外部樣式表才是真正實(shí)現(xiàn)樣式和結(jié)構(gòu)分離，也是實(shí)際項(xiàng)目中使用最多的。

2. 字體、外觀屬性

font-style：字體風(fēng)格

在 html 中，字體傾斜我們可以用標(biāo)簽來實(shí)現(xiàn)（使用 i 和 em 標(biāo)簽），在 css 中，我們可以通過 font-style 屬性定義字體風(fēng)格，如設(shè)置斜體或正常字體，屬性值如下：

屬性	作用
normal	默認(rèn)值，瀏覽器會顯示標(biāo)準(zhǔn)的字體樣式
italic	瀏覽器會顯示斜體的字體樣式。

平時我們很少給文字傾斜，反而喜歡給斜體標(biāo)簽（i，em）改為普通模式，比如用 i 標(biāo)簽放個小圖標(biāo)。

font-weight：字體粗細(xì)

在 html 中，將字體加粗我們可以用標(biāo)簽來實(shí)現(xiàn)（使用 b 和 strong 標(biāo)簽），在 css 中，我們可以通過 font-weight 將字體加粗，屬性值如下：

屬性值	描述
normal	默認(rèn)值（不加粗），400
bold	粗體，700
100~900	normal == 400，bold == 700

font-size：字體大小

font-size 屬性用于設(shè)置字號：

p { font-size:20px; }

可以使用相對長度單位，也可以使用絕對長度單位。相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少。

谷歌瀏覽器默認(rèn)的文字大小為16px，但是不同瀏覽器可能默認(rèn)顯示的字號大小不一致，我們盡量給一個明確值大小，不要默認(rèn)大小。一般給body指定整個頁面文字的大小。

font-family：字體

font-family 屬性用于設(shè)置哪一種字體。

p { font-family:"Microsoft Yahei";}

網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等，可以同時指定多個字體，中間以英文逗號隔開，如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體，如果都沒有，則以我們電腦默認(rèn)的字體為準(zhǔn)。

p { font-family: "Arial", "Microsoft Yahei", "微軟雅黑"; }

不管是中文字體還是英文字體，還是帶有空格的英文字體，都需要加上英文狀態(tài)下的雙引號，這是為了保證瀏覽器能夠正確解析，當(dāng)然，不加雙引號大部分情況下也沒事，不加的好處是敲字體的時候有提示。

使用Unicode字體：

為什么使用 Unicode字體？

在 CSS 中設(shè)置字體名稱，直接寫中文是可以的。但是在文件編碼（GB2312、UTF-8 等）不匹配時會產(chǎn)生亂碼的錯誤，并且xp系統(tǒng)不支持類似微軟雅黑的中文。

解決方案：

你可以使用英文來替代（推薦）。比如font-family:"Microsoft Yahei"。
在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤。使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的解析的，缺點(diǎn)就是不直觀。

p { font-family:"\5FAE\8F6F\96C5\9ED1";}

font：綜合設(shè)置字體

font屬性用于對字體樣式進(jìn)行綜合設(shè)置，基本語法格式如下：

p { font: font-style  font-weight  font-size/line-height  font-family; }

使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。

其中不需要設(shè)置的屬性可以省略（取默認(rèn)值），但必須保留font-size和font-family屬性，否則font屬性將不起作用，實(shí)際項(xiàng)目中我們很少合起來用。

color：文本顏色

color屬性用于定義文本的顏色，其取值方式有如下3種：

表示表示	屬性值
預(yù)定義的顏色值	red，green，blue
十六進(jìn)制	#FF0000，#FF6600，#29D794
RGB代碼	rgb(255,0,0) 或 rgb(100%,0%,0%)

實(shí)際工作中，用16進(jìn)制的寫法是最多的，而且我們更喜歡簡寫方式比如 #F00代表紅色。

text-align：文本內(nèi)容水平對齊方式

text-align屬性用于設(shè)置文本內(nèi)容的水平對齊方式，相當(dāng)于html中table標(biāo)簽的的align對齊屬性。

<table border="0" cellpadding="20" cellspacing="0" align="center">

其可用屬性值如下：

屬性	解釋
left	左對齊（默認(rèn)值）
right	右對齊
center	居中對齊

注意：是讓盒子里面的內(nèi)容水平居中，而不是讓盒子居中對齊。

line-height：行高

line-height屬性用于設(shè)置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高。
line-height常用的屬性值單位有三種，分別為像素px，相對值em和百分比%，實(shí)際工作中使用最多的是像素px。

text-indent：首行縮進(jìn)

text-indent屬性用于設(shè)置首行文本的縮進(jìn)，其屬性值可為不同單位的數(shù)值，可以為 em（字符寬度的倍數(shù)）或相對于瀏覽器窗口寬度的百分比，允許使用負(fù)值，建議使用em作為設(shè)置單位。

1em 就是一個字的寬度，如果是漢字的段落，1em 就是一個漢字的寬度。

p {
     /*行間距*/
     line-height: 25px;
     /*首行縮進(jìn)2個字  em  1個em 就是1個字的大小*/
     text-indent: 2em;  
 }

text-decoration：文本的裝飾

text-decoration 一般我們用于給a標(biāo)簽取消下劃線。

值	描述
none	默認(rèn)，定義標(biāo)準(zhǔn)的文本。取消下劃線
underline	定義文本下的一條線。下劃線也是我們鏈接自帶的
overline	定義文本上的一條線。
line-through	定義穿過文本的一條線。

字間距 / 單詞間距

letter-spacing：字母間距

letter-spacing 屬性用于定義字母間距，一個漢字也可以看作一個字母，其屬性值可為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)為normal。

word-spacing：單詞間距

word-spacing 屬性用于定義英文單詞之間的間距，對中文字符無效。和letter-spacing一樣，其屬性值可為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)為normal。

顏色半透明

CSS3以后，文字顏色我們可以設(shè)置透明度了，語法格式如下：

color: rgba(r,g,b,a)  // a 是 alpha 不透明度 取值范圍0~1之間

文字陰影

CSS3以后，我們可以給文字添加陰影效果了，Shadow 影子

text-shadow: 水平位置 垂直位置 模糊距離 陰影顏色;

前兩項(xiàng)是必須寫的，后兩項(xiàng)可以選寫。

案例：凹凸文字

<head>
    <meta charset="utf-8">
    <style>
      body {
        background-color: #ccc;
      }
      div {
        color: #ccc;
        /* 字體80px，加粗 */
        font: 700 80px "微軟雅黑";
      }
      /* 凸起的文字 */
      div:first-child { 
        /* text-shadow: 水平位置  垂直位置  模糊距離 陰影顏色; */
        text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
      }
      /* 凹下的文字 */
      div:last-child { 
        /* text-shadow: 水平位置  垂直位置  模糊距離 陰影顏色; */
        text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
      }
     </style>
    </head>
    <body>
    <div>我是凸起的文字</div>
    <div>我是凹下的文字</div>
    </body>

3. 標(biāo)簽顯示模式（display）

標(biāo)簽的顯示模式就是標(biāo)簽以什么方式進(jìn)行顯示，比如 div 自己占一行，比如 span 一行可以放很多個。

塊級元素（block-level）

塊級元素有<h1>、<p>、<div>，以及列表標(biāo)簽<ul>、<ol>、<li>、<dl>、<dt>、<dd>等

塊級元素的特點(diǎn)：

自己獨(dú)占一行，寬度默認(rèn)是容器（父級寬度）的100%
寬高、外邊距、內(nèi)邊距都可以控制
是一個容器及盒子，里面可以放行內(nèi)或者塊級元素

注意：只有文字才能組成段落，因此 p 里面不能放塊級元素，只能放文字，特別是 p 里面不能放div。如果你把 p 里面嵌套 div，html 也能顯示，因?yàn)闉g覽器會自動把 div 拿出來和 p 平級。同理還有h1-h6、dt，他們都是文字類塊級標(biāo)簽，里面不能放其他塊級元素，只能放文字。

行內(nèi)元素（inline-level）

行內(nèi)元素有<a>、<span>、以及文本格式化標(biāo)簽<b>、<strong>、<i>、<em>等

行內(nèi)元素的特點(diǎn)：

相鄰行內(nèi)元素在一行上，一行可以顯示多個
寬、高直接設(shè)置是無效的，默認(rèn)寬高就是它本身內(nèi)容的寬高
行內(nèi)元素只能容納文本或則其他行內(nèi)元素

行內(nèi)塊元素（inline-block）

行內(nèi)塊元素 <img/>、<input/>，以及<button>標(biāo)簽，<button>的本質(zhì)就是<input/>

行內(nèi)塊元素的特點(diǎn)：

和相鄰行內(nèi)、行內(nèi)塊元素在一行上，但是元素之間會有空白縫隙，一行可以顯示多個。
默認(rèn)寬高就是它本身內(nèi)容的寬高（行內(nèi)元素的特點(diǎn)）。
寬高、外邊距、內(nèi)邊距都可以控制（塊級元素的特點(diǎn)）。

標(biāo)簽顯示模式轉(zhuǎn)換

塊轉(zhuǎn)行內(nèi)：display: inline;
行內(nèi)轉(zhuǎn)塊：display: block;
塊、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊： display: inline-block;

4. 行高那些事（line-height）

通過line-height可以設(shè)置行高，它的屬性值如下：

length：設(shè)置固定的行間距，比如：40px。
%：大多數(shù)瀏覽器中默認(rèn)行高大約是110%到120%，設(shè)置成90%可以更小，設(shè)置成200%可以更大。

行高測量

文字有四個線：頂線、中線、基線、底線，基線和基線的距離為行高。

文字垂直居中

行高我們利用最多的一個地方就是讓行高等于盒子的高度，可以讓文字垂直居中。

行高 = 上距離 + 內(nèi)容高度 + 下距離，上距離和下距離總是相等的，因此文字看上去是垂直居中的。

文字行高和盒子高度的三種關(guān)系：
如果行高 = 盒子高度，文字會垂直居中
如果行高 > 盒子高度，文字會偏下
如果行高 < 盒子高度，文字會偏上

5. 背景（background）

通過css背景屬性，給頁面元素添加背景樣式

背景圖片（image）

background-image : none | url(images/demo.png)

參數(shù)	作用
none	無背景圖（默認(rèn)的）
url	使用絕對、相對地址指定背景圖像

背景平鋪（repeat）

background-repeat : repeat | no-repeat | repeat-x | repeat-y

參數(shù)	作用
repeat	背景圖像在縱向和橫向上平鋪（默認(rèn)的）
no-repeat	背景圖像不平鋪
repeat-x	背景圖像在橫向上平鋪
repeat-y	背景圖像在縱向平鋪

背景附著（attachment）

背景附著就是定義背景是滾動的還是固定的

background-attachment : scroll | fixed

參數(shù)	作用
scroll	背景圖像是隨對象內(nèi)容滾動
fixed	背景圖像固定

背景位置（position）

設(shè)置背景圖片的起始位置。

background-position : 百分?jǐn)?shù) 百分?jǐn)?shù)  默認(rèn)值：0% 0%
background-position : 方位 方位

參數(shù)	值
方位 (position)	方位名詞有：top、left、bottom、right、center，如果您僅規(guī)定了一個值，另一個值將是 center。
百分?jǐn)?shù)	第一個值是水平位置，第二個值是垂直位置。左上角是 0%，右下角是 100%，如果您僅規(guī)定了一個值，另一個值將是 50%。
像素單位	第一個值是水平位置，第二個值是垂直位置。左上角是 0px 0px，如果您僅規(guī)定了一個值，另一個值將是 50%，您可以混合使用百分?jǐn)?shù)和方位名詞。

因?yàn)槭窃O(shè)置背景圖片的起始位置，所以必須先指定background-image屬性，一般我們使用最多的就是設(shè)置精靈圖，如下：

background: url(images/abcd.jpg) no-repeat;
background-position: -256px -275px;

背景顏色（color）

background-color:顏色值;  // 默認(rèn)值是 transparent 透明的

如果顏色帶有 a (不透明度)，則可以設(shè)置背景透明，這時候顏色值是rgba(0, 0, 0, 0.3);

背景簡寫（background）

background：屬性的值的書寫順序官方并沒有強(qiáng)制標(biāo)準(zhǔn)的，為了可讀性，建議大家如下寫：

background：背景顏色 背景圖片 背景平鋪 背景附著 背景位置;

比如：

background: transparent url(image.jpg) repeat-y scroll center top;

背景縮放（size）

通過background-size設(shè)置背景圖片的尺寸，就像我們設(shè)置img的尺寸一樣，在移動Web開發(fā)中做屏幕適配應(yīng)用非常廣泛。

其參數(shù)設(shè)置：長度 | 百分比 | cover | contain;

可以設(shè)置長度單位 (px) 或百分比（設(shè)置百分比時，參照盒子的寬高）
cover和contain都不會使圖片變形。
設(shè)置為 cover 會自動調(diào)整縮放比例，保證圖片始終填充滿背景區(qū)域，如有溢出部分則會被隱藏，我們平時用的cover最多。
設(shè)置為 contain 會自動調(diào)整縮放比例，保證圖片始終完整顯示在背景區(qū)域，可能有部分空白區(qū)域。

background-image: url('images/gyt.jpg');
/* 傳入寬度和高度，但是我們一般不這樣改，我們盡量只改一個值，另外一個值會等比縮放。例如：background-size: 100px; 寬度為100，高度進(jìn)行等比縮放。*/
background-size: 100px 300px;  
/* background-size: 50%; */
/* background-size: cover; */
/* background-size: contain; */

cover效果：

contain效果：

背景漸變（linear-gradient）

background: linear-gradient(起始方向, 顏色1, 顏色2, ...);
background: -webkit-linear-gradient(left, red , blue); /* 從左邊開始，從紅色變成藍(lán)色 */
background: -webkit-linear-gradient(left top, red , blue);/* 從左上角開始，從紅色變成藍(lán)色 */

背景漸變必須添加瀏覽器私有前綴
起始方向可以是方位名詞或者度數(shù)，如果省略默認(rèn)就是 top，方位名詞有 top left bottom right，如果起始方向有兩個值，代表從對角，比如：left top 代表從左上角

插入圖片和背景圖片的區(qū)別

插入圖片，我們用的最多，比如產(chǎn)品展示類，移動位置通過盒模型的 padding margin
背景圖片，我們一般用于小圖標(biāo)背景或者超大背景圖片，移動位置通過 background-position

 img {  
        width: 200px;/* 插入圖片更改大小 width 和 height */
        height: 210px;
        margin-top: 30px;  /* 插入圖片更改位置 可以用margin 或padding  盒模型 */
        margin-left: 50px; /* img是個行內(nèi)塊元素 */
    }

 div {
        width: 400px;
        height: 400px;
        border: 1px solid purple;
        background: #fff url(images/sun.jpg) no-repeat;
        background-position: 30px 50px; /* 背景圖片更改位置 我用 background-position */
    }

導(dǎo)航欄案例

效果圖如下：

<head>
  <meta charset="utf-8">
  <style>
        body {
            background-color: #000;
        }
        a {
      display: inline-block;  /* 把 a 行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊元素 */
            width: 200px;
            height: 50px;
            text-align: center;  /* 文字水平居中 */
            line-height: 50px;  /* 我們設(shè)定行高等于盒子的高度，就可以使文字垂直居中 */
            color: #fff;
            font-size: 22px;
            text-decoration: none;  /* 取消下劃線 文本裝飾 */
        }
        a:hover {  /* 鼠標(biāo)經(jīng)過 給我們的鏈接添加背景圖片 */
            background: url(images/h.png) no-repeat; 
        }
  </style>
</head>
<body>
  <a href="#">專區(qū)說明</a>
  <a href="#">申請資格</a>
  <a href="#">兌換獎勵</a>
  <a href="#">下載游戲</a>
</body>

6. CSS三大特性

層疊、繼承、優(yōu)先級，是我們學(xué)習(xí)CSS必須掌握的三個特性。

層疊性

所謂層疊性是指多種CSS樣式的疊加，也是瀏覽器處理沖突的一個能力，如果一個屬性通過兩個相同選擇器設(shè)置到同一個元素上，那么后面的會把前面的層疊掉。

樣式?jīng)_突遵循的原則是就近原則，哪個樣式離結(jié)構(gòu)近，就執(zhí)行哪個樣式。

繼承性

子元素可以繼承父元素的樣式（text-，font-，line- 這些開頭，以及color屬性可以繼承）

inherited：遺傳的，繼承的意思。

恰當(dāng)?shù)厥褂美^承可以簡化代碼，降低CSS樣式的復(fù)雜性。比如有很多子級孩子都需要某個樣式，可以給父級指定一個，這些孩子繼承過來就好了。

優(yōu)先級

定義CSS樣式時，經(jīng)常出現(xiàn)兩個或更多規(guī)則應(yīng)用在同一元素上，此時，選擇器相同，則執(zhí)行層疊性，選擇器不同，就會出現(xiàn)優(yōu)先級的問題。

1. 優(yōu)先級計(jì)算公式

關(guān)于優(yōu)先級，我們需要一套計(jì)算公式來去計(jì)算

優(yōu)先級：行內(nèi) > ID > 類 > 標(biāo)簽，繼承或者 * 為 0，!important無窮大。

標(biāo)簽選擇器	計(jì)算權(quán)重公式
每個!important 重要的	∞ 無窮大
每個行內(nèi)樣式 style=""	1,0,0,0
每個ID	0,1,0,0
每個類，偽類	0,0,1,0
每個元素（標(biāo)簽選擇器）	0,0,0,1
繼承或者 *	0,0,0,0

值從左到右，左面的最大，一級大于一級，數(shù)位之間沒有進(jìn)制。

2. 權(quán)重疊加

我們經(jīng)常用交集選擇器，后代選擇器等，是有多個基礎(chǔ)選擇器組合而成，那么此時，就會出現(xiàn)權(quán)重疊加。

就是一個簡單的加法計(jì)算：

div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover ------> 0,0,1,1
.nav a ------> 0,0,1,1

數(shù)位之間沒有進(jìn)制，比如說：0,0,0,5 + 0,0,0,5 = 0,0,0,10 而不是 0,0,1,0，所以不會存在10個div能趕上一個類選擇器的情況。

3. 繼承的權(quán)重為0，!important的權(quán)重?zé)o窮大

我們修改樣式，一定要看該標(biāo)簽有沒有被選擇器選中。

① 如果有被選擇器選中，那么以上面的公式來計(jì)算權(quán)重，誰大聽誰的
② 如果沒有被選擇器選中，那么權(quán)重是0，因?yàn)槔^承的權(quán)重為0

CSS權(quán)重六題

試問這行字體是什么顏色的？

第一題：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="keywords" content="關(guān)鍵詞1,關(guān)鍵詞2,關(guān)鍵詞3" />
        <meta name="description" content="對網(wǎng)站的描述" />
        <title>第1題</title>
        <style type="text/css">
            #father #son{ // 0 ，2 ，0 ，0
                color:blue;
            }
            #father p.c2{ // 0 ，1 ，1 ，1
                color:black;
            }
            div.c1 p.c2{ // 0 ，0 ，2 ，2
                color:red;
            }
            #father {
                color:green !important;  /* 繼承的權(quán)重為0 */
            }
        </style>
    </head>
    <body>
        <div id="father" class="c1">
            <p id="son" class="c2">
                試問這行字體是什么顏色的？
            </p>
        </div>
    </body>
</html>

根據(jù)上面注釋的權(quán)重分析，可知，最后顏色是blue。

第二題：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="keywords" content="關(guān)鍵詞1,關(guān)鍵詞2,關(guān)鍵詞3" />
        <meta name="description" content="對網(wǎng)站的描述" />
        <title>第2題</title>
        <style type="text/css">
            #father {
                color:red; /* 繼承的權(quán)重為0 */
            }
            p {
                color:blue;  // 0 ，0 ，0 ，1
            }
        </style>
    </head>
    <body>
        <div id="father">
            <p>試問這行字體是什么顏色的？</p>
        </div>
    </body>
</html>

答案是blue。

第三題：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="keywords" content="關(guān)鍵詞1,關(guān)鍵詞2,關(guān)鍵詞3" />
        <meta name="description" content="對網(wǎng)站的描述" />
        <title>第3題</title>
        <style type="text/css">
            div p{    // 0 ，0 ，0 ，2
                color:red;
            }
            #father{ /* 繼承的權(quán)重為0 */
                color:red;
            }
            p.c2{     // 0 ，0 ，1 ，1
                color:blue;
            }
        </style>
    </head>
    <body>
        <div id="father" class="c1">
            <p class="c2">
                試問這行字體是什么顏色的？
            </p>
        </div>
    </body>
</html>

答案是blue。

第四題：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="keywords" content="關(guān)鍵詞1,關(guān)鍵詞2,關(guān)鍵詞3" />
        <meta name="description" content="對網(wǎng)站的描述" />
        <title>第4題</title>
        <style type="text/css">
            div div{ // 0 ，0 ，0 ，2
                color:blue;
            }
            div{ // 0 ，0 ，0 ，1
                color:red;
            }
        </style>
    </head>
    <body>
        <div>
            <div>
                <div>
                    試問這行字體是什么顏色的？
                </div>
            </div>
        </div>
    </body>
</html>

答案是blue。

第五題：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        div div div div div div div div div div div div {  // 0 ，0 ，0 ，12
            color:red;
        }
        .me {  // 0 ，0 ，1 ，0
            color:blue;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                <div class="me">試問這行文字是什么顏色的</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

答案是blue。

第六題：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        .c1 .c2 div{  // 0 ，0 ，2 ，1
            color: blue;
        }
        div #box3{   // 0 ，1 ，0 ，1
            color:green;
        }
        #box1 div{   // 0 ，1 ，0 ，1  這兩個權(quán)重相同了，就近原則，取下面這個，所以顏色是yellow。
            color:yellow;
        } 
    </style>
</head>
<body>
    <div id="box1" class="c1">
        <div id="box2" class="c2">
            <div id="box3" class="c3">
                文字
            </div>
        </div>
    </div>
</body>
</html>

答案是yellow。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS-常用屬性

1. CSS樣式表

2. 字體、外觀屬性

font-style：字體風(fēng)格

font-weight：字體粗細(xì)

font-size：字體大小

font-family：字體

font：綜合設(shè)置字體

color：文本顏色

text-align：文本內(nèi)容水平對齊方式

line-height：行高

text-indent：首行縮進(jìn)

text-decoration：文本的裝飾

字間距 / 單詞間距

顏色半透明

文字陰影

3. 標(biāo)簽顯示模式（display）

塊級元素（block-level）

行內(nèi)元素（inline-level）

行內(nèi)塊元素（inline-block）

標(biāo)簽顯示模式轉(zhuǎn)換

4. 行高那些事（line-height）

5. 背景（background）

背景圖片（image）

背景平鋪（repeat）

背景附著（attachment）

背景位置（position）

背景顏色（color）

背景簡寫（background）

背景縮放（size）

背景漸變（linear-gradient）

插入圖片和背景圖片的區(qū)別

導(dǎo)航欄案例

6. CSS三大特性

層疊性

繼承性

優(yōu)先級

CSS權(quán)重六題

第一題：

第二題：

第三題：

第四題：

第五題：

第六題：

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av