JavaScript学习(二十七)——级联样式表

我心飞翔 分类: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属性的使用变得更加复杂。

属性值:为某属性的有效值。属性与属性值之间以“;”分隔。当有多个属性时,使用“,”分隔。

JavaScript学习(二十七)——级联样式表

 

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样式会自动加载到子级容器中。

JavaScript学习(二十七)——级联样式表

CSS继承的运用

了解了HTML页面的继承关系后,掌握CSS的继承关系就很简单了。CSS样式中的继承关是子标记会维承父标记定义的样式,并且可以在父标记样式的基础上加以修改,这样会产生新的程系指的而子标记的样式风格不会影响到父标记。
CSS继承关系的灵活运用可大大缩减代码的编写量。

转载于掘金

回复

我来回复
  • 暂无回复内容