CSS如何實現和選擇器的示例代碼分享

來源：懂視網責編：小采時間：2020-11-27 18:51:23

CSS如何實現和選擇器的示例代碼分享

CSS如何實現和選擇器的示例代碼分享:CSS實現和選擇器本課內容：一、實現CSS四種方式1，每個html標簽中都有一個style樣式屬性，該屬性的值就是css代碼。(針對一個標簽)2，使用style標簽的方式。一般都定義在head標簽中。(針對多個相同的標簽)3，當多個頁面使用相同樣式時，可將樣式單獨封裝為C

推薦度：

點擊下載本文 文檔為doc格式

導讀CSS如何實現和選擇器的示例代碼分享:CSS實現和選擇器本課內容：一、實現CSS四種方式1，每個html標簽中都有一個style樣式屬性，該屬性的值就是css代碼。(針對一個標簽)2，使用style標簽的方式。一般都定義在head標簽中。(針對多個相同的標簽)3，當多個頁面使用相同樣式時，可將樣式單獨封裝為C

CSS實現和選擇器

本課內容：

一、實現CSS四種方式

1，每個html標簽中都有一個style樣式屬性，該屬性的值就是css代碼。(針對一個標簽)
2，使用style標簽的方式。一般都定義在head標簽中。(針對多個相同的標簽)
3，當多個頁面使用相同樣式時，可將樣式單獨封裝為CSS文件導入
<style type=”text/css”>@import url(“1.css”);</style>
4，通過HTML頭標簽中的link標簽鏈接一個CSS文件
<link rel=”stylesheet” href=”1.css” media屬性可選，默認設備屏幕/>

二、選擇器

標簽選擇器 p{}
類選擇器 .haha
id選擇器 #qq (id的取值在頁面中是唯一的，因為該屬性除了給CSS使用，還要給javascript使用)
類選擇器和id選擇器用法一樣，id選擇器的優先級比類選擇器高，優先級越少越高

三、CSS筆記

css：將網頁內容和顯示樣式進行分離，提高了顯示功能。

CSS層疊樣式表cascading style sheets

將網頁中的樣式單獨分離出來，完全由CSS控制，增強樣式復用性和擴展性。

格式：選擇器{屬性名：屬性值；屬性名：屬性值；……}

CSS與HTML結合的4中方式：

1、每個HTML標簽都有style屬性

2、當頁面中有多個標簽具有相同樣式時，可定義style標簽封裝樣式以復用

 <style type=”text/css”>css代碼</style>

3、當多個頁面使用相同樣式時，可將樣式單獨封裝為CSS文件導入

 <style type=”text/css”>@import url(“1.css”);</style>

4、通過HTML頭標簽中的link標簽鏈接一個CSS文件

 <link rel=”stylesheet” href=”1.css” media屬性可選，默認設備屏幕/>

技巧：為提高樣式的復用性和可擴展性，將多個樣式單獨定義并封裝為CSS文件，如p.css、p.css……在一個總的CSS文件中，使用import導入這些CSS文件，然后在HTML頁面中用link標簽將這個總的CSS文件導入即可。

優先級：就近原則標簽上設置的style屬性可以覆蓋其他樣式

選擇器：

1、標簽選擇器：每個HTML標簽名即為一個選擇器

2、類選擇器：標簽中的class屬性指定定義樣式要加點 js引用時用className

3、ID選擇器：標簽的id屬性，盡量保證唯一，便于JavaScript獲取元素

4、擴展選擇器：

a、關聯選擇器：標簽中的標簽 table p表示表格中的p區域

b、組合選擇器：多個選擇器逗號分隔

c、為元素選擇器：元素的狀態如超鏈接的默認狀態、點擊狀態、懸停狀態等

a:link a:visited a:hover a:active LVHA順序

刪除超鏈接默認下劃線：text-decoration：none

p:first-letter p:first-line focus:IE6不支持

CSS濾鏡：通過一些代碼豐富了的樣式

網頁設計時，p+CSS

p和P標簽都屬于行級區域，回車效果，SPAN標簽為塊級區域，無回車效果

可加border、color等屬性，P標簽中不要嵌套p標簽

四、代碼一

<!--
本課內容：
一、實現CSS四種方式
1，每個html標簽中都有一個style樣式屬性，該屬性的值就是css代碼。(針對一個標簽)
2，使用style標簽的方式。 一般都定義在head標簽中。(針對多個相同的標簽)
3，當多個頁面使用相同樣式時，可將樣式單獨封裝為CSS文件導入
 <style type=”text/css”>@import url(“1.css”);</style>
4，通過HTML頭標簽中的link標簽鏈接一個CSS文件
 <link rel=”stylesheet” href=”1.css” media屬性可選，默認設備屏幕/>
