實現CSS四種方式和選擇器介紹

2020-03-24 17:49:24

字體：大中小

來源：轉載

供稿：網友

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屬性可選，默認設備屏幕/

二、選擇器

標簽選擇器 div{}
類選擇器 .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、div.css……在一個總的CSS文件中，使用import導入這些CSS文件，然后在HTML頁面中用link標簽將這個總的CSS文件導入即可。

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

選擇器：

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

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

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

4、擴展選擇器：

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

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

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

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

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

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

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

網頁設計時，DIV+CSS

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

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

四、代碼一

1 !-- 2 本課內容： 3 一、實現CSS四種方式 4 1，每個html標簽中都有一個style樣式屬性，該屬性的值就是css代碼。(針對一個標簽) 5 2，使用style標簽的方式。一般都定義在head標簽中。(針對多個相同的標簽) 6 3，當多個頁面使用相同樣式時，可將樣式單獨封裝為CSS文件導入 7 style type=”text/css” @import url(“1.css”); /style 8 4，通過HTML頭標簽中的link標簽鏈接一個CSS文件 9 link rel=”stylesheet” href=”1.css” media屬性可選，默認設備屏幕/ 10 二、選擇器11 標簽選擇器 div{}12 類選擇器 .haha13 id選擇器 #qq (id的取值在頁面中是唯一的，因為該屬性除了給CSS使用，還要給javascript使用)14 類選擇器和id選擇器用法一樣，id選擇器的優先級比類選擇器高，優先級越少越高 15 -- 16 !DOCTYPE html 17 html 18 head 19 meta charset= UTF-8 20 title Insert title here /title 21 !-- type指定下面的css以什么方式解析 -- 22 !--指定這兩個樣式都作用與div，所以用div后的大括號括起來-- 23 !-- css一般放在頭部，因為要預先加載，所以每個出現div的位置都已經被換了樣式 -- 24 !--25 第二種方式：26 標簽選擇器27 div{28 background-color: #000;29 color: #FFF 30 }31 32 -- 33 !-- @IMPORT url( div.css?1.1.11 第三種方式 -- 34 !-- 第四種 link -- 35 link rel= stylesheet href= div.css?1.1.11 type= text.css?1.1.11 36 style type= text/css 37 /*38 @IMPORT url(1.css);39 @IMPORT url(div.css);40 @IMPORT url(span.css);41 */42 div.haha{43 background-color: #000;44 }45 /style 46 !-- 類選擇器div.haha 優先級比標簽選擇器高約少數，優先級越高 -- 47 !-- 類選擇器不僅可以相同標簽的少部分做，還可以對不同的標簽做 -- 48 !-- div.haha中的div可以不寫，.haha，那就所有的有哈哈類的都變了 -- 49 !-- 按鈕加多套這樣的.haha實現動態樣式 -- 50 /head 51 body 52 !--53 css和html相結合的第一種方式54 1，每個html標簽中都有一個style樣式屬性，該屬性的值就是css代碼。(針對一個標簽)55 2，使用style標簽的方式。一般都定義在head標簽中。(針對多個相同的標簽)56 3，當多個頁面使用相同樣式時，可將樣式單獨封裝為CSS文件導入57 style type=”text/css” @import url(“1.css”); /style 58 4，通過HTML頭標簽中的link標簽鏈接一個CSS文件59 link rel=”stylesheet” href=”1.css” media屬性可選，默認設備屏幕/ 60 61 -- 62 !-- -- 63 64 65 !-- 樣式的重疊重復樣式一最后加載為主，不重復樣式層疊，其實都是層疊 -- 66 !-- color: #F00 為顏色的縮寫 -- 67 div style = color: #F00 這是一個div區域1 /div 68 div >

五、代碼二

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns= http://www.w3.org/1999/xhtml head meta http-equiv= Content-Type content= text/html; charset=utf-8 / title 無標題文檔 /title !--link rel= stylesheet href= 1.css?1.1.11 type= text/css /-- style type= text/css /*@import url(1.css); 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,div 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;}div: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標簽中
獨孤九賤(5)_ThinkPHP5視頻教程

ThinkPHP是國內最流行的中文PHP開發框架,也是您Web項目的最佳選擇?！禫eVb.com獨孤九賤(5)－ThinkPHP5視頻教程》課程以ThinkPHP5最新版本為例，從最基本的框架常識開始，將...