欢迎光临
我们一起进阶

python-基础 css(三)常用的css样式

扫码或搜索:沉默王二
发送 290992
即可立即永久解锁本站全部文章
常用的css样式
font 字体设置
<div style="font-family: 微软雅黑;font-size: 18px;font-weight: bolder;font-style: italic;">字体设置</div>
background 背景设置

背景颜色

<span style="background-color: yellow;">span</span>  #背景颜色

span

背景图片

<div style="background-image: url(1.png);  #背景图片
            height: 100px;   
            background-repeat: no-repeat;  # 不重复平铺,repeat-x沿着x轴平铺,repeat-y沿y轴平铺
            background-position: right;">  #top,bottom,right,center等
    </div>

背景-简写属性

background: #00FF00 url(bgimage.gif) no-repeat fixed top;

顺序是:
– background-color
– background-image
– background-repeat
– background-attachment
– background-position

border 边框
<div style="border: 5px dotted red">   #宽度  #实线虚线(dotted,solid)#边框颜色
    border边框 div     
    </div>      
#宽度 #实线虚线(dotted,solid)#边框颜色
border边框 div

display 块级标签和行内标签互相转换

inline 转换成行内标签
block 转换成块级标签
none 不显示

<div style="background-color: hotpink;display: inline;">div</div>
    <span style="background-color: grey;display: block">span</span>

div
<span style="background-color: grey;display: block">span</span>

cursor 鼠标移到上面显示的标识

<span style="cursor: pointer">pointer</span> 
    <span style="cursor: wait;">wait</span> 
    <span style="cursor: move">move</span> 
    <span style="cursor: text">text</span> 
    <span style="cursor: help;">he
lp</span> 

pointer
wait
move
text
help

float 浮动
浮动的原本作用是为了实现文字环绕效果。
如果定义两个div放在一起,那么默认是上下两行摆放。要想两个标签放一行里 需要在两个div标签里加上float

<div>
        <div style="background-color: hotpink;float: left;width: 20%">div1</div>  #向左浮动,宽度20%(相对于父标签div而言)
        <div style="background-color: yellow;float: left;">div2</div>     #向左浮动
        <div style="background-color: deepskyblue;float: right;width: 10%">div3</div>  #向右浮动
    </div>
div1
div2
div3

一旦子类标签都用到float,那么父类标签不会被子类里的撑起来,如下,虽然在父类里设置了背景色,但是并没有用到子类中空白部分

<div style="background-color: palegreen;width: 500px"> 
        <div style="background-color: hotpink;float: left;width: 20%">div1</div>
        <div style="background-color: yellow;float: left;">div2</div>
        <div style="background-color: deepskyblue;float: right;width: 10%">div3</div>
    </div>
div1
div2
div3

清除浮动: 在底部使用cleara:both 方法,使父类标签里的样式显示出来

<div style="background-color: palegreen;width: 500px">
        <div style="background-color: hotpink;float: left;width: 20%">div1</div>
        <div style="background-color: yellow;float: left;">div2</div>
        <div style="background-color: deepskyblue;float: right;width: 10%">div3</div>
        <div style="clear: both"></div>
    </div>
div1
div2
div3
position

fixed 固定在浏览器窗口某个地方,不会随着滚动条移动。

 <div style="position: fixed;right: 10px; bottom:10px; color: red">返回顶部</div>
 ```
举个栗子:常见的“返回顶部”。首先在博客设置里定义css样式如下:
 ```
#back-to-top {
            position: fixed;
            right: 10px;
            bottom: 10px;
            background-color: green;
        }
 ```
 然后在标签里使用该样式,加一个超链接
 ```
<span id="back-to-top"><a href="#top">fixed返回顶部</a></span>
 ```
absolute  绝对位置,只一次固定在窗口的一个位置,滚动条拉走,就看不到了。把页面拖到最上方看左上角->

绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
 ```
 <div style="position: absolute;left: 0;bottom: 50%;color: purple;">absolute</div>
 ```
relative  相对位置, 相对定位元素的定位是相对其正常位置。relative本身不产生效果,跟absolute搭配使用才有效果。
absolute本来是针对整个窗口的,但是如果想只针对某一个div固定,那么可以在父标签加一个relative使用:
 ```
<div style="position: relative;background-color: yellow;height: 100px;width: 100px">  #父标签用relative
        <div style="position: absolute;color:blue;right: 0;bottom: 0;">absolute</div>   #里层用absolute,位置相对于父标签
    </div>
 ```
<div style="position: relative;background-color: yellow;height: 100px;width: 100px">  
        <div style="position: absolute;color:blue;right: 0;bottom: 0;">absolute</div>  
    </div>

##### opacity
透明度。 opacity的值在0-1之间。值越小越透明。0完全透明
##### z-index
指定元素的堆叠顺序。值越大的在越上层

看不见我看不见我

#这两个div。z-index越大的就会越靠上面一层。所以蓝色那层在黑色上面。黑色那一层的字会被盖住。设置opacity之后,蓝色变透明。透过蓝色能看到后面一层的字

<div style="position: relative;background-color: green;width: 200px;height: 100px;"> 
    <div style="position: absolute;background-color: blue;top:0;right: 0;bottom: 10px;left: 0;z-index: 2;opacity: 0.4;"></div>
    <div style="position: absolute;background-color: black;top:0;right: 0;bottom: 0;left: 0;color: red;z-index: 1">看不见我看不见我</div>

</div>

##### css盒模型    mbpc
Margin(外边距) :清除边框外的区域,外边距是透明的。
Border(边框)  :围绕在元素(内容)和内边距外的边框。
Padding(内边距) :清除内容周围的区域,内边距是透明的。
Content(内容)   :即element框,实际内容。
[![](https://img2018.cnblogs.com/blog/1364152/201901/1364152-20190109104036276-2057425512.png)](http://https://img2018.cnblogs.com/blog/1364152/201901/1364152-20190109104036276-2057425512.png)

##### margin 外边距

#在div外面加边距

<div style="border: 2px solid black;height: 70px;width: 150px">
        <div style="background-color: pink;height: 50px;width: 130px; margin-top: 30px;margin-left: 20px"></div>  
    </div>

##### padding  内边距

“`

赞(0) 打赏
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

小白学堂,学的不止是技术,更是前程

关于我们免责声明

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