系列文章目录
前端学习 01 —— HTML5
前端学习 02 —— CSS01
前端学习 02 —— CSS 02
前端学习 02 —— CSS 03
前端学习 03 —— JavaScript 01
前端学习 03 —— JavaScript 02
文章目录
1、什么是CSS
如何学习：
- CSS是什么
- CSS怎么用（快速入门）
- CSS选择器（重点+难点）
- 美化网页（文字、阴影、超连接、列表、渐变…）
- 盒子模型
- 浮动
- 定位
- 网页动画（特效）
1.1、什么是CSS
Cascading Style Sheet 即层叠级联样式表。HTML是结构，CSS是外在表现，JavaScript则是互动。CSS可以设置字体、颜色、边距、宽度、背景图片、网页定位、网页浮动等…
例如百度首页：
1.2、发展史
CSS1.0：只能美化基本的东西，加粗字体之类的
CSS2.0：DIV（块）+CSS，提出了HTML与CSS结构分离的思想，网页变得简单，
CSS2.1：浮动，定位
CSS3.0：圆角、阴影、动画… 存在浏览器兼容性~
1.3、快速入门
用IDEA创建新项目，就按正常创建Java项目那样，删除里面src目录。
下面是四种种使用CSS的方式：
-
将CSS写在HTML中（不推荐）：通过HTML的style标签，可以直接加载CSS代码。
-
另外新建CSS文件，通过HTML的link标签加载CSS文件。常用。
-
在HTML的style标签中，通过@import导入CSS文件。CSS 2.1特有，一般也不用。
-
在HTML标签中，通过style属性直接加载CSS。
它们的优先级是就近原则，即谁的代码离要操作的对象最近用谁。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个CSS</title>
<style>
h1{
color: yellow;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 style="color: red">我是一个标题</h1>
</body>
</html>
2、选择器
作用：选择页面上的某一个或某一类元素。
2.1、基本选择器
1、标签选择器：针对所有标签。
2、类选择器 class：针对所有类，即便不是一个类型也可以被复用。
3、ID 选择器：针对某个id，id是唯一的。
优先级：id选择器 > 类选择器 > 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
/*标签选择器*/
h1{
color: red;
}
/*类选择器*/
.myClass{
color: blue;
}
/*ID选择器*/
#myID{
color: yellow;
}
</style>
</head>
<body>
<h1>第一个标签</h1>
<h1 class="myClass">h1 第二个标签</h1>
<h2 class="myClass">h2 第二个标签</h2>
<h1 id="myID">第三个标签</h1>
</body>
</html>
效果如下：
2.2、层次选择器
层次选择器有四类，分别是后代选择器、子选择器、相邻兄弟选择器和通用选择器。现在先定义如下结构：p1、p2、p5、p6在同一层，p3、p4属于无序标签，其中p4没在p标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
</head>
<body>
<p>p1</p>
<p>p2</p>
<ul>
<li><p>p3</p></li>
<li>p4</li>
</ul>
<p>p5</p>
<p>p6</p>
</body>
</html>
1、后代选择器：把某个元素的后代全部选上，例如：把body后的所有p标签都选上。
/*后代选择器 中间用空格*/
body p{
color: red;
}
结果：
2、子选择器：顾名思义，只选中下一代，例如把body后的下一代p标签都选上，就不会包括p3。
/*子选择器 中间用>*/
body>p{
background: blue;
}
结果：
3、相邻兄弟选择器：把指定id或类的标签相邻的选上（这里的相邻是指代码中向下一个标签）
/*相邻兄弟标签，只会向下选择一个，可以用id或class指定*/
#brother1 + p{
background: yellow;
}
.brother2 + p{
background: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
</head>
<body>
<p id="brother1">p1</p>
<p>p2</p>
<ul>
<li><p>p3</p></li>
<li>p4</li>
</ul>
<p class="brother2">p4</p>
<p>p5</p>
</body>
</html>
结果：
4、通用选择器：类似于相邻兄弟选择器，但会向下选择全部同代的兄弟。
#brother1~p{
background: gold;
}
结果：
2.3、结构伪类选择器
伪类指的就是下面这种带冒号的选择器，先有一个类，然后再增加附带条件。有个印象就好。
/* 选中ul 的第一个子元素*/
ul li:first-child{
background: red;
}
/* 选中ul 的最后一个子元素*/
ul li:last-child{
background: blue;
}
/* 选中每个p的父类下的第一个标签，且得是p标签*/
p:nth-child(1){
background: green;
}
/* 选中父元素下的第二个p标签类型*/
p:nth-of-type(2){
background: yellow;
}
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>p1</p>
<p>p2</p>
<ul>
<li>p3</li>
<li><p>p4</p></li>
<li>p5</li>
</ul>
<p>p6</p>
<p>p7</p>
</body>
</html>
结果：
2.4、属性选择器（常用）
顾名思义，就是根据标签中的属性进行选择，包括class、id也是属性，因此属性选择器其实是class+id选择器的结合，比较强大和常用。下面举例子：
这是初始的样子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
.demo a{
background: aqua;
border-radius: 10px;
color: red;
width: 50px;
height: 50px;
display: block;
text-align: center;
text-decoration: none;
margin-bottom: 5px;
font:bold 20px/50px Arial;
}
</style>
</head>
<body class="demo">
<a href="http://www.baidu.com" class="web search" id="baidu">百度</a>
<a href="https://music.163.com/" class="web music" id="wyy">网易</a>
<a href="../1.我的第一个css程序" class="web local" id="first">本页</a>
<a href="css/image.jpg" class="file local" id="image">本图</a>
</body>
</html>
效果：
属性选择器格式：标签[ ]，括号里可以是正则表达式，也可以直接是属性。
/*选中a标签中有target属性的*/
a[target]{
color: white;
}
/*选中a标签中id为baidu的*/
a[id=baidu]{
color: yellow;
}
/*选中a标签中 class包含web的*/
a[class*="web"]{
color: black;
}
/*选中a标签中 class以local结尾的*/
a[class$="local"]{
background: blueviolet;
}
/*选中a标签中 class以file开头的*/
a[class^="file"]{
width: 70px;
}
结果：
