0.前言:无论学什么,前端都是绕不开的一门技术,对于不同的人需求不同,作为一个python开发者不仅需要能读懂基本的html/css以及js代码,还要会使用它的常用的标签,以及了解比较有用的标签,把逻辑捋通,知道有什么才能用什么。需要用的时候查一下资料文档以及博客笔记。当然,如果能记住并使用它就更好不过了。
1.CSS的语法场景(优先级):
1.行内:在当前标记中加入style属性。
2嵌入:最常用的方式,<style></style>
3.外链:<style>@import url(" 路径")
4.导入:写一个单独的css文件。
2,CSS选择器:
1,常用的选择器:
优先级问题: 内联标签-id选择器-类选择器-标签选择器 (id:100 class 10 tag 1) 不可进位
以下代码的优先级是什么,代码颜色是什么?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ color:green; } .demo{ color:yellow; } #ww{ color:red; } </style> </head> <body> <p class="demo" id="ww" style="color:black"><label style="color:white">测试</label></p> </body> </html> <!--label >style>id >class>tag--> <!--output:白色-->
可见,当多个选择器修饰一个属性时,优先级最高的选择器生效。
2. 其余选择器
后代选择器li a{}
全局选择器,用于去除与浏览器之间的边距
伪类选择器:
- a:link和a等同
- a:visited访问过的样子
- a:hover 选择鼠标指针浮动在其上的元素,适用于所有元素
- active :点击样式
- after、before: 在链接之前之后添加内容 a::after{content:"#"}
3毗邻、弟弟、儿子选择器:
<--毗邻选择器,向下选择--> div+p { color:yellow; }
<!--儿子选择器--> div>p
/*弟弟选择器*/
a~p{ color:tomato; } a~label{ color: aqua; }
<div> <a href="">弟弟选择器</a> <p>哈哈</p> <label for="">弟弟二</label> </div>
3属性选择器:
[s9] { color:red; } [s9=good]{ color:yellow; }
<p s9="hao">好标签</p> <p s9="good">good标签</p>