python_way day14 CSS

层叠样式表

一、CSS作用域:

二、css标签选择器

三、css样式

四、莫泰对话框:

一、css作用域:

基本用法:style="样式"

<body>
<div style="background-color: crimson; color: aqua;">这是css效果</div>
</body> 

图示:

css应用范围:  1、当前标签,2、当前页面,3、所有文件

上面就是放在了div标签中,但是这样不可重用

当前页面使用

也可以写在head中,这样就可以被这个文件中的任意一个标签使用了

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>          #head中de style标签就是定义css样式的
div{          #指定想要使用的标签名
background-color: crimson;
color: aqua;
}
</style>
</head>
<body>
<div >这是css1效果 ,重用的效果</div>      #这里div标签都被适用了
<div >这是css2效果 ,重用的效果</div>
<div >这是css3效果 ,重用的效果</div>
</body>
</html> 

图示:

所有文件使用

link 就是引入文件

common.css

div{
background-color: crimson;
color: aqua;
}

图示:

效果也是一样的

优先:标签内>头部>文件

  


二、css选择器

1、标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="common.css">-->
<style>
div {                    #找到所有的div
background-color: crimson;
color: blue;
} </style>
</head>
<body>
<div>这是css1效果 ,重用的效果</div>      #只要是div全部生效
<div>这是css2效果 ,重用的效果</div>
<div>这是css3效果 ,重用的效果</div>
</body>
</html>

  

2、id选择器

id唯一,不能重复

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="common.css">-->
<style>
div {                 
background-color: crimson;
color: blue;
}
#i1 {                #只找id = i1的
font-size: 56px;
}
</style>
</head>
<body>
<div>这是css1效果 ,重用的效果</div>
<div>这是css2效果 ,重用的效果</div>
<div id="i1">这是css3效果 ,重用的效果</div>
</body>
</html>

  

3、class选择器

class可以重复

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="common.css">-->
<style>
div {
background-color: crimson;
color: blue;
}
#i1 {
font-size: 56px;
}
.c1{
background-color: blue;
color: azure;
}
</style>
</head>
<body>
<div>这是标签选择器</div>
<div class="c1">这是class选取器</div>
<div id="i1">这是id选择器</div>
</body>
</html>

图示:

4、层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="common.css">-->
<style>
.c1{
background-color: blue;
color: azure;
}
span div p .c1{
background-color: chartreuse;
color: black;
}
</style>
</head>
<body>
<div class="c1">我是class选择器</div>
<span>
<div>
<p>
<a class="c1">我也是c1,使用层级选择器更精准,而且不影响上面的c1
<br/> 但是由于class的优先级要高于标签,所以这里需要指定class=c1
<br/> 如果指定了a标签不好使,会被之前定义的class选择器抢先
</a>
</p>
</div>
</span>
</body>
</html>

图示:

从选择器里再进行挑选:

5、组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="common.css">-->
<style>  
span div p .c1,h1{          #用逗号 , 隔开,可以选择多个标签,这就是组合选择器
background-color: chartreuse;
color: black;
}
</style>
</head>
<body>
<span>
<div>
<p>
<a class="c1">我是c1,使用层级选择器更精准
</a>
</p>
<h1>我是h1标签,组合选择器也把我穿上衣服了!</h1>
</div>
</span>
</body>
</html>


三、css样式

color:字体颜色

backgroup-color: 北京颜色

backgroup-img:   引用图片

backgroup-repeat:  图片是否重复

backgroup-position:  图片坐标

border:边框

cursor:让鼠标变成个小手

display:隐藏标签

font-size :字体大小

height: 50px 高度

width: 100%  or  500px 宽度

float: left 往左飘

边距:

  margin:外边距

  padding:内边距

flost:漂浮

position: 位置

  relative
  absolute 固定窗口的一个位置,但是滚动窗口还是会一定
  fixed 固定,相对浏览器的窗口,想让他固定在哪里都可以。

opacity:透明度  1不透明,0透明

z-index:标签显示的层级,越大越靠前

第二种写法

  background-color: rgba(0,0,0,.6);  前面3个数是颜色,后面的 .6是透明度

1、颜色

第一种:

backgroup-color:颜色可以写英文: chartreuse

第二种:

也可以写成rgb颜色 #ddd

第三种:

2:宽度

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: fuchsia;
/*color: black;*/
width: 500px;      #父亲500像素
}
.c1{
width: 20%;          #一个儿子占像素的20%
background-color: chartreuse;
}
.c2{
width: 80%;          #一个儿子占500像素的80%
background-color: blue;
}
</style>
</head>
<body>
<div>            #父亲
<div class="c1">这是20</div> #儿子
<div class="c2">这是80</div>
</div>
</body>
</html>

图示:

