2019-03-28第七次課初識(shí)CSS

初識(shí)CSS
本章學(xué)習(xí)目標(biāo)
(1) .   會(huì)使用CSS三種基本的選擇器設(shè)置字體大小和顏色     【重點(diǎn)】
(2) .   會(huì)使用行內(nèi)樣式，內(nèi)部樣式表和外部樣式表3種方式為HTML文檔添加CSS樣式【重點(diǎn)】
一、  CSS的基本語(yǔ)法
(一) 什么是CSS
CSS：層疊樣式表（Cascading Style Sheet）
(二) 使用CSS的優(yōu)勢(shì)
(1) .   內(nèi)容與表現(xiàn)分離
(2) .   網(wǎng)頁(yè)的表現(xiàn)統(tǒng)一，容易修改
(3) .   豐富的樣式，使得頁(yè)面布局更加靈活
(4) .   減少網(wǎng)頁(yè)的代碼量，增加網(wǎng)頁(yè)的瀏覽速度，節(jié)省網(wǎng)絡(luò)帶寬
(5) .   運(yùn)用獨(dú)立于頁(yè)面的CSS，有利于網(wǎng)頁(yè)被搜索引擎收錄
(三) CSS的基本語(yǔ)法結(jié)構(gòu)
1.  描述
CSS和HTML一樣，都是瀏覽器能夠解析的計(jì)算機(jī)語(yǔ)言。因此，CSS也有自己的語(yǔ)法規(guī)則和結(jié)構(gòu)。
2.  語(yǔ)法
選擇器 { 聲明1;
         聲明2;
         ……  
}
    CSS語(yǔ)法規(guī)則有二部分組成，即選擇器和聲明。
聲明必須放在大括號(hào){}中，并且聲明可以是一條或多條；
每條聲明由一個(gè)屬性和值組成，屬性和值用冒號(hào)分開；
每條語(yǔ)句以英文分號(hào)結(jié)尾。
3.  案例演示
h1 {
    font-size:12px;
    color:#F00;
}
 
(四) 認(rèn)識(shí)<style>標(biāo)簽
在HTML中通過使用<style>標(biāo)簽引入CSS樣式。<style>標(biāo)簽用于為HTML文檔定義樣式信息。
<sytle>標(biāo)簽位于<head>標(biāo)簽中，type屬性是必須的，其唯一值是“yk。
        <style type="text/css">
            h1{
                font-size: 24px;
                color: aqua;
            }
        </style>
二、  CSS選擇器
選擇器（selector）是CSS中非常重要的概念，所有HTML語(yǔ)言中的標(biāo)簽樣式，都是通過不同的CSS選擇器進(jìn)行控制的，用戶通過選擇器，就可以對(duì)不同的HTML標(biāo)簽進(jìn)行選擇，并賦予各種樣式聲明。
在CSS中，有3種最基本的選擇器，分別是標(biāo)簽選擇器、類選擇器和ID選擇器，下面分別進(jìn)行詳細(xì)介紹。
(一) 標(biāo)簽選擇器
1.  描述
一個(gè)HTML頁(yè)面由很多的標(biāo)簽組成，如<h1><p><img/>等，CSS標(biāo)簽選擇器就是用來聲明這些標(biāo)簽的。因此，每種HTML標(biāo)簽的都可以作為相應(yīng)的標(biāo)簽選擇器的名稱。
2.  語(yǔ)法
 
3.  演示案例
需求說明
    <h3>標(biāo)簽中的字體顏色為綠色；
    <p>標(biāo)簽的字體顏色為紅色
    二個(gè)標(biāo)簽的字符大小都是16px
實(shí)現(xiàn)效果
 
