28

改写响应式网站常用CSS属性及使用方法总结(未完)

其实这些属性即使平时也是常用的,只是在改写响应式网站时,个人认为是更为常用的。由于响应式网站要适应各种屏幕宽度,所以要求制作者在使用CSS时能更强的运用好CSS的各种属性,处理好网站中的文本、图片、背景图片等。改写响应式网站,尤其是现有的PC网站强改响应式网站,要达到尽量好的适应效果,必须灵活运用CSS的各种属性。
下面内容一些通俗易懂的语言做了解释,非那些大网站写得好像不是给我这种文化水平低的人看的内容似的,都是给专业人士看的似的,可还有几个专业人士去查看你那些大学没毕业就看不懂的语言。生气…

一、CSS文本类

text-overflow 属性

默认值:clip
继承性:no
版本: CSS3
JavaScript语法:object.style.textOverflow=”ellipsis”
语法:text-overflow: clip|ellipsis|string;
以下值的前提是行定了宽度和高度。
clip 多余部分剪切(或者叫隐藏)。
ellipsis 如有多余文本,在行最末处以省略号显示(占一字宽度)。
string 按上一个值去理解,也就是把上一个值显示省略的部分换成你自己设定的内容(没使用过,看解释感觉我个人感觉没什么太大的实际意义,没研究)。

在使用ellipsis值时,要使用white-space: nowrap;和overflow: hidden;联合使用才能达到效果。
而clip值我一般是在写响应式时强制解除ellipsis的时候使用,也可能是我对它的理解还不够没感觉还有别的什么用处。

CSS示例:
div.test
{
text-overflow:ellipsis;
white-space: nowrap; //文字不换行
overflow: hidden; //溢出隐藏
}

ellipsis效果:

织梦先生

transform 属性
默认值: none
继承性: no
版本: CSS3
JavaScript 语法: object.style.transform=”rotate(7deg)”

CSS示例:
div
{
transform:rotate(-45deg);
-ms-transform:rotate(-45deg); /* IE 9 */
-moz-transform:rotate(-45deg); /* Firefox */
-webkit-transform:rotate(-45deg); /* Safari 和 Chrome */
-o-transform:rotate(-45deg); /* Opera */
}

效果:

织梦先生

二、CSS背景图片类

background 属性

默认值: not specified
继承性: no
版本: CSS1 + CSS3
JavaScript 语法: object.style.background=”white url(paper.gif) repeat-y”
background-color 规定要使用的背景颜色。
background-position 规定背景图像的位置。
background-size 规定背景图片的尺寸。 (CSS3属性)
background-repeat 规定如何重复背景图像。
background-origin 规定背景图片的定位区域。 (CSS3属性)
background-clip 规定背景的绘制区域。 (CSS3属性)
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-image 规定要使用的背景图像。
inherit 规定应该从父元素继承 background 属性的设置。

CSS示例:
body
{
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}

background-position 属性

默认值: 0% 0%
继承性: no
版本: CSS1
JavaScript 语法: object.style.backgroundPosition=”center”
值:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
如果只规定了一个关键词,那么第二个值将是”center”。
第一个值是水平位置,第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
可以使用百分比(%),也可以使用像素(px)

CSS示例:
body
{
background-image:url(‘bgimage.gif’);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

提示:您需要把 background-attachment 属性设置为 “fixed”,才能保证该属性在 Firefox 和 Opera 中正常工作。

三、图片类

opacity属性

默认值: 1
继承性: no
版本: CSS3
JavaScript 语法: object.style.opacity=0.5
值:
value 规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。
inherit 应该从父元素继承 opacity 属性的值。

CSS示例:
div{opacity:0.5;}

效果:

织梦先生
织梦先生
织梦先生
织梦先生
织梦先生