日期:2014-05-17  浏览次数:20798 次

CSS——低调的奢华

CSS,低调的奢华

我所学习的CSS应该是最简单的CSS教程了,但是,学完之后,突然发现,简单,并不意味着不能不华丽,比如一个简单的超链接就可以设置成浮雕效果:


而代码仅仅只有几行:

a{
width:80px;height:32px;
padding-top:10px;
text-decoration:none;
text-align:center;
background:url(button1.jpg)no-repeat;        /* 超链接背景图片 */
}
a:link{color:#654300;}
a:visited{color:#654300;}
a:hover{
color:#FFFFFF;
text-decoration:none;
background:url(button2.jpg)no-repeat;        /* 变换背景图片 */
}

 

可以使用滤镜制造发光特效:


.glow{
filter:glow(color=#FFFFCC,strength=5);        /*发淡黄色的光 */
}

等等,当然还有很多效果,可以说是用最简单的语句写出让人意想不到的效果。

下面我们来介绍一下CSS

CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现HTML XML 等文件式样的计算机语言。

CSS目前最新版本为CSS3,能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象盒模型的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。

关于CSS的基本设置:


 

这是一张看似很繁杂的图,其实里面的内容很简单,既然CSS是设置样式的,那么它关于样式的东西就必不可少,图片、文字、菜单、背景、表格、布局等都需要设置样式,如果我们把这些需要设置的东西在抽象一点,那就是对象,某个对象的样式无非就是颜色,大小,位置,所以,几乎每一个东西都需要color