一.CSS基础
1.1 什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS: 表现 (美化网页)
二.CSS入门
2.1 CSS快速入门
1.在idea中创建一个新项目
2.将项目建成如下形式
3.在css文件夹中创建样式文件style.css
h1{
color: cornflowerblue;
}
4.在index.html中使用link标签与css文件连接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
此时的效果：
没有css：
有css：
总结：css最好独立于html
语法：
<!-- 语法：
选择器{
statement;
statement;
statement;
}
-->
2.2 CSS导入方式
1.行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习2</title>
</head>
<body>
<!--行内样式，在标签元素中编写一个style属性，编写样式即可-->
<h1 style="color: cornflowerblue">我是h1</h1>
</body>
</html>
行内样式在行内直接编写style属性，但是不符合css独立于html的思想。
2.内部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习2</title>
<!-- 内部样式-->
<style>
h1{
color: cadetblue;
}
</style>
</head>
<body>
<!--行内样式，在标签元素中编写一个style属性，编写样式即可-->
<h1 style="color: cornflowerblue">我是h1</h1>
</body>
</html>
head中的style标签是内部样式
此时代码中有两个样式，行内样式为
内部样式为
打开网页，发现：
显示为行内样式。
将行内样式去除，网页显示为：
结论：行内样式优先度高于内部样式
3.外部样式
h1{
color: yellow;
}
最终的优先级结论：
就近原则
4.拓展（导入式）
使用@import
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
@import url("css/style.css");
</style>
</head>
<body>
<h1>css学习</h1>
</body>
</html>
先显示结构，后渲染，会导致一些问题。（css2.1）
三.选择器
作用：选择页面上的某一个或者某一类元素
2.1基本选择器
1.标签选择器：选择一类标签
语法：
h1{
color: darkslategray;
background: cyan;
border-radius: 10px;
}
p{
font-size: 80px;
}
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
/*
标签选择器，会选择到页面上所有这个标签的元素
*/
h1{
color: darkslategray;
background: cyan;
border-radius: 10px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>开心每一天</h1>
<p>小宋的css学习</p>
</body>
</html>
效果：
2.类选择器（class）：选择所有class属性一致的标签
语法：
/*
格式：
.(class的名称){
statements;
}
好处，可以多个标签归类，是同一个class时可以复用。
*/
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小宋的CSS学习</title>
<style>
.c2{
background-color: cornflowerblue;
color: darkslategray;
border-radius: 10px;
}
.c3{
color: burlywood;
}
</style>
</head>
<body>
<h1 class="c1">大标题1</h1>
<h1 class="c2">大标题2</h1>
<h1 class="c3">大标题3</h1>
<p class="c2">内容1</p>
</body>
</html>
效果：
3.id选择器：全局唯一
语法：
/*
id选择器语法
#id名称{
statements;
}
id必须保证全局唯一
*/
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css学习</title>
<style>
#sdawqe{
color: cornflowerblue;
background-color: cadetblue;
}
#smy{
background-color: aquamarine;
}
#0003{
background-color: burlywood;
}
</style>
</head>
<body>
<h1 id="sdawqe">标题一</h1>
<h1 id="smy">标题二</h1>
<h1 id="0003">标题三</h1>
</body>
</html>
效果：
注：
在id选择器中，id=""中开头不能为数字，因为在这里id需要遵守变量命名规范，相当于在内存中创建一个类为id的变量。
border-radius可以使背景的边缘变圆滑。
优先级：id选择器>类选择器>标签选择器