![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：完全的很好
Collection
Collection
css是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
在CSS中，html中的标签元素大体被分为三种不同的类型：
块级元素
什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 、 <li>就是块级元素。
块级元素默认独占一行！每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
内联元素
在html中，<span>、<a>、<label>、 <strong> 、<em>就是典型的内联元素（行内元素）（inline）元素。和其他元素都在一行元素的高度、宽度及顶部和底部边距不可设置元素的宽度就是它包含的文字或图片的宽度，不可改变。
CSS选择器是用来选择页面中某一个或某一组标签，它的样式声明由一个键值对组成，分别是属性名:属性值。
p{
/*文本字体颜色*/
color: red;
}
使用`<style>`标签
`<style>`标签应该始终坚持写在`<head>`标签内* `<style>`
标签中的`@import`也必须写在首行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS引入到HTML中</title>
<!-- 只对当前页面有效 -->
<style type="text/css">
p {
color: orangered;
}
</style>
</head>
<body>
<p>
我的颜色是orangered;
</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
使用`<link>`标签:
在css中使用`@import`关键字, 导入另一张样式表
注意: `@import`必须出现在第一行,否则无效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS引入到HTML中</title> <!-- 使用 link --> <link rel="stylesheet" type="text/css" href="style/mumu.css"/> </head> <body> <p> 我的颜色是orangered; </p> </body> </html>
点击 "运行实例" 按钮查看在线实例
/* 在css中使用`@import`关键字, 导入另一张样式表 */
/* 注意: `@import`必须出现在第一行,否则无效 */
@import url("style/mumu.css");
/* CSS选择器 优先级：id选择器>class选择器>元素选择器 */
/* 常用的简单选择器有5种:
* 元素选择器: */
div {
width: 200px;
}
/* * 属性选择器: `tag[property...]` */
/* * 类/class选择器: */
.class {
background: #000;
}
/* * ID选择器: ID选择器具有唯一性 */
#id {
color: #0000FF;
}
/* * 群组选择器: 多个元素使用英文“ , ” 隔开 */
p,
.active,
div {
/* 这里是样式内容 */
}
/* * 通配符选择器: */
/* 表示全部元素, 通常用在上下文选择器 */
*{}点击 "运行实例" 按钮查看在线实例
