css 样式小结

来源：互联网发布：淘宝联盟提不了现编辑：程序博客网时间：2024/05/18 00:22

1．让网页中的页面，不显示横向滚动条代码
<body style="overflow-y:visible;overflow-x:hidden">
2.交集选择器。第一个必须为标记选择器，第二个为类或ID。中间必须连起来写。并集选择器，逗号连接
3.样式的优先级别：行内样式 ID样式类样式标记样式。如果两个类样式，前面的优先。
4，行内元素间隔和块级元素间隔：行内：margin-left+rigth的和。块级元素间隔不然（塌陷现象），取较大的：margin-top/bottom(隐藏：disply:block;display:inline)；行内元素的高度会相互影响。
5.字母/字向左下沉：foot-size:3em,float:left
6.line-heigth:每行的行高（相对/绝对）
7，foot-style:用来控制字体倾斜（正常/意大利/倾斜）(normal/oblique/italic)在woods中并不区分意大利和倾斜
8.text-transform:大小写转换，capitalize/uppercase/lowercase(首字母大写，全部大写，全部小写)
9.text-decoration:underline/overline/line-through,blink(下划线，顶划线，删除线，闪烁（ie中无效，火狐中才有）)
10，短首缩进：text-indent：2em
11,font-family:arial;font-size:12px;line-heigh:1.5合并成：font:12px/1.5 arial
11.标题对齐方式：bachgrouposition:rigth/left/centen/top/bottom

12.为图像增加阴影：一张阴影图片。‘
.shaw{ background:url(阴影图) no-repeat bottom right; float:left;}
img{ border; padding:4px; margin:-6px 6px 6px -6px}
<div class="shaw"><img scr="原图"/></div>
13.标题和背景高度的融合：一张透明的gif，
14.标题的图像替换：（搜索引擎，后期的维护），背景图片一张。
h1{ background:url(login图片) no-repeat;heigth:xpx;}
h1 span{ display:none;}
<h1><span>login</span></h1>
15.滑动门技术：
16.层叠：前面的css和后面的css具有同意的特殊性，所以后面的规则将覆盖前面的规则（!inpoment）
17.list-style-type/image属性/图片用来设置li/ul的项目编号样式
disc实心圆/circle空心圆/square正方形/decimal 1,2,3^/
upper-alpha A,B,C……/lower-alpha/upper-raman /lower-roman i,ii,iii……/none 不显示何符号
18，a设置display：block。被设置成块元素，
鼠标点击不仅仅在文字上才有效
19：页面居中：margin:0 aotu;
20。html 截词折行
固定宽度汉字(词)折行 — 使用word-break
固定宽度汉字截断 — 使用text-overflow
21.背景透明
<div style="opacity:0.8;filter:alpha(opacity=50);background-color:#808080">
    内容
</div> 透明
22.css 实现阴影
img {
    -webkit-box-shadow: 3px 3px 6px #666;
    -moz-box-shadow: 3px 3px 6px #666;
    box-shadow: 3px 3px 6px #666;
}

23.圆角
1.圆角

CSS3实现圆角有两种方法.

第一种是背景图像,传统的CSS每个元素只能有一个背景图像,但是CSS3可以允许一个元素有多个背景图像.这样给一个元素添加4个1/4圆的背景图像,分别位于4个角上就可以实现圆角了.

.box {
    /* 首先定义要使用的4幅图像为背景图 */
    background-image: url(/img/top-left.gif),
                                   url(/img/top-right.gif),
                                   url(/img/bottom-left.gif),
                                   url(/img/bottom-right.gif);
    /* 然后定义不重复显示 */
    background-repeat: no-repeat,
                                     no-repeat,
                                     no-repeat,
                                     no-repeat;
    /* 最后定义4幅图分别显示在4个角上 */
    background-position: top left,
                                       top right,
                                       bottom left,
                                       bottom right;
}
第二种方法就简洁了,直接用CSS实现,不需要用图片.

.box {
    /* 直接定义圆角的半径就可以了 */
    border-radius: 1em;
}
但是第二种方法还没有得到很好的支持,当前Firefox和Safari(同一个核心的Chrome也可以),需要使用前缀

.box {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}
这个属性的4个参数是:垂直偏移,水平偏移,投影的宽度(模糊程度),颜色 17jquery

200张有两个例子没看

表格：
1，caption标记。定义表格的大标题。一般放在table的后面，编码习惯，搜索引擎
2.th 表头
3.相邻边框：border-style：没hidden 并且至少有一个不是none。其重合的边框由粗到细