溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS基礎(chǔ)知識(shí)有什么

發(fā)布時(shí)間：2021-11-06 16:10:47 來源：億速云 閱讀：139 作者：iii 欄目：web開發(fā)

這篇文章主要介紹“CSS基礎(chǔ)知識(shí)有什么”，在日常操作中，相信很多人在CSS基礎(chǔ)知識(shí)有什么問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS基礎(chǔ)知識(shí)有什么”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

一、什么是CSS

  • CSS全稱為層疊樣式表(Cascading Style Sheets)，通常又稱為風(fēng)格樣式表(Style Sheets)，它是用來進(jìn)行網(wǎng)頁設(shè)計(jì)的；

  • 在網(wǎng)頁制作時(shí)采用CSS技術(shù)，可以有效地對(duì)頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制，只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式；

二、CSS的優(yōu)勢(shì)

  • 內(nèi)容與表現(xiàn)分離，也就是使用前面學(xué)習(xí)得HTML語言制作網(wǎng)頁，使用CSS設(shè)置網(wǎng)頁樣式、風(fēng)格、并且CSS樣式單獨(dú)存放在一個(gè)文件中，這樣只要HTML文件引用CSS文件就可以了，便于后期的CSS樣式的維護(hù)；

  • 表現(xiàn)的統(tǒng)一，可以使網(wǎng)頁的表現(xiàn)非常同意，并且容易修改；

  • 豐富的樣式，使得頁面布局靈活；

  • 減少網(wǎng)頁的代碼量，增加網(wǎng)頁的瀏覽速度；

  • 運(yùn)用獨(dú)立頁面的CSS，有利于網(wǎng)頁被搜索引擎收錄；

三、CSS的基本語法結(jié)構(gòu)

  • CSS和HTML一樣都是瀏覽器能解析的計(jì)算機(jī)語言，因此CSS也有自己的語法結(jié)構(gòu)；

  • CSS規(guī)則由兩部分構(gòu)成，選擇器和聲明，聲明必須放在大括號(hào)中{}，可以是一條或多條；

  • 每條聲明由一個(gè)屬性和值組成，屬性和值用冒號(hào)分開，每條語句以英文的分好結(jié)尾；

# h2表示選擇器
# font-size和color表示屬性
# 12px和#fff表示屬性值
p{
font-size:12px;
color:#fff;
}

四、style標(biāo)簽

  • 在HTML中通過使用<style>標(biāo)簽引入CSS樣式，<style>標(biāo)簽用于為HTML文檔定義樣式信息；

  • <style>標(biāo)簽位于<head>標(biāo)簽中，它規(guī)定瀏覽器中如何呈現(xiàn)HTML文檔；

  • 在<style>標(biāo)簽中，type是必須屬性，用于定義style元素的內(nèi)容，值為“text/css”；

<style type="text/css">
    p{
        font-size:12px;
        color:#fff;
     }
</style>
<body>
</body>

五、CSS選擇器

  • 在 CSS 中，選擇器是一種模式，用于選擇需要添加樣式的元素；

  • 所有HTML語言中的標(biāo)簽樣式都是通過不同的CSS選擇器進(jìn)行控制的；

  • CSS的選擇器分為三種，分別是：標(biāo)簽選擇器、類選擇器、ID選擇器；

標(biāo)簽選擇器：

  • 一個(gè)HTML頁面由很多的標(biāo)簽組成，例如<html>、<p>、<h2>、<div>、<span>等，CSS標(biāo)簽選擇器就是用來聲明這些標(biāo)簽的；

  • 每種HTML標(biāo)簽的名稱都可以作為相應(yīng)的標(biāo)簽選擇器的名稱，例如<p>標(biāo)簽和<h2>標(biāo)簽，如果我們需要在它們上面定義一個(gè)標(biāo)簽選擇器，那我們要怎么做呢；

p{
font-size:12px;
}
h2{
font-size:16px;
}

  • 需要注意的是，一個(gè)HTML頁面會(huì)有很多的<p>標(biāo)簽和<h2>標(biāo)簽，標(biāo)簽選擇器一旦聲明，那么頁面的所有該標(biāo)簽都會(huì)應(yīng)用，這樣雖然用起來很方便，但是如果想要給其中一個(gè)標(biāo)簽單獨(dú)定義屬性則不能，此時(shí)需要使用類選擇器或者ID選擇器了；

類選擇器：

  • 類選擇器的名字可以由用戶自定義，屬性和值跟標(biāo)簽選擇器一樣，必須符合CSS規(guī)范，它的語法如下；

# .class1為類選擇器的名字
# font-size為屬性
# 12px為屬性值
.class1{
font-size:12px;
}

  • 和標(biāo)簽選擇器不同的是，設(shè)置了類選擇器之后就要在HTML的標(biāo)簽中應(yīng)用相應(yīng)類樣式，使用標(biāo)簽的class屬性引用類樣式，如下所示；

<style>
  .class1{
   font-size:18px;
   color:#f00;
  }
</style>
<body>
    <p class="class1">hello world！</p>
    <p>hello world!</p>
</body>

  • 如下圖所示，上面一行p標(biāo)簽是應(yīng)用了類樣式class1，下面一行則沒有，所以上面一行樣式有變化，下面一行沒有變化；
    CSS基礎(chǔ)知識(shí)有什么

