css入門：day3—選擇器-常用屬性

一、css介紹

引子：html是網(wǎng)頁(yè)的結(jié)構(gòu)糕档，css是網(wǎng)頁(yè)的化妝師莉恼，讓網(wǎng)頁(yè)更美觀。

網(wǎng)頁(yè)刪除css后會(huì)變得橫七豎八，加上后又變美觀了俐银，這就是css樣式的魔力尿背。css就是給網(wǎng)頁(yè)設(shè)置一些樣式，讓網(wǎng)頁(yè)變的漂亮捶惜，更具有可讀性田藐。

css全稱為Cascading Style Sheets 翻譯過(guò)來(lái)叫層疊樣式表。

作用：設(shè)置網(wǎng)頁(yè)的文字（大小吱七，顏色汽久，字體風(fēng)格，對(duì)齊方式等）圖片和排版等踊餐，簡(jiǎn)單點(diǎn)說(shuō)就是給網(wǎng)頁(yè)化妝景醇。

感知css：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{
            width:200px;
            height:200px;
            background:red;
            transition:all 2s ease;
        }
        div:hover{
            transform:rotate(720deg) scale(0.2);
            background:green;
        }
    </style>
</head>
<body>
    <div>盒子</div>
</body>
</html>

語(yǔ)法

1.構(gòu)建css的運(yùn)行環(huán)境：在頭部加入style標(biāo)簽

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        
    </style>
</head>
<body>
<div>這是一個(gè)盒子</div>
</body>
</html>

2.選擇對(duì)應(yīng)的目標(biāo)元素，使用大括號(hào)

<style type="text/css">
        div{}
</style>

3.語(yǔ)法：屬性：值; 鍵值對(duì)

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div{color:red;}
    </style>
</head>
<body>
<div>這是一個(gè)盒子</div>
</body>

二吝岭、css字體啡直、文本屬性

css學(xué)前小知識(shí)：

一張圖片的打印出來(lái)的實(shí)際尺寸是由電子圖片的像素和分辨率共同決定的，像素(Pixel)是指構(gòu)成圖片的小色點(diǎn)苍碟，分辨率(單位DPI)是指每英寸(Inch)上的像素?cái)?shù)量酒觅，可以看做是這些小色點(diǎn)的分布密度；像素相同時(shí)微峰，分辨率越高則像素密度越大舷丹，實(shí)際打印尺寸越小，圖像也越清晰蜓肆。

實(shí)際尺寸(英寸)=像素/分辨率; 1英寸=2.54厘米; 如一張圖片寬為600像素颜凯，分辨率為300，那么實(shí)際打印寬度為：600/300=2英寸仗扬，約為5厘米症概。

1.字體屬性

a：font-size 設(shè)置字體的大小
取值方式：數(shù)字 + 像素單位px（像素就是一個(gè)長(zhǎng)度單位）
多學(xué)一招：（1）取值用偶數(shù)（2）默認(rèn)是16px大小（3）字體有多大早芭，看字體的高度

b： font-weight 設(shè)置字體的粗細(xì)
取值：normal 正常的（400）彼城、bold加粗（700）、bolder(900) 退个、 100 - 900（字體的粗細(xì)沒(méi)有那么精細(xì)募壕，所以很少使用數(shù)字）
在實(shí)際工作中用的最多的就是normal （不加粗）和bold（加粗）

c：font-style 設(shè)置字體的風(fēng)格
取值：normal 默認(rèn) 顯示標(biāo)準(zhǔn)的字體樣式 italic 字體傾斜
d) font-family 設(shè)置不同的字體

取值：宋體、微軟雅黑语盈、黑體舱馅、。刀荒。代嗤。等等

多學(xué)一招：
1.不推薦使用一些冷門字體棘钞，因?yàn)橐恍├溟T字體很多電腦里面默認(rèn)沒(méi)有安裝，這個(gè)時(shí)候就會(huì)顯示不出來(lái)干毅。所以實(shí)際工作中武翎，默認(rèn)都是一些主流字體如宋體微軟雅黑等。溶锭。。

2.字體可以寫多組符隙，中間用逗號(hào)隔開(kāi)趴捅，顯示不了第一個(gè)，就找第二個(gè)顯示

3.字體名稱中如果有空格 # $ 這種特殊字符的時(shí)候需要添加上引號(hào) 中文字體也需要添加引號(hào)

2.文本屬性

a：文本修飾
語(yǔ)法：text-decoration:值
取值：
（1）underline下劃線
（2）overline上劃線
（3）line-through刪除線
（4）none沒(méi)有修飾-----------一般用在a標(biāo)簽上

b：文本轉(zhuǎn)換
語(yǔ)法：text-transform:值
取值：
（1）uppercase轉(zhuǎn)換成大寫
（2）lowercase轉(zhuǎn)換成小寫
（3）capitalize首字母大寫

c：文本對(duì)齊方式
語(yǔ)法：text-align:值

取值：
（1）left左對(duì)齊---------------------默認(rèn)
（2）center居中對(duì)齊
（3）right右對(duì)齊

