zoukankan      html  css  js  c++  java
  • CSS样式表---------第三章:样式属性

    三、样式属性

    1、背景与前景

    background-color:#90; ------------背景色,样式表优先级高。

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

    background-repeat:no-repeat;----------------no-repeat,不平铺;repeat,平铺;repeat-x,横向平铺;repeat-y,纵向平铺。

    background-position:center;-----------------背景图居中,设置背景图位置时,repeat必须为"no-repeat"。

    background-position:top;-------------------背景图放到右上角(方位可以自己更改)。

    background-position:left 100px top 200px;-------------------离左边100像素,离上边200像素(可以设为负值)。

    background-attachment:fixed;-----------------------------背景是固定的,不随字体滚动。

    background-attachment:scroll;------------------------------背景随字体滚动。

    2、字体

    font-family:"新宋体";------------------------------------字体。

    font-size:12px;---------------------------------------字体大小。常用像素12px、14px、18px、还可以用"em","2.5em"即:默认字体的2.5倍,还可以用百分数。

    font-weight:bold;--------------------------------------bold是加粗,normal是正常。

    font-style:italic;-------------------------------------italic是倾斜,normal是正常。

    color:#03C;-----------------------------------------颜色。

    text-decoration:-------------------------------------underline:下划线,overline:上划线,line-through:删除线,none:去掉下划线。

    text-align:-------------------------------------------center:水平居中对齐,left:左对齐,right:右对齐。

    vertical-align:-----------------------------------middle:垂直居中对齐,top:顶部对齐,bottom:底部对齐。一般设置行高后使用。

    text-indent:28px-------------------------------------首行缩进量。

    line-height:24px------------------------------------行高。一般为1.5~2倍字体大小。

    3、边界与边框

    *注:四个边框的顺序按顺时针方向:上,右,下,左。

    border(表格边框、样式等)、 margin(表外间距)、padding(内容与单元格间距)

    (1)边框

    /*边框设置*/
        border:5px solid blue;(四边框、5像素宽、实线、蓝色)相当于下面三行红的。
        border-5px;
        border-style:solid;
        border-color:blue;
    
        border-top:5px solid blue;
        border-bottom:5px solid blue;
        border-left:5px solid blue;
        border-right:5px solid blue;


    (2)边距

        /*四边外边框之间的距离*/
        margin:10px;            ------四边外边框宽度为10像素。auto,居中。
        margin-top:10px;        ------上边外边框宽度为10像素;其他三边边框类似。
        margin:20px 0px 20px 0px;------上-右-下-左,四边外边框顺时针顺序。
        /*内容与边框之间的距离*/
        padding:10px;           --------内容与边框的四边间距为10像素。
        padding-top:10px;       --------内容与边框的上间距为10像素;其他三边间距类似。
        padding:20px 0 20px 0px;--------上-右-下-左,内容与边框的四边间距顺时针顺序。

    4、列表与方块

    width、height、(top、right、bottom、left)--------------------只有在绝对坐标情况下才能用。

    list-style:none;----------取消序号。

    list-style:circle;--------序号变为圆圈,样式相当于无序。

    list-style-image:url(图片地址);-----------图片做序号。

    list-style-position:outside;--------------序号在内容外。

    list-style-position:inside;-------------序号跟内容在一起。

    5、格式与布局

        position:fixed; ------------------------锁定位置(相对于浏览器的位置),上浮不可排列。

        position:absolute;---------------------------绝对位置 1、外层没有position:absolute(或relative),那么div相对于浏览器定位 2、如果有,那么div相对于外层边框定位。


        position:relative;----------------------相对于默认位置的移动。   

     
        float:left; --------------------------------左浮动。


        float:right; ------------------------------右浮动   


        <div style="clear:both"></div> ----------------------截断流。

       
        overflow:hidden;  ---------------------------超出范围时隐藏; soroll,auto超出范围时出滚动条。
        
        display:none;   ------------------------------none,不显示;inline-block,显示为块,不自动换行,宽高可设;


        block------------------------------------------显示为块,自动换行;

        inline------------------------------------------效果同span标签,不自动换行,宽高不可设。


        visibility:hidden;  ----------------------------可视性。hidden,隐藏但是占空间;visible,显示。

        z-index:2;---------------------------------上浮到第二层,默认是第一层。

    超链接变色:
    a:hover
    {
        color:red;
    }
    DIV居中
    如何让一个DIV居中对齐?
    第一步:设置外层的DIV的text-align:center;
    第二步:设置里层的DIV的margin:auto
    以上两个DIV都不要设置float.
    
    
    
    
    
    
    
    
    
  • 相关阅读:
    WinCE 测试网速
    YII 关联表查询
    YII CMenu配置
    php扩展开发笔记1
    使用Mysql EXPLAIN分析、优化SQL语句
    使用Mysql EXPLAIN分析、优化SQL语句 (续)
    jquery提交中文导致乱码
    *nix 命令记(持续更新)
    php 函数中使用static
    xmlhttprequest获取TransferEncoding:chunked分时编码输出
  • 原文地址:https://www.cnblogs.com/dawasai/p/4301529.html
Copyright © 2011-2022 走看看