CSS 颜色的表示方式
- 使用英文单词表示颜色
- 16进制表示颜色,一共六个数值,前两个表示红色,中间两个表示绿色,后面表示蓝色,取值范围0~f,#000000 表示黑色 简写#000,#ffffff 表示白色 简写#fff
- RGB表示颜色,rgb(),取值范围0~255
- 带透明度,rgba() ,rgb取值范围0~255,最后一位是透明度取值范围 0-1,0代表完全透明,1代表不透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS颜色的表示方式</title>
<style>
.item1{
width:200px;
height:200px;
/*使用英文单词表示颜色*/
/*background-color:red;*/
/*16进制表示颜色,一共六个数值,前两个表示红色,中间两个表示绿色,后面表示蓝色
取值范围0~f
#000000 表示黑色 简写#000
#ffffff 表示白色 简写#fff
*/
/* background-color:#00ff00; */
/*RGB表示颜色,rgb(),取值范围0~255*/
/*background-color:rgb(0,0,0);*/
/*
带透明度,rgba() ,rgb取值范围0~255
最后一位是透明度取值范围 0-1,0代表完全透明,1代表不透明
*/
background-color:rgb(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="item1"></div>
</body>
</html>
CSS 文本设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS字体文本设置</title>
<style>
.fonts{
/*字体颜色 color*/
color:rgba(0,0,0,0.5);
/*
字体大小 font-size
chrome中默认字体大小为16px
chrome中字体最小为12px 当设置小于12px时,也是以12px显示
*/
font-size:30px;
/*设置字体 font-family*/
font-family:"楷体";
/*设置是否为斜体 font-style:italic*/
font-style:italic;
/*设置字体是否加粗, font-weight:bold*/
font-weight:bold;
/*
设置行高 line-height:*
line-height:35px
*/
/*首行缩进 text-indent*/
text-indent:60px;
/*水平对齐方式 text-align:*/
text-align:center;
}
a{
/*去除下划线 text-decoration*/
text-decoration:none;
}
.item2{
width:500px;
height:200px;
background-color:green;
/*
利用line-height设置文本垂直居中
在设置单行文本垂直居中的时候,值给父级元素的高度
*/
line-height:200px;
text-align:center;
}
</style>
</head>
<body>
<div class="fonts">
我自己写了一个项目,主页可以看到一个数据库里的一个应用的users用户表的所有数据,包括用户的年龄,姓名,出生 日期等信息。后来又想再增加一个注册功能,写好了之后进行单元测试,结果就出现了with root cause的错误,找了一个遍,才找到了原因。
</div>
<div class="item2">
我自己写了一个项目
<a href="http://www.baidu.com">百度</a>
</div>
</body>
</html>
CSS 边框属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 边框属性</title>
<style>
.item{
width:200px;
height:200px;
/*
border 设置边框,三个值都要写上
三个参数分别为宽度,类型,颜色
*/
border:3px dotted #000;
/*单独设置上边框*/
border-top:3px dotted #f00;
/*单独设置下边框*/
border-bottom:3px dotted #0f0;
/*单独设置左边框*/
border-left:3px dotted #00f;
/*单独设置右边框*/
border-right:3px dotted #010101;
}
</style>
</head>
<body>
<div class="item">
</div>
</body>
</html>
CSS 边框阴影效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 边框阴影效果</title>
<style>
.box{
width:200px;
height:200px;
border:3px solid #f00;
/*
box-shadow:10px 10px 20px 10px
第一个值:正值往右偏移,负值往左偏移
第二个值:正值垂直方向位移
第三个值:设置模糊程度
第四个值: 设置扩散范围
第五个值:设置阴影颜色
第六个值: 设置内阴影还是外阴影
*/
/*box-shadow:-10px -10px 20px 10px blue inset;*/
}
.box:hover{
box-shadow:-10px -10px 20px 10px blue inset;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS 背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景样式</title>
<style>
.box{
width:200px;
height:200px;
background-color:red;
/*设置背景图片,background-image:*/
background-image:url(./style.jpg);
/*设置背景图片大小,background-size,宽度,高度*/
/*background-size:100% 100%;*/
/*
显示背景图片的具体位置,background-position
注意在网页中让图片网上移动或者往左移动都是负值
*/
background-position:-50px -50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>