d：首行縮進(jìn)
語(yǔ)法：text-indent:值
取值：可以是像素霹疫，但是當(dāng)文字大小發(fā)生改變后拱绑，也需要重新改變，可以使用em代替丽蝎，代表字符猎拨，會(huì)隨著文字大小的改變而自動(dòng)調(diào)整
多學(xué)一招：默認(rèn)的文字大小是16px

3.字體顏色

語(yǔ)法：color:"顏色值"

三、css注釋

語(yǔ)法：/*注釋的內(nèi)容*/

四屠阻、css基本選擇器

1.標(biāo)簽選擇器

通過(guò)標(biāo)簽來(lái)選擇元素红省，標(biāo)簽{css樣式}

2.id選擇器

通過(guò)id屬性來(lái)選擇元素，#id名{css樣式}
注意：id選擇要保證頁(yè)面中的唯一性国觉，這是語(yǔ)義

3.class類選擇器

通過(guò)class屬性選擇元素吧恃，.類名{css樣式}

Google小案例：
代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        span{font-size:180px;}
        .blue{color:blue;}
        .red{color:red;}
        .orange{color:yellow;}
        .green{color:green;}
    </style>
</head>
<body>

<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>

</body>
</html>

多學(xué)一招：一個(gè)元素可以有多個(gè)類名

代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .fz-30{font-size:30px;}
        .red{color:red;}
        .green{color:green}
    </style>
</head>
<body>

<div class="fz-30 red">這是一個(gè)盒子</div>
<span class="fz-30">我是文本</span>
<p class="fz-30 green">段落部分</p>
<a class="fz-30" href="">我是超鏈接</a>

</body>
</html>

4.復(fù)合選擇器

a：標(biāo)簽選擇器和類選擇器一起使用
需求：給下面的類名叫box的p標(biāo)簽設(shè)置字體顏色為綠色

<p class="box">
    我是一個(gè)段落
</p>
<div class="box">
    我是一個(gè)盒子
</div>
<p>
    俺也是一個(gè)段落！Ｂ榫鳌痕寓！
</p>

b：用多個(gè)類名選擇一個(gè)元素
c：給多個(gè)元素設(shè)置同一種樣式，每個(gè)元素中間用 蝇闭， 隔開(kāi):元素1呻率，元素2{css樣式}

五、常用選擇器

1.通配選擇器（了解）

給所有標(biāo)簽添加樣式呻引，*{css樣式}

多學(xué)一招：通常只是用來(lái)去掉所有代碼的邊距礼仗，因?yàn)槊總€(gè)瀏覽器的邊距不同，有的8個(gè)像素逻悠，有的7個(gè)像素藐守，所以干脆會(huì)全部去掉，重新設(shè)置蹂风，保證瀏覽器的每個(gè)邊距都一致

2.后代選擇器（掌握）

選擇元素里面的元素卢厂，外層元素和內(nèi)層元素中間用空格隔開(kāi)：外層內(nèi)層{css樣式}

3.子元素選擇器（掌握）

選擇元素的直接子元素，父和子之間用 > 隔開(kāi)：父元素>子元素{css樣式}

案例題：

<div class="nav">    <!-- 主導(dǎo)航欄 -->
  <ul>
    <li><a href="#">公司首頁(yè)</a></li>
    <li><a href="#">公司簡(jiǎn)介</a></li>
    <li><a href="#">公司產(chǎn)品</a></li>
    <li>
         <a href="#">聯(lián)系我們</a>
         <ul>
            <li><a href="#">公司郵箱</a></li>
            <li><a href="#">公司電話</a></li>
         </ul>
    </li>
  </ul>
</div>
<div class="sitenav">    <!-- 側(cè)導(dǎo)航欄 -->
  <div class="site-l">左側(cè)側(cè)導(dǎo)航欄</div>
  <div class="site-r"><a href="#">登錄</a></div>
</div>

在不修改以上代碼的前提下惠啄，完成以下任務(wù)：

鏈接登錄的顏色為紅色,同時(shí)主導(dǎo)航欄里面的所有的鏈接改為黃綠色 (簡(jiǎn)單)
主導(dǎo)航欄和側(cè)導(dǎo)航欄里面文字都是14像素并且是微軟雅黑慎恒。（中等)
主導(dǎo)航欄里面的一級(jí)菜單鏈接文字顏色為綠色任内。（難)

4.相鄰元素選擇器（了解）

選擇相鄰的元素，兩個(gè)元素中間用 + 隔開(kāi)：元素1 + 元素2{css樣式}

5.偽類

元素:link 正常連接時(shí)候的狀態(tài)
元素:visited 點(diǎn)擊以后的狀態(tài)
元素:hover 當(dāng)鼠標(biāo)移動(dòng)上去的狀態(tài)-------重點(diǎn)融柬、常用
元素:active 當(dāng)鼠標(biāo)按下去時(shí)候的狀態(tài)

