Python开发【前端】:CSS

时间:2023-01-05 20:25:01

css样式选择器

标签上设置style属性:

<body>
<div style="background-color: #2459a2;height: 48px;">第一层</div>
<div style="background-color: #2459a2;height: 48px;">第二层</div>
<div style="background-color: #2459a2;height: 48px;">第三层</div>
</body>

直接在div里写相对应的样式

id选择器

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">第一层</div>
</body>

把样式写到head里面,以#开头命名,调用对应样式在div里用id属性指定相应的id名

class选择器(最常用)

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">第一层</div>
<div class="c1">第二层</div>
<div class="c1">第三层</div>
</body>

把样式写到head里面,以.开头命名,调用对应样式在div里用class属性指定相应的类名,可以多个div调用

标签选择器

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div >第一层</div>
<div >第二层</div>
<div >第三层</div>
</body>

标签选择器,设置div样式,则body里所有的div标签内的内容都会应用此内容

关联选择器(层级选择器)

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span div{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div >第一层</div>
<span>
<div >span里的div</div>
</span>
<div >第三层</div>
</body>

只让span里面的div标签应用样式,可多层嵌

组合选择器

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1,#i2,#i3{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">第一层</div>
<div id="i2">第一层</div>
<div id="i3">第一层</div>
</body>

组合选择器,加,号,相同样式多命名

属性选择器

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[name="James"]{width: 20px;height: 20px;}
</style>
</head>
<body>
<input type="text" name="James">
<input type="text">
<input type="password">
</body>

根据属性进行筛选匹配,只有第一个input标签匹配上对应的样式

css样式引用

css样式优先级

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
color: white;
}
.c2{
background-color:black;
}
</style>
</head>
<body>
<div class="c2 c1" style="color:palegreen" >第一层</div>
</body>

如果样式不冲突,则样式都应用,如果样式有冲突,style样式优先级最大,其次其他的安装编写的顺序,越靠近越优先

文件方式引用样式

定义样式并保存到commons.css文件

.c1{
background-color: red;
color: white;
}
.c2{
background-color:black;
}

引用commons.css文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="commons.css">
</head>
<body>
<div class="c2 c1" style="color:palegreen" >第一层</div>
</body>
</html>

  

css样式边框

基本边框

<body>
<div style="border: 1px dotted red;">
第一层边框
</div>
<!--border:边框宽度 solid:边框样式实线(dotted虚线)颜色:red-->
</body>

边框其他样式

<body>
<div style="height: 48px;
width: 80%;
border: 1px solid brown;
font-size: 16px;
text-align: center;
line-height: 48px;
">第二层边框</div> <!--height: 48px 边框高度-->
<!--width: 80% 宽度页面的80%-->
<!--border: 1px solid brown 边框宽度、样式、颜色-->
<!--font-size: 16px; 字体大小-->
<!--text-align: center; 水平居中-->
<!--line-height: 48px; 垂直居中-->
</body>

-》》点击显示效果

CSS样式浮动

初识float

<body>
<div style="width: 20%;background-color: red;float: left;">左边</div>
<div style="width: 80%;background-color: black;float: right;">右边</div>
</body>

-》》点击显示效果

float测试页

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 38px;
background-color: #dddddd;
line-height: 38px;
}
</style>
</head>
<body style="margin: 0 auto;">
<div class="pg-header">
<div style="float: left;">*收藏本站</div>
<div style="float: right;">
<a>登录</a>
<a>注册</a>
</div>
</div>
<div style="width: 300px;border: 1px solid red;">
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="clear: both"></div>
</div>
</body>

-》》点击显示效果

注:<body style="margin: 0 auto;">消除与浏览器顶部之间的缝隙;<div style="clear: both"></div>子边框浮动后,显示父边框的边框线

CSS样式display

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

<body>
<div style="background-color: red;display: inline">块级</div>
<span style="background-color: #2459a2;display: block">行内</span>
</body>

-》》点击显示效果

注:display:inline 转换为行内标签;display:block转换为块级标签;另还有display:none不显示

行内标签:无法设置高度,宽度,padding margin
块级标签:设置高度,宽度,padding margin

<body>
<span style="background-color: #2459a2;display: inline-block;height: 50px;width: 70px">行内</span>
<div style="background-color: red;display: inline">块级</div>
</body>

-》》点击显示效果

注:display:inline-block 既有inline的属性(默认自己有多少占多少)又有block的属性(可以设置高度、宽度、padding、margin)

 

CSS样式边距

外边距margin

<body>
<div style="border: 2px solid red;height: 70px;">
<div style="background-color: green;height: 50px;
margin-top: 25px;"></div>
</div>
</body>

-》》点击显示效果

注:margin-top:25px表示外边距,子边框与父边框top之间的距离为25px

内边距padding

<body>
<div style="border: 2px solid red;height: 70px;">
<div style="background-color: green;height: 50px;
padding-top: 25px;"></div>
</div>
</body>

-》》点击显示效果

注:padding-top:25px表示内边距,子边框内自己与top之间的距离为25px

CSS样式position

fixed固定到浏览器某个位置(相当于float)

返回顶部按钮

有个需求,好多页面都有返回顶部的按钮,随着你页面的下拉,按钮永远在页面的右下角,下面就来实现:

