溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css規則與選擇器的知識點有哪些”，在日常操作中，相信很多人在css規則與選擇器的知識點有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css規則與選擇器的知識點有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
一 什么是css?
●css指層疊樣式表(cascading style sheets)
●樣式定義如何顯示html元素
●樣式通常存儲在樣式表中
●把樣式添加到html4.0中,是為了解決內容與表現分離的問題
●外部樣式表可以極大提高工作效率
●外部樣式表通常存儲在css文件中
●多個樣式定義可層疊為一
注意:在學習css之前,你需要具備html的基本知識.之前已經粗略介紹過.后邊還會詳細介紹
css允許你針對html元素應用特定的樣式
css的主要好處在于,它允許你將樣式和頁面內容進行分離
僅適用html,樣式和頁面內容混在一起,這樣的頁面將會變得難以維護
所有的web頁面樣式都可以(也應該)從html文檔中分離出來,建立成一個單獨的css文件使用
二 內聯 嵌入式 外部引用css
在web文檔中插入一個樣式表是內聯樣式的使用方法之一.使用內聯樣式,將獨特的樣式應用于單個元素
為了使用內聯樣式,將樣式屬性添加到相關的標簽中.
下面的例子展示了如何創建一個灰色背景和白色文本的段落:
<p style="color:white; background-color:gray;">
This is an example of inline styling.
</p>
運行效果如下:
◆在<head>標簽中,將內部樣式定義在<style>元素中
例如:下面代碼中的樣式將作用在所有<p>段落中
<html>
<head>
<style>
p{
color:white;
background-color:gray;
</sytle>
</head>
<body>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
</body>
</html>
結果所有的段落都變成白色字體和灰色背景
◆外部引用css:將所有的css樣式保存在同一個后綴名.css的拓展文件中
然后通過html標簽<link>在html頁面的<head>部分將css文件引入
舉例說明:
html代碼:
<head>
<link rel="stylesheets" href="example.css">
</head>
<body>
<p>這是我的一個段落</p>
<p>這是我的第二個段落</p>
<p>這是我的第三個段落</p>
</body>
css部分:
p{
color:white;
background-color:gray;
所有段落都是統一的樣式
●相對路徑和絕對路徑都可以用來定義css文件的href.在我們的示例中,路徑是相對的,因為css文件和html文件位于同一目錄下
三 css規則與選擇器
css是由瀏覽器解釋的樣式規則,然后應用于文檔中相應的元素.
樣式規則有三部分:選擇器 屬性 屬性值
例如,標題顏色可以定義為:
h2 { color:orange;}
選擇器指向需要設置樣式的html元素;
聲明塊包含一個或多個用分號分隔的聲明;
每個聲明都包含一個由冒號分隔的屬性名稱和值
例如:
h3{
color:red;
background:#fff;
●最常見和最易于理解的選擇器是類型選擇器.該選擇器以頁面上的元素類型為目標
例如,要定位頁面上的所有段落
p{
color:red;
font-size:130%;
●css聲明總是以分號結尾.而聲明塊則由大括號包圍.
id選擇器允許你設置具有id屬性的html元素,而不管他們在文檔樹中的位置.
舉例說明:
html部分:
<div id="intro">
<p>今年過節送什么?</p>
</div>
<p>w3cschool會員,送了都說好!</p>
css部分:
#intro{
color:white;
background-colot:gray;
要選擇具有特定ID的元素,請使用"#",然后使用元素的id跟隨它
class選擇器以類似的方式工作.主要區別在于每個元素的id具有唯一性,id每個頁面只能應用一次,而class可以在頁面上多次使用.
●要選擇具有特定類的元素,請使用"."符號,后跟該類的名稱
避免使用數字來命名id和class
.mytext{
color:black;
設置class="mytext"的文本顏色為黑色
●這些選擇器用于選擇另一個元素的后代的元素.選擇后代的層級時,你可以根據需要選擇盡可能多的層級
例如,要僅定位"intro"部分第一段中的<em>元素
html部分:
<div id="intro">
<p class="first">這是一個<em>段落.</em></p>
<p>這是第二個段落.</p>
</div>
<p class="first">這個段落不在intro部分</p>
<p>這個段落也不在intro部分</p>
css部分:
#intro .first em{
color:pink;
background-color:gray;
因此,只有選中的元素<em>會受到影響.
#test p{
color:red;
上邊的例子:為屬于id="test"的元素的所有段落設置顏色為紅色.
四 css注釋
/* 這是一個注釋 */ 注釋用于解釋你的代碼 ,瀏覽器會自動忽略注釋 .類似于java中的多行注釋
五 css的級聯與繼承
頁面的最終外觀是不同的樣式結合的結果
通過樣式的三個主要來源形成一個級聯:
●由頁面的作者創建的樣式表
●瀏覽器的默認樣式
●用戶自定義的樣式
繼承是指屬性在頁面上的流動方式.除非另有定義,子元素通常會繼承父元素的特征
例如:
<html>
<head>
<style>
body{
color:green;
font-family:Arial;
</style>
</head>
<body>
<p>
路人甲
</p>
</body>
</html>
結果:路人甲的顏色為綠色,樣式效果和它的父元素<body>是一樣的
由于段落標記(子元素)位于正文標記(父元素)內,因此它將采用指定給正文標記的任何樣式.
到此，關于“css規則與選擇器的知識點有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
