颜色
RGB(red greed bule)(0,10,256)
#0010FF
CSS中颜色的表示方法
(1) 预定义颜色:bule ,red,black。。。
(2) 十六进制颜色:#0f0f0f
(3) RGB颜色(128,0,0)全红
(4) RGBA,在RGB的基础上又添加了表示透明度的Alpha
(5) HSl:用色调,饱和度,和透明度三个分量来表示颜色
(6) HSLA:在HSL的基础上又添加了表示透明度的Alpha
代码实现:
<p style="color: blue;">预定义颜色</p>
<p style="color: rgb(0,255,0);">RGB颜色</p>
<p style="color: #ff0000;">16进制颜色</p>
背景相关属性
Background-color:背景颜色
Background-image:背景图片
Background-repeat:图片复制选项(repeat在水平,垂直两个方向复制)
(repeat-x/y 在水平/垂直方向进行复制)
(no-repeat 不复制)
Background-position:图片所在位置 上top 下bottom 左left 右right
简写:将所有元素放在一起
有顺序要求:背景颜色->背景图片->重复方式->所在位置
background: url(img/pic.jpg) #87CEEB repeat-y right;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background</title>
<style type="text/css">
div{
border: 1px red solid;
/*给边框*/
}
.div1{
background-color: #0000FF;
height: 100px;
}
.div2{
background-image: url(./2.jpg);
height: 200px;
background-repeat: no-repeat;
background-position: right;
/*top(上),buttom(下)*/
}
.div3{
background-image: url(2.jpg);
height: 500px;
background-repeat: repeat-x;
}
.div4{
height: 500px;
background: url(2.jpg) #FFC0CB repeat-y right;
}
</style>
</head>
<body>
<div class="div1">背景颜色</div>
<div class="div2">背景图片不重复</div>
<div class="div3">背景图片横向(纵向重复)</div>
<div class="div4">简写方式</div>
</div>
</body>
</html>
尺寸相关属性
(1)固定高度与宽度(height:200px)
(2)自适应高度(高度会根据内容的增加而增加)
(3)指定最大高度max-height(内容增加到指定高度的时候就不会再增加)
(4)指定最小高度min-height(开始时高度固定,内容增加到一定地步时开始增加高度)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>尺寸有关</title>
<style type="text/css">
div {
border: red 2px solid;
}
.div1 {
width: 200px;
height: 100px;
}
.div3 {
max-height: 50px;
}
.div4 {
min-height: 100px;
}
.div5 {
overflow: scroll;
max-height: 100px;
}
</style>
</head>
<body>
<div>
<div class="div1">固定高度和宽度</div>
<div class="div2">自适应高度和宽度<br>asdkjaksdjkasjkd<br>hadsjhdahsd</div>
<!--高度有内容撑起,内容越多高度越大-->
<div class="div3">可以指定最大高度</div>
<div class="div4">可以指定最小高度</div>
<div class="div5">
<p>6666</p>
<p>6666</p>
<p>6666</p>
<p>6666</p>
<p>6666</p>
<p>6666</p>
<p>6666</p>
<p>6666</p>
<p>6666</p>
<p>6666</p>
<p>6666</p>
<p>6666</p>
</div>
</div>
</body>
</html>
显示相关属性
(1)visibility:hidden 仅仅隐藏内容,该元素所占位置依然存在
(2)display:none 不仅隐藏内容,而且隐藏位置
Display:inline 将块级元素以内联元素形式显示,此时宽,高等属性对其无效
Display:inline-block 将块级元素以内联元素形式显示并且具有块级元素的特征,宽,高属性依然有效
Display:block 将内联元素以块级元素的形式展现
<style type="text/css">
div{
background-color: #008000;
width: 200px;
height: 100px;
}
.div1{
visibility: hidden;
/*隐藏内容,位置依然存在*/
display: none;
/*内容与位置均不存在*/
盒子模型
Margin:外边距
Margin-top(上) margin-bottom(下) margin-left(左) margin-right(右)
使用方式:
(1) margin:30px ,表示上下左右外边距都设置30px
(2) margin-left:30px ,表示设置距离左方30px
(3) margin: 10px 20px 10px 20px 分别设置上右下左四个边的边距,顺序按照顺时针方向
(4) margin:20px 30px 分别设置上下边距为20px ,左右边距为30px
Padding:内边距
与margin类似 上下左右边距都有
Border:边框
如果想让两个盒子在一行内,那么两个盒子都要浮动(float)并且给它们的父类清除浮动(overflow: hidden;)
什么是父类:
Box是div1和div2的父类。
我的作业如下:
代码图:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型测试</title>
<style type="text/css">
.box {
overflow: hidden;
}
.div1 {
font-size: 50px;
color: aqua;
font-family: "楷体";
float: left;
width: 200px;
height: 100px;
overflow: hidden;
}
.div2 {
font-family: "幼圆";
float: right;
width: 200px;
height: 100px;
border: 1px solid green;
overflow: hidden;
color: white;
background-color: black;
font-size: 50px;
}
.div3 {
border: 1px solid red;
width: 200px;
height: 100px;
}
.div4 li {
overflow: hidden;
color: red;
font-size: 35px;
float: right;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="box">
<div class="div1">web1班</div>
<div class="div2">我们最棒</div>
</div>
<div class="div3">我是盒子3</div>
</div>
<div class="div4">
<ui id="div4">
<li>王牌飞行员申请出战</li>
<li>2234</li>
<li>1234</li>
</ui>
</div>
</body>
</html>
运行图: