1. CSS-------层叠样式表(Cascading Style Sheet)
-
- 为什么使用CSS??
美化---使网页更美观,更漂亮!
-
- CSS的优势:
- 内容和表现分离
- 网页的表现单一,容易修改
- 丰富的样式,是页面布局更加灵活
- 减少网页的代码量,增加网页的浏览速度,节省网络带宽
- 运用独立于页面的CSS,有利于网页被搜索引擎收录
- CSS语法规则
- CSS的优势:
- style标签
- 网页中引用CSS样式表
- 行内样式
-
- 内部样式表
- CSS代码写在<head>的<style>标签中
- 优点
- 内部样式表
方便在同页面中修改样式
3.缺点
不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底
-
- 外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表,有两种方式
链接式
导入式
-
-
- 连接式----建议使用
-
<link rel=”stylesheet” hery=”样式文件的路径”/>
-
-
- 导入式
-
<style>
@import “css/types.css”;
</style>
链接式与导入式的区别
1 <link/>标签属于XHTML,@import是属于CSS2.1
2 使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示
3 使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当 中
4 @import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的
CSS样式优先级:
行内样式>内部样式表>外部样式表
就近原则
- 怎么用:
- 内部样式表
<style></style>
-
- 内联样式
<p style=””></p>
-
- 外部样式表
创建一一个外部的CSS文件:*.class ,把样式卸载文件中
谁想用这个样式,谁就引入这个class文件即可
ID选择器 > class类选择器 > 标签选择器的优先级
14. 标签选择器:
选择器写法和标签是一致的,所有的这些标签会使用同一的样式
选择器{
声明1;---------属性: 值
声明2;---------属性: 值
声明1;---------属性: 值
}
实例:
h1{
font-size:12px;
color:#F00; }
15.类选择器:
如果有个别某些h1不想使用这个样式怎么办?—》肯定不能使用h1这个标签选择器。
如果某些段落p也不想使用p1这个样式怎么办?
使用语法:
.red{
color:red;
}
实例:
<h1 class=”red”></h1>
注意:.red在声明的时候才有点“.” ;在使用的时候没有
- ID选择器
作用:让某一元素使用特定的样式。
用法:id=“ ”
#green{
color:#00ff00;
}
<p id=”green”></p>
补充:
class注释 /**/
颜色:
- 使用英文单词:red yellow blue green
- 使用十六进制数字表示 0~9 ABCDEDF
暖色调 冷色调
00 ff 00
RGB=Red Green Blue
CSS的高级选择器:
层次选择器
结构伪类选择器
属性选择器
层次选择器
结构类选择器
小结:
使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
E F:nth-child(n)在父级里从一个元素开始查找,不分类型
E F:nth-of-type(n)在父级里先看类型,再看位置
属性选择器
语法:
E[attr]属性选择器 a[id] { background: yellow; }
E[attr=val]属性选择器 a[id=first] { background: red; }
E[attr=val]属性选择器 a[id=first] { background: red; }
注意:E[attr=val]属性选择器中,属性和属性值必须完全匹配才能被选中
E[attr*=val]属性选择器 a[class*=links] { background: red; }
E[attr^=val]属性选择器 a[href^=http] { background: red; }
E[attr$=val]属性选择器 a[href$=png] { background: red; }
- <iframe>内联框架:
语法:
<iframe src="path" name="mainFrame" ></iframe>
path--------------------引用页面地址
mainFrame-----------框架标识名
提示:
可以设置src的属性值为http://www.bdqn.cn,在这个页面中也可以打开一个线上的网页。
<iframe>属性(实现页面间的相互跳转):
- 在被打开的框架上加name属性:
<iframe name="mainFrame" src="subframe/the_second.html" />
------------有的浏览器需要以</iframe>结尾
- 在超链接上设置target目标窗口属性为希望显示的框架窗口名:
<a href="subframe/the_second.html " target="mainFrame">下边显示第二页</a>