颜色表示方法:
1、颜色名表示:red
<div class:"hhh"></div>
------
<style>
.hhh{
width:222:
background-color:red:
}
</style>
2、16进制(取值0-9,A-F)常用
<div class:"hhh"></div>
------
<style>
.hhh{
width:222:
background-color:#:000000: (以#开始,一定有个6个值,前2数值代表红色,中间是绿色,最后是蓝色:三原色)
}
</style>
3、rgb(每个值带一个颜色。范围: 0-255)
background-color:rgb(0,0,0)
4.raba(带透明度)(最后数值是透明度,取值范围0-1,数字越小约透明)
background-color:rgb(0,0,0,0.5)
CSS文本设置
color,设置文本的颜色,如color:red
font-size,设置文字的大小,如font-size:12px
font-famliy,设置文字的字体,如font-famliy:“微软雅黑”
font-style,设置字体是倾斜,如font-style:italic变倾斜
font-weight,设置文字是加粗,font-weight:bold
line-height ,设置文字的行高,如line-height:24px
text-decoration ,设置文字的下划线.text-decoration:none,通常用于超链接的取消下划线
text-indent,设置文字的首航缩近,如text-indent:21px。#收行锁了21px
text-align,设置文本的对齐方式,如text-align:center #居中
<div class=“hhh”>1111</div>
<style>
.hhh{
color:red
font-size:22px
font-family:"楷体"
font-style:italic
font-weight:bold
line-height:35px
text-indent:22px
text-align:center right局右
}
</style>
取消下划线
<a hred=“www.4399.com”>Game</a>
----------------------
<style>
a{
text-decoration:none
}
</style>
CSS边框属性【border,三个元素都不能丢】
<style>
.hhh{
width:200px
height:200px
boder:1px solid red 设置边框,第一个是值线粗细
第二个是线的类型,solid实线,botted点状,dashed虚线
第三个是颜色,可以是red,可以是#000000
border-top:1px solid red 单独设置上边框
border-bottom:1px solid red 单独下恻边框
border-left:1px solid red} 单独左侧边框,右同理
</style>
边框的圆角设置
<style>
.hhh{
weight:220px;
height:222px;
borde:1px solid red;
border-radius:50%; 先创建一个边框,border,再radius变圆角
###border-radius:10px,22px、56px,77px;,分别设置圆角弧度,第一个是左上,第二个右上,顺时针
</style>
设置阴影效果
<style>
.hhh{
width:222px
height:212px
border:1px solid red
box-shadow:10px 10px 10px 10px inset 第一个值x轴偏移,正右负左;第二个y轴偏移正下负上,第三个值模糊,第四个扩散,第五个值是颜色。第六个值(可选填)inset往内阴影
}
</style>
设置背景样式
<style>
.hhh{
width:222px
height:221px
background-color:red
background-image:url(./xxx。jpg)写图片地址 设置背景图片
background-size:100% 100%} 设置图片大小横高
background-position:592px 259px ,选择显示图片内容的位置
background-repeat:no-repeat
##background:url(./xxx。jpg) no-repeat 一般组合写
</style>