代码拉取完成，页面将自动刷新
1.1.CSS简述
CSS：层叠样式表(英文全称：Cascading Style Sheets)：是一种用来表现HTML样式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
1.2.为什么需要CSS样式表
是为了实现内容与样式的分离。
●HTML：负责页面的结构和内容，
●CSS：样式表负责页面外观的渲染（相当于华丽的衣服）。
CSS的特性：
1内容与表现分离
2网页的表现统一，容易修改
3丰富的样式，使得页面布局更加灵活
4减少网页的代码量，增加网页的浏览速度，节省网络带宽
5运用独立于页面的CSS，有利于网页被搜索引擎收录
6由浏览器解释运行
7不区分大小写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内样式</title>
</head>
<body>
<h1>
<font color="red">老妹儿01</font>
</h1>
<h1>
<font color="red">老妹儿02</font>
</h1>
<h1>
<font color="red">老妹儿03</font>
</h1>
<h1 style="color: green;">哥哥01</h1>
<h1 style="color: green;">哥哥02</h1>
<h1 style="color: green;">哥哥03</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部样式</title>
<style>
h1{
color: green;
font-size: 100px;
background-color: blue;
}
</style>
</head>
<body>
<h1>哥哥01</h1>
<!--
当多个css样式作用于同一个标签的时候
根据就近原则显示
-->
<h1 style="color: white; background-color: black;">哥哥02</h1>
<h1>哥哥03</h1>
</body>
</html>
在css目录下新建一个css文件03.css
将css样式写在css/03.css文件内
h3{
font-size: 100px;
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式</title>
<style>
h3{
color: green;
}
</style>
<!-- 在网页内引入外部css样式作用于本页面 -->
<link rel="stylesheet" href="./css/03.css">
</head>
<body>
<h3>老妹儿01</h3>
<h3>老妹儿02</h3>
<h3>老妹儿03</h3>
</body>
</html>
2.1.0.4 import
common.css
body{
background-color: red;
}
引入common.css
@import url(./common.css);
h3{
font-size: 100px;
color: '#00FF00';
}
在页面上使用时，通常在head部分写入style标签，样式代码放在style标签中。
CSS基本语法：
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手