Python 前端 Css基础

CSS样式存在的位置

1、放置在标签内，局部生效

<div style="color: red;font-size: 18px;">hello world</div>

2、放置在head中，这种方式全局生效

<style>
.cc{
color:red;
font-size:19px;
}
</style>

3、放置在css文件中

<link rel="stylesheet" href="templates.css"/>

优先级： 1 最高，另外的两个优先级是，谁最后加载进来的，谁生效

CSS之基本选择器

寻找标签

1、class 选择器

.c1{}
<div class="c1">hello</div>
<div class="c1">world</div>

2、标签选择器

根据标签去选择

input{}　　　　　　　　#根据input的标签去选择

input[type='text']{}      #根据input中有type=‘text’属性的去选择

3、ID选择器

#uu{}                        #匹配id为uu的

CSS之其他选择器

1、层级选择器

如果只想装饰第一个span中的东西，用层级选择器怎么来写呢？

c3 a div c4{样式}      #注意到没用，class与标签混用，中间空格分开

2、组合选择器

a{

}

p{

}

如果a标签与p标签的样式是一样，这样写的话就代码重叠了，

a,p{            #逗号分开

}

.c3 div .c4,.c3 div .c9{ 样式} 　　#同样层级选择器也可以重叠着写。

CSS之background属性

这是对应的两种写法。

这里注意，小图标都是放到一个图片上面，通过background-position来定位显示那个图标。

这样的好处是不用每个小图标都发起链接，只要通过定位来过去，较少建立链接

CSS之border属性

简写方式，线条像素，样式，颜色。

CSS之display属性

CSS之cursor属性

cursor这是个什么鬼？比如鼠标放到a标签上面就会显示小手，放到文本上面就会显示xi小锯，如果想要显示什么数据可以进行

选择，或者自定义

CSS之float属性

使标签浮动起来，可以对齐进行在一行中排序

运行结果：

每个div占的百分比，是按父层div的大小来划分的

在这有个问题，就是子div用了float之后，父层div中如果再定义什么样式，就不生效了，那如何使之生效呢

需要在子div下面 再添加

<div style="clear: both;"></div>

这样再定义父div的标签，其效果就会显示出来了。

CSS之position属性

fosition有三个参数：

1、fixed

position是脱离当前页面的。显示结果，无论页面怎么变动，返回顶部都会显示在最下面

2、absolute

3、relative

这两个往往结合使用，实现神奇的效果。

<div style="position: relative;background: green;height: 400px;width: 300px;">
<div style="position: absolute;bottom: 30px;right: 30px;">定位</div>
</div>

实现的效果：

CSS之透明度和层级

opacity的值范围从0-1

层叠配置，可以通过z-index:数字来选择 哪一层在上面。数字大的层在最上面

可以通过opacity的调控值来实现北京层的显示。

CSS之padding和hargin属性

这两个是用来做边距的

默认没有边距的效果是这样的

添加上padding边距就有下面的效果了

padding 是添加内边距，hargin是添加外边距

以此为例，针对里面的绿色边框来说，外边距指的是这个绿色框对上面红线的距离。

而内边距就是绿色提的内部，加上边距的话，其实就是扩充了自己的大小。

写法：

padding：10px 20px 10px 10px;        #添加的是上下左右

padding: 10px 20px 　　　　　　　　#分别代表上下，和左右