CSS——CSS的引用（内联、嵌入、外部的区别）、CSS三个选择器的区别、背景的定义、文本的修饰

最新推荐文章于 2022-12-05 20:28:59 发布

@班

最新推荐文章于 2022-12-05 20:28:59 发布

阅读量583

点赞数 1

分类专栏： css 文章标签：内联、嵌入、外部的区别 ID选择器、类选择器、标签选择器的区别背景的定义和修饰文本修饰

本文链接：https://blog.csdn.net/weixin_43273271/article/details/100762092

版权

什么是CSS

CSS即层叠样式表
定义如何显示HTML元素
多个样式的定义可以层叠为1个

CSS的引用方式

CSS有三种引用方式：内联样式、内部样式、外部样式。

内联样式

内联样式也叫行间样式，它是直接写在标签内部的style属性中
示例：

<p style="color: blue;font-size: 30px">这是一个内联样式</p>

嵌入样式

嵌入样式是将CSS代码集中写在html文档的头部标签<head>中,并用style标签来定义。
在这里插入图片描述

外部样式

外部样式，是将CSS代码单独写在一个或多个css文件中,再通过引用这个文件（在head标签中引用），从而将CSS样式应用在这个网页中。
引用方法：<link type="" href="" rel="">注意用空格隔开
在这里插入图片描述

CSS文件

CSS文件是将网站或网页的部分（或全部）CSS样式集中放在这个文件中，在一个网站项目中可以有一个或多个CSS文件，这样也方便网站样式的管理。
CSS文件是以.css为扩展名，下图就是一个CSS文件。
在这里插入图片描述
可以在CSS文件中直接写入CSS样式例如下图这样

语法

css的语法格式为：选择器{ 属性名1:属性值;属性名2:属性值;属性名3:属性值;...}
例如：
在这里插入图片描述

注释：

html有注释，那当然css也有注释
语法：/*注释内容写在这里*/
示例：

body{
        /*网页文字颜色为红色*/
        color: red;
        /*网页文字水平居中显示*/
        text-align: center;
    }

CSS选择器

我们常用的有标签选择器、类选择器、ID选择器

标签选择器

标签选择器即是选择HTML标签对其进行CSS样式描述，例如body、p、img等等，这些都是HTML中的标签，
标签选择器直接作用在标签上，例如如果一个网页中有多个<p></p>标签，然后使用了了标签选择器对p进行添加CSS样式，则这个网页的所有p都会有这个CSS样式。
案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--CSS样式  嵌入式-->
    <style type="text/css">
        /*标签选择器，选择标签p*/
        p{
    
            color: red;/*段落文字颜色为红色*/
            font-size: 18px;/*文字字体为18px*/
        }
    </style>
</head>
<body>
<p>这里是第1个p标签</p>
<p>这里是第2个p标签</p>
<p>这里是第3个p标签</p>
<p>这里是第4个p标签</p>
</body>
</html>

类选择器

在HTML标签中，我们常常会用到一个属性那就是class这个属性是将标签进行分类，class的值一样那么就将它们分为一组。
类选择器就是对class进行样式美化，选择的格式为：.class值。
举个栗子：我们有5个p标签，但想实现第1个和第3个p标签中的文字颜色为红色，其他的标签颜色为蓝色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--CSS样式  嵌入式-->
    <style type="text/css">
        /*类选择器*/
        .groupRed{
     /*选择了groupRed类（即第1个和第3个p标签），并对其进行样式描述*/
            color: red; /*文字颜色为红色*/
        }
        .groupBlue{
    /*选择了groupBlue类（即第2个、第4个和第5个p标签），并对其进行样式描述*/
            color: blue; /*文字颜色为蓝色*/
        }
        /*需要注意的是类选择器是以英文符号点（.）开头*/
    </style>
</head>
<body>
<p class="groupRed">这里是第1个p标签</p>
<p class="groupBlue">这里是第2个p标签</p>