web前端零基础入门
本章内容很重要，涉及知识点比较多、比较杂，需要多加练习，可以配合HTML/CSS游戏进行巩固加强
另：代码中全为英文下符号，中文是为了方便看
27. CSS简介
网页分成三个部分：
- 结构
- 表现
- 行为
CSS：Cascading Style Sheets，即层叠样式表
网页实际上是一个多层的结构，通过CSS可以分别为网页的每一层设置样式，而最终我们看到的始终只是网页最上面的一层
使用CSS修改元素样式：
方式一：内联样式，行内样式
在标签内部通过style属性来设置元素的样式
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<p style="color: red; font-size: 60px; ">通过CSS来设置文字样式</p>
</body>
</html>
28. CSS修改样式
CSS设置样式方式一存在问题：如果希望影响多个元素必须在每一个元素中复制一遍，且当样式发生变化时，需要一个一个修改
方式二：内部样式表
将样式编写到head中的style标签中
需要搭配CSS选择器使用
可以同时为多个标签设置样式，更加方便进行复用
CSS设置样式方式二存在问题：只能对一个网页起作用，无法跨页面使用样式
方式三：外部样式表
将CSS样式编写到一个外部CSS文件中
通过link标签引入外部的CSS文件
可以在不同页面进行复用，运用到浏览器的缓存机制，加快网页的加载速度，提高用户体验
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="./17.style.css">
<style>
p{
color: red;
font-size: 60px;
}
</style>
</head>
<body>
<p>通过CSS来设置文字样式</p>
<h1>通过CSS来设置文字样式</h1>
</body>
</html>
29. CSS的基本语法
在head里的style标签不属于html内部，要遵循CSS编写规范
CSS中注释/* */ vscode中 快捷键Ctrl+/
CSS基本语法：
选择器 声明块
选择器：选中页面中指定元素，比如p意味着选中页面中所有p元素
声明块：通过声明块来指定要为元素设置的样式，由一个个声明组成，为名值对结构，以冒号连接， 分号结尾，例如：color：red；
30. 常用选择器
元素选择器：
作用：根据标签名来选中指定的元素
语法：标签名{ }
例子：p{ color：red； } h1 { color：red；} div{ color：red；}
id选择器：
作用：根据元素的id属性值选中一个元素
语法：#id属性值{ }
例子：#box{ color：red； } #red{ color：red；}
【注意】id值不要重复，因为后面JavaScript调用应该只操作一个元素
类选择器：
作用：根据元素的class属性选中一组元素
语法：.class属性值{ }
例子：.blue{ color：red；}
【注意】可以同时给一个元素指定多个class属性值，空格隔开
通配选择器：
作用：选中页面中所有元素
语法：*{ }
例子：*{ color：red；}
<!DOCTYPE html>
<html lang="en">
<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>
/* */
p{
color: red;
}
#green{
color: green;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<!-- -->
<p>我是第一个标签</p>
<p id="green">我是第二个p标签</p>
<p class="blue">我是第三个p标签</p>
</body>
</html>
31. 复合选择器
交集选择器：
作用：选中同时满足多个条件的元素
语法：选择器1选择器2…选择器n{ }
例子：div.red{ color：red；}
【注意】交集选择器中如果有元素选择器，必须使用元素选择器开头
并集选择器：（选择器分组）
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，… 选择器n{ color：red；}
<!DOCTYPE html>
<html lang="en">
<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>
div.red{
color: red;
}
p,span{
color: blue;
}
</style>
</head>
<body>
<div>我是第一个div</div>
<div class="red">我是第二个div</div>
<p>我是p标签</p>
<span>我是span标签</span>
</body>
</html>
32. 关系选择器
CSS中元素关系：
- 父元素：直接包含子元素的元素
- 子元素：直接被父元素包含的元素
- 祖先元素：直接或间接包含后代元素的元素，一个元素的父元素也是它的祖先元素
- 后代元素：直接或间接被祖先元素包含的元素
- 兄弟元素：拥有相同父元素的元素
子元素选择器：
作用：选中指定父元素的指定子元素
语法：父元素>子元素
例子：div>span{ color：red；}
后代选择器：
作用：选中指定元素内的指定后代元素
语法：祖先 后代
例子：div span{ color：red；}
兄弟选择器：
语法：上一个+下一个
作用：选中下一个兄弟元素
例子：p+span{ color：red；}
【注意】紧挨着的下一个兄弟
语法：兄~第
作用：选择下边所有的兄弟元素
例子：p~span{ color：red；}
<!DOCTYPE html>
<html lang="en">
<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>
/* 子元素选择器 */
div>span{
color: red;
}
/* 后代选择器 */
div p{
color: blue;
}
/* 兄弟选择器 */
p+span{
color: yellow;
}
span~div{
color: aqua;
}
</style>
</head>
<body>
<div>
我是一个div
<p>
我是div里的第一个p元素
<span>我是p元素的第一个span</span>
</p>
<span>我是div中的第二个span元素
<p>我是div里的第二个p元素</p>
</span>
<div>我是一个div</div>
</div>
<div>
<p>我是div里的第三p元素</p>
<div>我是一个div</div>
<span>我是div中的第三个span元素</span>
<div>我是一个div</div>
</div>
</body>
</html>
【注意】1. 元素颜色会发生覆盖，由它们组成的优先级决定，具体参考下一篇文章
2. 父元素也可以是祖先元素，即使用父元素>子元素和祖先 后代可能选中是同一个子元素
33. 属性选择器
属性选择器：
作用： 根据属性名和属性值选择特定的元素
语法： [属性名]：选择含有指定属性的元素
例如：
[属性名=属性值]：选择含有指定属性和属性值的元素
[属性名^=属性值]：选择属性值以指定值开头的元素
[属性名$=属性值]：选择属性值以指定值结尾的元素
[属性名*=属性值]：选择属性值中含有某值的元素
<!DOCTYPE html>
<html lang="en">
<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>
p[titles]{
color: red;
}
p[title=c]{
color: blue;
}
p[title^=ab]{
color: green;
}
p[title$=g]{
color: aqua;
}
p[title*=3]{
color: bisque;
}
</style>
</head>
<body>
<p titles="c">今天星期一</p>
<p title="c">今天星期二</p>
<p title="abc">今天星期三</p>
<p title="asdfg">今天星期四</p>
<p title="369">今天星期五</p>
</body>
</html>
【注意】属性值如果为数字，则显示不正确，如最后一个含有3的p元素
34. 伪类选择器
问题：在结构不固定时，如何将第一个元素设置为红色？可以使用伪类来实现
伪类：（不存在的类，特殊的类）
用来描述一个元素的特殊状态
比如：第一个子元素，被点击的元素，鼠标移入的元素…
伪类一般情况下都是：开头
：first-child:：第一个子元素
：last-child：最后一个子元素
：nth-child（）：选中第n个子元素，范围1~n
特殊值：
n：选中n个
2n或even：选中偶数个
2n+1或odd：选中奇数个
：first-of-type：同类型的第一个子元素
：last-child：同类型最后一个子元素
：nth-child（）：选中同类型第n个子元素，范围1~n
：not：否定伪类，将符合条件的元素从选择器中去除
【注意】:first-child与:first-of-type区别
<!DOCTYPE html>
<html lang="en">
<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>
ul>li:first-child{
color: red;
}
ul>li:first-of-type{
color: green;
}
ul>li:not(:first-of-type){
color: blue;
}
</style>
</head>
<body>
<ul>
<span>我是span</span>
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
<li>第四个li</li>
<li>第五个li</li>
<li>第六个li</li>
</ul>
</body>
</html>
【注意】可能会发生颜色覆盖问题，需要注意它们组成的优先级，具体参考下一篇文章
35. 超链接的伪类
之前说过访问过的超链接和没访问过的超链接颜色是不一样的，因此如何区分呢？
：link：表示没访问过的超链接（正常链接），只适用于超链接
：visited：表示访问过的链接，由于隐私原因，该伪类只能设置颜色，只适用于超链接
：hover：表示鼠标移入的状态
：active：表示鼠标点击的状态
<!DOCTYPE html>
<html lang="en">
<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>
a:link{
color: red;
}
a:visited{
color: blue;
}
a:hover{
font-size: 20px;
}
a:active{
font-size: 5px;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">baidu</a>
<br>
<a href="https://www.baidu123.com">baidu</a>
</body>
</html>
36. 伪元素
伪元素：表示网页中一写特殊的并不真实存在的元素（特殊的位置），使用：：开头
：：first-letter：表示第一个字母
：：first-line：表示第一行
：：selection：表示选中的内容
：：before：元素的开始，必须结合content属性来使用
：：after：元素的最后，必须结合content
<!DOCTYPE html>
<html lang="en">
<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>
q::before{
content: '「';
}
q::after{
content: '」';
}
p::first-letter{
font-size: 10px;
}
p::first-line{
color: blue;
}
p::selection{
color: green;
}
</style>
</head>
<body>
<q>一寸光阴一寸金</q>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic illo provident maxime, facere laborum, perferendis perspiciatis, ducimus voluptatum in temporibus sed corrupti commodi id asperiores sunt atque. Harum, blanditiis alias?</p>
</body>
</html>
【注意】由CSS添加的伪元素是无法选中的
37. 餐厅练习
可以结合游戏来对HTML和CSS进行加深理解
掌握常用标签和选择器https://flukeout.github.io/
游戏玩法：根据提示选中在动的盘子或物品
下一章节将对网页盒子模型进行介绍，从此可以开始写写布局啦！