Python【12】【前端编程】- CSS基础
1、who is she?
层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
2、选择器
div id class 选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器 div*/
div{
font-size: 30px;
}
/*id选择器*/
#id1{
background-color: beige;
}
/*class选择器 <-- 一般用这种，上面两种不用*/
.class1{
color: blue;
}
</style>
</head>
<body>
<a id="id1">hello</a>
<span class="class1">hi</span>
<!--样式优先当前标签指定-->
<div class="class1" style="color: red">nine</div>
<hr />
<!--关联选择器，关联样式-->
<style>
/*.container li a{*/
.container .li .a{
color: blue;
}
</style>
<div class="container">
<ul>
<li class="li">
<a class="a">aaa</a>
</li>
<li>ccc</li>
<li>ccc</li>
</ul>
</div>
</body>
</html>
组合标签选择器
<body>
<style>
.a #b span,.d,.e {
color: red;
}
</style>
<div class="a">
<ul>
<li id="b">
<span>sss</span>
</li>
<li id="b">
<span class="d">ssssss</span>
</li>
<li id="b">
<span class="e">
sssssss
</span>
</li>
<li class="a">aaa</li>
</ul>
</div>
</body>
</html>
属性选择器
<body>
<!--属性选择器-->
<style>
.con input[type="text"][custom="custom"] {
border: 3px solid blue;
}
</style>
<div class="con">
<input custom="custom" type="text" name="username" />
<input type="text" />
<input type="file" />
<input type="password" />
<input type="button" />
<input type="checkbox" />
</div>
</body>
</html>
3、位移与内外边距
位移
backgroud：
position
外边距
<body>
<!-- margin：外边距，改变自己外部离其它标签的边距-->
<div style="background-color: blue;height: 100px;" >
<div style="background-color: red;height: 40px;margin: 10px"></div>
</div>
</body>
内边距
<body>
<!-- padding：内边距，改变自己内部的边距-->
<div style="background-color: blue;height: 100px;" >
<div style="background-color: red;height: 40px;padding: 10px"></div>
</div>
</body>
4、Position
固定、相对位置、绝对位置
<body>
<!--
position:
fixed - 相对浏览器窗口固定
relative - 相对于浏览器窗口（外）
absolute - 绝对于为父标签（内），与relative组合使用
-->
<div id="content" style="background-color: antiquewhite;height: 2000px;">
<div style="position: relative;background-color: aqua;width: 200px;height: 300px;margin: 0 auto;">
<h1>houhou</h1>
<a style="position: absolute;right: 0px;bottom: 0px;">TOP</a>
</div>
</div>
<a style="position: fixed;right: 8px;bottom: 8px;" href="#content;">TOP</a>
</body>
5、display
none - 隐藏不显示
block - 变成块级标签
inline - 变成内联标签
cursor
float
<body>
<div style="background-color: aquamarine;">
<div style="float: left;background-color: red;">aaa</div>
<div style="float: left;background-color: red;">bbb</div>
<!--如果不设置clear：both，上面float后的标签会脱离父标签的样式-->
<div style="clear: both;"></div>
</div>
</body>
overfloat
出现的情况：字符超出了样式范围
<body>
<div style="background-color: aqua;height: 80px;">
aaa <br />
aaa <br />
aaa <br />
aaa <br />
aaa <br />
aaa <br />
aaa <br />
</div>
解决办法 1 滚动条
<body>
<div style="background-color: aqua;height: 80px;overflow: auto;">
aaa <br />
aaa <br />
aaa <br />
aaa <br />
aaa <br />
aaa <br />
aaa <br />
</div>
</body>
解决办法 2 隐藏
<body>
<div style="background-color: aqua;height: 80px;overflow: hidden;">
aaa <br />
aaa <br />
aaa <br />
aaa <br />
aaa <br />
aaa <br />
aaa <br />
</div>
</body>
页面边距问题
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--给body添加边距的样式-->
<style>
body{
margin: 0 auto;
}
</style>
</head>
透明度
<style>
.shade{
position:fixed;z-index:1040;top:0;left:0;right:0;bottom:0;background-color:#999;filter:alpha(opacity=50); -moz-opacity:0.5;opacity:0.5;
}
</style>
层设定
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.la1{
z-index: 1;
background-color: burlywood;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 0.5;
position: fixed;
}
.la2{
z-index: 2;
position: fixed;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -60px;
}
</style>
</head>
<body>
<div>
<h1>aaa</h1>
<input type="button" value="hi"/>
</div>
<div class="la1"></div>
<div class="la2">
<div style="background-color: aquamarine;height: 100px;width: 120px;">
<input type="submit"/>
</div>
</div>
</body>
页面部局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0 auto;
}
.pg-header{
background-color: cornflowerblue;
height: 80px;
}
.pg-body{
}
.pg-body .menu{
background-color: cadetblue;
position: absolute;
top: 81px;
left: 0;
bottom: 0;
width: 200px;
overflow: auto;
}
.pg-body .content{
background-color: darkgrey;
position: absolute;
right: 0;
bottom: 0;
left: 202px;
top: 81px;
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-body">
<div class="menu">
<br />dog
<br />dog
<br />dog
...
</div>
<div class="content">
11<br />
11<br />
11<br />
...
</div>
</div>
</body>
</html>
