前端学习-CSS-01-CSS基础认知
<p><strong>学习时间：2022.11.06</strong></p><h2 id="css基础认知">CSS基础认知</h2>
<h3 id="css初识">CSS初识</h3>
<pre><code class="language-html"><!-- 01-CSS初识.html -->
<!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>CSS初识</title>
<style>
/* CSS注释 */
/* 这里写的都是CSS */
/* 选择器{CSS属性} */
/* 选择器作用：查找标签 */
p {
/* 文字颜色变为蓝色 */
color: blue;
/* 字变大 px指像素 */
font-size: 60px;
/* 背景颜色 */
background-color: aqua;
/* 改变宽度高度 */
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
</body>
</html>
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/3028374/202211/3028374-20221107205351895-149079089.png"></p>
<h3 id="css引入方式">CSS引入方式</h3>
<table>
<thead>
<tr>
<th>引入方式</th>
<th>书写位置</th>
<th>作用范围</th>
<th>使用场景</th>
</tr>
</thead>
<tbody>
<tr>
<td>内嵌式</td>
<td>style标签中</td>
<td>当前页面</td>
<td>小案例</td>
</tr>
<tr>
<td>外联式</td>
<td>独立的CSS文件中，通过link标签引用</td>
<td>多个页面</td>
<td>项目</td>
</tr>
<tr>
<td>行内式</td>
<td>标签的style属性中</td>
<td>当前标签</td>
<td>配合js使用</td>
</tr>
</tbody>
</table>
<h4 id="内嵌式">内嵌式</h4>
<p>CSS初识部分代码即内嵌式</p>
<h4 id="外联式和行内式">外联式和行内式</h4>
<pre><code class="language-html"><!-- 02-CSS外联式和行内式.html -->
<!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>
<!-- 这里链入外部css文件 -->
<!-- stylesheet是样式表 -->
<link rel="stylesheet" href="./02-外联式.css">
</head>
<body>
<p>这是一个p标签</p>
<!-- 这里用行内式 -->
<div style="color: blue;">这是一个div标签</div>
</body>
</html>
</code></pre>
<pre><code class="language-css">/* 02-外联式.css */
p {
color: green;
font-size: 40px;
}
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/3028374/202211/3028374-20221107205436063-143331390.png"></p><br><br>
来源：https://www.cnblogs.com/ayubene/p/16867450.html
頁:
[1]