zoukankan      html  css  js  c++  java
  • 2017-03-25 CSS 样式

     1,大小

    宽度:           "100px/50%"                                                                                                                                                                                            

    高度:           height:"100px"      实现高度100%   position:fixed;  配合使用

    2,背景   【写在<head></head>之间  , <style type="text/css"> body{          }</style>里面】

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

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

    背景图的平铺方式:                  background-repeat:选择属性;

    背景图片位置:                        background-position:(top/bottom/left/right);

    设置背景图片是否滚动:              background-attachment:(选择属性); 

    3,文字

    字体样式:                                    font-family:宋体;
    字体大小:                                     font-size:4px;             (一般在12px -14px之间)
    倾斜:                                          font-style:italic;
    加粗:                                         font-weight :bold;
    划线:                                       text-decoration:underline(下划线)/overline(上划线)/line-through(删除线)/none(没有,用来去掉超链接的下划线);
    字体颜色:                                 color:red/#颜色代码;
    4,对齐

    水平对齐:                             text-align:对齐属性;

    垂直对齐:                            display:table-cell;加上vertical-align:对齐属性;              (两个必须一起才能实现对齐)

    行高:                                    line-height:10px;                  (在只有一行文字,行高等于所在元素高度时,实现垂直居中)

    文字缩进 :                                 text-indent:5px;              (对象为文本文字,为正值时对第一行操作相当于空格,空出单位像素。为负值时,向左隐藏单位距离的文本文字)

    5,边距,边线

    内边距:                                    padding-(top/bottom/left/right):10px;             (增加内边距,会相应的使所在元素的位置扩大)

    外边距:                                    margin-(top/bottom/left/right):10px;                 (是两个元素之间出现间距,不改变元素大小)

    边线粗细,线型,颜色:                border:1px solid(实线)  red/#元素代码;

    6, 对有序列表/无序列表的处理

    去掉内容前的序号/圆点 :               list-style:none;

    将前面的序号/圆点变为图片            list-style-image:url(图片路径);

    7,流式布局(流式布局实际上已经浮动,处于平面的上层)

    左侧流式布局:               float:left;           

    右侧流式布局:               float:right;

    清除流式布局:                <div ></div>                   (clear:both;是清除流布局,一般创建一个没有长宽高的层标签来清除流式布局)

    8,分层

    z-index分层:                     z-index:5555;                  (数值越大的,就是能看到的)

    9,display

    隐藏(用户看不到,不占位置):            diaplay:none;

    显示(用户能看到):         display:block;

    div宽度等于文字宽度:       display:inline-block;

    10,visibility

    隐藏:(用户看不到内容,但能看到位置):                 visibility:hidden;

    显示:                                                                    visibility:visible;

    11,超出范围内容(出现滚动条)

    横向,纵向滚动条都显示:overflow:hidden;/overflow:auto;

    只显示纵向滚动条:overflow-y:scroll;

    只显示横向滚动条:overflow-x:scroll;

    12,透明度

    opacity:0.5;  -moz-opacity:0.5;   filter:alpha(opacity=50)  【数值越小,透明度越大】

    13,圆角(将div棱角变成圆角)

     border-radius:5px;

    14,阴影

    box-shadow:0 0 5px white;               【第一个0光线方向正值从左侧来负值从右侧来,第二个0光线方向正值从上侧来负值从下面来,第三个5是虚化程度】

    15,定位(写入position后可以用top/bottom/left/right来改变位置)

    相对定位(占位置):position:relative;使元素作为常规元素出现,并且使position:absolute;在其中定位。用top/bottom/left/right来改变位置时,占据其他元素位置。

    绝对定位(不占位置):position:absolute;单独使用后浮动,top/bottom/left/right来改变位置时,不占据其他元素位置。

    固定在浏览器某个位置:position:fixed;

  • 相关阅读:
    Android 控件的学习
    Java并发编程
    Glide的学习之路
    插件化和热修复学习之路
    OkHttp的学习
    WMS的学习
    app一点一滴的学习
    进程启动学习
    View学习之解决滑动冲突
    应用学习
  • 原文地址:https://www.cnblogs.com/changxiaosen/p/6648004.html
Copyright © 2011-2022 走看看