CSS属性操作
1.文本
-
文本颜色：color，颜色属性被用来设置文字的颜色，颜色是通过CSS经常指定的，其格式有：
1.十六进制：#FF0000；
2.RGB值：RGB(255,0,0)；
3.颜色名称：red； -
水平对其方式：text-align属性规定元素中的文本的水平对齐方式；
1.left：文本排列到左边；默认值：由浏览器决定；
2.right：文本排列到右边；
3.center：文本排列到中间；
4.justify：文本两端对齐； -
文本其他操作：
text-align：center 文本居中
font-size: 10px;
line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效
text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线
font-family: 'Lucida Bright'
font-weight: lighter/bold/border/
font-style: oblique 或者italic...(设置字体的样式为斜体)
text-indent: 150px; 首行缩进150px
letter-spacing: 10px; 字母间距
word-spacing: 20px; 单词间距
text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写
2.背景属性
- background-color：背景颜色
- background-image：背景图片连接
- background-repeat：x-轴平铺
- background-position：调整背景的位置
background-color: cornflowerblue；
background-image: url('1.jpg')；
background-repeat: no-repeat；(repeat:平铺满)
background-position: right top（20px 20px）；
简写：background:#FFFFFF url('1.png') no-repeat right top;
背景调试小黄人的眼睛
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景处理</title>
<style>
.c1{
300px;
height: 200px;
border: 1px solid red;
background: url("xhr.jpg") -206px -29px;
/*可在那个网页上右击点击检查，调试*/
/*background-position: center; */
/*定位*/
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
3.外边框(margin)和内边距(padding)
1.盒子模型
- margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉上达到相互隔开的目的；
- padding：用于控制内容与边框之间的距离；
- border：围绕在内边距和内容外的边框；
- content：盒子的内容，显示文本和图像；
2.margin(外边距)
单边外边距属性
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
属性简写
margin:10px 20px 20px 10px；
上边距为10px
右边距为20px
下边距为20px
左边距为10px
margin:10px 20px 10px;
上边距为10px
左右边距为20px
下边距为10px
margin:10px 20px;
上下边距为10px
左右边距为20px
margin:25px;
所有的4个边距都是25px
居中应用
margin:0 auto;
3.padding(内边距)
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变都该改变，其设置同margin；
思考1：body的外边距
边框在默认情况下辉定位于浏览器的左上角，但是并没有紧贴着浏览器窗口的边框，这是因为body本身也是一个盒子(外层还有html)。在默认情况下，body距离html会有若干像素的margin，具体数值因浏览器不同而不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框，为了检验这一点加上如下样式：
body{
border:1px solid;
background-color:cadetblue;
}
解决方法：
body{
margin:0;
}
思考2：margin collapse(边界塌陷或边界重叠)
1、兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里面值最大的作为显示值；
2、父子div：如果父级div中没有border、padding、inline content，子级div的margin会一直向上赵，直到找到某个标签包括border、padding、inline content中的一个，然后按此div进行margin；
父级塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Collapse</title>
<style>
body{
margin: 0px;
}
.div1{
background-color: rebeccapurple;
300px;
height: 300px;
overflow: hidden;
}
.div2{
background-color: red;
200px;
height: 200px;
margin-bottom: 40px;
margin-top: 20px;
}
.div3{
background-color: green;
100px;
height: 100px;
margin-top: 20px;
}
</style>
</head>
<body>
<div style="background-color: bisque; 300px; height: 300px;"></div>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
解决方法：
overflow:hidden;
4.float属性
布局关键点：如何能够让可以调节长度的元素(标签)在一行显示？如果上一个元素是浮动的，那么就紧贴着；如果上一个不是浮动的，那么就保持垂直距离不变；
1.基本浮动规则
block元素通常被实现为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效；
- 常见块级元素：div、form、table、p、pre、h1-h6、dl、ul等；
- 常见内联元素：span、a、strong、em、label、input、select、textarea、img、br等；
文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列；
脱离文档流，也就是将元素从普通的布局排版中拿走，其它盒子再定位的时候，会当作脱离文档流的元素不存在而进行定位；
假如：某个div元素A是浮动的，如果A元素上的一个元素也是浮动的，那么A元素会跟随在上一个元素的后面(如果一行放不下两个元素，那么A元素会被挤到下一行)；如果A元素上的一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的边框之后的block元素会认为这个框不存在，但其中的文本以仍然会给这个元素让出位置，浮动边框之后的inline元素会为这个框空出位置，然后按顺序排序；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
}
.r1{
300px;
height: 100px;
background-color: red;
float: left;
}
.r2{
200px;
height: 200px;
background-color: aqua;
}
.r3{
100px;
height: 200px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
</body>
</html>
2.非完全脱离文档
左右结构div盒子重叠现象，一般是由于相邻两个div一个使用浮动另一个没有使用浮动，这样会导致div不是在同一个"平面"上，但内容不会造成覆盖现象，私有div形成覆盖现象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.r1{
100px;
height: 100px;
background-color: #7A77C8;
float: left;
}
.r2{
200px;
height: 200px;
background-color: wheat;
}
</style>
</head>
<body>
<div class="r1"></div>
<div class="r2">region two</div>
</body>
</html>
解决方法：要么都不使用浮动；要么都使用浮动；要么对没有使用浮动的div设置margin样式。
3.清除浮动
clear语法
clear：none | left | right | both
- 1.clear：left清除左边的浮动；
- 2.clear：both清除左右两边的浮动；
注意：排序的时候是一个标签已给标签地排序，如果上一个是浮动的，就紧贴上一个；如果上一个不是浮动的，就和上一个保持垂直不变；
5.列表属性
去掉列表前面的标志：ul li{list-style:none;}
去掉列表前面的空格：ul{padding:0}
上面两行也可以写成：*{margin:0;padding:0;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li{
font-family: 华文中宋;
list-style: none; //去掉点
/*list-style: circle;//空心圆*/
/*list-style: disc;//实心圆（默认也是实心圆）*/
}
ul{
padding: 0; //把字体移到前面
}
</style>
</head>
<body>
<div>
<ul>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
<li>第四章</li>
</ul>
</div>
</body>
</html>
6.display属性
display属性
- 1.将块级标签设置成内联标签：display：inline；
- 2.将内联标签设置成块级标签：display：block；
- 3.内联块级标签：像块级标签一样可以设置长度和高度，也可以像内联标签一样在一行显示：display：inline-block；
- 4.将不像让用户看到的属性隐藏：display：none；
- 5.visibility：hidden，也是隐藏；
注意：visibility可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，也就是说，该元素被隐藏了，仍然会影响页面布局；display：none可以隐藏某个元素，且隐藏的元素不会占用任何空间，也就是说，该元素不但被隐藏了，且该元素占用的空间也会从页面布局中消失。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
100px;
height: 100px;
background-color: rebeccapurple;
}
.c2{
100px;
height: 100px;
background-color: burlywood;
}
.c3{
100px;
height: 100px;
background-color: crimson;
display: inline;
}
.c4{
100px;
height: 100px;
background-color: gray;
}
.s1{
100px;
height: 100px;
background-color: royalblue;
/*visibility: hidden;*/ // 隐藏了其他的不会顶上去
display: none; // 隐藏了其他的会顶上去
}
</style>
</head>
<body>
<div class="c4">十年之后</div>
<span class="s1">我们还是朋友</span>
<div class="c1">还可以温柔</div>
<div class="c2">还可以温柔</div>
<div class="c3">还可以温柔</div>
</body>
</html>
7.position(定位)属性
position四种属性：
- static：默认位置；
- fixed：完全脱离文档流，固定位置(以可视窗口为参照物)；
- relative：相对位置(参照的是自己本身的位置)，没有脱离文档流，可以使用top、left进行定位；
- absolute：绝对定位，脱离文档流(参照已定位的父级标签定位，如果找不到会按照body的去找)；
注意：将定位标签设置为absolute，将其父级标签设置为定位标签relative
固定位置实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定位置实例</title>
<style>
.c1{
background-color: white;
100%;
height: 1000px;
}
.returntop{
100px;
height: 40px;
background-color: gray;
/* 透明度 */
/*opacity: 0.4;*/
color: black;
text-align: center;
line-height: 40px;
position: fixed;
bottom: 50px;
right: 20px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="returntop">返回顶部</div>
</body>
</html>
相对位置实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
*{
margin: 0px;
}
.box1,.box2,.box3{
200px;
height: 200px;
}
.box1{
background-color: blue;
position: relative;
}
.box2{
background-color: darksalmon;
position: relative;
/*position: absolute;*/
left: 200px;
/*right: 200px;*/
top: 200px;
}
.box3{
background-color: lime;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
绝对位置实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
.father{
position: relative;
}
*{
margin: 0px;
}
.box1,.box2,.box3{
200px;
height: 200px;
}
.box1{
background-color: blue;
position: relative;
}
.box2{
background-color: darksalmon;
/*position: relative;*/
position: absolute;
left: 200px;
/*right: 200px;*/
top: 200px;
}
.box3{
background-color: lime;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="father">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
float和position的区别：float是半脱离文档；position是全脱离文档。
8.其他常用属性
1.去掉下划线：text-decoration：none；
2.加上下划线：text-decoration：underline；
3.调整文本和图片位置(设置元素的垂直对齐方式)：vertical-align：-20px；
4.外边距：margin；
5.内边距：padding；
6.内联标签是不可以设置长度和高度的，有时候需要把内联标签变成块级标签或者块级内联标签，这就用到display属性了：
7.隐藏的两个方法：display：none；visibility：hidden；
8.隐藏溢出的两个方法：overflow：auto；overflow：scroll；(滚动机制)
9.文本居中：text-align：center(水平居中)；line-height(垂直居中)；
10.z-index：属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素堆叠</title>
<style>
.imag1{
position: absolute;
left: 0px;
top: 0px;
z-index: -10;
}
.imag2{
position: absolute;
left: 0px;
top: 0px;
z-index: -3; // 值越大越往前
}
.imag3{
position: absolute;
left: 0px;
top: 0px;
z-index: -5;
}
</style>
</head>
<body>
<div class="imag3"><img src="作业/1.jpg" alt=""></div>
<div class="imag2"><img src="作业/2.jpg" alt=""></div>
<div class="imag1"><img src="作业/3.jpg" alt=""></div>
</body>
</html>
11.透明度：opacity：0.3；
12.边框弧度：border-radius：50%；
13.去除列表前面的标志：list-style：none；
14.对其上面和左边最顶部：padding：0；margin：0；
15.字体加粗：font-weight：900；
几个实例
1.图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin: 0;
}
.outer{
790px;
height: 340px;
border: solid 1px red;
margin: 0 auto;
margin-top: 40px;
position: relative;
}
ul{
list-style: none;
position: absolute;
top: 0;
left:0;
}
.com{
position: absolute;
display: none;
/*visibility: hidden;*/
}
.num{
position: absolute;
top: 300px;
left: 330px;
}
.num li{
display: inline-block;
20px;
height: 20px;
color: black;
background-color: white;
border-radius: 50%; //边框弧度
line-height: 20px;
text-align: center;
}
.btn{
position: absolute;
40px;
height: 60px;
background-color: grey;
opacity: 0.5; //透明度
color: black;
font-weight: 900; //加粗
text-align: center;
line-height: 60px;
top:50%;
margin-top: -30px;
}
.leftbtn{
left:0;
}
.rightbtn{
right:0;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a href=""><img src="1.jpg" alt=""></a></li>
<li class="com"><a href=""><img src="2.jpg" alt=""></a></li>
<li class="com"><a href=""><img src="3.jpg" alt=""></a></li>
<li class="com"><a href=""><img src="4.jpg" alt=""></a></li>
<li class="com"><a href=""><img src="5.jpg" alt=""></a></li>
<li class="com"><a href=""><img src="6.jpg" alt=""></a></li>
</ul>
<ul class="num">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="leftbtn btn"> < </div>
<div class="rightbtn btn"> > </div>
</div>
</body>
</html>
2.后台管理布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台管理布局</title>
<style>
*{
margin: 0;
}
a{
text-decoration: none;
}
.header{
100%;
height: 44px;
background-color: #2459a2;
}
.title li{
100px;
height: 80px;
list-style: none;
text-align: center;
line-height: 80px;
margin-top: 20px;
padding: 50px;
background-color: blue;
}
.leftmenu .title a{
font-size: 18px;
color: white;
}
.leftmenu{
300px;
background-color: grey;
position: fixed;
top: 44px;
left:0;
bottom: 0;
}
.con{
position: fixed;
top: 44px;
left: 300px;
right:0;
bottom: 0;
background-color: darksalmon;
overflow: scroll;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="leftmenu">
<ul class="title">
<li><a href="">菜单一</a></li>
<li><a href="">菜单二</a></li>
<li><a href="">菜单三</a></li>
</ul>
</div>
<div class="con">
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
<h1>厉害了，我的国</h1>
</div>
</div>
</body>
</html>
3.遮盖层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遮罩层</title>
<style>
.backgroup{
100%;
height: 2000px;
}
.zzc{
position: fixed;
bottom: 0;
top:0;
left:0;
right:0;
background-color: grey;
opacity: 0.4;
}
</style>
</head>
<body>
<div class="backgroup">
<p>厉害了，我的国</p>
<p>厉害了，我的国</p>
<p>厉害了，我的国</p>
<p>厉害了，我的国</p>
<p>厉害了，我的国</p>
<p>厉害了，我的国</p>
<p>厉害了，我的国</p>
<p>厉害了，我的国</p>
<p>厉害了，我的国</p>
<p>厉害了，我的国</p>
</div>
<div class="zzc"></div>
</body>
</html>