python学习笔记-Day14 -css基础知识-part2

1. css
@标签选择器：
div{} a{} span{}
@id选择器（标签的id不要重复）
#id{}
@类选择器
.className{}
注意 ，一般推荐使用类选择器，不推荐使用标签选择器和id选择器

@关联选择器
空格表示在某个标签里的子标签中去寻找符合的标签

<!--第一种-->
<style>
.container li{
background-color: red;
}
</style>

<div class="container">
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</div>

<!--第二种-->
<style>
.container .l .a{ <!--只匹配最后一个，这里只匹配.a ，.l不会被匹配->
background-color: red;
}
</style>

<div class="container">
<ul>
<li class="l">
<a href="#" class="a">
dfa
</a>
</li>
<li>111</li>
<li>111</li>
</ul>
</div>

@组合选择器
.c1 #i1 a .cc1{ }
.c1 #i1 a .cc2{ }
可以替换为
.c1 #i1 a .cc1,.c1 #i1 a .cc2{ }
或者可以替换为
.c1 #i1 a .cc1,.cc2{ }
.c1 #i1 a，b .cc1,.cc2{ } # 该种情况为两两或 分为四种情况

@ 属性选择器
例：登陆验证
<style>
.con input[type="text"][name="username"]{
border: 5px solid red;
}
.con input[name="username"]{
border: 5px solid red;
}
.con input[cus="custom"]{
border: 5px solid green;
}
</style>

<div class="con">
<input cus="custom" type="text" >
<input type="text" >
<input type="submit" name="username">
<input type="button" name="username">
</div>

position

position有四个属性值：

1.relative 它是相对自身的位置进行偏移，需要注意的是注relative的偏移是基于对象的margin的左上侧的。
2.absolute 使用时分两种情况，当使用absolute时，如果没有使用psoition属性的父标签时，那么此时会以body标签为定位对象，按照浏览器窗口进行定位； 如果有使用psoition属性的父标签时，且position的值为absolute或者relative，那么此时，使用了absolute的子标签按照父标签来进行定位。
需要注意的是，在第二种情况中，进行定位时，如果父标签设置了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，也就是忽略padding，当然并不会忽略margin和border。

3.fixed 是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位,即使拖动滚动条，他的位置也是不会改变的。与background-attachment:fixed相似
4.static position的默认值
挖洞

margin 外边距
可以用来居中
margin:0 auto 水平居中

border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。

padding 内边距 增加自己的边距

如下图所示：





position top left
position right bottom

position
fixed 固定在浏览器窗口的位置
relative/absolute 两个一般放在一起用，
absolute默认对于整个屏幕定位
relative+absolute 会相对于父或爷或更上层的标签中的relative去定位
<div style="position: relative;background-color: #7E7E7E;height: 1000px">
<div style="position: absolute;background-color: aquamarine;height: 20px;width: 100px; top: 100px;left: 200px;">
<a href="#">是短发是</a>
</div>
<div style="position: fixed;background-color: aquamarine;height: 20px;width: 80px; top: 200px;left: 200px;">
<a href="#">是短发是</a>
</div>
</div>

display
none 隐藏不显示
block 变成块级标签
inline 便签内联标签

cursor 很少用，设置鼠标样式

float
clear: both
<div style="background-color: #7E7E7E">
<div style="float: left">123</div>
<div style="float: left">456</div>
<div style="clear: both"></div>
</div>

overflow 内容溢出时的设置 ,默认为visible

auto
hidden
scroll

透明度
filter:alpha(opacity=50); #IE
-moz-opacity:0.5; # firefox
opacity:0.5; # chrome

z-index
设置遮罩层顺序，值越大，遮罩层越靠前；感觉类似于ps里的图层，不过这里是通过值来确定顺序。