CSS样式与选择器（Python）

等猫的鱼qv

已于 2023-04-17 11:04:56 修改

阅读量775

点赞数 2

文章标签： css html css3 python

于 2023-04-16 16:38:51 首次发布

本文链接：https://blog.csdn.net/qvqqv/article/details/130181076

版权

CSS样式与选择器

摘要由CSDN通过智能技术生成

CSS基础Python

（一）CSS基础介绍与使用
- （1）CSS介绍
- （2）CSS样式及使用
（二）CSS选择器
- （1）CSS选择器介绍
- （2）选择器的种类

（一）CSS基础介绍与使用

（1）CSS介绍

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

（2）CSS样式及使用

CSS样式分为：

①行间样式（直接写在body内部的嵌套标签内）

<body>
<!--行间样式-->
<div style="width: 400px;height: 400px;background: blue">
    <div style="width: 100px;height: 100px;background: pink"></div>
    <div style="width: 100px;height: 300px;background: yellow"></div>
</div>
</body>

②内部样式（写在head内部的style 标签内）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--内部样式-->
    <style>
        /*内部样式表*/
        {
     width: 400px;height: 400px;background: blue;}
        {
     width: 200px;height: 200px;background: green;}
        {
     color:blue}

    </style>
</head>

使用是只需要在内部样式表的{}前加上对应的标签，比如p{color:blue}
③外部样式（使用外部 .css 文件）
在这里插入图片描述
首先，在WEB目录下新建一个CSS文件夹，然后新建一个所要使用的CSS文件，同样的在{}内写入内容。使用时在{}前加上标签即可。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/file.css">
</head>

写好文件后，需要在所要使用的demo文件的head中通过link来引用css文件。
运行结果：

（二）CSS选择器

（1）CSS选择器介绍

如果在html文件中有多个相同标签要用到不同的样式，这是就需要通过CSS选择器来进行筛选。CSS选择器的作用就是更加精准的给指定元素设置样式，选择器也有权重差别，当出现冲突样式的时候，选择权重大的样式。

最低0.47元/天解锁文章