python Web之Css
CSS:功能用来控制数据的表现，可以使网页的内容
1.怎么找到标签，(选择器)
2.如何操作标签对象（element）
############################### Css 引入方式########################################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--Css 第二种引入方式，以style开头在对什么对象进行css就是对象{},括号内加css-->
<!--<style>-->
/*p{*/
/*color: bisque;*/
/*font-size: 40px;*/
/*}*/
/*a{*/
/*text-decoration: blink;*/
/*}*/
<!--</style>-->
<!--Css第三种引入方式,将css天之写成文件，用如下方式进行加载,引入次数不限,推荐使用-->
<!--<link href="css的第三种引入方式.css" rel="stylesheet">-->
Css 第四种引入方式，导入式，先加载html再加载css,导入次数有限
<style>
@import "css的第三种引入方式.css";
</style>
</head>
<body>
<!Css --第一种引入方式-->
<!--<div style="color: red;hello world</div>-->
<div>hello 第二种方式</div>
<p>hello 第二种方式</p>
<a href="">第二种方式</a>
</body>
</html>
############################### Css 选择器########################################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*四种基本选择器，*号匹配所有，标签匹配相应标签，id匹配相应id，class，匹配对应class*/
*{
color: greenyellow;
}
div{
color: blueviolet;
}
#ps{
color: gold;
}
.sun{
color:cornflowerblue;
}
/*标签和class混用*/
div.sun{
color: deeppink;
}
</style>
</head>
<body>
<p>*号匹配选择器</p>
<div>*号匹配选择器与标签名称选择器</div>
<a href="">*号匹配选择器</a>
<h2 id="ps">ID选择器</h2>
<div class="sun">标签和class混用</div>
<p class="sun">class选择器</p>
<p class="sun">class选择器</p>
</body>
</html>
############################### Css 组合选择器########################################
嵌套规则:
块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素
有几个特殊的块元素只能包含内联元素，不能包含块级元素，如h1 h2 h3 p dt
li内可惜包含div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--1.多元素选择器，组合标签选择方法1.用逗号-->
<style>
#little,div.little_c
{
color: brown;
}
/*2.后代选择器*/
.div1 div{
color: gold;
}
.div1 .div2{
color: green;
}
/*子代选择器*/
.v1> .v2{
color: cornflowerblue;
}
/*毗连选择器*/
.v1 + p{
background-color: gold;
}
</style>
</head>
<body>
<!--1.多元素选择器-->
<p id="little">组合选择器1</p>
<div class="little_c">组合选择器2</div>
<!--2.后代选择器-->
<div class="div1">
<div>
<p>ppp</p>
<div class="div2">后代选择器</div>
</div>
<p>p 2p</p>
</div>
<!--子代选择器-->
<div class="v1">
<div>
<p class="v3">子代选择器</p>
</div>
<div class="v2">子代选择器</div>
</div>
<p>毗连选择器</p>
<p>毗连选择器2</p>
</body>
</html>
############################### Css 属性选择器########################################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*属性选择器*/
[jack]{
color: blueviolet;
}
p[jack="qo"]{
font-size: 30px;
font-family:"Times New Roman"
}
[jack~="alin"]{
color: pink;
}
</style>
</head>
<body>
<!--属性选择器-->
<div>hello</div>
<div jack="2b">hello</div>
<div jack="we">hello</div>
<p jack="qo">属性选择器</p>
<p jack="qo alin">属性选择器</p>
</body>
</html>
############################### Css 伪类########################################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{
color: gold;
}
a:visited{
color: blue;
}
a:hover{
color: pink;
}
a:active{
color: green;
}
.milk{
width: 100px;
}
.top,.button{
width: 100px;
height: 100px;
background-color: green;
}
.top:hover{
background-color: brown;
}
.milk:hover .button{
background-color: blue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com/">Hello World</a>
<div class="milk">
<div class="top"></div>
<div class="button"></div>
</div>
</body>
</html>
############################### Css 选择器优先级########################################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: rgb(82, 122,61);
font-size:50px;
font-weight:500 ;
font-style: oblique;
background-color: blue;
}
.back{
border: 1px solid red;
width: 1200px;
height: 1520px;
background-image: url("http://www.nangua2008.com/data/attachment/forum/201808/28/111853x6modfwjranqfxcd.jpg");
background-repeat: no-repeat;
background-position:0 center;
}
</style>
</head>
<body>
<p>举杯邀明月，对影成三人</p>
<div class="back">
</div>
</body>
</html>
############################### Css 文本，列表，display,边框属性########################################
1.文本
text-align: center;
line-height: 100px;
word-spacing:10px ;
letter-spacing: 15px;
text-indent: 150px;
2.列表
list-style: lower-greek; #列表属性
3.display
display: inline-block;
display: block;
display: inline;
display: none;
4.边框
内外边框：
margin:用于控制元素与元素之间的距离，从而达到相互隔开的目的
padding:用于控制内容与边框之间的距离
border:围绕在内边距和内容外的边框
content:盒子的内容，显示文本和图像
width: 200px;
height: 200px;
border: 5px solid darkred;
padding: 10px;
margin: 10px;
############################### Css float########################################
浮动：为使某元素浮动起来
#清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
.container{
border: 1px solid red;
width:300px;
}
#box1{
background-color: green;
float: left;
width: 100px;
height: 100px;
}
#box2{
background-color: deeppink;
float: right;
width: 100px;
height: 100px;
}
#box3{
background-color: pink;
height: 40px;
}
/*第二种方式清除浮动方式，用伪类的方式*/
.clearfix:after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="container clearfix">
<div id="box1">box1 向左浮动</div>
<div id="box2">box1 向右浮动</div>
<!--清除浮动样式方法1. clear只能管理自己的元素，不能控制影响别人-->
<!--<div style="clear: both"></div>-->
</div>
<div id="box3">box3</div>
</body>
</html>
############################### Css position 定位########################################
相对定位：relative
绝对定位：absolute
固定定位：fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 100px;
height: 200px;
background-color: aqua;
}
.div2{
width: 100px;
height: 200px;
background-color: darkred;
/*position: relative; 位置：相对路径*/
/*position: absolute; 位置：绝对路径*/
left: 100px;
top: 100px;
}
.div3{
width: 200px;
height: 100px;
background-color: dodgerblue;
position: relative;
top: -100px;
}
.div4{
width: 200px;
height: 200px;
background-color: darkgoldenrod;
}
/* posotoin:fixed 位置：固定*/
.returnTop{
width: 100px;
height: 50px;
position: fixed;
bottom: 20px;
right:5px;
background-color: green;
color: white;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="outer">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
<div style="height: 2000px;background-color: darkgoldenrod"></div>
<div class="returnTop ">返回顶部</div>
</body>
</html>
浙公网安备 33010602011771号