目录
设置标签长度
只有块级标签可以设置长度
行内标签长度取决于内部文本长度
设置字体
可以使用pycharm自带的取色器，获取16进制颜色
rgb() 利用截图软件获取三原色
rgba() 最后一个数字是透明度
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
font-size: 24px;
font-weight: lighter; /*变细*/
/*color: 'red';*/
/*color: #06a0de;*/
/*color: rgb(0,128,128); !* 数字范围只能是0~255*!*/
color: rgba(0,128,128,0.9);
}
</style>
</head>
<body>
<p>坚持拥护党的领导，向钱看!!!!!!!!!!!!</p>
</body>
text-indent: 48px; <!--段落开头空格-->
a { <!--去除a标签内文本的下划线-->
text-decoration: none;
}
设置背景
默认是铺满整个区域
通常一个页面上的一个个的小图标 并不是单独的 而是一张非常大的图片 该图片上有网址所用到的所有的小图标 通过控制背景图片的位置 来显示不同的图标样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 400px;
/*background-color: orange;*/ /*设置背景颜色*/
/*background-image: url("111.png");*/ /*设置背景图片*/
/*background-repeat: no-repeat; !*不平铺*!*/ /*当图片不够铺满时会重复平铺*/
/*background-repeat: repeat-x; x轴*/ /*横向不重复*/
/*background-repeat: repeat-y;*/ /*纵向不重复*/
/*background-position: center center;*/ /*将图片置于div中央*/
/*background-position: 10px 50px; !*第一个参数是x轴 第二个参数y轴*!*/
/*支持简写*/
background: url("111.png") red no-repeat center center;
}
</style>
</head>
<body>
<div>
</div>
</body>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
height: 600px;
/*background: url("111.png");*/
background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");
background-attachment: fixed; /*背景图片不会随着页面的滚动而滚动。*/
}
</style>
</head>
<body>
<div style="height: 400px;background-color: red"></div>
<div style="height: 400px;background-color: yellow"></div>
<div id="d1"></div>
<div style="height: 400px;background-color: blue"></div>
</body>
设置边框
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
/*border-top: 3px solid red;*/ /*设置上边框的宽度、类型(实线)、颜色*/
/*border-left: 1px dotted green;*/ /*类型（圆点）*/
/*border-right: 5px dashed blue;*/ /*类型（虚线）*/
/*!*border-bottom: 10px solid pink;*!*/
/*border-bottom: yellow 10px dotted;*/ /*顺序无所谓*/
/*border: solid 10px red;*/
border-style: dot-dash; /*可以同一设置*/
border-color: pink;
}
</style>
</head>
<body>
<p>除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：</p>
</body>
画圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border: 1px solid black;
background-color: red;
height: 400px;
/*width: 400px;*/
width: 800px;
/*border-radius: 20px;*/
border-radius: 50%; /*在标签（长宽相等）的四个角上，以指定半径画圆；当半径为50%时，就是圆。当标签的长宽不相等时，是椭圆*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
diaplay
inline:将块级标签变成行内标签，#原来的两个块级标签可以在一行 block：使行内标签也能设置长宽和独占一行 inline-block:既可设置长宽，也可在一行 dicplay:none:隐藏标签，并且不占位 visibility:hidden:隐藏标签，但是占位
盒子模型
1。外边距 margin 标签与标签之间的距离 2。边框 border 边框宽度 3。内边距（内填充） padding 内部文本与与内边框的距离 4。内容 content 文本大小
注意： 1.margin和padding的设置，top、bottom、left、right， 当只写一个参数时，默认设置四边； 当写两个参数时，设置上下和左右 当写三个参数时，设置上、左右和下 当写四个参数时，设置上右下左 margin:0 auto 设置左右居中，不能上下居中
浮动
float
在css中，任何元素都可以浮动
浮动的元素，是脱离正常文档流的（原来的位置会让出来）
浏览器会优先展示文本内容
浮动带来的影响
造成父标签塌陷
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
.c2 {
width: 100px;
height: 100px;
background-color: green;
float: right;
}
.c3 {
border: black solid 10px;
}
</style>
</head>
<body>
<div class="c3">
<div class="c1"></div>
<div class="c2"></div>
<!--<div class="c4"></div>-->
<!--<div style="clear:both"></div>-->
</div>
<div class="c5"></div>
</body>
解决父标签塌陷
clear 清除浮动带来的影响
.clearfix:after {
content: '';
clear: both; /*左右两边都不能有浮动的元素*/
display: block;
}
/*哪个父标签塌陷了 就给谁加clearfix这个类属性值*/
overflow溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
height: 200px;
width: 200px;
border: 3px solid black;
/*overflow: hidden; !*溢出的直接隐藏*!*/
overflow: auto; /*以滚动条的形式处理*/
/*overflow: scroll;*/
}
</style>
</head>
<body>
<div>阿萨德卡时间的就是打算考虑的就是骄傲的空间阿斯加德
阿萨德卡时间的就是打算考虑的就是骄傲的空间阿斯加德
阿萨德卡时间的就是打算考虑的就是骄傲的空间阿斯加德
阿萨德卡时间的就是打算考虑的就是骄傲的空间阿斯加德
</div>
</body>
</html>
圆形头像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
background-color: darkgray;
}
.c1 {
height: 120px;
width: 120px;
border: 5px solid white;
border-radius: 50%;
overflow: hidden;
}
img {
width: 100%;
}
</style>
</head>
<body>
<div class="c1">
<img src="../test/HTML/rose.jpeg" alt="">
</div>
</body>
</html>
定位
所有标签默认都是静态的，无法改变位置（position:static;）
必须将静态的状态改成定位之后
相对定位
position:relative
相对于标签原来的位置移动
绝对定位
position:absolute
相对于已经定位过的（只要不是static即relative之后）的父标签在做定位
固定位置
position:fixed
相对于浏览器窗口，固定在某个位置不动
位置变化是否脱离文档流
- 不脱离文档流：相对定位
- 脱离文档流：浮动的元素，绝对定位，固定定位
z-index
堆叠顺序
opacity
调节字体和背景整体的透明度