CSS如何實作和選擇器的範例程式碼分享
- 黄舟原創
- 2017-06-04 11:45:251382瀏覽
CSS實作與選擇器
本課內容：
一、實作CSS四種方式
1，每個html標籤#中都有一個style樣式屬性，該屬性的值就是css程式碼。 (針對一個標籤)
2，使用style標籤的方式。 一般都定義在head標籤中。 (針對多個相同的標籤)
3，當多個頁面使用相同樣式時，可將樣式單獨封裝為CSS檔案匯入
9880ce4e05bc1beba2397573e1aa0805@import url(“1.css”);531ac245ce3e4fe3d50054a55f265927
4，透過HTML頭標籤中的link標籤連結一個CSS檔案
358efb129a2e81c3a12ecdf177968061
#二、選擇器
標籤選擇器 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、為元素選擇器：元素的狀態 如超連結的預設狀態、點選狀態、懸停狀態等等。
删除超链接默认下划线：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>五、代码二
06ec0da0662b81b627d11320d6a4fb2d0f3eabac747cdf61a51589c5584ae6e8
b2386ffb911b14667cb8f0f91ea547a7无标题文档6e916e0f7d1e588d4f442bf645aedb2f513977f72c8b82327f1824abcf935081
46d5fe1c7617e3914f214aaf043f4ccf/*@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*/531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d3e0bbf3d1134cd26a111abe10200bc543e0bbf3d1134cd26a111abe10200bc54
cdcaaee4c9b94464012808ae8e1b67a4e78e5c9c377b77d69dde185bfc3c8b9c伪元素选择器演示5db79b134e9f6b82c0b36e0489ee08edcdcaaee4c9b94464012808ae8e1b67a4
2fed77d005fcf32fa800c5b796f623ba
a1d1e34741b1023c91014f88114a0fce这是一个pa4b561c25d9afb9ac8dc4d70affff419区域0d36329ec37a2cc24d42c7229b69747a194b3e26ee717c64999d7867364b1b4a3
09cf2dde204ba4b4bc44bbca1e10d69a这是一个p区域294b3e26ee717c64999d7867364b1b4a3
45a2772a6b6107b401db3c9b82c049c2spana4b561c25d9afb9ac8dc4d70affff419区域0d36329ec37a2cc24d42c7229b69747a154bdf357c58b8a65c66d7c19c8e4d114
d93be627cf66ed4f811209a75bc3477fspan区域254bdf357c58b8a65c66d7c19c8e4d114
e388a4556c0f65e1904146cc1a846bee这是一个段落194b3e26ee717c64999d7867364b1b4a3
1c10a5d70aec9f56ea5abb290ee967f3这是一个段落294b3e26ee717c64999d7867364b1b4a336cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e
以上是CSS如何實作和選擇器的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！