2020-09-22 CSS的学习1

最新推荐文章于 2024-07-19 06:00:00 发布

努力学习前端的小朋友

最新推荐文章于 2024-07-19 06:00:00 发布

阅读量235

点赞数

CC 4.0 BY-SA版权

文章标签： css css3

本文链接：https://blog.csdn.net/weixin_45665275/article/details/108738366

本文介绍了CSS的基础知识，包括如何使用不同的方式应用样式，如外部样式表、内部样式表和行内样式，以及各种选择器的使用方法，如标签选择器、类选择器和ID选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS第一天

前言

CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档（可以是标记语言 HTML，也可以是XML）的语言，可以将文档以更优雅的形式呈现给用户。

以下是本篇文章正文内容，下面案例可供参考

一、CSS声明

CSS语言的核心功能就是为特定的属性设定特定的值，CSS引擎通过计算出声明的每个属性来显示元素。CSS的属性和值都是大小写敏感的。属性与值通过 “:”分隔开。并不是所有的值都适用于同一个属性，不同的属性有一系列不同的值。
代码如下（示例）：
在这里插入图片描述
将多个CSS声明写在一起，每个CSS声明通过“;”分隔开，最后一个css声明无需使用“;”分隔开。使用“{""}”将多个CSS声明括起来，这样就构成了一个CSS声明块。
在CSS声明块前添加一个选择器，用来指明将CSS声明应用在哪些元素上。
代码如下（示例）：
在这里插入图片描述

二、CSS应用

1.外部样式表（External stylesheet）

代码如下（示例）：

<!--html文件中-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/1.css">
    <title>Document</title>
</head>

<!--css文件中-->
@charset "utf-8";
div{
    background-color: cyan;
}

2.内部样式表（Internal stylesheet）

代码如下（示例）：

<!--html文件中-->
<head>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: aqua;
        }
    </style>
</head>
</head>

3.行内样式表（Inline styles）

代码如下（示例）：

<!--html文件中-->
<body>
    <div style="background-color: aqua;">CSS</div>
</body>

二、CSS选择器

1.标签选择器

标签选择器又叫元素选择器，换句话说，文档的元素就是最基本的选择器，使用元素名称直接选中元素即可。
代码如下（示例）：

<!--html文件中-->
<div>CSS</div>
<!--css文件中-->
div{
    background-color: cyan;
}

2.类选择器

类选择器以点"."开头，后面紧跟一个类名。类名不允许有空格，与元素中class属性的值保持一致。一个元素可以有多个class的值，每个值通过空格分割开。类名相同的元素属于一类元素。
代码如下（示例）：

<!--html文件中-->
<div class="test">CSS</div>
<!--css文件中-->
.test{
    background-color: cyan;
}

3.ID选择器

ID选择器以"#"开头，后面紧跟一个ID名，在一个文档中，ID值不能重复，因此在选择文档中唯一元素的时候该选择器比较有用。
代码如下（示例）：

<!--html文件中-->
<div id="test">CSS</div>
<!--css文件中-->
#test{
    background-color: cyan;
}