<body>
<div style="width: 50px;height: 50px;background-color: black;color: white;
position: fixed;
bottom: 20px;
right: 20px;
">返回顶部</div>
<div style="height: 5000px;background-color: #dddddd";>
</div>
</body>

实现动态效果,点击返回

<body style="margin: 0 auto">
<div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white;
position: fixed;
bottom: 20px;
right: 20px;
">返回顶部</div>
<div style="height: 5000px;background-color: #dddddd;margin: 0;">ddddddddddddd
</div> <script>
function GoTop() {
document.body.scrollTop=0;
}
</script>
</body>

固定菜单栏:

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: black;
color: #dddddd;
position: fixed;
top:0;
right: 0;
left: 0;
}
.pg-body{
background-color: #dddddd;
height: 5000px;
margin-top: 50px;
}
</style>
</head>
<body style="margin: 0">
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>

relative+absolute(相对与relative固定路径)

<body>
<div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
<div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: black;"></div>
</div>
</body>

多层模态

用了position样式实现三层页面;当页面整个浮动在上面的时候,如果想让页面整体覆盖底层页面,要用到top,right,left,bottom属性,而非margin-top、margin-left....

<body
<div style="z-index:10;position: fixed;top: 50%;left: 50%;margin-left:-250px;margin-top:-250px;
background-color: white;height: 500px;width: 500px"></div> <div style="z-index:9;position: fixed;background-color: black;
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 0.5"></div> <div style="height: 5000px;background-color: green"></div>
</body>

当页面出现多层时,用z-index:10数值来确定浮动层的上下关系;opacity:0.5设置页面透明度(1表示完全遮住);fixed;top: 50%;left: 50%;margin-left:-250px;margin-top:-250 px最顶层的div进行居中处理;

CSS样式overflow

有时会有这种情况出现,看示例

<body>
<div style="height: 200px;width:140px;overflow: hidden ">
<img src="i.png" />
</div>
</body>

外层定义div高度和宽度后,最后显示的效果还是以图片的大小为准的,图片把外层div给撑开了,这时候可以用到下面俩个属性

overflow:auto 图片出现滚动条

<body>
<div style="height: 200px;width:140px;overflow: auto">
<img src="i.png" />
</div>
</body>

overflow:auto 图片只显示div设置的大小,其他部分隐藏

<body>
<div style="height: 200px;width:140px;overflow: hidden">
<img src="i.png" />
</div>
</body>

  

CSS样式hover

可以看一下抽屉网的顶部条栏,当鼠标移动到选项栏时,背景颜色会出现变化;下面就来试试搞一下这个

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 0;
left: 0;
top: 0;
height: 48px;
background-color: #2459a2;
line-height: 48px;
color: white;
}
.pg-body{
margin-top: 50px;
}
.w{
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
display:inline-block;
padding: 0 10px 0 10px;
}
.pg-header .menu:hover{
background-color: #BF1919;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a >LOGO</a>
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
<a class="menu">爆文</a>
</div>
</div>
<div class="pg-body">
</div>
</body>
</html>

其中.pg-header .menu:hover{background-color: #BF1919}指定当鼠标滑过引用.menu字段时,字段样式变成新定义的样式

CSS样式background

之前一直在用backgroud样式基本上都是设置背景颜色什么,其实background还可以设置背景为图片

background-image

<body>
<div style="background-image: url('i.png');height: 700px;width: 700px">
</div>
</body>

默认div框架有多大,图片重复放置占的位置就有多大

background-repeat

<body>
<div style="background-image: url('i.png');height: 700px;width: 700px;background-repeat: no-repeat">
</div>
</body>

background-repeat有四个属性repeat(默认,重复占满)、no-repeat(不重复)、repeat-x(只横着重复放)、repeat-y(只竖着重复放)

background-position-x、background-position-y

显示图片中特定的位置图标

<body>
<div style="background-image: url('icon.png');height: 20px;width: 20px;
border: 1px solid red;background-position-x:20px;background-position-y: 40px"></div>
</body>

background-position-x表示看背景图片的窗口水平方向想右移动,background-position-y表示看背景图片的窗口垂直向下移动;两者可以简写成:

<body>
<div style="background-image: url('icon.png');height: 20px;width: 20px;
border: 1px solid red;background-position:20px 40px"></div>
</body>

针对background整体还有更加简单的写法:

element.style {
background: #f8f8f8 url(image/5.png) -105px -212px no-repeat;
background-image: url(file:///D:/BaiduYunDownload/s14day14/day14%E8%AF%BE%E4%B8%8A%E6%89%80%E6%9C%89/html/html/image/5.png);
background-position-x: -105px;
background-position-y: -212px;
background-size: initial;
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: rgb(248, 248, 248);

background: #f8f8f8 url(image/5.png) -105px -212px no-repeat; 同时设定了颜色,图片,位置,是否repeat

Python开发【前端】:HTML-》》http://www.cnblogs.com/lianzhilei/p/6038646.html

Python开发【前端】:JavaScript--》》http://www.cnblogs.com/lianzhilei/p/6071530.html

Python开发【前端】:DOM--》》http://www.cnblogs.com/lianzhilei/p/6072367.html