css整理

例：background-image:url('XXX.png');

background-repeat:repeat-x;    让图片水平方向平铺,页面不会出现多图状态。

background-repeat:no-repeat;  不让图像平铺，只出现一个图像

background-position:right top;  改变图像在背景中的位置

background-attachment:fixed    设置固定的背景图像，不会随页面其它部分滚动而滚动

p {text-indent:50px;}  首行文本缩进50px

p.small {line-height:70%;}  行高

p{white-space:nowrap;}    文字一行显示、不换行，禁用文字环绕

img.top {vertical-align:text-top;}  图片上对齐

img.bottom {vertical-align:text-bottom;} 图片下对齐

h1 {text-shadow:2px  3px  #FF0000;}  文本阴影  （向右偏移2px，向下偏移3px，颜色#FF0000）

td { vertical-align:bottom;}        垂直底部对齐

要让图片实现剧中对齐，先将其display:block ;然后用margin:auto;

{address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li}---块元素

{a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var}---内联元素

display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

li{display:inline;}  【将li元素作为内联元素】 li元素水平显示

display:block;  可将span元素变为块元素，块元素占用全部宽度，前后都用了换行符

h1.hidden {display:none;} 和 h1.hidden {visibility:hidden;}的区别在于：前者再隐藏后不会占用页面上的空间，后者则还会占用此位置。

CSS-position：

position：static  HTML元素的默认值

positon：fixed  元素的位置相对于浏览器窗口是固定位置

position：relative  元素的位置相对于正常位置

position：absolute  绝对定位，可以将元素放在页面的任何位置

z-index：重叠的元素，值可以有正数或负数的堆叠顺序，1，-1....

position: fixed; top: 0; width: 100%; ----导航栏位置固定在顶部

position: fixed; bottom: 0; width: 100%; ----导航栏位置固定在底部

CSS-图像：

图像透明度样式：

img

{

opacity:0.4;

filter:alpha(opacity=40); /* 适用 IE8 及其更早版本 */

}

img:hover

{

opacity:1.0;

filter:alpha(opacity=100); /* 适用 IE8 及其更早版本 */

}

CSS-选择器：

[title = hello] { }  ----改变标题为hello的元素的样式

[title ~= hello] { }  ----改变标题包涵hello的元素的样式

[lang|=en] { }  ---包含指定值的lang属性的元素样式，用（|）分隔属性和值:

input[type="text"]    ---属性选择器样式  -无需使用class或id的形式

CSS-颜色渐变：

background: linear-gradient(red, blue);    //从上至下的线性渐变

background: linear-gradient(to right, red , blue);  //从左到右的线性渐变

background: linear-gradient(to bottom right, red , blue);  //左上角到右下角的线性渐变

background: linear-gradient(180deg, red, blue);  //带有角度的线性渐变

background: linear-gradient(red, green, blue);  //使用多个颜色节点的渐变

background: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);  //彩虹渐变

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));  透明度渐变，rgba()中最后一位为0-1的 数