Web前端开发——CSS入门
CSS入门
- 一、CSS是什么？
- 二、CSS的基本语法
- 三、如何使用CSS
- 1. 内联样式
- 2. 内部样式表
- 3. 外部样式表
- 四、CSS选择器
- 1. 元素选择器
- 2. 类选择器
- 3. ID选择器
- 五、CSS的常用属性
- 1. 文本样式
- 2. 布局
- 3. 背景
一、CSS是什么？
CSS（Cascading Style Sheets）是一种和html差不多的语言，但是它的使用让页面能更优美一点。它与HTML配合使用，HTML负责网页的布局，而CSS负责美化网页。
二、CSS的基本语法
CSS的语法非常简单，由选择器和声明组成。选择器是HTML元素的名称，声明则定义了这些元素的样式。如下：
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
其中，body 是选择器，background-color 和 font-family 是属性，#f0f0f0 和 Arial, sans-serif 是值。这段代码的作用是将网页的背景颜色设置为浅灰色，并将字体设置为 Arial。
三、如何使用CSS
CSS可以通过三种方式引入到HTML中：
1. 内联样式
直接在HTML标签中使用style属性。例如：
<p style="color: red; font-size: 20px;">这是一段红色的文字</p>
这种方式简单直接，但不推荐大量使用，因为它会破坏HTML的语义化。
2. 内部样式表
将CSS代码放在HTML的标签中，用
<head>
<style>
h1 {
color: blue;
}
p {
font-size: 16px;
}
</style>
</head>
这种方式适合小型项目，但不适合大型项目，因为代码难以维护。
3. 外部样式表
将CSS代码写在一个单独的 .css 文件中，然后通过标签引入HTML。例如：
<head>
<link rel="stylesheet" href="styles.css">
</head>
在styles.css文件中：
h1 {
color: green;
}
p {
font-size: 18px;
}
这种方式是推荐的，因为它可以让HTML和CSS代码分离，便于维护和复用。
四、CSS选择器
选择器是CSS的核心，它决定了哪些HTML元素会被样式化。常见的选择器有：
1. 元素选择器
直接使用HTML元素名称。例如：
p {
color: black;
}
2. 类选择器
使用点号 . 开头 例如：
<p class="highlight">这是一段高亮文字</p>
.highlight {
background-color: yellow;
}
3. ID选择器
使用井号 # 开头。例如：
<h1 id="main-title">这是主标题</h1>
#main-title {
font-size: 30px;
}
五、CSS的常用属性
1. 文本样式
color：设置文字颜色。font-size：设置文字大小。font-family：设置字体。text-align：设置文字对齐方式。
2. 布局
width和height：设置元素的宽度和高度。margin和padding：设置外边距和内边距。border：设置边框样式。
3. 背景
background-color：设置背景颜色。background-image：设置背景图片。
本篇根据一些工具编写而成，感觉用了之后学了好多样式