  The CSS with Dreamweaver MX
[20 mn 阅读 - 发表时间 11/16/2004 3:40:42 PM - 对象 : Confirmé]
|
 
|
作者
2. The CSS in the practice
Now that we go round of the CSS presentation, we'll see how to use them and to program them manually. In mode code, it is longer, but to begin one reaches a better understanding of the syntax.
We saw that there are two big families of styles CSS, the internal and the external. For these two examples, we are going to use "WordPad", but you can take any other simple or complex editor. Open WordPad and save your file with the extension .htm. To not record this file in the txt size, but well in HTML, do not forget to type the file name with this syntax: "exempleCSS.htm".
insert in first line the reference to the used standard HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
Type then the bases tag which has a HTML file:
<html>
<head>
<title>Exemple avec style CSS </title>
</head>
<body>
Exemple basique
</body>
</html>
Now you are ready to make first exercise.
2.1. Internal styles CSS
The statement of a new style must be between tag <body> and </body> under the shape
<tag_name Style="style :value ;"> … </tag_name>
Style applies to all the HTML tag, except tag: html, head, meta, param, script, style, title, base and basefont.
By agreement, for this example, we are going to use tag H1 and H2.
In the file "exempleCSS.htm", replace the line Exemple basique by lines:
<H1 Style="font-size: 32px; font-weight: bold; color: #0066FF;"> Voici un exemple de style. </H1>
<H2 Style="font-size: 18px; font-weight: bold; color: #EE88EE;"> et en voici un autre. </H2>
Your file "exempleCSS.htm" must look like the image below:
Close "WordPad" and open the file "exempleCSS.htm" with Internet Explorer, you obtain then a text attractively formated:
You notice that a multiple use of these styles can become boring. This type of style internally is used only in a exceptional way to define a particular style which does not require a global definition. When style is going to be used in several web sites, it is advisable to define it in an external style sheet.
2.2. External Styles CSS
First of all, it is advisable to create a file with
the extension .css, for example "MyStyles.css". This file is going to contain
all the styles being able to be useful for the pages of your Internet site.
In an external file, the syntax of style statement is very simple:
.style_name {
style: value;
style: value;
}
Resume your "WordPad", create a new file "MyStyles.css" eand type these
lines:
.monStyleTitre {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
color: #0066FF;
}
.monStyleTexte {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #0033CC;
}
Now resume the first file "exempleCSS.htm" f the previous example.
First of all, it is necessary to import the file "MyStyles.css". The import styles tag makes between tag <head> et </head>. This tag is a simple shortcut:
<link href="MyStyles.css" rel="stylesheet" type="text/css">
- href to clarify the access way to the file of style CSS
- rel and type to specify the type of the document.
We can appeal several styles sheets CSS in the same page:
<LINK href="Mystyle.css" rel=stylesheet type="text/css">
<LINK href="MyOldStyle.css" rel=stylesheet type="text/css">
<LINK href="style2.css" rel=stylesheet type="text/css">
In that case, we obtain a cascading styles, and it is the last style which will be used.
Your referenced style CSS file, you can now appeal the styles which it contains.
Replace the two lines of the previous example <H1…. et <H2… by :
<p class=" monStyleTitre ">Titre de mon paragraphe bla</p>
<p class=" monStyleTexte ">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</p>
<p class=" monStyleTitre ">Titre de mon paragraphe bui</p>
<p class=" monStyleTexte ">bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui bui.</p>
Your file "exempleCSS.htm" look like the image below:
Your file "MyStyles.css" must look like:
Close "WodPad" and open the file "exempleCSS.htm" with Internet Explorer,
you obtain then:
Now you can incorporate your styles CSS into all the pages of your Web site by
making reference only in a single file "MyStyles.css". So when you change
the definition of a style in "MyStyles.css", this change is going to echo
automatically in all the places where you had made reference of it.
Of course
these styles is not only for the pagination of the text, you can adjust the location of images, titles, menus, all the component
elements your web sites.
With CSS, you can change the graphic charter of an Internet site in some
mouse click.
|
43 访问
Sébastien BOUCLET
[10 分钟阅读时间 - 公布时间 11/16/2004 3:33:34 PM - 对象 : Débutant]
[10 分钟阅读时间 - 公布时间 11/16/2004 3:30:47 PM - 对象 : Débutant]