CSS颜色通常有三种表示的方法
第一种直接写颜色所对应的英文,比如:red是红色, blue是蓝色
第二种是十六进制表示法,比如:#ff0000是红色
第三种是R(红),G(绿),B(蓝),A(透明度)表示,比如:color: rgba(200,0,0,0)
十六进制 0-9, a-f
rgba前三个的取值范围 0-255, a的取值为0-1之间的小数,0代表完全透明,1代表完全不透明
CSS常用的文本样式设置
color: red //设置颜色
font-size: 50px; //设置字体的大小
font-family: "微软雅黑" //设置字体
font-style: italic; //字体倾斜,normal不倾斜
font-weight: bold; //加粗,normal为不加粗
line-height: 0px; //文字的行高
text-decoration:none; //取消a标签的下划线
text-indent: 20px; //文本首行缩进
text-align: center; //文本居中
**line-height: 50px; //文本垂直居中**
.odiv{
width: 300px;
height: 500px;
background-color: aquamarine;
text-align: center;
line-height: 500px; //一般尺寸的高设为多少,这个值就是多少
}
<div class="odiv">文本内容</div>
CSS边框属性
.box{
width: 300px;
height: 300px;
/*设置边框的时候尽量三个属性值都带上,前后顺序可以打乱,solid是实线, dashed是虚线*/
border: 1px solid red;
/*也可以单独设置一个方向上的边框*/
/*border-top: 1px solid red;
border-bottom: 1px solid red;*/
/*设置圆角属性值,从左上角开始顺时针方向给4个值,也可以只写一个值,表示4个方向都是这个值。如果要显示一个圆形,那么就给属性的值为50%,同时要保证宽高相等*/
/*如果写两个值,那么它是对角分配的,第一个值给左上和右下,第二个值给右上和左下*/
border-radius: 10px 20px 30px 40px;
}
**设置阴影**
box-shadow: 10px 10px 20px 30px red inset;
第一个值设置X轴(水平)位移,正值往右位移,负值往左
第二个值设置Y轴(垂直)位移,正值往下位移,负值往上
第三个值设置模糊程度
第四个值是扩散范围
第五个值是阴影的颜色
第六个值是否为内阴影,如果想要内阴影可以设置inset,如果不设置,默认阴影向外扩散
.box{
width: 200px;
height: 200px;
box-shadow: 10px 10px 20px 30px red inset;
}
<div class="box">文本内容</div>
CSS背景属性
/*设置背景颜色和图片*/
.box{
width: 200px;
height: 200px;
background: red;
<!--添加背景图片-->
background-image: url("图片路径")
<!--图片的尺寸按上下左右百分百显示-->
background-size: 100% 100%;
<!--设置图片显示的位置,显示某一块尺寸的图像。网页的 0,0坐标是窗口的左上角, 如果要显示图片某个中心的位置,则意味这要把图片整体往左上角移动。注意在网页当中让图片或者元素往上移动或者往左移动,都是负值 -->
background-position: -1063px -705px;
}
.box{
width: 200px;
height: 200px;
border: 1px solid red;
<!--背景图片的组合写法, no-repeat设置图片不会重复显示-->
background: url("图片路径") red no-repeat;
}
<div class="box></div>