目录
一、CSS设置标签样式
1. 给标签设置长和宽
- 只有块级标签才可以设置长宽
- 行内标签设置了没有任何作用（行内仅仅只取决于内部的文本大小）
2.字体的颜色（3种表示方法）
- 颜色的英文
6aode 直接使用pycharm提供的取色器即可
rgb(1，2，3)可利用截图软件获取三基色数字rgba(0,128,128,0.5)最后一个数字，只能用来调节颜色的透明度
<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>3.文本样式
<style>
p {
/*text-align: center;*/
/*text-align: left;*/
/*text-align: right;*/
/*text-align: justify;*/
text-decoration: underline;
text-decoration: overline;
/*text-decoration: line-through;*/
/*text-decoration: none;*/
font-size: 24px;
text-indent: 48px;
}
a {
text-decoration: none;
}
</style>4. 语义
取消a标签默认的下划线 a { text-decoration:none }
5. 背景样式
背景图片默认是铺满整个区域
通常一个页面上的一个个的小图标 并不是单独的
而是一张非常大的图片 该图片上有网址所用到的所有的小图标
通过控制背景图片的位置 来显示不同的图标样式<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; y轴平铺*/ /*background-position: center center;*/ /*background-position: 10px 50px; !*第一个参数是x轴 第二个参数y轴*!*/ /*支持简写*/ background: url("111.png") red no-repeat center center; } </style>
6. 边框
border 后面写三个参数 位置没有关系
颜色
粗细
样式 solid dotted dashed none 四种样式
可以单独设置 样式 颜色 粗细
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
可以单独设置某一边的样式 ，参数的顺序任意
border-top: 3px solid red;
border-left: 1px dotted green;
border-right: 5px dashed blue;
border-bottom: 10px solid pink;
也可以简写统一设置 ，参数顺序任意
border: solid 10px red;
6.1 边框变圆
使用border中的radius属性和给定的长宽即可做到让边框编程圆形、椭圆、棱角圆润等效果
<style> div { border: 1px solid black; background-color: red; height: 400px; /*width: 400px;*/ width: 800px; border-radius: 20px; 棱角圆润 border-radius: 50%; 椭圆 只有长宽相等时，再利用radius，才能编程圆形边框 } </style>
7.display 标签转换
display
inline 将块儿级标签变成行内标签
block 能够将行内标签 也能设置长宽和独占一行
inline-block; /*即可以设置长宽 也可以在一行展示*/
display:none 隐藏标签 并且标签原来占的位置也没有了，而且代码的功能也没有了********
visibility:hidden 隐藏标签 但是标签原来的位置还在 ，代码的功能还在********二、盒子模型
- 谷歌浏览器body默认有8px外边距，在查看页面源码时，选中某些属性通过键盘上下方向键即可改变属性值。如长宽半径等属性。
以快递盒为例
1.两个快递盒之间的距离(标签与标签之间的距离) 外边距(margin)
2.快递盒盒子的厚度(边框border) 边框(border)
3.快递盒中的物品距离内边框的距离(内部文本与内边框之间的距离) 内边距(内填充) padding
4.物品的大小(文本大小) 内容content
/*margin: 15px; !*只写一个参数 上下左右全是*!*/
/*margin: 10px 20px; !*第一个控制的上下 第二个是左右*!*/
/*margin: 10px 20px 30px; !*第一个控制的上 第二个是左右 第三个是下*!*/
margin: 10px 20px 30px 40px; /*上 右 下 左 ， 即顺时针排列*/
padding简写规律跟margin一样
#d1 {
margin: 0 auto;/* 就和只有俩参数的情况是一样的，上下为0，左右自动，就是各一半*/
}
只能左右居中 不能上下居中三、浮动（************）
- 关键字：
float
在 CSS 中，任何元素都可以浮动。
浮动的元素 是脱离正常文档流的(原来的位置会让出来)
浏览器会优先展示文本内容(******)
浮动带来的影响
会造成父标签塌陷(口袋瘪了)
如何解决父标签塌陷问题？？？
clear 清除浮动带来的影响，具体方法如下
.clearfix:after {
content: '';
clear: both; /*左右两边都不能有浮动的元素*/
display: block;
}
哪个父标签塌陷了 就给谁加clearfix这个类属性值
三、溢出
当设定的标签的长宽后，标签的大小小于其文本或图片等数据的大小时，多余的数据就会展示在标签的边框之外。这就是溢出
<style> div { height: 50px; width: 50px; border: 3px solid black; /*overflow: hidden; !*溢出的直接隐藏*!*/ /*overflow: auto; 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容*/ /*overflow: scroll; 内容会被修剪，但是浏览器会显示滚动条以便查看其多余的长宽的内容*/ } </style>
四、定位
所有的标签默认都是静态的， 静态的是无法改变位置的
position: static;
必须将静态的状态修改成定位的三种参数之一后，才能改变位置
相对定位(了解) relative
相对于标签原来的位置 移动
绝对定位(小米的购物车) absolute
相对于已经定位过(只要不是static都是定位过了的)的父标签 再做定位(******)
固定定位(回到顶部) fixed
相对于浏览器窗口 固定在某个位置不动
代码演示：
<style>
body {
margin: 0;
}
/*.c1 {*/
/*width: 100px;*/
/*height: 100px;*/
/*background-color: gold;*/
/*position: relative;*/
/*left: 100px;*/
/*top: 100px;*/
/*}*/
/*.c2 {*/
/*position: relative; !*将c2从一个不是定位标签变成已经定位过的标签*!*/
/*height: 100px;*/
/*width: 200px;*/
/*background-color: black;*/
/*}*/
/*.c3 {*/
/*position: absolute;*/
/*height: 200px;*/
/*width: 800px;*/
/*top: -50px;*/ **********************
/*left: 200px;*/ **********************
/*background-color: pink;*/
/*}*/
.c2 {
border: 5px solid black;
background-color: pink;
position: fixed;
bottom: 50px;
right: 50px;
}
</style>
</head>
<body>
<!--<div class="c1"></div>-->
<!--<div class="c2">-->
<!--<div class="c3"></div>-->
<!--</div>-->
<div style="height: 10000px;background-color: darkgray" class="c1"></div>
<div style="height: 10000px;background-color: green" class="c1"></div>
<div style="height: 10000px;background-color: red" class="c1"></div>
<div class="c2">回到顶部</div>
</body>五、z-index 控制z轴
<style>
.cover {
background-color: rgba(128,128,128,0.4);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
}
.modal {
background-color: white;
z-index: 1000;
position: fixed;
height: 200px;
width: 400px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
</style>六、位置的变化是否脱离文档流
1.不脱离文档流
- 相对定位
2.脱离文档流
- 浮动的元素
- 绝对定位
- 固定定位
七、透明度
- 直接使标签的全部内容包括背景的透明度都会同时变化
属性名：
opacity<style> .c1 { background-color: rgba(128,128,128,0.4); opacity: 0.2; } .c2 { opacity: 0.2; background-color: red; } </style>