css属性整理版.docx

CSS属性整理字体属性font：属性含义属性值font-family:字体各种字体“宋体”font-style:字体样式italic、oblique斜体、倾斜font-variant:小体大写small-caps将小写字母转换为大写字母font-weight:字体粗细bold、bolder粗体、特粗体font-size:字体大小absolute、relative、%12px、.9em、% Color:字体颜色颜色值#ff0000任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。颜色与背景属性Background:属性含义属性值Background-color:背景色#ff0000颜色值Background-image:背景图案url(img/button1.jpg)图片路径Background-repeat:背景图案重复方式repeat-x|repeat-y|no-repeatX轴重复|Y轴重复|不重复Background-attachment：背景的滚动Scroll?|?fix滚动|固定Background-position:背景图案初始位置%|n?em|top|right|bottom|left…数值%|数值em|上|右|下|左#ff0000 url(img/button1.jpg)no-repeatScroll 1px 3px;所有属性合集文本属性 text-属性含义属性值word-spacing:单词间距n?em10px |.75emletter-spacing:字母间距n?em10px |.75emtext-decoration:装饰样式underline|?overline|?blink|line-through下划线|上划线|闪烁|删除线vertical-align：垂直对齐方向位置sub|?super?|top?|text-top|middle|?bottom|?text-bottom下标| |上标|文本顶端对齐|居中|底部|相对文本底端对齐text-align: 水平对齐center|inherit |justify |left |right居中|继承父元素|两端对其|左对齐|右对齐text-transform:转为其他形式capitalize|?uppercase|?lowercasetext-indent:首行缩进n?em|?%数值2em 首行缩进line-height:行高px、n?em、%高和行高设置一样可使文字居中对其列表链接代码 蓝色红色二选一A:link 未访问时A:visited访问过后时A:hover 鼠标经过时A:active 鼠标点中不放时#div2{width:700px;}#div2 ul{list-style:none;}宽：700px去掉符号#div2 li{ float:left;text-align:center; width:100px;}浮动：左/一行显示水平居中宽：100px/总和小于总宽度#div2 a{display:block;width:100px;height:33px;line-height:33px;text-decoration:none;background:no-repeat url(img/button1.jpg);color:#C00;} border-right:#fff 1px solid区块显示/一列显示宽100px高33px行高33px没有下划线背景不重复图片链接颜色 #000右边框 #fff 1px 单实线#div2 a:hover{text-decoration:underline;color:#FFFFFF;background: no-repeaturl(img/button1_bg.jpg);opacity:0.5;} 没设置宽高是因为被图片撑开了 图片宽高：100*33background-color:rgba(102,102,102,0.3);加下划线颜色 #fff背景不重复图片链接透明背景图片50%透明背景颜色 rgba （R,G,B,透明度）#div2 a:hover{text-decoration: underline;color:#FFFFFF;background: url(img/button1.jpg) no-re