directory

Introduction to style sheets

What is CSS

CSS rules

Style object

CSS inheritance

Use of CSS inheritance

For web designers, the HTML language will not feel strange, but if you want to let the page to achieve the effect of the United States, only the use of HTML markup is not enough, at this time you need to introduce CSS in the page HTML and CSS is the “content” and “form” of the relationship, determined by HTML webpage internal, CSS to achieve the presentation of the page. The perfect combination of HTML and CSS makes pages more beautiful, generous and easy to maintain.

Introduction to style sheets

HTML web page contains two aspects: web page content and web page presentation.

Web content mainly consists of displayed text, images, form elements (text boxes, drop-down list boxes, radio buttons, check boxes).

Web page presentation includes the color, font, border, location and size of web page content. A CSS (Web style sheet) is a set of descriptions or definitions used to design and implement the presentation of a web page. It has the following characteristics:

(1) Color, font, background color, border and location, size and other attributes of web content are expressed by style.

(2) Style sheets are made up of a series of styles.

(3) The style sheet can be used separately as an external style sheet file (CSS extension), can be embedded in an HTML file (<head></head> <style></style> definition), or set the style sheet directly in the HTML tag (style=”…” By the way). An external style sheet file can effectively separate the content of a web page from its presentation, making it easier to modify the presentation of a web page. The cascading principle applies when using stylesheets in HTML tags.

 

What is CSS

CSS (Cascading Style Sheet) is a set of extensible Style standards developed by the W3C Consortium to address HTML’s shortcomings in display attributes. The CSS standard redefines the original HTML text display style, adding some new concepts, such as class, layer, can be layered on the text, positioning, etc. The so-called “cascade” is actually the display style independent of the display content, classification management, such as font style, color style, need to use the style of THE HTML file for the same.

Before CSS was introduced into page design, the traditional HTML language to achieve page beautification in the design is very troublesome, for example, to design the style of text in the page, if the use of traditional HTML statements to design the page, you have to define the style on each text that needs to be designed.

 

CSS rules

There are three parts to CSS stylesheets: selectors, properties, and property values. The syntax is as follows:

Selector {property: property value; }

Parameter Description:

Selectors: also known as selectors, is a very important concept in CSS, all HTML markup is controlled by different CSS selectors.

Attributes: mainly include font attributes, text attributes, background attributes, layout attributes, boundary attributes, list item attributes, table attributes and other contents. Some of these properties are only supported by some browsers, thus complicating the use of CSS properties.

Attribute value: Valid value for an attribute. Attribute and attribute value are separated by “; “. Space. If multiple attributes exist, separate them with commas (,).

 

Style object

The Style object is a property of an HTML object. The Style object provides a set of properties (such as background, FontSize, and BorderColor) that correspond to the CSS styles supported by the browser. Each HTML object has a style property that you can use to access CSS style properties.

Inline styles use sye object attributes to directly assign applied CSS styles to individual HTML elements, while style objects can examine these assignments and make new assignments or change existing ones. To use style objects, you should use the style keyword on HTML elements. To get the current Settings for inline styles, use the corresponding Style object’s properties on the Style object.

Fireworks effect:

		<script type="text/javascript"> 
			// Customize variables and arrays, use arrays to hold color values, add layers to the page, set their size, color and initial position
			var col=new Array('#ffffff'.'#fff000'.'#ffa000'.'#ff00ff'.'#00ff00'.'#0000ff'.'#ff0000');
			var p='
      

       '
      
;
			var n=0;
			for(var i=0; i<14; i++){ n++;if(n=(col.length-1)) n=0;
				p=p+'+col[n]+'; font-size:3px">.';
				
			}
			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;
			// The custom function dissilient(), which calls the custom functions enlarge() and reduce () to achieve the fireworks effect
			function dissilient(){
				peepy=window.document.body.clientHeight/3;
				peepx=window.document.body.clientWidth/8;
				enlarge();
				tallystep+=step;
				reduce();
				t=setTimeout("dissilient()".20);
			}
			// The user-defined function enlarge() can use the sine value to realize the blooming and shrinking of fireworks
			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>
Copy the code

Blinds:

<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.1 px"+' '+"soild"+' '+"#0066ff"+'"></div>';
			}
			document.write(s);
			var speed=30;
			var temp=new Array(a);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>
Copy the code

 

CSS inheritance

For object-oriented program developers, the concept of inheritance will certainly not feel strange, CSS language inheritance concept is not as complex as C++ and Java languages, simply said, is all HTML tags as a container, CSS style defined in the public container will be automatically loaded into the child container.

Use of CSS inheritance

After understanding the inheritance relationship of HTML pages, it is easy to master the inheritance relationship of CSS. The inheritance in CSS styles is that the child tag inherits the style defined by the parent tag, and can be modified based on the parent tag style. In this way, new procedures are created and the style of the child tag does not affect the parent tag. Flexible use of CSS inheritance can greatly reduce the amount of code to write.