0、前端三驾马车
1、什么是css3
Cascading Style Sheet
层叠:多层,说明可以通过多个样式去表现
可以理解成一个正方体,他中间穿插多层样式。
样式:具体的各种修改展示形式的表现。
表:表格
2、DIV
<style type="text/css">
div{
border: 1px red solid;
}
span{
border: 1px red solid;
}
/*
div属于块级元素,每次出现新的div标签会进行换行操作
span属于行内元素,它在出现新的span的时候不会进行换行操作
*/
</style>
<div>xxx</div>
<div>xxx</div>
<div>xxx</div>
<div>xxx</div>
<span>xxx</span>
<span>xxx</span>
<span>xxx</span>
<span>xxx</span>
效果如上图
3、css基本语法结构s
<style>
选择器 { 声明1;
声明2;
……
}
</style>
4、三种引入css的样式
1、行内样式
你好css3
<h2 style="font-size:20px; color:blue;">你好css3</h2>
即在html标签中,使用标签的style属性,直接在其中编写声明。不需要写选择器。因为我们能只会选择当前的标签
2、内部样式表
<head>
<style>
h1{
font-size: 22px;
color: brown;
}
</style>
</head>
<body>
<h1>你好css3</h1>
</body>
3、外部样式表
CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表,有两种方式
3、1
<link>引入
<link href="linkcss.css" rel="stylesheet" type="text/css"></link>
href引入路径,一下内容需要写死。rel="stylesheet" type="text/css"
3、2
@import引入
@import url("import.css");
url指向路径
链接式与导入式的区别 <link/>标签属于XHTML,<link/>标签除了引入css标签,还可以引用其他资源,如RSS。@import是属于CSS2.1 使用<link/>链接的CSS文件先加载到网页当中,再进行编译显示 使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中 @import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的
5、css引入
行内样式>内部样式表>外部样式表 就近原则
优先看权限大的,按照权限大的样式来。
6、css选择器
6、1基本选择器
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 类选择器 */
/* 当标签存在属性class并且该属性与我们写的class属性相同时,会被选择 */
/* 类选择器使用“"."+class的名称”这种形式 */
.redcolor{
font-size: 22px;
color: red;
}
.bluecolor{
font-size: 22px;
color: blue;
}
/* id选择器 */
/* 当标签存在属性id并且该属性与我们写的id属性相同时,会被选择 */
/* id选择器使用“"#"+id的名称”这种形式 */
#h1id1{
color: pink;
}
/* 标签选择器 */
h1{
color: yellow;
}
</style>
</head>
<body>
<h1 class="redcolor">你好css</h1>
<h2 class="bluecolor">你好css</h2>
<h3>你好css</h3>
<h1 id="h1id1" class="redcolor">你好css</h1>
<h2>你好css</h2>
<h3>你好css</h3>
</body>
无论是哪种方式引入CSS样式,一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
color: red;
}
.ye{
color:yellow;
}
#d6h{
color:blue;
}
</style>
</head>
<body>
<div>
制作影视简介,<span>标题使用标签</span>,其他文本均放在段落标签中,超链接使用,图片使用<br/>
制作影视简介,<span class="ye">标题使用标签</span>,其他文本均放在段落标签中,超链接使用,图片使用<br/>
制作影视简介,<span>标题使用标签</span>,其他文本均放在段落标签中,超链接使用,图片使用<br/>
制作影视简介,<span class="ye">标题使用标签</span>,其他文本均放在段落标签中,超链接使用,图片使用<br/>
制作影视简介,<span>标题使用标签</span>,其他文本均放在段落标签中,超链接使用,图片使用<br/>
制作影视简介,<span class="ye" id="d6h">标题使用标签</span>,其他文本均放在段落标签中,超链接使用,图片使用<br/>
制作影视简介,<span>标题使用标签</span>,其他文本均放在段落标签中,超链接使用,图片使用<br/>
制作影视简介,<span class="ye">标题使用标签</span>,其他文本均放在段落标签中,超链接使用,图片使用<br/>
</div>
</body>
<style>
span {
color: red;
}
.ye{
font-size: 30px;
}
#d6h{
font-family: "宋体";
}
</style>
</head>
<body>
<div>
制作影视简介,<span>标题使用标签</span>,其他文本均放在段落标签中,超链接使用,图片使用<br/>
制作影视简介,<span class="ye">标题使用标签</span>,其他文本均放在段落标签中,超链接使用,图片使用<br/>
制作影视简介,<span>标题使用标签</span>,其他文本均放在段落标签中,超链接使用,图片使用<br/>
制作影视简介,<span class="ye">标题使用标签</span>,其他文本均放在段落标签中,超链接使用,图片使用<br/>
制作影视简介,<span>标题使用标签</span>,其他文本均放在段落标签中,超链接使用,图片使用<br/>
制作影视简介,<span class="ye" id="d6h">标题使用标签</span>,其他文本均放在段落标签中,超链接使用,图片使用<br/>
制作影视简介,<span>标题使用标签</span>,其他文本均放在段落标签中,超链接使用,图片使用<br/>
制作影视简介,<span class="ye">标题使用标签</span>,其他文本均放在段落标签中,超链接使用,图片使用<br/>
</div>
</body>
6、2高级选择器
后代选择器
<style>
div h1{
color: red;
}
</style>
</head>
<body>
<h1>test123123</h1>
<div><h1>test123123</h1></div>
</body>
只需要被包裹,无论中间是否被其他的标签包裹,此时俩种颜色都会变成红色
子类选择器
<style>
body>h1{
color: red;
}
</style>
</head>
<body>
<h1>test123123</h1>
<div><h1>test123123</h1></div>
</body>
必须要上一级的标签是指定的第一个元素。此时只有第一个变成红色,因为第二个中间还有一层<div>
"他不是body的儿子,他是body的孙子"
所以不会被选中
相邻兄弟选择器
<style>
.active+h1{
color: red;
}
</style>
</head>
<body>
<h1 class="active">test123123</h1>
<div>
<h1 class="active">
test1
</h1>
<h1 class="active">
test2变色
</h1>
<h1>
test3变色
</h1>
<h1 class="active">
test4
</h1>
<h1>
test5变色
</h1>
<h1>
test6
</h1>
</div>
</body>
首先自身需要满足第二个条件(条件可以是任何的基本选择器),其次要求他紧贴着上面的那个元素是满足第一个条件(要求为同一个”辈分“)。
通用兄弟选择器
<style>
.active~h1{
color: red;
}
</style>
</head>
<body>
<h1 class="active">test123123</h1>
<div>
<h1 class="active">
test1
</h1>
<h1 class="active">
test2变色
</h1>
<h1>
test3变色
</h1>
<h1 class="active">
test4
</h1>
<h2>
test5他是h2标签
</h2>
<h1>
test6
</h1>
</div>
</body>
和相邻兄弟选择器不同,只要满足第一个条件之后的并且自身满足第二个条件,就会被选择
6、2、2 、伪类选择器
首元素选择器
<style>
h1:first-child{
color:red;
}
</style>
<!--
只有test01变色了,因为只有test01包裹的h1
同是满足即使当前包裹情况的第一个元素,又是h1标签
所以只有他变色
-->
</head>
<body>
<div>
<h1>test01</h1>
<h1>test02</h1>
<h1>test03</h1>
<h1>test04</h1>
<h1>test05</h1>
</div>
<h1>test01</h1>
<div>
<h2>test06</h2>
<h1>test07</h1>
</div>
</body>
最后一个元素选择器
<style>
h1:last-child{
color:blue;
}
</style>
</head>
<body>
<div>
<h1>test01</h1>
<h1>test02</h1>
<h1>test03</h1>
<h1>test04</h1>
<h1>test05</h1>
</div>
<h1>test01</h1>
<div>
<h2>test06</h2>
<h1>test07</h1>
</div>
</body>
<body>标签中的最后一个元素不会被选中
first-child与first-of-type的区别
E:first-child是找到第一个元素,是否是满足的类型(E)。
E:first-of-type是优先寻找所有的E类型,之后去将找到的第一个给渲染。
6、2、3、属性选择器
<style>
input[name*="ord"]{
color:red;
}
</style>
</head>
<body>
<input type="text" name="userName"/>
<input type="text" name="userPassWord"/>
<input type="text" name="petNmae"/>
</body>