颜色表示方法:

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>

posted on 2019-08-14 22:12  我只是一只猫~  阅读(334)  评论(0编辑  收藏  举报