掌握前端开发：CSS基础指南

最新推荐文章于 2024-07-08 23:39:57 发布

新世纪只因战士。

最新推荐文章于 2024-07-08 23:39:57 发布

阅读量1.8k

点赞数 28

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_63769330/article/details/139689097

版权

摘要

CSS（Cascading Style Sheets）是前端开发中用于描述网页样式的语言。本文将介绍CSS的基础知识，包括选择器、属性、布局模型和常见的最佳实践。通过学习本文，您将掌握使用CSS美化网页的基本技能。

1. 引言

CSS是与HTML和JavaScript并列的前端开发三大支柱之一。它用于控制网页的外观和布局，使网页更加美观和用户友好。了解和掌握CSS的基础知识，是成为合格前端开发者的必要步骤。

2. CSS基础概念

2.1 什么是CSS

CSS是一种样式表语言，用于为HTML文档定义样式。通过将样式与内容分离，CSS使得网页设计更加灵活和高效。

2.2 CSS语法

CSS由选择器和声明块组成。声明块包含一个或多个声明，每个声明包括一个属性和一个值。

css
选择器 {
    属性: 值;
}

2.3 CSS使用方式(3种)

2.3.1 行内样式

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
    </head>
    <body>
        <p style="font-size: 16px; color: red;">大家好</p>
    </body>
</html>

2.3.2 内部样式表

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
        <style>
            p {
                font-size: 16px;
                color: red;
           }
        </style>
    </head>
    <body>
        <p>Hello everyone</p>
    </body>
</html>

2.3.3 外部样式表(链接式)

将样式写到单独的文件中，文件的扩展名为 .css 。例如， index.css 文件中有如下样式：

p {
    font-size: 16px;
    color: red;
}

然后通过 link 元素将 index.css 文件引入到页面中：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is title</title>
        <link rel="stylesheet" type="text/css" href="./css/index.css">
    </head>
    <body>
        <p>我是优秀的开发工程师</p>
    </body>
</html>

3. CSS选择器

选择器用于选择HTML元素并应用样式。常见的选择器包括：

3.1 标签选择器

选择所有指定标签的HTML元素。

p {
    color: blue;
}

3.2 类(class)选择器

选择所有带有指定类的元素。

.intro {
    font-weight: bold;
}

3.3 ID选择器

选择具有指定id的元素。

#header {
    background-color: yellow;
}