Css dynamic resizing form. CSS forms. Relative size change via percentages

Laboratory work No. 4

CASCADING STYLE SHEETS (CSS)

Purpose of the work

Introduce the concept of CSS cascading style sheets, as well as gain practical skills in using them.

Theoretical information.

Internet Explorer offers you its own style, called default. This style assumes a clean white background, black font color, all links are underlined and blue, etc. What if you don't like all this? You already know how to change various attributes directly. Even if there are many objects of the same value, you already know how to use classes. But there is another possibility. To set the entire style of the document, the so-called Hierarchical Style Sheets (Cascade Style Sheets - CSS) are used, which are a set of settings for the properties of various objects. In some ways they resemble classes, but if a class is created inside a document and may or may not be applied, then CSS, if it is included, then the settings in it directly affect all objects in the document.

Introduction to CSS

CSS is very similar to classes, the only difference being that they describe the style of an already known object. For a clear example, now look around your room (office, hall...) in which you are. Surely, you will see many different objects (table, chair, window, computer). Each of these object items has characteristics, and you need to make a list of these objects and their characteristics. You might end up with something like this:

table:
color - brown
material - wood
computer:
color - white
material - plastic
purpose - for work

Of course, you can go the other way, but only CSS is composed in this way, where objects appear instead of objects, and their characteristics are slightly different. For example, here is an excerpt from such a document:

body
{
background-color: rgb(255,255,153);
color: rgb(51,51,153);
}
h3
{
color: rgb(255,0,0);
font-family: arial, helvetica;
}

Here you set what the style of the BODY and h3 element will be. Those parameters that are not specified remain default.

Creating CSS does not require much effort and can be done in a simple notepad, although there are special programs for this purpose that make the work easier and clearly show what the future document will look like using this style. Look for such programs on your disk or from friends.

2.2.Creating a style sheet in a document

There are two ways to include CSS. The first is to set it in the STYLE element at the beginning of the document, as a class. This is done like this (example 1):

h3 (color: red)
h3 (color: red; font-style: italic)



This document
uses style sheets

In this example, on the screen you will see two lines consisting of two objects: h3 and h3. Look what Internet Explorer's default style has become. But we did not make any instructions in the object itself about its style. This way, no matter how many h3 and h3 objects you create, their style will always be the same as you specified in the style sheet.

2. 3. Style sheet in a separate file

If you like the style you created and want to use it in all your documents. Or your document consists of many HTML pages and they all need to have the same style, you don't have to hammer in style sheet lines at the beginning of the document every time.

The second way to connect CSS to a Web page is to create the CSS in a separate file, and link to that file within the page itself. Then, you can write only one line in the page and still its style will be the same as it is defined in the style table in the external file. I think there is no need to talk for a long time about the advantages of this method.

So, first you create a table following the above rules. Then, you add a line similar to the following to the element to include the stylesheet:

LINK means that the element is connected to the current page, REL and TYPE describe the element like a style sheet, and HREF contains the address where the file with your CSS is located.

Dynamically changing CSS

You can dynamically change the name of the included stylesheet file, changing the style itself accordingly. Here is a function in JScript, which, when called, if any style has already been applied, removes it and connects a new one.

function change_style()

( if (document.styleSheets.href != null)
document.styleSheets.href = "newStyle.css";
}

If a style sheet is defined within an HTML page, you can add new definitions using the addRule(object, style) function. Where object is an object, and style, respectively, are style settings. Here is an example in which, after clicking a button, the style sheet changes (example 2):

function newRule()

document.styleSheets.MyStyles.addRule("P","color:blue");)


h3 (color:red)
h3 (color:red;font-style:italic)



This document uses style sheets

This is a paragraph. Click the button to change its style

By viewing the page with this code, you will see how the style is changed by adding a setting to the style sheet.

Classes

A class is another way to set what text should look like on a page. Essentially, you define a set of styles, such as color, font weight, font size, and so on, but you don't assign it to a specific tag. The class looks like this:

#text
( position:absolute;
top:400px;
left: 10px;)

A (text-decoration:none;)

.regular
(color:red;)
.superBig
( font-size:16pt;
font-weight:bold;
color:red;
}
.copyright
( font-size:9pt;
font-style:italic;
text-transform:capitalize;
}

In this example, three classes are created: regular, superBig, copyright. Below is how to apply these classes in the text navigation layer.

superBig class

Class regular

Class copyright

P
{
font-size:16pt;
font-weight:bold;
}

P.small
( font-size:9pt;
margin-left:5em;
margin-right:5em;
}
Below is how to apply the class

( font-size:16pt;

font-weight:bold;

font-family:verdana, sans-serif;

( font-size:9pt;

margin-left:5em;

margin-right:5em;

cool( color: blue; font-style; italic;)

This document uses style sheets

Tight control using a tag

A tag is a convenient, versatile tool for applying style anywhere you need it.

This document uses style sheets

This document