注意：不是所有元素都支持這4種寫法死嗦，超鏈接支持4種，工作中用的hover比較多粒氧，別的可以做個(gè)了解

六越除、偽類選擇器和類選擇器一起使用

七、偽對(duì)象選擇器（了解）

first-letter：選擇第一個(gè)字符
語(yǔ)法：元素:first-letter
first-line：選擇第一行
語(yǔ)法：元素:first-line

八外盯、屬性選擇器

1.[屬性名]

選擇具有該屬性的元素

2.[屬性=值]（重點(diǎn)）

選擇具有該屬性且等于該值的元素

3.[屬性~=值]（了解）

選擇具有該屬性摘盆，且值中包含該值的元素

多學(xué)一招：元素屬性的值可以有多個(gè)

注意：這種場(chǎng)景適用于一個(gè)屬性名對(duì)應(yīng)多個(gè)屬性的值

4.[屬性|=字符]（了解）

選擇由連字符連接多個(gè)單詞組成的屬性值中的第一個(gè)單詞

注意：這種場(chǎng)景適用于一個(gè)屬性的值由連字符連接多個(gè)單詞組成，且選擇的是第一個(gè)

5.[屬性*=值]（了解）

選擇屬性的值中包含當(dāng)前的值的元素

九饱苟、css尺寸孩擂、行高屬性

1.尺寸屬性

a：寬度
語(yǔ)法：width:值
取值：數(shù)字 + px/百分比/em -------------------------px代表像素，百分比代表瀏覽器寬度的百分比箱熬，em代表字符數(shù)

注意：1.div設(shè)置寬度為100%类垦，其實(shí)和沒(méi)設(shè)一樣2.span標(biāo)簽設(shè)置寬度無(wú)效

b：高度
語(yǔ)法：height:值
用法和寬度一樣

注意：div不設(shè)高度，默認(rèn)是0

2.行高

行高控制的是文字與文字之間的上下距離（行距）

語(yǔ)法：line-height:值

多學(xué)一招：如果將標(biāo)簽的高度和行高設(shè)置成一樣城须，那么這個(gè)標(biāo)簽里面的文字可以在這個(gè)標(biāo)簽里面垂直居中蚤认，兩者結(jié)合使用可以讓單行文字在標(biāo)簽內(nèi)部水平垂直居中，工作中經(jīng)常用于讓文字垂直居中（將行高設(shè)為盒子的高度）

font簡(jiǎn)寫

font: font-style font-weight font-size/line-height font-family
不建議修改順序并且不需要設(shè)置的屬性可以不寫但是font-size和font-family必須指定糕伐，否則將不起作用

<style type="text/css">
        div{
            height:100px;
            border:1px solid #000;
            font:italic bolder 30px/100px "微軟雅黑";
        }
    </style>
</head>
<body>
    <div>今天明天和后天</div>
</body>

感知css

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            background: red;
            transition: all 2s ease;
        }

        div:hover {
            transform: rotate(720deg) scale(0.2);
            background: green;
        }
    </style>
</head>

<body>
    <div>盒子</div>
</body>

</html>

子元素選擇器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        /* 需求：
        在不修改以上代碼的前提下烙懦，完成以下任務(wù)：
        1. 鏈接 登錄 的顏色為紅色,同時(shí)主導(dǎo)航欄里面的所有的鏈接改為黃綠色     (簡(jiǎn)單)
        2. 主導(dǎo)航欄和側(cè)導(dǎo)航欄里面文字都是14像素并且是宋體。（中等)
        3. 主導(dǎo)航欄里面的一級(jí)菜單鏈接文字顏色為黃色赤炒。（難) */

        .site-r>a {
            color: red;
        }

        .nav a {
            color: yellowgreen;
        }

        /* .nav a,.site-l,.site-r a {
            font: 14px '宋體';
        } */
        .nav,
        .sitenav {
            font: 14px '宋體';
        }

        .nav>ul>li>a {
            color: yellow;
        }
    </style>
</head>

<body>
    <div class="nav"> <!-- 主導(dǎo)航欄 -->
        <ul>
            <li><a href="#">公司首頁(yè)</a></li>
            <li><a href="#">公司簡(jiǎn)介</a></li>
            <li><a href="#">公司產(chǎn)品</a></li>
            <li>
                <a href="#">聯(lián)系我們</a>
                <ul>
                    <li><a href="#">公司郵箱</a></li>
                    <li><a href="#">公司電話</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="sitenav"> <!-- 側(cè)導(dǎo)航欄 -->
        <div class="site-l">左側(cè)側(cè)導(dǎo)航欄</div>
        <div class="site-r"><a href="#">登錄</a></div>
    </div>
</body>

</html>

登錄

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>無(wú)標(biāo)題文檔</title>
</head>

