css样式表----------样式属性(背景与前景、边界和边框、列表与方块、格式与布局)

一、背景与前景

(1)、背景

技术分享
    line-height: 1.5 !important;">90;  /*背景色(以样式表为主,样式表优先。)*/
    background-image:url(路径); /*设置背景图片(默认为平铺。)*/
    background-repeat:no-repeat/repeat-x/repeat-y;no-repeat /*不平铺
    repeat-x 橫向平铺  repeat-y 纵向平铺 */
     
    background-position:center; /*背景图片居中 right top背景图片放到右上角*/设置背景图位置时,repeat必须为“no-repeat”*/
    background-position:left 100px top 100px;/*离左边100px,离上边100px(可以为负值)*/

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

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

 

 

 

 

技术分享

(2)、字体

技术分享

font-family:"新宋体";/*字体。常用微软雅黑,宋体*/

font-size:12px;/*字体大小,常用像素12px.14px(网站常用12.14),18px,还可以用“em”,"2.5em"即:默认字体的2.5倍,还可以用百分数*/

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

font-style:italic;/*倾斜,normal是不倾斜*/

color:#03c:/*颜色*/

text-decoration:underline;/*下划线,overline是上划线,line-through是删除线,none是去掉下划线*/

text-align:center;/*水平 居中对齐。left是左对齐。right是右对齐*/

vertical-align:middle;/*垂直 居中对齐,top是顶部对齐,bottom是底部对齐。一般设置行高后使用,div垂直居中 要把行高拉开能表现出来*/

text-indent:28px;/*首行缩进量*/

line-height:24px/*行高,一般为1.5到2倍字体大小*/

技术分享

二、边界和边框

技术分享

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

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

(1)、边框 

技术分享
    /*边框设置*/
    border:5px solid blue;(四边框、5像素宽、实线、蓝色)相当于下面三行红的。
    border-width: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;
    margin-top:10px;
    margin:20px 0px 20px 0px;
    /*内容与边框之间的距离*/
    padding:10px;
    padding-top:10px;
    padding:20px 0 20px 0px;
技术分享

三、列表与方块

    width、height、(top、bottom、left、right) 只有在绝对坐标情况下才有用
    list-style:none;   /*取消序号*/
    list-style:circle;  /*序号变为圆圈,样式相当于无序*/
    list-style-image:url();  /*图片做序*/
    list-style-position:outside;/*序号在内容外*/
    list-style-position:inside; /*序号跟内容在一起*/

四、格式与布局

技术分享
    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,显示。*/
技术分享

 

小技巧:

(1)、超链接变色:

a:hover
{
    color:red;
}

(2)、DIV居中

如何让一个DIV居中对齐?
第一步:设置外层的DIV的text-align:center;
第二步:设置里层的DIV的margin:auto
以上两个DIV都不要设置float.

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。