JavaScript学习(二十七)——级联样式表
目录
样式表简介
什么是CSS
CSS规则
style对象
CSS的继承
CSS继承的运用
对于网页的设计者来说，对HTML语言不会感到陌生，但如果要让页面达到至加美现的效果， 仅使用HTML标记是不够的， 此时就需要在页面中引入CSS样HTML与CSS 的关系是“内容”与“形式”的关系，由HTML确定网页的内定，CSS来实现页面的表现形式。HTML与CSS的完美搭配使页面更加美观、大方、容易维护。
样式表简介
HTML网页包含网页内容及网页表现方式两个方面。
网页内容主要由显示的文字、图片、窗体元素(文本框、下拉列表框、单选按钮、复选框)组成。
网页表现方式包括 显示网页内容时所使用的颜色、字体、边框以及网页 内容的位置及尺寸等。CSS (网页样式表)就是用于设计和实现网页表现方式的一组描述或定义，具有以下特征:
(1)通过样式表示颜色、字体、背景色、边框及网页内容的位置、尺寸等属性。
(2)样式表由一系列样式组成。
(3)样式表在使用时，可以单独保存为外部样式表文件(扩展名为css)，也可在HTML文件中嵌入样式表(在<head></head>中使用<style></style>定义)，或者在HTML标记中直接设置样式表(使用style="..."的方式)。其中，外部样式表文件可有效地将网页内容与其表现方式分离，以方便修改网页的表现方式。在HTML标记中使用样式表时采用的是层叠式原则。
什么是CSS
CSS是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准，其全称县 Cascading Style Sheet。CSS 标准中重新定义了HTML中原来的文字显示样式，增加了一些新概念，如类、层等，可以对文字层叠、定位等。所谓“层叠”，实际上就是将显示样式独立于显示的内容，进行分类管理，如分为字体样式、颜色样式等，需要使用样式的HTML文件进行套用。
在CSS还没有引入到页面设计之前，传统的HTML语言要实现页面美化在设计上是十分麻烦的，例如，要设计页面中文字的样式，如果使用传统的HTML语句来设计页面，就不得不在每个需要设计的文字上都定义样式。
CSS规则
在CSS样式表中包括3部分内容:选择符、属性和属性值。语法格式如下:
选择符{属性:属性值;}
参数说明:
选择符:又称选择器，是CSS中很重要的概念，所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。
属性:主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表项目属性、表格属性等内容。其中一些属性只有部分浏览器支持，因此使CSS属性的使用变得更加复杂。
属性值:为某属性的有效值。属性与属性值之间以“;”分隔。当有多个属性时，使用“,”分隔。
style对象
style对象是HTML对象的一个属性。style对象提供了一组对应于浏览器所支持的CSS样式的属性（如background、fontsize和bordercolor等）。每一个HTML对象都有一个style属性，可以使用该属性访问CSS样式属性。
内联样式使用sye对象属性直接为单个HTML元素指派应用的CSS样式，而使用style对象可以检查这些指派，并进行新的指派或更改已有的指派。要使用style对象，应该在HTML元素上使用style关键字。要获得内联样式的当前设置，应该在style 对象上使用对应的style对象的属性。
烟花效果：
<script type="text/javascript">
//自定义变量及数组，并用数组来保存颜色值，在页面中添加多个层，设置其大小、颜色和初始位置
var col=new Array('#ffffff','#fff000','#ffa000','#ff00ff','#00ff00','#0000ff','#ff0000');
var p='<div id="rearDiv" style="position:absolute;top:0px;left:0px">';
var n=0;
for(var i=0;i<14;i++){
n++;
if(n=(col.length-1)) n=0;
p=p+'<div style="position:relative;width:1px;height:1px;background:'+col[n]+';font-size:3px">.</div>';
}
p=p+"</div>";
document.write(p);
var clrs=new Array('#ff0000','#00ff00','#000aff','#ff00ff','#ffa500','#ffff00','#00ff00','#ffffff','#fffff0');
var sclrs=new Array('#ffa500','#55ff66','#AC9DFC','#fff000','#fffff0');
var peepx;
var peepy;
var step=5;
var tallystep=0;
var backcolor='ffa000';
var mtop=250;
var mleft=250;
//自定义函数dissilient()，调用自定义函数enlarge()和reduce（），用于实现绽放的烟花效果
function dissilient(){
peepy=window.document.body.clientHeight/3;
peepx=window.document.body.clientWidth/8;
enlarge();
tallystep+=step;
reduce();
t=setTimeout("dissilient()",20);
}
//自定义函数enlarge()，利用正弦值来实现烟花的绽放与缩小
function enlarge(){
for(i=0;i<rearDiv.all.length;i++){
var c=Math.round(Math.random()*(clrs.length-1));
if(tallystep<90)
rearDiv.all[i].style.background=backcolor;
if(tallystep>90)
rearDiv.all[i].style.background=clrs[c];
rearDiv.all[i].style.top=mtop+peepy*Math.sin((tallystep+i*5)/3)
*Math.sin(550+tallystep/100);
rearDiv.all[i].style.left=mleft+peepy*Math.cos((tallystep+i*5)/3)
*Math.sin(550+tallystep/100);
}
}
function reduce(){
if(tallystep==220){
tallystep=-10;
var k=Math.round(Math.random()*(sclrs.length-1));
backcolor=sclrs[k];
dtop=window.document.body.clientHeight-250;
dleft=peepx*3.5;
mtop=Math.round(Math.random()*dtop);
mleft=Math.round(Math.random()*dleft);
document.all.rearDiv.style.top=mtop+document.body.scrollTop;
document.all.rearDiv.style.left=mleft+document.body.scrollLeft;
if((mtop<20)||(mleft<20)){
mtop+=90;
mleft+=90;
}
}
}
</script>
百叶窗：
<script type="text/javascript">
var s="";
for(i=1;i<=16;i++){
s=s+'<div id="i'+i+'" style="position:absolute; left:0px; top:0px;background-color:#0066ff;border:'+"0.1px"+''+"soild"+''+"#0066ff"+'"></div>';
}
document.write(s);
var speed=30;
var temp=new Array();
var height=document.body.clientHeight,top=0;
for(i=1;i<=16;i++){
temp[i]=eval("document.all.i"+i+".style");
temp[i].width=document.body.clientWidth/16;
temp[i].height=document.body.clientHeight;
temp[i].left=(i-1)*parseInt(temp[i].width);
}
function kind(){
height-=speed;
for(i=1;i<=16;i=i+2){
temp[i].clip="rect(0 auto+"+height+" 0)";
}
top+=speed;
for(i=2;i<=16;i=i+2){
temp[i].clip="rect("+top+" auto auto auto)";
}
if(height<=0)
clearInterval(tim);
}
tim=setInterval("kind()",100);
</script>
CSS的继承
对于面向对象的程序开发人员来说，对于继承这一概念肯定不会感到陌生， CSS语言中的继承概念并不像C++和Java语言那样复杂，简单地说，就是将所有HTML标记看作是一个容器， 定义在公容器上的CSS样式会自动加载到子级容器中。
CSS继承的运用
了解了HTML页面的继承关系后，掌握CSS的继承关系就很简单了。CSS样式中的继承关是子标记会维承父标记定义的样式，并且可以在父标记样式的基础上加以修改，这样会产生新的程系指的而子标记的样式风格不会影响到父标记。
CSS继承关系的灵活运用可大大缩减代码的编写量。
转载于掘金