<body>
  <table bgcolor="#FFC0CB" width="800" border="1" cellspacing="0" cellpadding="10">
    <tr align="center">
      <td colspan="2">
        <h2>京東會(huì)員</h2>
      </td>
    </tr>
    <tr>
      <td>用戶名：</td>
      <td><input type="text">
        <font color="red" size="1">最多輸入6個(gè)字符</font>
      </td>
    </tr>
    <tr>
      <td>密碼：</td>
      <td><input type="text"><span>最多輸入6個(gè)字符</span>
      </td>
    </tr>
    <tr>
      <td>驗(yàn)證碼：</td>
      <td>
        <p>
          <input type="text">
        </p>
        <p>&lt;img src=&quot;&quot;&gt; </p>
      </td>
    </tr>
    <tr align="center">
      <td colspan="2"><a href="#">登錄</a>|<a href="#">注冊(cè)</a></td>
    </tr>
  </table>


</body>

</html>

小說(shuō)排行榜

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>無(wú)標(biāo)題文檔</title>
</head>

<body>

  <table width="800" border="1" cellspacing="0" cellpadding="10">
    <caption>
      <h3>今日小說(shuō)排行榜</h3>
    </caption>
    <tr>
      <th>排名</th>
      <th>關(guān)鍵字</th>
      <th>趨勢(shì)</th>
      <th>今日搜索</th>
      <th>最近七日</th>
      <th>相關(guān)鏈接&nbsp;</td>
    </tr>
    <tr>
      <td>1</td>
      <td>鬼吹燈</td>
      <td>&lt;img src=&quot;&quot;&gt;</td>
      <td>65589</td>
      <td>45</td>
      <td><a target="_parent" >貼吧</a> <a href="b.html" target="right">圖片</a> <a
          href="#">百科</a></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>


</body>

</html>

個(gè)人簡(jiǎn)歷

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>無(wú)標(biāo)題文檔</title>
</head>

<body>

  <table width="1000" border="1" cellspacing="0" cellpadding="10">
    <caption>
      <h3>個(gè)人簡(jiǎn)歷</h3>
    </caption>
    <tr>
      <td rowspan="5">
        <p>個(gè)</p>
        <p>人</p>
        <p>資</p>
        <p>料</p>
      </td>
      <td>姓名</td>
      <td>&nbsp;</td>
      <td>性別</td>
      <td>&nbsp;</td>
      <td>出生年月</td>
      <td>&nbsp;</td>
      <td rowspan="4">&nbsp;&nbsp;&nbsp;相片&nbsp;&nbsp;&nbsp;</td>
    </tr>
    <tr>
      <td>民族</td>
      <td>電腦水平</td>
      <td>政治面貌</td>
      <td>電腦水平</td>
      <td>婚姻狀況</td>
      <td>電腦水平</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>應(yīng)聘職位</td>
      <td colspan="6">&nbsp;</td>
    </tr>
  </table>


</body>

</html>

框架

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>

<!--<frameset rows="100,200">
    <frame src="1-登錄.html">
    <frame src="2-小說(shuō)排行榜.html">
</frameset>-->
<frameset cols="100,200">
    <frame src="1-登錄.html">
        <frame src="2-小說(shuō)排行榜.html">
</frameset>
<!-- 當(dāng)框架不能運(yùn)行的時(shí)候氯析，執(zhí)行noframes標(biāo)簽里面的內(nèi)容 -->
<noframes>

    <body>
        框架丟失，請(qǐng)重試莺褒！
    </body>
</noframes>

</html>

框架嵌套

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>
<!-- *代表剩下的所有空間 -->
<frameset rows="100,*">
    <frame src="1-登錄.html" name="top">
        <frameset cols="200,*">
            <frame src="2-小說(shuō)排行榜.html" name="left">
                <frame src="3-個(gè)人簡(jiǎn)歷.html" name="right">
        </frameset>
</frameset>

</html>

框架同時(shí)設(shè)置行和列

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>

<frameset rows="200,*" cols="200,*">
    <frame src="1-登錄.html">
        <frame src="2-小說(shuō)排行榜.html">
            <frame src="3-個(gè)人簡(jiǎn)歷.html">
                <frame src="b.html">
</frameset>

</html>

內(nèi)嵌框架

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>

<body>
    <div style="width:200px;height:200px;border:10px dotted #f00;">
        <iframe src="http://www.baidu.com">
    </div>
</body>

</html>

語(yǔ)義化標(biāo)簽

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>

<body>
    <!--<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>-->
    <header>這是頭部</header>
    <aside>定義菜單欄</aside>
    <article>文章內(nèi)容</article>
</body>

</html>

新增表單屬性

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>

<body>
    <!--<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>-->
    <header>這是頭部</header>
    <aside>定義菜單欄</aside>
    <article>文章內(nèi)容</article>
</body>

</html>

input新增type屬性

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>

<body>
    <form>
        郵箱號(hào)：<input type="email">
        <br>
        選擇日期：<input type="date">
        <br>
        <input type="week"><br>
        <input type="month"><br>
        <input type="time"><br>
        <input type="color"><br>
        <input type="range"><br>
        <input type="number"><!-- 電商網(wǎng)站中掩缓，商品數(shù)量 -->
        <input type="submit">
    </form>
