+发表新主题
查看: 2131|回复: 0

[HTML5开发] css颜色属性及尺寸边框

[复制链接]

[HTML5开发] css颜色属性及尺寸边框

[复制链接]
马路福星 发表于 2015-11-1 15:45:01 浏览:  2131 回复:  0 [显示全部楼层] |只看大图 回帖奖励 |倒序浏览 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
一、颜色单位

      1、rgb

       r:red (0-255)

       g:green(0-255)

       b:blue(0-255)

      2、rgb(x,x,x)

         rgb(255,0,0) : 红色

         rgb(0,255,0) : 绿色

         rgb(0,0,0) : 黑色

         rgb(255,255,255) : 白色

      3、rgb(x%,x%,x%)

          rgb(5%,3%,2%)

      4、rgba(x,x,x,0-1)

         rgba(255,0,0,0.5)

      5、#rrggbb

        通过6位16进制的数字表示颜色

        每一位的范围:0-9 A-F

        #ff0000 : 红色

        #e4393c :

        16*16*16*16*16*16

    6、#rgb

       #rrggbb 缩写


       #000000 --> #000;

       #22aacc --> #2ac; #999 --> #999999;

       #e4393c --> 无缩写

二、CSS属性 - 尺寸

   用于设置元素的高度和宽度

    宽度：

      width：

      max-width:最大宽度

      min-width:最小宽度

   高度：

      height

      max-height

      min-height

   溢出：

      overflow : 当内容溢出元素框时，如何处理

      取值:

         visible ：溢出可见

                   hidden : 溢出隐藏

                   scroll : 设置滚动条

                   auto : 自动，没溢出不显示滚动条，有溢出自动出现滚动条

         overflow-x : 横向溢出处理方式

         overflow-y : 纵向溢出处理方式

         

         边框 : border:1px solid black;

        注意：

          1.块级元素允许修改宽度和高度

          2. 行内元素，不能改(span,b,s,i)，如需要修改，则需要设置display为inline-block，及将行内元素变为行内块


  • <!DCTTYPE html>
  • <html>
  • <head>
  • <meta charset="utf-8"/>
  • <style>
  •     div{
  •               height:50px;
  •                   width:100px;
  •                   border:1px solid red;
  •                   background:yellow;
  •         }
  •         span{
  •               display:inline-block;
  •                   height:50px;
  •                   width:100px;
  •                   border:1px solid green;
  •                   background:black;
  •         }
  • </style>
  • </head>
  • <body>
  • <div></div>
  • <span></span>
  • </body></html>

复制代码
154008zpwzkjwmee9pkaew.png

         3.<img /> 特殊，行内块,允许改变大小



       下面我个7幅图放置在一个div块中，将溢出处理方式设置为自动：      


  • <!DOCTYPE html>
  •                 <html>
  •                 <head>
  •                 <title> 溢出练习 </title>
  •                <meta charset="utf-8" />
  •                <style>
  •             div.image_list{
  •                  border:1px solid black;
  •                  width:500px;
  •                  height:150px;
  •                 /*内容溢出处理*/
  •                 overflow-x:auto;
  •                               }
  •           div.image_list p{
  •                    width:800px;
  •                    height:100px;
  •                             }
  •         div.image_list p img{
  •                    width:100px;
  •                          }
  •          </style>
  •           </head>
  •          <body>
  •               <div class="image_list">
  •      <p>
  •     <img src="images/p_small_001.jpg" />
  •    <img src="images/p_small_002.jpg" />
  •    <img src="images/p_small_003.jpg" />
  •    <img src="images/p_small_004.jpg" />
  •   <img src="images/p_small_005.jpg" />
  •   <img src="images/p_small_006.jpg" />
  •   <img src="images/p_small_007.jpg" />
  •      </p>
  •      </div>
  •     </body></html>

复制代码
154008zpwzkjwmee9pkaew.png
三、边框

   简写:

       border:设置四个边框 宽度 样式 颜色

       border:width style color;

       border:1px solid black;

      单边定义:

        border-left/right/top/bottom:width style color;

      单独指定边框属性:

        border-width: 四个边框的宽度

        border-style: 四个边框的样式

        border-color: 四个边框的颜色

       单边单属性:

        border-top-color:上边框颜色

        border-bottom-width:下边框宽度

        border-left-style:左边框样式


       border-方向-属性:

        方向:top/bottom/left/right

         属性:width/style/color


  • <!DCTTYPE html>
  • <html>
  • <head>
  • <meta charset="utf-8"/>
  • <style>
  •     div{
  •               height:50px;
  •                   width:100px;
  •                   border:1px solid red;
  •                   background:yellow;
  •         }
  •         span{
  •               display:inline-block;
  •                   height:50px;
  •                   width:100px;
  •                   border-left:1px solid green;
  •                   border-top:1px dotted red;
  •                   border-right:2px solid yellow;
  •                   border-bottom:3px dotted blue;
  •         }
  • </style>
  • </head>
  • <body>
  • <div></div><br/>
  • <span></span>
  • </body></html>

复制代码
154008zpwzkjwmee9pkaew.png
回复

使用道具 举报

精彩评论 (0) QQ好友和群QQ好友和群

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

马路福星
技冠群雄

25

主题

25

帖子

126

积分

技冠群雄

Rank: 6Rank: 6

积分
126
QQ
英剧迷| 淘大喵| 客家新闻网| 时空赣州网| 赣州新闻网| 赣州信息港| 人人都是产品经理| 91运营网| 梅花网| 亿欧网| 36氪| 申请友链

手机版| 赣南网

© 2013-2016 Comsenz Inc. Powered by Discuz! X3.4

用微信扫一扫

赣南网