本課內容:
1,每個html標籤中都有一個style樣式屬性,該屬性的值就是css程式碼。 (針對一個標籤)
2,使用style標籤的方式。 一般都定義在head標籤中。 (針對多個相同的標籤)
3,當多個頁面使用相同樣式時,可將樣式單獨封裝為CSS檔案匯入
4,透過HTML頭標籤中的link標籤連結一個CSS檔案
標籤選擇器 div{}
類別選擇器 .haha
id選擇器 #qq (id的取值在頁面中是唯一的,因為該屬性除了給CSS使用,還要給javascript使用)
類別選擇器和id選擇器用法一樣,id選擇器的優先權比類別選擇器高,優先權越少越高
#
css:網頁內容和顯示器樣式分開,提升了顯示功能。
CSS層疊樣式表cascading style sheets
# 將網頁中的樣式單獨分離出來,完全由CSS控制,並增強樣式重複使用性與擴充性。
格式:選擇器{屬性名稱:屬性值;屬性名稱:屬性值;…}
CSS與HTML結合的4中方式:
#1、每個HTML標籤都有style屬性
2、當頁面中有多個標籤具有相同樣式時,可定義style標籤封裝樣式以復用
3、當多個頁面使用相同樣式時,可將樣式單獨封裝為CSS檔案匯入
4、透過HTML頭標籤中的link標籤連結一個CSS檔案
#
技巧:為提高樣式的複用性和可擴展性,將多個樣式單獨定義並封裝為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
## 刪除超連結預設底線:text-decoration:none# :first-letter p:first-line p:first-line ‧
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 class="haha">这是一个div区域2</div>69 <span>span区域1</span>70 <span>span区域2</span>71 <p>这是一个段落1</p>72 <p>这是一个段落2</p>73 74 75 </body>76 </html>
<!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); div{ 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标签中 优先级:标签选择器<类选择器<id选择器<style属性 --><div id="qq">这是一个div<b>区域</b>1</div><div class="haha" id="qq">这是一个div区域2</div><span>span<b>区域</b>1</span><span class="haha">span区域2</span><p>这是一个段落1</p><p class="haha">这是一个段落2</p></body></html>
以上是實現CSS四種方式與選擇器介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!