作者:码天下 | 来源:互联网 | 2018-03-01 10:22
CSS实现和选择器本课内容:一、实现CSS四种方式1,每个html标签中都有一个style样式属性,该属性的值就是css代码。(针对一个标签)2,使用style标签的方式。一般都定义在head标签中。(针对多个相同的标签)3,当多个页面使用相同样式时,可将样式单独封装为CSS文件导入<styletype”textcss”>@importurl(“1.css”);<
CSS实现和选择器
本课内容:
一、实现CSS四种方式
1,每个html标签中都有一个style样式属性,该属性的值就是css代码。(针对一个标签)
2,使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签)
3,当多个页面使用相同样式时,可将样式单独封装为CSS文件导入
4,通过HTML头标签中的link标签链接一个CSS文件
二、选择器
标签选择器 p{}
类选择器 .haha
id选择器 #qq (id的取值在页面中是唯一的,因为该属性除了给CSS使用,还要给Javascript使用)
类选择器和id选择器用法一样,id选择器的优先级比类选择器高,优先级越少越高
三、CSS笔记
css:将网页内容和显示样式进行分离,提高了显示功能。
CSS层叠样式表cascading style sheets
将网页中的样式单独分离出来,完全由CSS控制,增强样式复用性和扩展性。
格式:选择器{属性名:属性值;属性名:属性值;……}
CSS与HTML结合的4中方式:
1、每个HTML标签都有style属性
2、当页面中有多个标签具有相同样式时,可定义style标签封装样式以复用
3、当多个页面使用相同样式时,可将样式单独封装为CSS文件导入
4、通过HTML头标签中的link标签链接一个CSS文件
技巧:为提高样式的复用性和可扩展性,将多个样式单独定义并封装为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滤镜:通过一些代码丰富了的样式
网页设计时,DIV+CSS
DIV和P标签都属于行级区域,回车效果,SPAN标签为块级区域,无回车效果
可加border、color等属性,P标签中不要嵌套DIV标签
四、代码一
1 16 17 18 19 20 21 22 23 24 33 34 35 36 46 47 48 49 50 51 52 62 63 64 65 66 67 这是一个p区域1
68 这是一个p区域2
69 span区域170 span区域271 这是一个段落1
72 这是一个段落2
73 74 75 76
五、代码二
伪元素选择器演示
这是一个p区域1
这是一个p区域2
span区域1span区域2这是一个段落1
这是一个段落2
以上就是实现CSS四种方式和选择器介绍的详细内容,更多请关注 第一PHP社区 其它相关文章!