两个儿子因为是div块级标签,所以就一人占一行。我们想要的效果是看他们分享父亲div的500像素

所以就用上了

float:left

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: fuchsia;
/*color: black;*/
width: 500px;
}
.c1{
width: 20%;
background-color: chartreuse;
float: left;
}
.c2{
width: 80%;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div>
<div class="c1">这是20</div>
<div class="c2">这是80</div>
</div>
</body>
</html>

小知识点:

  如果在div中的div使用了float,最外层的div没有定义高度,切最外层的div有边框,目的是想让内层的两个float的div将外层的边框撑起来。如果不做特殊的设置是不成的。

如图

但是不加特殊设置事实则是事与愿违:

<div style="border: solid 1px red">
<div style="height: 20px;width: 20%;background-color: blue;float:left ">f</div>
<div style="height: 20px;width: 70%; background-color: aqua; float: left">f</div>
<div style="clear: both;"></div> <!-- 就是个人设置可以撑起最外侧的边框 -->
</div>

实际上使用了float是标签飘起来在最上层,这样的话就脱离出来了整个页面。使用clear:both则是将脱离的标签拽回来

3、background-image: 图片

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c3{
background-image: url('s1.jpg');
}
</style>
</head>
<body>
<dev class="c3"></dev>
</body>
</html>

这样没有效果,因为相当于前面有一堵墙,我没有开洞,图片一直在墙后面

下面我们就要开洞了

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c3{
background-image: url('4.gif');
height: 100px; #开洞的高度
width: 500px; #开洞的宽度
}
</style>
</head>
<body>
<div class="c3"></div>
</body>
</html>

图示:

问题来了!怎么图片成平铺效果了!

如果不想重复

4、backgroup-repeat: no-repeat; 不重复

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c3{
background-image: url('4.gif');
height: 100px;
width: 500px;
background-repeat: no-repeat; #这样就是不让他重复
}
</style>
</head>
<body>
<div class="c3"></div>
</body>
</html>

 图示:

5、backgroup-position : 调整图片位置

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c3{
background-image: url('2.jpg');
height: 100px;
width: 100px;
background-repeat: no-repeat;
background-position: 0 0; #这就是现实图片的左上角
}
</style>
</head>
<body>
<div class="c3"></div>
</body>
</html>

     

如果我们想调整图片的位置,只要调整postition的位置就可以了

 

6、background系列的命令可以写到一行

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c4{
background: url("2.jpg") -263px -51px no-repeat; #这里把所有关于background的参数都写到了一起。
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div class="c4"></div>
</body>
</html>

图示

 

7、border

solid 实线
dotted 大虚线
dashed 小虚线
<style>
#i1{
border: solid saddlebrown ; #边框 实线 颜色
}
.c4{
background: url("2.jpg") -263px -51px no-repeat;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div id="i1"> <---------- 这里
<div class="c4"></div>
</div>

图示:

边框的范围:

左边边框:border-left

右边框:border-right

下边框:border-bottom

上边框:border-top 等等还有改变颜色,边框宽度都可以改变。

图示:

 8、display:none  隐藏,并且不占位置

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
border: dashed saddlebrown ;
}
.c4{
background: url("2.jpg") -263px -51px no-repeat;
height: 50px;
width: 50px;
display: none;
}
</style>
</head>
<body>
<div id="i1">
<div class="c4"></div>
</div>
</body>
</html>

图示 : 图片没了并且位置也没了

display:block

将行内标签变为块级标签

display:inline

将块级标签变为行内标签

desplay:inline-block

内联标签,自己有多高多款就占多少,高度宽度不生效

如果想把内联标签设置高宽,哪我们就要用这个参数了

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
border: dashed saddlebrown ;
display: inline-block;          #如果不写这个下面的高度宽度是不生效的,不生效中间的c4图片就不能显示出来
height: 100px;
width: 100px;
}
.c4{
background: url("2.jpg") -263px -51px no-repeat;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<span id="i1">
<div class="c4"></div>
</span>
</body>
</html>

 图示:现在加上了 display: inline-block,就可以显示出来了。

 

9、visibility:hidden  隐藏,但是位置保留

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
border: dashed saddlebrown ;
}
.c4{
background: url("2.jpg") -263px -51px no-repeat;
height: 50px;
width: 50px;
visibility: hidden;
}
</style>
</head>
<body>
<div id="i1">
<div class="c4"></div>
</div>
</body>
</html>

图示:  图片没了但是为之保留

10、cursor 让鼠标放到图边上变成小手等图标

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c5{
cursor: pointer; #小手
}
.c6{
cursor: wait; #等待
}
.c7{
cursor: cell; #十字
}
</style>
</head>
<body>
<ul>
<li class="c5">首页</li>
<li class="c6">产品</li>
<li class="c7">销售</li>
</ul>
</body>
</html>

  

 11、边距

  • margin:外边距,本身不增加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 70px;
