第三天的学习内容是CSS，这是一种用来为HTML文件添加样式的标准。以下是一些CSS的基本用法示例：
- 内联样式：
<p style="color:blue;">这是一个蓝色的段落。</p>- 内部样式表：
<head>
<style>
p { color: red; }
</style>
</head>
<body>
<p>这是一个红色的段落。</p>
</body>- 外部样式表：
在一个单独的.css文件中：
/* style.css */
p {
color: green;
}在HTML文件中引用：
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>这是一个绿色的段落。</p>
</body>- CSS选择器：
- 标签选择器（上面示例中的
p） - 类选择器：
<style>
.center {
text-align: center;
}
</style>
<p class="center">这段文字居中显示。</p>- ID选择器：
<style>
#big {
font-size: 24px;
}
</style>
<p id="big">这段文字字号为24px。</p>- CSS盒模型：
div {
width: 300px;
padding: 10px;
border: 5px solid blue;
margin: 20px;
}- CSS Flexbox布局：
.container {
display: flex;
}
.item {
flex: 1; /* 等于flex: 1 1 0; 表示可伸缩、可收缩、不设最小宽度 */
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>- CSS Grid布局：
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
.grid-item {
border: 1px solid red;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>- CSS伪类：
a:link { color: red; }
a:visited { color: green; }
a:hover { color: hotpink; }
a:active { color: blue; }
<a href="https://example.com">访问Example.com</a>- CSS层叠：
当多个样式作用于同一元素时，具体的样式取决于选择器的特异性，以及它们在文档中的位置。后者通常意味着在HTML中越后定义的样式优先级越高。
- CSS定位：
- 静态定位（默认）
- 相对定位：
div {
position: relative;
top: 20px;
}- 绝对定位：
div {
position: absolute;
top: 10px;
}- 固定定位：
div {
position: fixed;
bottom: 0;
}- 粘性定位：
div {
position: sticky;