CSS选择器

小梁今天敲代码了吗

已于 2023-04-16 15:56:27 修改

阅读量178

点赞数

分类专栏： Python Web开发文章标签： css 前端 html

于 2023-04-14 09:21:13 首次发布

本文链接：https://blog.csdn.net/weixin_43780415/article/details/130121014

版权

Python Web开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章介绍了CSS的三种应用方式：内联样式、内部样式表和外部样式表，并展示了不同选择器的使用，包括ID选择器、类选择器、标签选择器、属性选择器和后代选择器。同时，提到了在Flask框架下开发的不便，如需频繁重启和特定文件结构，并提及Pycharm作为前端开发的便捷工具。最后，文章讨论了样式覆盖规则和`!important`的使用情况。

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

css应用方式

1.在标签上

<img src="..." style = "height:100px"/>
<div style="color:red;">北京</div>

2.在head标签中写style标签之后用class复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
<body>
<h1 class="c1">用户注册</h1>
</body>
</html>

3.写到文件中

.c1{
    height:100px;
}
.c2{
    color:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="common.css"/>
</head>
<body>
<h1 class="c1">用户注册</h1>
<h1 class="c2">用户登录</h1>
</body>
</html>

问题：用Flask框架开发不方便

每次都需要重启

规定有些文件必须要放在特定的文件夹

新创建一个页面

函数，HTML文件

有没有一种方式，可以快速编写前端的代码并查看效果，最后再将页面集成到Flask中。

Pycharm为我们提供了一种非常便捷开发前端页面的工具。就在程序的右上角

选择器

ID选择器


      #c2{
          color:gold;
          }
  <div id="c2"></div>

类选择器

      .c1{
          color:red;
          }
      <div class="c1" ></div>

标签选择器（下例会影响所有div标签）

      div{
        color:pink;
        }
      <div>xxx</div>

属性选择器（只控制选中的属性）

input[type='text']{
        border:5px solid red;
        }
<input type="text">
<input type="password">

后代选择器

.yy > a { 样式声明 } 选择 div 里面所有第二级 a 标签元素

      .yy li{
        color:pink;
        }
      .yy > a{
        color:yellow;
        }

  <div class="yy">
    <a>百度</a>
    <div>
        <a>谷歌</a>
    </div>
    <ul>
      <li>
        美国
      </li>
      <li>
        西班牙
      </li>
      <li>
        加拿大
      </li>
    </ul>
  </div>

可以多个样式共同应用，此时若有两个属性一样，例如 color：red；和color：green；后面的会覆盖前面的，如果不想被覆盖，在color：red 后面加！important；下面是演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .c1{
        color:red;
        border:1px solid red;
        }
        .c2{
        font-size:28px;
        color:green;
        }

    </style>
</head>
<body>
      <div>
        <h2 class="c1 c2">中国</h2>
      </div>
</body>
</html>

可以看到c1和c2里面都有color，显示出来的网页用了相对后面的green