border: solid red;
}
.c2{
height: 30px;
background-color: aquamarine;
margin-top: 20px;          #给里面的颜色上面加上一个外边距
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
</body>
</html>

图示:

  • padding:内边距,本身增加

图示:没有加padding时

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 100px;
border: solid red;
}
.c2{
height: 30px;
background-color: aquamarine;
margin-top: 20px;
}
.c3{
height: 30px;
background-color: cornflowerblue;
padding-bottom: 10px; #这里加上了下内边距
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
<div class="c3"></div>
</div>
</body>
</html>

图示效果:

12、flost 漂浮

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 500px; #宽度是500px
background-color: cadetblue;
}
.c2{
background-color: aquamarine;
width: 30%; #第一个儿子的宽度是c1的30%
}
.c3{
background-color: cornflowerblue;
width: 70%; #第二个儿子宽度是c1的70
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">g</div>
<div class="c3">h</div>
</div>
</body>
</html>

 图示:

但是我们想要的是两个儿子都在父亲里面,这时就需要使用flost了.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 500px;
       border: solid red;
}
.c2{
background-color: aquamarine;
width: 30%;
float: left; #让老大飘起来
}
.c3{
background-color: cornflowerblue;
width: 50%; #这里我们让老二小一些,看一下效果,但是如果儿子相加超过了100%,那么就会撑破了,就漂不起来了。
float: left; #让老二飘起来
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">g</div>
<div class="c3">h</div>
</div>
</body>
</html>

 图示:

但是问题来了,我们把父亲的高度给删了,按说父亲的红色外框应该是被两个儿子撑起来的。这会却没有。那我们怎么办?

style="clear: both" 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 500px;
border: solid red;
}
.c2{
background-color: aquamarine;
width: 30%;
float: left; #孩子用上float
}
.c3{
background-color: cornflowerblue;
width: 50%;
float: left;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2">g</div>
<div class="c3">h</div>
<div style="clear: both"></div>       #在父亲里面加上这句话
</div>
</body>
</html>

图示: 

 

float: right 就是靠右边飘

13、position

  • fixed: 根据整个阅览器的窗口定位,拉动窗口位置不会变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 1000px;
background-color: cadetblue;
}
.c2{
position: fixed; /*默认是在c1 div的外面*/
}
.c3{
background-color: cornflowerblue;
width: 50%;
float: right;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">返回顶部</div>
</body>
</html>

图示:

调整

<title>Title</title>
<style>
.c1{
height: 1000px;
background-color: cadetblue;
}
.c2{
position: fixed; /*默认是在c1div的外面*/
right: 200px; # 我让c2的字体靠右
bottom: 0; # 并且在最底部
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">返回顶部</div>
</body>
</html>

图示:

  • absolute   放在浏览器的一个位置,滚动会跟着移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 2000px;
background-color: cadetblue; #只是这里做了修改
}
.c2{
position: absolute;
right: 200px;
bottom: 0;
}
.c3{
background-color: cornflowerblue;
width: 50%;
float: right;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">返回顶部</div>
</body>
</html>

图示:位置还是在窗口的最底部,但是滑动窗口却会跟着窗口动。

  • relative 单独写没有什么效果,要和absolute 结合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 500px;
width: 500px;
background-color: cadetblue;
position: relative;         #最终找到了这里
}
.c2{
position: absolute;          #对应的c2会一层一层的网上找,知道找到relative这个标签定位
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="c1">                        #因为relative在v1中,所以c2是根据c1定位
<div style="background-color: blue;height: 100px"> #就算上层还有一个div,c2的absolute不会根据这个定位
<div class="c2">返回顶部</div>
</div>
</div>
</body>
</html>

图示:

div边框圆角效果

<style type="text/css">
.a {
background-color: #c7dec6;
border: 1px solid #000;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
height:200px;
width:500px;
padding:20px;
}
</style>
</head>
<body>
<p class="a">
在HTML中如何把块的边框做成圆角
</p>
</body>
</html>

  

 莫泰对话框:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>莫泰对话框</title>
<style>
.c1 {
width: %;
height: 1000px;
}
.dl { /*登录按钮的位置永远会在模态框的右下角*/
width: 45px;
height: 20px;
background-color: antiquewhite;
position: absolute;
right: 600px;
top: 300px;
}
.model { /*莫泰框的class*/
width: 300px;
height: 200px;
background-color: coral;
top: 300px;
left: 600px;
position: absolute;
margin-top: -100px;
margin-left: -150px;
z-index: ;
}
.hide{ /*设置隐藏的class*/
display: none;
}
.myinpyt {
margin-left: 82px;
margin-top: 20px;
}
.but{
position: absolute;
right: 30px;
bottom:20px;
}
.zj{ /*中间遮罩层*/
background-color: black;
top: ;
left: ;
bottom: ;
right: ;
z-index: ;
position: fixed; /*只要想调整标签的位置就需要postition这个参数*/
opacity: 0.4;
}
</style>
</head> <body>
<div class="c1">
<button class="dl">登录</button>
<div class="zj">
</div>
<div class="model">
<div class="myinpyt">
<p>
<input name="user" placeholder="用户名">
</p>
<p>
<input name="password" placeholder="密码">
</p>
<button class="but">退出</button>
</div>
</div>
</div>
</body>
</html>

莫泰对话框

 

 

python_way day14 CSS,莫泰对话框的更多相关文章

  1. python_way day14 CSS

    python_way day14 CSS 层叠样式表 一.CSS作用域: 二.css标签选择器 三.css样式 一.css作用域: 基本用法:style="样式" <body ...

  2. 以莫泰的形式进行页面转换(传值用block)

    1.在第一个页面进入第二个页面可以使用莫泰的方式 在第一个页面包含第二个页面的头文件#import "FirstViewController.h"#import "Vie ...

  3. python_way day14 HTML

    python_way day 14 HTML 一,标签 二.特殊字符 三,css <!DOCTYPE html> <html lang="en"> < ...

  4. 用css画出对话框

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa4AAAFSCAYAAACqpTv4AAAgAElEQVR4nO3deZBU5b3GcUIlVTG3bi

  5. Day14:CSS垂直居中

    verticle-align:middle vertical-align:middle实现css垂直居中是常用的方法,但是需要注意,vertical生效的前提是diaplay:inline-block ...

  6. Html,css构建一个对话框,练习201911281028

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  7. CSS实现微信对话框

  8. python16_day13【css、js】

    一.部局 1.pg-header(title) .pg-header{ height: 48px; background-color: cadetblue; line-height: 48px; mi ...

  9. python_way day16 DOM

    Python_way day16 1.Dom  (找到html中的标签) 一.DOM 1.查找元素 直接查找 document.getElementById 根据ID获取一个标签 --->这里是 ...

随机推荐

  1. windows环境下如何安装memcached教程

    Memcached 是一个开源免费高性能的分布式内存对象缓存系统,能够加快网站访问速度和减轻数据库压力,本文向大家介绍下windows环境下如何安装memcached. 工具/原料   memcach ...

  2. windows下tomcat7+nginx1.8负载均衡

    1.负载平衡是一种常用的跨多个应用程序实例 技术优化资源利用率,最大化吞吐量, 减少延迟,并确保容错配置. 2.使用nginx作为非常有效的HTTP负载均衡器 将流量分发给几个应用程序服务器和改善 性 ...

  3. STM32 系统架构

    这里所讲的 STM32 系统架构主要针对的 STM32F103 这些非互联型芯片 STM32 主系统主要由四个驱动单元和四个被动单元构成. 四个驱动单元是: 内核 DCode 总线; 系统总线;通用  ...

  4. java 子类对象实例化的过程

    大家往往听说  子类继承了父类就有了父类中的所有的非私有的属性,但是怎么就有了父类的属性了呢 ?且听下面分解 子类对象实例化的过程: 1 从结果上来看:(继承性) 子类继承了父类以后 就获取了父类中声 ...

  5. 用 Flask 来写个轻博客 (5) — (M)VC_SQLAlchemy 的 CRUD 详解

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 SQLAlchemy 的 CRUD Create 增添数据 ...

  6. PHP面试 MySQL的高可扩展和高可用

    MySQL的高可扩展和高可用 面试题一 MySQL分表和分区的工作原理,分表和分区的使用场景和优缺点. 分区表的原理 对用户而言,分区表时一个独立的逻辑表,但是底层MySQL将其分成了多个物理子表,这 ...

  7. PAT_A1104#Sum of Number Segments

    Source: PAT A1104 Sum of Number Segments (20 分) Description: Given a sequence of positive numbers, a ...

  8. Apache的虚拟主机功能(基于IP、域名、端口号)

    Apache虚拟主机就是在一个Apache服务器上配置多个虚拟主机,实现一个服务器提供多站点服务,其实就是访问同一个服务器上的不同目录. 主要有三种方法: 1.通过不同的IP地址 2.通过不同的域名 ...

  9. Http,Socket,TCP/IP 协议简述

    Http,Socket,TCP/IP 协议简述:https://blog.csdn.net/gordohu/article/details/54097841 TCP/IP协议,HTTP协议与webSo ...

  10. Codesforces 485D Maximum Value

                                                      D. Maximum Value   You are given a sequence a cons ...