Web基础：初步认识CSS及样式表

孤心_AUTO

已于 2023-01-01 17:34:57 修改

阅读量578

点赞数 1

分类专栏： #web前端基础文章标签：前端 css javascript html

于 2023-01-01 15:37:23 首次发布

本文链接：https://blog.csdn.net/m0_73058235/article/details/128512460

版权

#web前端基础专栏收录该内容

12 篇文章 3 订阅

订阅专栏

一.初识CSS：

CSS中文称层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值

2）属性必须放在花括号中，属性与属性值用冒号链接

3）每条声明用分号结束

4）当一个属性具有多种属性值时，属性与属性值不分先后顺序

选择符{
属性1：属性值1;
属性2：属性值2;
...
}

二.CSS的使用方法：

根据CSS样式书写的样式（使用方式）的不同，CSS样式表可分为三种：

为方便讲解，下述都以改变字体颜色为例子，同时也改善使用HTML改变字体样式复杂的问题

1.内部样式表（嵌入式)：

内部样式表是写在html⻚⾯内部，是将所有的CSS代码抽取出来，单独放到⼀个 <style> 标签中，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
    h1{
        color:blue;
    }
    </style>
    <h1>111111111</h1>
    
    <h1>111111111</h1>
    
    <h1>111111111</h1>
</body>
</html>

我们尝试运行上述代码

我们发现字体的颜色真的改变了，另外为了以后书写多行代码方便使用，我们通常将CSS部分放在<head>标签中，同时也是不抢占HTML的地盘，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            color:blue;
        }
        </style>
</head>
<body>
   
</body>
</html>

通过这种方式我们可以方便的控制整个页面的元素样式设置

2.行内样式表（内联样式表）：

⾏内样式表是在元素标签内部的<style>属性中设定CSS样式,例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 style="color:aqua">111111</h1>
</body>
</html>

我们尝试运行上述代码

注：1）<style>其实是标签属性

2）双引号中间遵循CSS写法规范

3.外部样式表：

但我们书写的代码行极多的时候，为方便我们更改修饰方式，我们通常为CSS单独建立一个文件，将样式单独写到CSS⽂件中，之后把CSS⽂件引⼊到HTML⻚⾯中使⽤

引入方式：<link rel="stylesheet" href="css ⽂件路径 ">

我们新建一个文件夹，设置扩展名为.CSS,在CSS文件下写好我们修饰的代码，例如：

h1{
    color: aqua;
}

接着我们回到.html中，写好我们的代码及引入方式，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="class.css">
</head>
<body>
    <h1>1111111111</h1>
</body>
</html>

我们尝试运行上述代码

在外部样式表中的<herf>使用与超链接使用方式一致

三.CSS样式表的优先级：

在CSS中，如果我们对一个选择符的同一属性进行了多种样式表的修饰，那么CSS会默认使用的显示方法（优先级）为：行内样式表>内部样式表>外部样式表，例如：

我们尝试运行上述代码

我们发现果然是按照行内的来显示，其他两个的比较在此就不做演示了，感兴趣的小伙伴可自行尝试。

孤心_AUTO

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web基础：初步认识CSS及样式表

CSS中文称层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现或等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值2）属性必须放在花括号中，属性与属性值用冒号链接3）每条声明用分号结束4）当一个属性具有多种属性值时，属性与属性值不分先后顺序选择符{属性1：属性值1;属性2：属性值2;}
复制链接

扫一扫