• CSS基础 样式属性


    1、大小

    width       //
    height      //
    min-width    // 设定页面最小宽度  min-1200px; 

    2、背景

    background-color         // 背景色
    background-image :url(地址)  //背景图
    background-repeat         //背景图的平铺方式 ( repert平铺,no-repert不平铺,repert-x  x 轴平铺,repert-y  y 轴平铺       
    background-position       //背景图片位置(center居中,right top 右上角,left 100px top 200px  距左侧100像素,距离上200像素)
    background-size               //背景图的大小(像素/百分比)
    background-attachment      //背景图片是否浮动(fixed 背景固定锁住,scroll 背景随字体浮动)

    3、字体

    font-family     //字体,一般默认为“微软雅黑” 
    font-size      //字号
    font-style      //字体是否倾斜(italic 倾斜, normal 不倾斜)
    font-weight     //字体是否加粗( bold 加粗,normal 不加粗)
    font-decoration  //设置下划线(underline 下划线,overline 上划线,line-trough 删除线,none 去掉超链接的下划线)
    color         //字体颜色

    4、对齐方式

    line-height//行高
    text-indent// 缩进 
    text-align// 水平对齐方式 ( center 居中对齐, left 左对齐,right 右对齐)
    vertical-align//垂直对齐方式( top 顶部对齐, bottom 底部对齐, middle  居中)             
    
    //垂直对齐 ,需要两者配合 
    vertical-align:middle
    display:table-cell         

    5、边界边框

    margin //外边距,四周边框与外部的距离
     //margin:10px;            四个方向的边距都是10像素,
     //margin:50px 0 ;          上下 50 像素,左右0
     //margin-top:10px;         上边框与其他元素的距离
     //margin:10px  0 10px  0 ;    按 上、右、下、左 的顺序与其他元素的距离/
     
    padding //内边距,内容与边框的距离
     //padding:10px;             内容与边框最短的距离是10像素, 文字所占的空间大小不变,将四个边框向外延伸10像素
     //padding: 20px  0  20px  0 ;      上、右、下、左的边距 
    
    border      //边框   border: 2px  solid  red;
    border-width  //边框的粗细  
    border-style  //边框的样式(虚,实等) 
    border-color  //边框的颜色 // ; (简写)

    6、列表方块

    list-style:none            //将序列的序号图案去掉
    list-style-image:url( 图片地址 )  //将序号变为图片

    7、隐藏与显示

    display      // none 隐藏、位置不保留,  block 显示
    
    visibility  // hidden 隐藏后位置保留, visible 显示
    
    overflow   // hidden 超出部分隐藏,   scroll 加滚动条

    8、透明

    opacity:0.5;                  // 对谷歌,360等高等浏览器有用
    -moz-opacity:0.5;             //针对火狐浏览器
    flter:alpha (opacity=50);     //针对 IE 浏览器

                      

    9、圆角                                                        

    border-radius // 圆角,无法用于IE浏览器  

     //
    border-radius:5px; 将边框的角削去5个像素

    10、阴影                                                  

     box-shadow  //阴影,无法用于IE浏览器
    
      //box-shadow: 50px 0 30px black;  左右偏移(右正左负)、上下偏移(上正下负)、阴影扩散成度、阴影颜色
  • 相关阅读:
    【转载】25岁毕业,拿一万块月薪
    博客界面终于变成了自己比较满意的感觉
    梯度下降法
    WPF小试牛刀
    关于BOF改进方法的一些introduction
    POJ——1012
    这是个伟大的暑假
    上午的四个coding问题
    FindFirst,FindNext,FindClose学习
    TThread类初探
  • 原文地址:https://www.cnblogs.com/Tanghongchang/p/6618023.html
Copyright © 2020-2023  润新知