Web前端开发——CSS入门_前端开发css是什么-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_81032013/article/details/146299584

CSS（Cascading Style Sheets）是一种和html差不多的语言，但是它的使用让页面能更优美一点。它与HTML配合使用，HTML负责网页的布局，而CSS负责美化网页。

CSS的语法非常简单，由选择器和声明组成。选择器是HTML元素的名称，声明则定义了这些元素的样式。如下：

body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

其中，body 是选择器，background-color 和 font-family 是属性，#f0f0f0 和 Arial, sans-serif 是值。这段代码的作用是将网页的背景颜色设置为浅灰色，并将字体设置为 Arial。

CSS可以通过三种方式引入到HTML中：

直接在HTML标签中使用style属性。例如：

<p style="color: red; font-size: 20px;">这是一段红色的文字</p>

这种方式简单直接，但不推荐大量使用，因为它会破坏HTML的语义化。

将CSS代码放在HTML的标签中，用

<head>
    <style>
        h1 {
            color: blue;
        }
        p {
            font-size: 16px;
        }
    </style>
</head>

这种方式适合小型项目，但不适合大型项目，因为代码难以维护。

将CSS代码写在一个单独的 .css 文件中，然后通过标签引入HTML。例如：

<head>
    <link rel="stylesheet" href="styles.css">
</head>

在styles.css文件中：

h1 {
    color: green;
}
p {
    font-size: 18px;
}

这种方式是推荐的，因为它可以让HTML和CSS代码分离，便于维护和复用。

选择器是CSS的核心，它决定了哪些HTML元素会被样式化。常见的选择器有：

直接使用HTML元素名称。例如：

p {
    color: black;
}

使用点号 . 开头例如：

<p class="highlight">这是一段高亮文字</p>

.highlight {
    background-color: yellow;
}

使用井号 # 开头。例如：

<h1 id="main-title">这是主标题</h1>

#main-title {
    font-size: 30px;
}

本篇根据一些工具编写而成，感觉用了之后学了好多样式