假期作业16

最新推荐文章于 2021-07-01 13:02:06 发布

雪无地

最新推荐文章于 2021-07-01 13:02:06 发布

阅读量106

点赞数 1

第四章

1.CSS概念
CSS的优势
内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录

2.CSS语法规则，使用<style>标签引入CSS样式

<style type="text/css">
h1 {
	font-size:12px;
	color:#F00;
}
</style>

//选择器 { 声明1;
//         声明2;
//         ……  }

3.HTML中引入CSS样式
链接式与导入式的区别
<link/>标签属于XHTML，@import是属于CSS2.1
使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

CSS样式优先级
行内样式>内部样式表>外部样式表

行内样式

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>

内部样式表

<style>
        h1{color: green; }
</style>

//CSS代码写在<head>的<style>标签中
//优点
//方便在同页面中修改样式
//缺点
//不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底

外部样式表

CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式
链接式

<head>
  ……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>

导入式@import

<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>

4.CSS3的选择器
基本选择器
标签选择器
HTML标签作为标签选择器的名称 <h1>…<h6>、<p>、<img>

类选择器
<style type="text/css">
.cat{
	font-size:12px;
	color:#F00;
}
</style>
<h1 class= "cat">标签内容</h1>

ID选择器

<style type="text/css">
#cat{
	font-size:12px;
	color:#F00;
}
</style>
<h1 id= "cat">标签内容</h1>

基本选择器的优先级
ID选择器>类选择器>标签选择器

高级选择器
层次选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

语法：

 body p{  background: red; } //后代选择器
 body>p{  background: pink;  } //子选择器
 .active+p {  background: green;  } //相邻兄弟选择器
 .active~p{  background: yellow;  } //通用兄弟选择器

结构伪类选择器

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

使用E F:nth-child(n)和E F:nth-of-type(n)的关键点
E F:nth-child(n)在父级里从一个元素开始查找，不分类型
E F:nth-of-type(n)在父级里先看类型，再看位置

属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配