ID選擇器：

  • ID選擇器的使用方法和類選擇器相同，不同之處在于ID選擇器只能在HTML頁面中使用一次，因此它的針對(duì)性更強(qiáng)；

  • 比如說有一個(gè)類選擇器.class1，那么它可以在頁面的多個(gè)標(biāo)簽中應(yīng)用，有一個(gè)ID選擇器class1，那么它只能在頁面 中用一次；

<style>
      .class1{
               font-size:18px;
               color:#f00;
      }
      #id1{
          font-size:26px;
          color:#0A00F3;
          }
</style>
<body>
    <p class="class1">這是第一行喲</p>
    <p class="class1">這是第二行喲</p>
    <p class="class1">這是第三行喲</p>
    <p id="id1">這是第二行喲</p>
    <p >這是第二行喲</p>
</body>

  • 效果圖
    CSS基礎(chǔ)知識(shí)有什么

六、CSS樣式引入方法

  • 在HTML頁面中，引入CSS樣式有三個(gè)方法，分別是：行內(nèi)樣式、內(nèi)部樣式和外部樣式；

行內(nèi)樣式：

  • 行內(nèi)樣式就是在HTML中直接使用style屬性設(shè)置CSS樣式，用法為：<標(biāo)簽名 style=”樣式聲明;”></標(biāo)簽名>；

  • 這種方法僅對(duì)當(dāng)前的HTML標(biāo)簽起作用，并且是寫在HTML標(biāo)簽中的，因此這種方法不能使得內(nèi)容和表現(xiàn)相分離，沒有體現(xiàn)出CSS的優(yōu)勢(shì)；

內(nèi)部樣式：

  • 把CSS代碼寫在

    的

  • 這種方法的優(yōu)勢(shì)為方便在同頁面中修改樣式，但是不利于在多頁面間共享復(fù)用代碼和維護(hù)代碼，對(duì)內(nèi)容與樣式的分離也不夠徹底；

外部樣式：

  • 實(shí)際開發(fā)中我們都是使用這種方式來引入CSS樣式，它是把CSS代碼另存為一個(gè)單獨(dú)的CSS文件，文件的擴(kuò)展名為.css，然后在頁面中引入這個(gè)文件；

  • 引入外部樣式的語法為：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<link rel="stylesheet" type="text/css" href="style.css" />  # 引入外部css文件style.css,所有的樣式都寫在這個(gè)文件中
</head>
<body>
    <p class="class1">這是第一行喲</p>
    <p class="class1">這是第二行喲</p>
    <p class="class1">這是第三行喲</p>
    <p id="id1">這是第二行喲</p>
    <p >這是第二行喲</p>
</body>
</html>

七、樣式優(yōu)先級(jí)

  • css的全稱為層疊樣式表，顧名思義，css中的樣式可以疊加使用，頁面的最終效果為多個(gè)樣式疊加效果；

  • 樣式的疊加會(huì)造成樣式之間的沖突，所以就存在優(yōu)先級(jí)的問題；

  • 選擇器的優(yōu)先級(jí)為：標(biāo)簽選擇器>ID選擇器>類選擇器；

  • 樣式優(yōu)先級(jí)：行內(nèi)樣式>內(nèi)部樣式>外部樣式；

八、CSS復(fù)合選擇器

  • 由標(biāo)簽選擇器、類選擇器、ID選擇器三種基本的選擇器為基礎(chǔ)，通過不同方式將兩個(gè)或者多個(gè)選擇器組合在一起而形成的選擇器叫做復(fù)合選擇器；

后代選擇器：

  • 后代選擇器（descendant selector）又稱為包含選擇器，后代選擇器可以選擇作為某元素后代的元素；

  • 它的語法為：

<style>
     p strong{
         font-size:24px;
         }
</style>
<body>
    <p>春眠不覺曉，<strong>處處</strong>聞啼鳥</p>
</body>

后代選擇器：

  • 交集選擇器由兩個(gè)選擇器直接連接構(gòu)成，其中第一個(gè)必須是標(biāo)記選擇器，第二個(gè)必須是類別選擇器或者ID選擇器，這兩個(gè)選擇器之間不能有空格；

  • 它的語法為：

<style>
     p.special{
        color:red;
        }
</style>
<body>
    <p class="special">春眠不覺曉，處處聞啼鳥</p>
</body>

并集選擇器：

  • 并集選擇器簡(jiǎn)稱集體聲明，并集選擇器是多個(gè)選擇器通過逗號(hào)連接而成的；

  • 并集選擇器可以用來定義風(fēng)格完全相同，或者部分相同的選擇器；

  • 語法為：

<style>
     h2,h3,h4,h5,h6{
        color:red;
        }
</style>
<body>
    <h2>第一個(gè)</h2>
    <h3>第二個(gè)</h3>
    <h4>第三個(gè)</h4>
    <h5>第四個(gè)</h5>
    <h6>第五個(gè)</h6>
</body>

九、繼承特性

  • CSS的繼承簡(jiǎn)單的說就是將各個(gè)HTML標(biāo)記看做一個(gè)個(gè)容器，其中被包含的小容器會(huì)繼承包含它的大容器的風(fēng)格樣式；

  • 所有的CSS語句都是基于各個(gè)標(biāo)記直接的繼承關(guān)系，CSS繼承是指子標(biāo)記會(huì)繼承父標(biāo)記的所有樣式風(fēng)格，并可以再父標(biāo)記樣式風(fēng)格的基礎(chǔ)上再加以修改，產(chǎn)生新的樣式，而子標(biāo)記的樣式完全不會(huì)影響父標(biāo)記。

到此，關(guān)于“CSS基礎(chǔ)知識(shí)有什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手