CSS如何实现和选择器的示例代码分享
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>
以上就是CSS如何实现和选择器的示例代码分享的详细内容,更多请关注其它相关文章!