【CSS基础简介】
CSS引入方式及常用属性详解
引入方式
在网页开发中，CSS（层叠样式表）用于控制网页的外观和样式。在使用CSS之前，我们需要将CSS文件引入到HTML文件中。有几种常见的引入方式：
内联样式
内联样式是将CSS代码直接写在HTML标签的style属性中。这种方式适用于只有一个元素需要样式的情况，但在实际开发中不常使用，因为它与内容混合在一起，不利于维护和管理。
<p style="color: red; font-size: 16px;">这是一个内联样式的段落。</p>
内部样式表
内部样式表是将CSS代码写在HTML文件的<style>标签内部。这种方式适用于只有当前HTML文件需要样式的情况，它将CSS代码与HTML文件分离，更易于管理。
<style>
p {
color: red;
font-size: 16px;
}
</style>
外部样式表
外部样式表是将CSS代码写在一个独立的文件中，然后在HTML文件中使用<link>标签引入。这种方式适用于多个HTML文件需要共享相同样式的情况，它可以有效地实现样式的复用和统一管理。
<link rel="stylesheet" href="styles.css">
选择器
选择器用于选择要应用样式的HTML元素。CSS提供了多种选择器，可以根据元素的标签名、类名、ID等特征进行选择。
标签选择器
标签选择器是最简单的选择器，通过HTML元素的标签名选择元素。例如，使用标签选择器选择所有的段落元素：
p {
color: red;
}
类选择器
类选择器通过元素的class属性选择元素。类选择器以点（.）开头，后面跟类名。例如，使用类选择器选择类名为highlight的元素：
.highlight {
background-color: yellow;
}
ID选择器
ID选择器通过元素的id属性选择元素。ID选择器以井号（#）开头，后面跟ID名。例如，使用ID选择器选择ID为header的元素：
#header {
font-size: 24px;
}
属性选择器
属性选择器通过元素的属性选择元素。属性选择器以方括号（[]）包裹属性名，可以进一步指定属性值。例如，使用属性选择器选择具有target属性的链接元素：
a[target] {
color: blue;
}
伪类选择器
伪类选择器用于选择元素的特定状态或位置。例如，使用伪类选择器选择第一个段落元素：
p:first-of-type {
font-weight: bold;
}
文字样式
CSS提供了丰富的样式属性来控制文字的外观和样式。
字体样式
通过font-family属性可以设置字体样式，例如：
p {
font-family: Arial, sans-serif;
}
字体大小
通过font-size属性可以设置字体大小，可以使用像素、百分比或其他单位。例如：
p {
font-size: 16px;
}
文字颜色
通过color属性可以设置文字颜色，可以使用颜色名称、十六进制值或RGB值。例如：
p {
color: red;
}
文字对齐
通过text-align属性可以设置文字对齐方式，可以是左对齐、右对齐、居中对齐等。例如：
p {
text-align: center;
}
背景
通过CSS可以设置元素的背景样式。
背景颜色
通过background-color属性可以设置元素的背景颜色。例如：
body {
background-color: #f0f0f0;
}
背景图片
通过background-image属性可以设置元素的背景图片。例如：
div {
background-image: url("background.jpg");
}
背景重复
通过background-repeat属性可以设置背景图片的重复方式，可以是水平重复、垂直重复或不重复。例如：
div {
background-repeat: repeat-x;
}
背景定位
通过background-position属性可以设置背景图片的起始位置。例如：
div {
background-position: center top;
}
显示模式
CSS提供了多种显示模式，用于控制元素的布局和显示方式。
块级元素
块级元素以独立的块显示，默认情况下会在新行上开始，并且会撑满父容器的宽度。例如，<div>元素就是一个块级元素。
div {
display: block;
}
行内元素
行内元素以行内的方式显示，默认情况下不会独占一行，并且只占据它实际需要的宽度和高度。例如，<span>元素就是一个行内元素。
span {
display: inline;
}
行内块级元素
行内块级元素结合了块级元素和行内元素的特点，可以同时设置宽度、高度和外边距。例如，<img>元素就是一个行内块级元素。
img {
display: inline-block;
}
特性
CSS具有许多强大的特性，使得开发者能够更好地控制网页的样式和布局。
盒模型
CSS的盒模型是一个重要的概念，用于描述元素的尺寸和布局。它包括元素的内容、内边距、边框和外边距。通过调整这些属性，可以实现各种复杂的布局效果。
响应式设计
CSS的响应式设计使得网页能够根据不同的设备和屏幕尺寸进行自适应布局。通过使用媒体查询和弹性布局等技术，可以实现在不同设备上优雅地展示网页内容。
动画和过渡
CSS提供了动画和过渡效果的支持，可以实现元素的平滑过渡和动态效果。通过使用关键帧动画和过渡属性，可以创建各种各样的动画效果，提升用户体验。
实战项目与代码
在实际项目中，CSS的运用非常广泛。下面以一个简单的博客页面为例，演示CSS的应用。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>我的博客</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">联系我</a></li>
</ul>
</nav>
<main>
<article>
<h2>文章标题</h2>
<p>这是一篇博客文章的内容。</p>
</article>
<article>
<h2>另一篇文章标题</h2>
<p>这是另一篇博客文章的内容。</p>
</article>
</main>
<footer>
版权所有 © 2023 我的博客
</footer>
</body>
</html>
以上是HTML文件的结构，我们可以将CSS样式写在styles.css文件中。
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav {
background-color: #f0f0f0;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #333;
text-decoration: none;
}
main {
margin: 20px;
}
article {
margin-bottom: 20px;
}
h1, h2 {
color: #333;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
通过以上CSS样式，我们实现了博客页面的基本样式，包括导航菜单、文章标题和页脚等。
总结
CSS是网页开发中不可或缺的一部分，它通过引入方式、选择器、文字样式、背景和显示模式等特性，为网页提供了丰富的样式和布局控制。