1.CSS学习第一天
1.css是什么?
2.css怎么用(快速入门)
3.css选择器(重点+难点)
1.1什么是css
Cascading style Sheet 层叠级联样式表
Css:表现(美化网络)
字体,颜色,边框,高度,背景图片,网页定位,网页浮动…
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zwom48kL-1619614200556)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\1619606111858.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范编写css代码的地方
<style>可以编写css的代码,没一个声明最好用分号结尾
语法:
选择器:{
声明1:
声明2:
声明:3
}
-->
<!--css代码-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>阿打算</h1>
</body>
</html>
建议使用html和css分离的方式用link:相连
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zQsYyTTL-1619614200557)(C:\Users\ASUS\AppData\Roaming\Typora\typora-user-images\1619607988330.png)]
css的优点:
1.内容和表现分离
2.网页结构表现统一,可以实现复用
3.样式十分的丰富
4.建议使用独立于html的css文件
5.利用SEO,容易被搜索引擎收录
1.2CSS的三种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
h1{
color: aqua;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式 优先级:就近原则行-->
<h1 style="color: red">我是标题</h1>
</body>
</html>
链接式:
html
<!--外部样式--><link rel="stylesheet" href="css/style.css">
导入式:
是css2.1特有的
<!--导入式-->
<style>
@import url("css3/style.css");
</style>
2.选择器
作用:选择页面上那个的某一个或某一类元素
2.1基本选择器
1.标签选择器:选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器,会选择到页面上所有的整个标签的元素*/
h1{
color: bisque;
background: red;
border-radius: 13px;
}
</style>
</head>
<body>
<h1>java</h1>
<h1>人生苦短,我用python</h1>
<p>哈哈哈哈</p>
</body>
</html>
2.类选择器:class选择所有的class属性一致的标签,夸标签,类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式 .class的名称{}
好处:可以进行多个标签归类
是同一个class,可以复用
*/
.JunXing{
color: aqua;
}
.NBNB{
color: red;
}
.
</style>
</head>
<body>
<h1 class="JunXing">标题1</h1>
<h1 class="NBNB">标题2</h1>
<h1 class="NBNB">标题3</h1>
</body>
</html>
3.ID选择器:全局唯一!#id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器
#id名称{
}
id选择器不可以复用
不遵循就近原则*/
#hello{
color: red;
}
#hello3
{
color: blue;
}
.style{
color: black;
}
#hello2{
color: white;
}
</style>
</head>
<body>
<h1 class="style" id="hello">标题1</h1>
<h1 id="hello2">标题2</h1>
<h1 id="hello3">标题3</h1>
<h1 id="hello4">标题4</h1>
</body>
</html>
优先级:id>class>标签
2.2层次选择器
1.后代选择器:在某个元素的后面
/*后代选择器*/
body p{
background: blue;
}
2.相邻兄弟选择器:同辈,下一个
/*相邻兄弟选择器:只有一个并且为同一级的,向下的一个*/.active+p{
background: skyblue;
}
3.通用选择器:同辈,下面全是
/*通用兄弟选择器,当前选中元素的向下的所有兄弟元素*/
.active~p{
background: red;
}
4.子选择器:一代,儿子
/*子选择器*/body>p{ background: red;}