常用CSS样式

    width: 390px;
    height: 30px;
    border:0;
    margin: auto;    //居中,前提是有width
    font-size: 17px; 
    font-weight: bold;     //字体加粗
    align:center|left|right;    //水平对齐
    valign:top|middle|bottom;   //垂直对齐
    text-align: center;  //内容所在div居中
    border: 1px solid black;
    margin-top: 10px;    //外上边距
    border-radius:6px;   //边框圆角半径
    box-shadow:2px 3px 10px gray;   //边框阴影水平,垂直,模糊,延长,颜色
    background-color: silver;
    float: left;                  //水平排列
    line-height: 33px;             //行高
    padding-left:50px;              //内左边距 (字体左右调整)
           -right
           -top
           -bottom 
    letter-spacing:16px;         //字间距
     vertical-align: top;     //对齐方式

background-image: url("img/title_ico.jpg"); //背景图片---添加logo
background-size: 180px 180px; //背景图片的缩放
background-position: 0px 0px; //背景图片缩放后的位置

background-repeat:repeat|norepeat|repeat-x|repeat-y|inherit //使用父元素的background-repeat属性值. 继承

border:0px;

border-bottom: 1px solid green; //,先隐藏border,设置下划线

background: transparent; //按钮背景透明, 配合border:0px 把线框去掉

text-transform: uppercase; //所有字母大/小写

position: absolute; //绝对位置, 如果用了这个,magin就失效了
right: 0px; //绝对位置的前提下
top: 110px; //绝对位置的前提下

scrolling="no" // 窗口没有滚动条

z-index:101; //取值范围在-32767至32767之间, 在多少层,高层会遮盖低层

绝对定位相当于成为一个层,后面的层将遮盖前面的层, 绝对定位会遮盖相对定位,

font-family: 黑体;      //字体
 font-weight: bold;   //粗细

<html>
<head>
<style type="text/css">
       <!--class用.classname
             id用#idname-->
       #error{font-size: 16px ; font-family: 黑体; font-weight: bold;}
       ....
  </style>
</head>
<script type="text/javascript">
   ....
</script>
<body>
    <div id="error">    
      <%=exception.getMessage() %>   
   </div>
</body>
</html>

表格的此格和下面的格合并(列合并)

rowspan="2"

选择器hover: ------>鼠标悬浮在上面产生的效果

.menu1 button:HOVER {
    font-size: 17px;    //字体变大,  默认是15px
}

表格的行和单元格的边是合并还是独立:

border-collapse：separate | collapse
separate: 独立
collapse: 合并

input属性type=text的css样式:

.tb tr input[type=text]{...}

 white-space: nowrap     //规定文本不进行换行

overflow: hidden | visible | scroll | auto | inherit;    //内容超出边框隐藏 | 始终可见内容(自动换行) | 超出以滚动条形式 | 继承上级元素overflow的属性

列表

list-style-position：outside | inside   //outside：列表项目标记放置在文本以外，且环绕文本不根据标记对齐inside：列表项目标记放置在文本以内，且环绕文                                          本根据标记对齐

css执行顺序:从下向上从右向左多个相同css属性会覆盖

position:absolute | relative // 前者的left/right等相对与整体浏览器定位, 后者的left/right等相对于上级边框定位

min-height & height

---->使用min-height:

---->使用height: (使用flowover:hidden多出部分会隐藏)

.test{      //各种版本浏览器都兼容
    min-height:80px;  /* for ie7+, firefox, chrome, safari, opera 的最小高度*/  
    _height:80px;        /* for ie6的最小高度 */  
}

光标经过时的鼠标样式

cursor:ponter;    //还有很多样式

鼠标经过图片时出现边框 ------>经过时有抖动现象,可以在img原来就添加一个同背景色一样的border

div img:hover{border:1px solid silver}

posted @ 2016-06-29 20:57 乱世_独自美阅读(171) 评论(0) 收藏举报

刷新页面返回顶部

乱世_独自美

常用CSS样式

公告