例：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的 数
网友评论