二、選擇器
標簽選擇器 div{}
類選擇器 .haha
id選擇器 #qq (id的取值在頁面中是唯一的，因為該屬性除了給CSS使用，還要給javascript使用)
類選擇器和id選擇器用法一樣，id選擇器的優先級比類選擇器高，優先級越少越高 
 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- type指定下面的css以什么方式解析 -->
<!--指定這兩個樣式都作用與div，所以用div后的大括號括起來-->
<!-- css一般放在頭部，因為要預先加載，所以每個出現div的位置都已經被換了樣式 -->
<!--
第二種方式：
標簽選擇器
div{
 background-color: #000;
 color: #FFF 
 }

 -->
<!-- @IMPORT url("div.css");第三種方式 -->
<!-- 第四種 link -->
<link rel="stylesheet" href="div.css" type="text.css">
<style type="text/css">
/*
 @IMPORT url(1.css);
 @IMPORT url(div.css);
@IMPORT url(span.css);
*/
div.haha{
 background-color: #000;
}
</style>
<!-- 類選擇器div.haha 優先級比標簽選擇器高 約少數，優先級越高 -->
<!-- 類選擇器不僅可以相同標簽的少部分做，還可以對不同的標簽做 -->
<!-- div.haha中的div可以不寫，.haha，那就所有的有哈哈類的都變了 -->
<!-- 按鈕加多套這樣的.haha實現動態樣式 -->
</head>
<body>
 <!--
 css和html相結合的第一種方式
 1，每個html標簽中都有一個style樣式屬性，該屬性的值就是css代碼。(針對一個標簽)
 2，使用style標簽的方式。 一般都定義在head標簽中。(針對多個相同的標簽)
 3，當多個頁面使用相同樣式時，可將樣式單獨封裝為CSS文件導入
 <style type=”text/css”>@import url(“1.css”);</style>
 4，通過HTML頭標簽中的link標簽鏈接一個CSS文件
 <link rel=”stylesheet” href=”1.css” media屬性可選，默認設備屏幕/>

 -->
 <!-- -->


 <!-- 樣式的重疊 重復樣式一最后加載為主，不重復樣式層疊，其實都是層疊 -->
 <!-- color: #F00 為顏色的縮寫 -->
 <div style ="color: #F00">這是一個div區域1</div>
 <div class="haha">這是一個div區域2</div>
 <span>span區域1</span>
 <span>span區域2</span>
 <p>這是一個段落1</p>
 <p>這是一個段落2</p>

 
</body>
</html>

五、代碼二

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 
<html xmlns=" 
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title><!--link rel="stylesheet" href="1.css" type="text/css" /-->
<style type="text/css">/*@import url(1.css);

p{
 background-color:#09F;
 color:#FFF;
}
.haha{
 background-color:#FF3;
 color:#0C0;
}*//*預定樣式，實現動態的加載。.hehe{
 background-color:#C93;
 color:#00F;
}*//*#qq{通常ID的取值在頁面中是唯一的，因為該屬性除了給css使用，還可以被js使用。id通常都是為了去標示頁面中一些特定區域使用的。
 background-color:#000;
 color:#FFF;
}*//*span b{關聯選擇器 選擇器中的選擇器
 background-color:#09F;
 color:#FFF;
}*//*組合選擇器*//*.haha,p b{對多種選擇器進行相同樣式定義
 background-color:#000;
 color:#C00;
}*//*偽元素

超鏈接的狀態。*//*未訪問*/a:link{
 background-color:#06F;
 color:#FFF;
 text-decoration:none;
 font-size:18px;}/*鼠標懸停*/a:hover{
 background-color:#FFF;
 color:#F00;
 font-size:24px;}/*點擊效果*/a:active{
 background-color:#000;
 color:#FFF;
 font-size:36px;}/*訪問后效果*/a:visited{
 background-color:#FF9;
 color:#000;
 text-decoration:line-through;}p:first-letter{
 font-size:36px;
 color:#F00;}p:hover{
 background-color:#F00;
 color:#FFF;}input:focus{
 background-color:#09F;}#qq{
 float:left;}/*L V H A*/</style></head><body><input type="text" /><input type="text" />
 <hr /><a href="http://www.sina.com.cn" target="_blank">偽元素選擇器演示</a><hr />

 <!--
 css和html相結合的第一種方式。
 1，每一個html標簽中都有一個style樣式屬性。該屬性的值就是css代碼。 
 2，使用style標簽的方式。 一般都定義在head標簽中
 
 
 優先級： 標簽選擇器<類選擇器<id選擇器<style屬性 
 -->

 <p id="qq">這是一個p<b>區域</b>1</p>
 <p class="haha" id="qq">這是一個p區域2</p>
 <span>span<b>區域</b>1</span>
 <span class="haha">span區域2</span>
 <p>這是一個段落1</p>
 <p class="haha">這是一個段落2</p></body></html>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com