</body>

</html>

embed標(biāo)簽

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>

<body>

    <embed src="./鄧紫棋-喜歡你.mp3" autostart="false"></embed>
    <embed autostart="false" controls width="400" height="400" src="鄧紫棋_喜歡你.webm"></embed>
</body>

</html>

audio

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>

<body>
    <audio src="鄧紫棋-喜歡你.mp3" controls="controls" autoplay="autoplay"></audio>
</body>

</html>

video

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>

<body>
    <!--<video src="鄧紫棋_喜歡你.mkv" controls autoplay></video>-->
    <video controls autoplay="autoplay">
        <source src="鄧紫棋_喜歡你.mkv">
        <!--<source src="鄧紫棋_喜歡你.webm">-->
    </video>
</body>

</html>

網(wǎng)頁(yè)中的顏色

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>

<body>
    <p style="color:yellowgreen;">
        這是段落
    </p>
</body>

</html>

字體屬性

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>

<body>
    <style>
        div {
            /* 設(shè)置字體大小font-size */
            font-size: 160px;
            /* 設(shè)置字體的粗細(xì)font-weight，將文字加粗設(shè)置為bold */
            font-weight: bold;
            /* 設(shè)置字體風(fēng)格font-style,取值normal通常是將傾斜字體設(shè)置為不傾斜遵岩，italic是將正常字體設(shè)置傾斜的 */
            font-style: normal;
            /* 設(shè)置字體font-family你辣，字體可以寫多個(gè) */
            font-family: "華文行楷", "微軟雅黑", "宋體";
        }

        i {
            font-style: normal;
        }

        h1 {
            font-weight: normal;
        }
    </style>
    <div>
        這是盒子
    </div>
    <i>
        文字傾斜
    </i>
    <h1>標(biāo)題</h1>
    <hr>
    <style>
        p {
            font-family: webdings;
            font-size: 100px;
        }
    </style>
    <p>
        123456abcdef
    </p>
</body>

</html>

文本屬性

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>

<body>
    <style type="text/css">
        a {
            /* 文本修飾text-decoration,取值：none取消文本的修飾
        line-through貫穿線（刪除線）
        上劃線overline
        下劃線underline
         */
            text-decoration: underline;
            /* 文字顏色 */
            color: #000;
        }

        p {
            /* 文本轉(zhuǎn)換，text-transform
        取值：uppercase將所有字母轉(zhuǎn)換成大寫
        capitalize所有單詞的首字母大寫
        lowercase將所有字母轉(zhuǎn)換為小寫
         */

            text-transform: lowercase;
            /* 文本對(duì)齊方式text-align尘执，
        取值：left/center/right
         */
            text-align: left;
            /*font-size:30px;*/
            /* 首行縮進(jìn)
        text-indent:2em;
         */
            /*text-indent:32px;*/
            text-indent: 2em;
        }
    </style>
    <a >百度</a>
    <!--<p>i love You</p>-->
    <p>
        我將無(wú)我舍哄，不負(fù)人民√芏В”習(xí)近平主席22日回應(yīng)意大利眾議長(zhǎng)菲科的一段話表悬，贏得無(wú)數(shù)人的由衷點(diǎn)贊。這么大一個(gè)國(guó)家丧靡，責(zé)任非常重蟆沫、工作非常艱巨籽暇。我將無(wú)我，不負(fù)人民饭庞。我愿意做到一個(gè)‘無(wú)我’的狀態(tài)戒悠，為中國(guó)的發(fā)展奉獻(xiàn)自己≈凵剑”習(xí)近平主席簡(jiǎn)潔有力的回答绸狐，一腔赤誠(chéng)溢于言表，彰顯出人民領(lǐng)袖的真摯情懷累盗。
    </p>
</body>

</html>

選擇器

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>

<body>
    <style>
        /* id選擇器 */
        /*#myid{
        color:red;  
    }*/
        /* 標(biāo)簽選擇器 */
        /*div{
        color:green;    
    }*/
        /* class類選擇器 */
        .box {
            color: blue;
        }
    </style>
    <div id="myid">盒子</div>
    <div class="box">我的標(biāo)簽</div>
</body>

</html>

Google案例

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>

<body>
    <style>
        .lanse {
            color: blue;
        }

        .hongse {
            color: red;
        }

        .huangse {
            color: #ff0;
        }

        .lvse {
            color: green;
        }

        b {
            font-size: 150px;
        }

        body {
            text-align: center;
        }
    </style>
    <b class="lanse">G</b>
    <b class="hongse">o</b>
    <b class="huangse">o</b>
    <b class="lanse">g</b>
    <b class="lvse">l</b>
    <b class="hongse">e</b>
</body>

</html>

選擇器小練習(xí)

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>
<style>
    .ft30 {
        font-size: 30px;
    }

    .red {
        color: red;
    }

    p {
        color: green;
    }

    /* 用多個(gè)類名選擇同一個(gè)元素 */

    /* 標(biāo)簽加類名選擇同一個(gè)元素 
    注意：標(biāo)簽名和類名中間不能有任何內(nèi)容
    */
    div.ft30.red {
        text-decoration: underline;
    }
