版权声明：文笔粗糙，技术渣渣，观后如有不适请及时举报 ！！！ https://blog.csdn.net/weixin_43560839/article/details/89894832
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>