溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS基礎知識有什么”，在日常操作中，相信很多人在CSS基礎知識有什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS基礎知識有什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
CSS全稱為層疊樣式表(Cascading Style Sheets)，通常又稱為風格樣式表(Style Sheets)，它是用來進行網頁設計的；
在網頁制作時采用CSS技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制，只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式；
內容與表現分離，也就是使用前面學習得HTML語言制作網頁，使用CSS設置網頁樣式、風格、并且CSS樣式單獨存放在一個文件中，這樣只要HTML文件引用CSS文件就可以了，便于后期的CSS樣式的維護；
表現的統一，可以使網頁的表現非常同意，并且容易修改；
豐富的樣式，使得頁面布局靈活；
減少網頁的代碼量，增加網頁的瀏覽速度；
運用獨立頁面的CSS，有利于網頁被搜索引擎收錄；
CSS和HTML一樣都是瀏覽器能解析的計算機語言，因此CSS也有自己的語法結構；
CSS規則由兩部分構成，選擇器和聲明，聲明必須放在大括號中{}，可以是一條或多條；
每條聲明由一個屬性和值組成，屬性和值用冒號分開，每條語句以英文的分好結尾；
# h2表示選擇器
# font-size和color表示屬性
# 12px和#fff表示屬性值
p{
font-size:12px;
color:#fff;
}在HTML中通過使用<style>標簽引入CSS樣式，<style>標簽用于為HTML文檔定義樣式信息；
<style>標簽位于<head>標簽中，它規定瀏覽器中如何呈現HTML文檔；
在<style>標簽中，type是必須屬性，用于定義style元素的內容，值為“text/css”；
<style type="text/css">
p{
font-size:12px;
color:#fff;
}
</style>
<body>
</body>在 CSS 中，選擇器是一種模式，用于選擇需要添加樣式的元素；
所有HTML語言中的標簽樣式都是通過不同的CSS選擇器進行控制的；
CSS的選擇器分為三種，分別是：標簽選擇器、類選擇器、ID選擇器；
標簽選擇器：
一個HTML頁面由很多的標簽組成，例如<html>、<p>、<h2>、<div>、<span>等，CSS標簽選擇器就是用來聲明這些標簽的；
每種HTML標簽的名稱都可以作為相應的標簽選擇器的名稱，例如<p>標簽和<h2>標簽，如果我們需要在它們上面定義一個標簽選擇器，那我們要怎么做呢；
p{
font-size:12px;
}
h2{
font-size:16px;
}需要注意的是，一個HTML頁面會有很多的<p>標簽和<h2>標簽，標簽選擇器一旦聲明，那么頁面的所有該標簽都會應用，這樣雖然用起來很方便，但是如果想要給其中一個標簽單獨定義屬性則不能，此時需要使用類選擇器或者ID選擇器了；
類選擇器：
類選擇器的名字可以由用戶自定義，屬性和值跟標簽選擇器一樣，必須符合CSS規范，它的語法如下；
# .class1為類選擇器的名字
# font-size為屬性
# 12px為屬性值
.class1{
font-size:12px;
}和標簽選擇器不同的是，設置了類選擇器之后就要在HTML的標簽中應用相應類樣式，使用標簽的class屬性引用類樣式，如下所示；
<style>
.class1{
font-size:18px;
color:#f00;
}
</style>
<body>
<p class="class1">hello world！</p>
<p>hello world!</p>
</body>如下圖所示，上面一行p標簽是應用了類樣式class1，下面一行則沒有，所以上面一行樣式有變化，下面一行沒有變化；
ID選擇器：
ID選擇器的使用方法和類選擇器相同，不同之處在于ID選擇器只能在HTML頁面中使用一次，因此它的針對性更強；
比如說有一個類選擇器.class1，那么它可以在頁面的多個標簽中應用，有一個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>效果圖
在HTML頁面中，引入CSS樣式有三個方法，分別是：行內樣式、內部樣式和外部樣式；
行內樣式：
行內樣式就是在HTML中直接使用style屬性設置CSS樣式，用法為：<標簽名 style=”樣式聲明;”></標簽名>；
這種方法僅對當前的HTML標簽起作用，并且是寫在HTML標簽中的，因此這種方法不能使得內容和表現相分離，沒有體現出CSS的優勢；
內部樣式：
把CSS代碼寫在
的
這種方法的優勢為方便在同頁面中修改樣式，但是不利于在多頁面間共享復用代碼和維護代碼，對內容與樣式的分離也不夠徹底；
外部樣式：
實際開發中我們都是使用這種方式來引入CSS樣式，它是把CSS代碼另存為一個單獨的CSS文件，文件的擴展名為.css，然后在頁面中引入這個文件；
引入外部樣式的語法為：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <link rel="stylesheet" type="text/css" href="style.css" /> # 引入外部css文件style.css,所有的樣式都寫在這個文件中 </head> <body> <p class="class1">這是第一行喲</p> <p class="class1">這是第二行喲</p> <p class="class1">這是第三行喲</p> <p id="id1">這是第二行喲</p> <p >這是第二行喲</p> </body> </html>
css的全稱為層疊樣式表，顧名思義，css中的樣式可以疊加使用，頁面的最終效果為多個樣式疊加效果；
樣式的疊加會造成樣式之間的沖突，所以就存在優先級的問題；
選擇器的優先級為：標簽選擇器>ID選擇器>類選擇器；
樣式優先級：行內樣式>內部樣式>外部樣式；
由標簽選擇器、類選擇器、ID選擇器三種基本的選擇器為基礎，通過不同方式將兩個或者多個選擇器組合在一起而形成的選擇器叫做復合選擇器；
后代選擇器：
后代選擇器（descendant selector）又稱為包含選擇器，后代選擇器可以選擇作為某元素后代的元素；
它的語法為：
<style>
p strong{
font-size:24px;
}
</style>
<body>
<p>春眠不覺曉，<strong>處處</strong>聞啼鳥</p>
</body>后代選擇器：
交集選擇器由兩個選擇器直接連接構成，其中第一個必須是標記選擇器，第二個必須是類別選擇器或者ID選擇器，這兩個選擇器之間不能有空格；
它的語法為：
<style>
p.special{
color:red;
}
</style>
<body>
<p class="special">春眠不覺曉，處處聞啼鳥</p>
</body>并集選擇器：
并集選擇器簡稱集體聲明，并集選擇器是多個選擇器通過逗號連接而成的；
并集選擇器可以用來定義風格完全相同，或者部分相同的選擇器；
語法為：
<style>
h2,h3,h4,h5,h6{
color:red;
}
</style>
<body>
<h2>第一個</h2>
<h3>第二個</h3>
<h4>第三個</h4>
<h5>第四個</h5>
<h6>第五個</h6>
</body>CSS的繼承簡單的說就是將各個HTML標記看做一個個容器，其中被包含的小容器會繼承包含它的大容器的風格樣式；
所有的CSS語句都是基于各個標記直接的繼承關系，CSS繼承是指子標記會繼承父標記的所有樣式風格，并可以再父標記樣式風格的基礎上再加以修改，產生新的樣式，而子標記的樣式完全不會影響父標記。
到此，關于“CSS基礎知識有什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