</style>

<body>
    <div class="ft30 red">這是一個(gè)盒子</div>
    <span class="ft30 red">我是文本</span>
    <p class="ft30">段落部分</p>
    <a class="ft30" href="#">我是超鏈接</a>
    <b class="red">文字加粗</b>
    <div class="f">普通盒子</div>
</body>

</html>

復(fù)合選擇器

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>

<body>
    <style>
        /* 后代選擇器（利用祖宗準(zhǔn)確選擇標(biāo)簽） */
        div p {
            color: red;
        }
    </style>
    <div>
        <div>
            <p>段落1</p>
        </div>
    </div>
    <p>段落2</p>
</body>

</html>

復(fù)合選擇器2

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>

<body>
    <style>
        /* 子元素選擇器 */
        div>p {
            color: red;
        }
    </style>
    <div>
        盒子
        <p>段落1</p>
        <span>
            <p>段落2</p>
        </span>
    </div>

</body>

</html>

復(fù)合選擇器3

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>無(wú)標(biāo)題文檔</title>
</head>

<body>
    <style>
        /* 一次性給多個(gè)元素設(shè)置樣式 */
        div,
        p,
        span {
            color: red;
        }
    </style>
    <div>盒子</div>
    <p>段落</p>
    <span>文本</span>

</body>

</html>