核心代碼
<style type="text/css">
h3{color:#090;}
p{
     font-size:16px;
     color:red;
  }
</style>
4.  經(jīng)驗(yàn)說明
標(biāo)簽選擇器是網(wǎng)頁(yè)樣式中經(jīng)常用到的，通常用于直接設(shè)置頁(yè)面中標(biāo)簽樣式。如果相同的標(biāo)簽內(nèi)容的樣式一致，那么使用標(biāo)簽選擇器就非常方便了。
(二) 類選擇器
1.  描述
在標(biāo)簽選擇器中看到，標(biāo)簽選擇器一旦聲明，那么頁(yè)面中所有的該標(biāo)簽，都會(huì)相應(yīng)的地發(fā)生變化，但是，如果希望其中某個(gè)標(biāo)簽不一樣，僅依靠標(biāo)簽選擇器還是不夠的，這里需要引入類選擇器。
2.  語(yǔ)法格式
類選擇器的名稱可以由用戶自定義，屬性和值跟標(biāo)簽選擇器一樣，必須符合CSS規(guī)范，類選擇器的語(yǔ)法結(jié)構(gòu)如下
 
    設(shè)置了類選擇器后，就要在HTML標(biāo)簽中應(yīng)用類樣式。使用標(biāo)簽的class屬性引用類新式
<標(biāo)簽名 =”類名稱”>
3.  案例演示
需求說明
    將上例中，兩個(gè)<P>標(biāo)簽中的文本分別顯示不同的顏色，比如第二個(gè)<P>標(biāo)簽顯示綠色，字體大小為20px
    實(shí)現(xiàn)效果
 
核心代碼
.green{
    font-size: 20px;
    color: #009900;
}

<p class="green">有勇氣就會(huì)有奇跡。</p>
4.  經(jīng)驗(yàn)說明
類選擇器是網(wǎng)頁(yè)中最常用的一種選擇器，設(shè)置了一個(gè)類選擇器，只要頁(yè)面中某個(gè)標(biāo)簽中需要相同的樣式，直接使用class屬性調(diào)用即可以。類選擇器同一個(gè)頁(yè)面中可以頻繁的使用，應(yīng)用起來非常方便。
(三) ID選擇器
1.  描述
ID選擇器的使用方法與類選擇器基本相同，不同之處在于ID選擇器只能在HTML頁(yè)面中使用一次，因此它的針對(duì)性很強(qiáng)。在HTML的標(biāo)簽中，只要在HTML中設(shè)置了id屬性，就可以直接調(diào)用CSS中的ID選擇器。
2.  語(yǔ)法格式
 
3.  案例演示
需求說明
    設(shè)置二個(gè)id選擇器，分別命名為first和second,first的字符16px,second的字體大小設(shè)置為24px
實(shí)現(xiàn)效果
 
核心代碼
<style type="text/css">
        #first{font-size:16px;}
        #second{font-size:24px;}
</style>
  <p id="first">北京歡迎你，有夢(mèng)想誰(shuí)都了不起！</p>
  <p id="second">有勇氣就會(huì)有奇跡。</p>
經(jīng)驗(yàn)說明
    id選擇器與類選擇器不同，同一個(gè)Id屬性在同一個(gè)頁(yè)面中只能使用一次，雖然這樣，但是它在網(wǎng)頁(yè)中也經(jīng)常用到。
(四) 小結(jié)
(1) .   標(biāo)簽選擇器直接應(yīng)用于HTML標(biāo)簽
(2) .   類選擇器可在頁(yè)面中多次使用
(3) .   ID選擇器在同一個(gè)頁(yè)面中只能使用一次
(五) 課堂練習(xí)
1.  制作《望廬山瀑布》
需求說明
使用標(biāo)題標(biāo)簽和段落標(biāo)簽制作李白的詩(shī)《望廬山瀑布》，詩(shī)正文字體顏色為綠色，字體大小為14px。
實(shí)現(xiàn)效果
 
核心代碼
<style type="text/css">
    p{
        font-size: 14px;
        color: green;
    }
</style>
2.  制作《水調(diào)歌頭》
需求說明
標(biāo)題顏色為紅色，字體大小為18px；正文第一段字體大小為12px，字體顏色為紅色，第二段字體顏色為黑色，字體大小為12px
實(shí)現(xiàn)效果
 
核心代碼
<style type="text/css">
            h1{
                font-size: 18px;
                color: red;
            }
            .part1{
                font-size: 12px;
                color: red;
            }
            .part2{
                font-size: 12px;
                color:black;
            }
</style>
(六) 課后作業(yè)
1.  制作《如夢(mèng)令》
需求說明
(1) .   使用標(biāo)簽選擇器設(shè)置標(biāo)題字體大小為20px
(2) .   頁(yè)面中所有段落中的文本字體大小為16px
(3) .   使用類選擇器設(shè)置正文和譯文內(nèi)容字體顏色為綠色
(4) .   使用ID選擇器設(shè)置譯文標(biāo)題顏色為藍(lán)色
實(shí)現(xiàn)效果
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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