luni, 31 mai 2010

Cum inserăm CSS în documentele HTML

O foaie de stil poate fi inserată în trei moduri:
• Foaie externă de stil
• Foaie internă de stil
• Stil inline

O foaie de stil externă este ideală atunci când stilul respectiv se aplică mai multor pagini. Cu o foaie CSS externă, puteţi modifica aspectul întregului site modificând un singur fişier. Fiecare pagină trebuie să se lege la foaia de stil folosind tagul <link> în interiorul secţiunii head:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>



O foaie externă de stil poate fi scrisă în Notepad, nu trebuie să conţină taguri html şi trebuie salvată cu extensia .css. Un exemplu de foaie de stil externă, memorată în fişierul stil.css, este prezentată mai jos:
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("roses.gif")}

Obs. Nu lăsaţi spaţii între valoarea proprietăţii şi unitatea de măsură! Dacă scrieţi "margin-left:20 px" (în loc de "margin-left:20px") va merge în IE, dar nu în  Firefox sau Opera.


O foaie internă de stil trebuie folosită când un singur document are un anumit stil. Foaia internă de stil se defineşte în secţiunea head a paginii HTML folosind tagul <style>, ca în exemplul următor:

<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("roses.gif")}
</style>
</head>

Un stil inline pierde multe din avantajele foilor de stiluri amestecând conţinutul cu prezentarea. Utilizaţi această metodă cât mai rar. Pentru a utiliza un stil inline, folosiţi atributul style în tagul respectiv. Atributul style poate conţine orice proprietăţi CSS. Exemplul următor ilustrează cum se poate schimba culoarea şi marginea stângă a unui paragraf:
<p style="color:sienna;margin-left:20px">Acesta este 
un paragraf.</p>


Ce stil va fi utilizat când într-un document HTML sunt specificate mai multe foi de stil pentru un element HTML?
La modul general, putem spune că stilurile se vor mixa într-o foaie de stil virtuală după următoarele reguli, unde prioritatea creşte odată cu numărul de ordine:
  1. Foi de stil externe (din fişiere CSS)
  2. Foi de stiluri interne (din secţiunea head
  3. Setările implicite ale browserului)
  4. Stiluri inline (din tagul elementului HTML)
Deci, stilul inline al unui element suprascrie stilul definit în <head>, într-un fişier extern sau în browser.

Obs: Dacă legătura către o foaie externă de stil este amplasată în secţiunea <head> după foaia internă de stiluri, atunci fişierul extern va suprascrie stilul intern!
 

5 comentarii:

  1. Interensat blogul tau :) ce zici de un schimb de link-uri? ;)

    RăspundeţiŞtergere
  2. nume legatura: 4Botosani
    adresa legatura: http://4botosani.blogspot.com/

    eventual puteti prelua si un banner de la noi ;)

    RăspundeţiŞtergere
  3. nume: 4Botosani
    legatura: http://4botosani.blogspot.com

    RăspundeţiŞtergere
  4. Produsele de la FM Group sunt de o calitate deosebita, au preturi mai mult decat rezonabile si comisionele directe merg pana la 80%. Da, se castiga bani din aceasta afacere.

    RăspundeţiŞtergere

Se încarcă...