zoukankan      html  css  js  c++  java
  • 【2017-03-23】CSS基础:内联样式

    CSS:层叠式样式表

    1、对层标签整体进行操作

    <div style="200px;height:200px;background-color:blue"></div>

    宽度            200px/50%

    高度            height:200px/50%

    背景色         background-color:red/#颜色代码

    背景图片      background-image:url(图片路径)

    背景图片排列方式     background-repeat:repeat平铺/repeat-x背景图像将在水平方向重复/repeat-y背景图像将在垂直方向重复/no-repeat背景图像将仅显示一次 

    背景图片位置           background-postion:                  

    背景图片大小           background-size:                      

    背景图片是否滚动(fixed背景图锁定)          background-attachment:fixed            

    边框            border:5px solid red(宽度 实线/虚线 颜色)

    绝对定位(定位层标签左上角的点)          position:abslute; 

    层间距          margin-left/right/top/bottom:10px      left层标签左侧间距,right层标签右侧间距,top层标签上部间距,bottom层标签底部间距

     

    2、对层标签中文字样式进行操作

    格式:<div style="font-weight:100;font-style:italic;text-decoration:underline;font-size:10px;color:red;font-family:黑体"></div>

    加粗           font-weight:100/bold;

    倾斜           font-style:italic;           

    下划线        text-decoration:underline; 

    删除线        text-decoration:line-through;

    大小           font-size:10px;         (正常浏览一般12px-18px)

    颜色           color:red/#颜色代码;

    字体           font-family:黑体;

    3、流式布局

    格式:<div style="100px;height:100px;background-color:blue;float:left/right;margin-left/right/top/bottom:10px;min-500px"></div>       

    float              left从左向右布局,right从右向左布局

    min-500px        设置流式布局最小宽度,若浏览器页面小于500px,则下方出现水平滚动条

    4、层标签分组

    格式:

    <head>

    <style type="text/css">

    .组名{width:         ;

            height:        ;

             …………          ;

          }

    </style>

    </head>

     

    <body>

    <div class="组名"></div>

    <div class="组名"></div>

    <div class="组名"></div>

    </body>

    分组后的层标签按照<head>内的格式统一

    5、将一个<div>排布到页面中间

     <div style="200px;height:300px;background-color:red;position:absolute;top:50%;margin-top:-150px; left:50%; margin-left:-100px;"></div>

    先设置绝对定位,再将这个div左上角的点定位到页面中央,然后向左和向上分别进行调整

    6、去掉层标签和html页面顶部的缝隙

    <head>

    * {
        margin:0px;
        padding:0px;
       }

    </head>

  • 相关阅读:
    非常高兴,“万能数据库查询分析器”中英文3.01版本测试完成,会尽快完成发布,敬请等待
    OpenGL学习入门之VS2010环境配置
    服务器异常处理:Java Logger
    从3.01版本开始,“万能数据库查询分析器”中英文版本将全部免费
    java算法:顺序查找(有监视哨和无监视哨)
    DELPHI第三方控件及组件大全(安装方法与使用)
    Android应用程序窗口(Activity)的运行上下文环境(Context)的创建过程分析
    非常高兴,《彻底删除文件》2.01版本也测试完成,会尽快完成发布,敬请等待
    无Dll插入进程,下载者VC源代码
    剖析WININIT.INI文件与Windows病毒
  • 原文地址:https://www.cnblogs.com/snow22546/p/6618174.html
Copyright © 2011-2022 走看看