zoukankan      html  css  js  c++  java
  • css颜色,文本(未整理)

    颜色表示方法:

    1、颜色名表示:red

      <div class:"hhh"></div>

      ------

      <style>

        .hhh{

          222:

          background-color:red:

        }

      </style>

    2、16进制(取值0-9,A-F)常用

      <div class:"hhh"></div>

      ------

      <style>

        .hhh{

          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{

        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{

        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>

  • 相关阅读:
    css-Less
    linux脚本启动应用
    Idea安装svn插件
    一、JSP九大内置对象 二、JAVAEE三层架构和MVC设计模式 三、Ajax
    一、HttpServletRequest接口 二、HttpServletReponse接口 三、POST和GET请求方式及其乱码处理 四、ServletContext对象和ServletConfig对象
    一、 JSP概述 二、JSP的语法结构 三、JSP内置对象
    一、动态网络编程的概念 二、Tomcat服务器搭建 三、Servlet组件介绍
    一、BOM 二、DOM
    一、JavaScript概述 二、JavaScript的语法 三、JavaScript的内置对象
    一、HTML概述 二、web相关的概念 三、HTML的常用标签
  • 原文地址:https://www.cnblogs.com/simplecat/p/11354991.html
Copyright © 2011-2022 走看看