1-文本屬性

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p {
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <h3>html概述</h3>
    <p>HTML是HyperText Mark-up Language
        的首字母簡(jiǎn)寫寒矿，意思是超文本標(biāo)記語(yǔ)言，超文本指的是超鏈接幅骄，標(biāo)記指的是標(biāo)簽，是一種用來(lái)制作網(wǎng)頁(yè)的語(yǔ)言本今，這種語(yǔ)言由一個(gè)個(gè)的標(biāo)簽組成拆座，用這種語(yǔ)言制作的文件保存的是一個(gè)文本文件，文件的擴(kuò)展名為html或htm冠息。</p>
    <p>下面是HTML的特征代碼：</p>
    <p>&lt;div&gt;這是成對(duì)出現(xiàn)的標(biāo)簽&lt;/div&gt;</p>
</body>

</html>

2-憶江南

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>憶江南</title>
    <style type="text/css">
        h2 {
            color: #0cc;
            /*font-size: 18px;*/
            text-align: center;
        }

        h3 {
            font-size: 14px;
            text-align: center;

        }

        h4 {
            color: #900;
        }

        p {
            color: #06c;
            font-size: 14px;
            text-indent: 2em;
        }

        body {
            background-color: #eee;
        }
    </style>
</head>

<body>
    <h2>憶江南</h2>

    <h3>唐.白居易</h3>

    <p>江南好挪凑，風(fēng)景舊曾諳。(2) 日出江花紅勝火逛艰，春來(lái)江水綠如藍(lán)躏碳，(3) 能不憶江南。</p>

    <h4>作者介紹</h4>

    <p>白居易(772－846)
        散怖，字樂(lè)天菇绵，太原(今屬山西)人。唐德宗朝進(jìn)士镇眷，元和三年(808)拜左拾遺咬最，后貶江州(今屬江西)司馬，移忠州(今屬四川)刺史欠动，又為蘇州(今屬江蘇)永乌、同州(今屬陜西大荔)刺史。晚居洛陽(yáng)具伍，自號(hào)醉吟先生翅雏、香山居士。其詩(shī)政治傾向鮮明人芽，重諷喻望几，尚坦易，為中唐大家萤厅。也是早期詞人中的佼佼者橄妆，所作對(duì)后世影響甚大衙伶。
    </p>

    <h4>注釋</h4>

    <p>(1)據(jù)《樂(lè)府雜錄》，此詞又名《謝秋娘》害碾，系唐李德裕為亡姬謝秋娘作矢劲。又名《望江南》、《夢(mèng)江南》等慌随。分單調(diào)芬沉、雙調(diào)兩體。單調(diào)二十七字阁猜，雙凋五十四字丸逸，皆平韻。(2)諳(音安)：熟悉剃袍。(3)藍(lán)：藍(lán)草黄刚，其葉可制青綠染料。</p>

    <h4>品評(píng)</h4>

    <p>此詞寫江南春色民效，首句“江南好”憔维，以一個(gè)既淺切又圓活的“好”字，攝盡江南春色的種種佳處畏邢，而作者的贊頌之意與向往之情也盡寓其中业扒。同時(shí)，唯因“好”之已甚舒萎，方能“憶”之不休程储，因此，此句又已暗逗結(jié)句“能不憶江南”臂寝，并與之相關(guān)闔章鲤。次句“風(fēng)景舊曾諳”，點(diǎn)明江南風(fēng)景之“好”咆贬，并非得之傳聞咏窿，而是作者出牧杭州時(shí)的親身體驗(yàn)與親身感受。這就既落實(shí)了“好”字素征，又照應(yīng)了“憶”字集嵌，不失為勾通一篇意脈的精彩筆墨。三御毅、四兩句對(duì)江南之“好”進(jìn)
        　行形象化的演繹根欧，突出渲染江花、江水紅綠相映的明艷色彩端蛆，給人以光彩奪目的強(qiáng)烈印象凤粗。其中，既有同色間的相互烘托，又有異色間的相互映襯嫌拣，充分顯示了作者善于著色的技巧柔袁。篇末，以“能不憶江南”收束全詞异逐，既托出身在洛陽(yáng)的作者對(duì)江南春色的無(wú)限贊嘆與懷念捶索，又造成一種悠遠(yuǎn)而又深長(zhǎng)的韻味，把讀者帶入余情搖漾的境界中灰瞻。
    </p>
</body>

</html>

3-新聞列表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
        a {
            text-decoration: none;
            color: #122e67;
            font: normal 12px "microsoft yahei";
        }

        .pre {
            color: #e66100;
        }

        a:hover {
            text-decoration: underline;
            color: #e66100;
        }
    </style>
</head>

<body>
    <ul>
        <li><a href="#"><span class="pre">財(cái)經(jīng)&nbsp;|</span>&nbsp;24省份一季度GDP增速超全國(guó)：海南逆襲吉林墊底</a></li>
        <li><a href="#">馬云演講嗆賈躍亭：認(rèn)為BAT壟斷是自己的想象力不行</a></li>
        <li><a href="#">山西最緊張時(shí)刻：萬(wàn)億煤炭巨債纏身 60%債務(wù)在銀行</a></li>
        <li><a href="#"><span class="pre">股票&nbsp;|</span>&nbsp;A股夏季攻勢(shì): 管理層堅(jiān)定維穩(wěn) 黃金坑迎養(yǎng)老金</a></li>
        <li><a href="#"><span class="pre">科技&nbsp;|</span>&nbsp;電視盒子漸成雞肋 生產(chǎn)商腥例、代理商謀求轉(zhuǎn)型</a></li>
    </ul>
</body>

</html>

4-綜合案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
        body {
            color: #3c3c3c;
            /* 一般網(wǎng)頁(yè)不用純黑，用淡灰色  3c3c3c */
            font-size: 16px;
        }

        h1 {
            text-align: center;
            /*  文字水平居中 */
            font-size: 25px;
            font-weight: normal;
            /* 讓粗體不加粗 */
        }

        div {
            text-align: center;
            font-size: 14px;
        }

        .sports {
            color: #f40;
        }

        .packtake {
            color: #f00;
        }

        .co {
            font-weight: 700;
            color: #ccc;
        }

        .co:hover {
            /* 鏈接偽類選擇器  鼠標(biāo)經(jīng)過(guò) .co這個(gè)類名的時(shí)候 */
            color: #f00;
        }

        p {
            font-size: 14px;
            line-height: 22px;
            text-indent: 2em;
            /* 首行縮進(jìn)2個(gè)字的距離 */
            letter-spacing: 1px;

        }

        em {
            font-style: normal;
            /*  讓斜體 不傾斜 */
            color: skyblue;
        }
    </style>
</head>

<body>
    <h1>中乙隊(duì)賽前突然換帥仍勝毅騰 高原黑馬欲阻擊舜天</h1>

    <div>2017年07月16日20:11 <span class="sports">新浪體育 評(píng)論中大獎(jiǎng)</span>
        （<a href="#" class="packtake">11</a>人參與） <a href="#" class="co">收藏本文</a></div>
    <hr />

    <p>新浪體育訊　7月16日是燕京啤酒<em>[微博]</em>2017中國(guó)足協(xié)杯第三輪比賽酝润，麗江嘉云昊隊(duì)主場(chǎng)迎戰(zhàn)哈爾濱毅騰隊(duì)的比賽日燎竖。然而就在比賽日中午，麗江嘉云昊隊(duì)主帥李虎和另外兩名成員悄然向俱樂(lè)部提出了辭呈要销，并且收拾行囊準(zhǔn)備離開(kāi)构回。在這樣的情況下，麗江嘉云昊隊(duì)不得不由此前的教練員楊貴東代理指揮了本場(chǎng)比賽疏咐。
    </p>

    <p>在昨日麗江嘉云昊隊(duì)主帥李虎就缺席了賽前的新聞發(fā)布會(huì)纤掸，當(dāng)時(shí)俱樂(lè)部給出的解釋是李虎由于身體欠佳，去醫(yī)院接受治療凳鬓。然而今日李虎出現(xiàn)在俱樂(lè)部時(shí)茁肠，向記者否認(rèn)了這一說(shuō)法患民，并且坦言已經(jīng)向俱樂(lè)部提出了辭呈缩举。</p>

    <p>據(jù)記者多方了解的情況，李虎<em>[微博]</em>極其教練組近來(lái)在執(zhí)教成績(jī)上承受了不小的壓力匹颤，在聯(lián)賽間歇期期間仅孩，教練組曾向俱樂(lè)部提出能夠多引進(jìn)有實(shí)力的球員補(bǔ)強(qiáng)球隊(duì)，然而由于和俱樂(lè)部在投入以及成績(jī)指標(biāo)上的分歧印蓖，李虎最終和教練組一起在比賽日辭職辽慕。
    </p>
    <p>這樣的情況并沒(méi)有影響到麗江嘉云昊隊(duì)<em>[微博]</em>的隊(duì)員，在比賽中麗江隊(duì)在主場(chǎng)拼的非常兇赦肃，在暴雨之中仍然發(fā)揮出了體能充沛的優(yōu)勢(shì)溅蛉，最終憑借點(diǎn)球擊敗了中超球隊(duì)哈爾濱毅騰，順利晉級(jí)下一輪比賽他宛。根據(jù)中國(guó)足協(xié)杯的賽程船侧，麗江嘉云昊隊(duì)將在本月23日迎戰(zhàn)江蘇舜天隊(duì)。
    </p>
</body>

</html>

5-搜索結(jié)果

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body {
            width: 600px;
        }

        * {
            font-family: arial;
        }

        h4 {
            color: red;
        }

        h4 span {
            color: blue;
        }

        div {
            color: #666;
        }

        div>a {
            color: green;
            text-decoration: none;
        }

        div>span {
            color: gray;
        }

        div>span>a {
            color: gray;
        }

        div>i {
            font-style: normal;
            color: red;
        }
    </style>
</head>

<body>
    <h4>HTML <span>&lt;</span>div<span>&gt;</span>標(biāo)簽</h4>
    <div>
        不必為每一個(gè)&lt;<i>div</i>&gt;都加上類或id厅各，雖然這樣做也有一定的<i>好處</i>镜撩。可以對(duì)同一...&lt;<i>div</i>&gt;<i>標(biāo)簽</i>支持<i>HTML</i>中的全局屬性队塘。事件屬性&lt;<i>div</i>&gt;<i>標(biāo)簽</i>支持<i>HTML</i>中的事件...
    </div>
    <div><a href="#">w3school.com.cn...&nbsp;<img src="xiajiantou.png" /></a><span>-<a href="#">百度快照</a></span></div>
</body>

</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末袁梗，一起剝皮案震驚了整個(gè)濱河市宜鸯，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌遮怜，老刑警劉巖淋袖，帶你破解...
沈念sama閱讀 218,858評(píng)論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異奈泪，居然都是意外死亡适贸，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,372評(píng)論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門涝桅，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)拜姿，“玉大人，你說(shuō)我怎么就攤上這事冯遂∪锓剩” “怎么了？”我有些...
開(kāi)封第一講書(shū)人閱讀 165,282評(píng)論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵蛤肌，是天一觀的道長(zhǎng)壁却。經(jīng)常有香客問(wèn)我，道長(zhǎng)裸准，這世上最難降的妖魔是什么展东？我笑而不...
開(kāi)封第一講書(shū)人閱讀 58,842評(píng)論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮炒俱，結(jié)果婚禮上盐肃，老公的妹妹穿的比我還像新娘。我一直安慰自己权悟，他們只是感情好砸王，可當(dāng)我...
茶點(diǎn)故事閱讀 67,857評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著峦阁，像睡著了一般谦铃。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上榔昔，一...
開(kāi)封第一講書(shū)人閱讀 51,679評(píng)論 1贊 305
城市分裂傳說(shuō)
那天驹闰，我揣著相機(jī)與錄音，去河邊找鬼撒会。笑死嘹朗，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的茧彤。我是一名探鬼主播骡显，決...
沈念sama閱讀 40,406評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了惫谤？” 一聲冷哼從身側(cè)響起壁顶，我...
開(kāi)封第一講書(shū)人閱讀 39,311評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎溜歪，沒(méi)想到半個(gè)月后若专，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,767評(píng)論 1贊 315
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡蝴猪，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,945評(píng)論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年调衰，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片自阱。...
茶點(diǎn)故事閱讀 40,090評(píng)論 1贊 350
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡嚎莉，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出沛豌，到底是詐尸還是另有隱情趋箩，我是刑警寧澤，帶...
沈念sama閱讀 35,785評(píng)論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布加派，位于F島的核電站叫确，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏芍锦。R本人自食惡果不足惜竹勉，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,420評(píng)論 3贊 331
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望娄琉。院中可真熱鬧次乓，春花似錦、人聲如沸车胡。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 31,988評(píng)論 0贊 22
一樁弒父案照瘾，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)匈棘。三九已至，卻和暖如春析命，著一層夾襖步出監(jiān)牢的瞬間主卫，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 33,101評(píng)論 1贊 271
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工鹃愤，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留簇搅，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,298評(píng)論 3贊 372
代替公主和親
正文我出身青樓软吐，卻偏偏與公主長(zhǎng)得像瘩将，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,033評(píng)論 2贊 355