网站导航
> 文章列表 > CSS选择器

CSS选择器

网友: 文章列表 2024-03-21 20:08:18

CSS选择器

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

网络标签：

相关问题