Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.

Tutorial complect CSS part 3

2 participanți

 :: Tutoriale :: Tutoriale Web :: CSS

In jos

Tutorial complect CSS part 3 Empty Tutorial complect CSS part 3

Mesaj Scris de Pein Lun Iul 26, 2010 3:03 am

Stiluri pentru text

4.1 Aliniere
text-align pozitioneaza pe orizontala obiecte (de exemplu text sau imagini) si admite valorile left, right si center ca si eticheta align din HTML. In continuare este prezentat ca exemplu codul folosit in HEAD, aplicat etichetei p:
Cod:

 <style type="text/css">
 <!--
 p{text-align: center;}
 -->
 </style>
Exemplu: prin intermediul lui div aplicam stilul pecentru imaginii si textului
Cod:

<html>
 <head>
 <title>Exemplu 4_1</title>
 <style type="text/css">
 <!--
 p{text-align: center;}
 -->
 </style>
 </head>
 <body>
 <div class="pecentru"><img src="poza.jpg"></div> Text neformatat
 <div class="pecentru">Text formatat</div> <script type="text/javascript">//<![CDATA[
                  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
                 //]]></script>
                 <script type="text/javascript">//<![CDATA[
                     try
                     {
                        var pageTracker = _gat._getTracker("UA-6105650-13");
                        pageTracker._setDomainName("none");
                        pageTracker._setAllowLinker(true);
                        pageTracker._trackPageview();
                     }
                     catch(err){}
                 //]]></script></body>
 </html>
vertical-align este folosit pentru alinierea pe verticala a obiectelor dintr-un tabel si poate lua valorile: top, middle si bottom.
In exemplul de mai jos este creat clasa sus care va putea fi aplicat elementelor ale tabelului
Cod:
<style type="text/css">
 <!--
 .sus{vertical-align: top;}
 -->
 </style>
float este folosit pentru alinierea textului cu imaginile si poate avea valorile: left si right. In functie de valoarea aleasa imaginea va fi aliniata in partea opusa a paginii. Exemplu: cream clasa auto si o aplicam inaginii
Cod:
<html>
 <head>
 <title>Exemplu 4_2</title>
 <style type="text/css">
 <!--
 .auto{float: left;}
 -->
 </style>
 </head>
 <body>
 <img src="poza.jpg" class="auto">
 Textul se aliniaza la dreapta, iar poza la stanga datorita clasei "auto".
 <script type="text/javascript">//<![CDATA[
                  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
                 //]]></script>
                 <script type="text/javascript">//<![CDATA[
                     try
                     {
                        var pageTracker = _gat._getTracker("UA-6105650-13");
                        pageTracker._setDomainName("none");
                        pageTracker._setAllowLinker(true);
                        pageTracker._trackPageview();
                     }
                     catch(err){}
                 //]]></script></body>
 </html>
4.2 Tabulare
text-indent este folosit pentru alinierea textului in interior avand valori exprimate in inci (in), centimetri (cm) sau pixeli (px).
In exemplul de mai jos text-indent este aplicat etichetei p deplasand textul cu 10 pixeli in interior
Cod:
<style type="text/css">
 <!--
 p{text-indent: 10px;}
 -->
 </style>
4.3 Decorare
text-decoration adauga sublinierea sau taierea blocului text asociat si poate avea valorile underline, line-through sau none. Exemplu: stilul asociat etichetei p este prezentat in HEAD
Cod:
<html>
 <head>
 <title>Exemplu 4_3</title>
 <style type="text/css">
 <!--
 p{text-decoration: underline;}
 -->
 </style>
 </head>
 <body>
 Text normal
 <p>Text subliniat</p>
 <script type="text/javascript">//<![CDATA[
                  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
                 //]]></script>
                 <script type="text/javascript">//<![CDATA[
                     try
                     {
                        var pageTracker = _gat._getTracker("UA-6105650-13");
                        pageTracker._setDomainName("none");
                        pageTracker._setAllowLinker(true);
                        pageTracker._trackPageview();
                     }
                     catch(err){}
                 //]]></script></body>
 </html>
4.4 Culoare
color defineste culoarea textului dintr-o zona sau intraga pagina. Exemplu: stilul asociat etichetei p este prezentat in HEAD
Cod:
<html>
 <head>
 <title>Exemplu 4_4</title>
 <style type="text/css">
 <!--
 p{color: #0000FF;}
 -->
 </style>
 </head>
 <body>
 Text normal
 <p>Text albastru</p>
 <script type="text/javascript">//<![CDATA[
                  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
                 //]]></script>
                 <script type="text/javascript">//<![CDATA[
                     try
                     {
                        var pageTracker = _gat._getTracker("UA-6105650-13");
                        pageTracker._setDomainName("none");
                        pageTracker._setAllowLinker(true);
                        pageTracker._trackPageview();
                     }
                     catch(err){}
                 //]]></script></body>
 </html>
4.5 Stiluri pentru legaturi
In HTML culoarea legaturilor poate fi stabilita prin atributele LINK, ALINK si VLINK declarate in interiorul etichetei BODY.
Acelasi lucru si chiar mai mult poate fi realizat folosind sintaxa CSS. Exemplu
Cod:
<html>
 <head>
 <title>Exemplu 4_5</title>
 <style type="text/css">
 <!--
 a{font-family: arial; font-size: 20px;}
 a:link {color: #0000FF;}
 a:visited {color: #00FF00;}
 a:active {color: #FF0000;}
 a:hover {color: #000000;}
 -->
 </style>
 </head>
 <body>
 Text normal
 <a href="exemplu4_4.html">link</a> catre exemplul 4_4
 <script type="text/javascript">//<![CDATA[
                  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
                 //]]></script>
                 <script type="text/javascript">//<![CDATA[
                     try
                     {
                        var pageTracker = _gat._getTracker("UA-6105650-13");
                        pageTracker._setDomainName("none");
                        pageTracker._setAllowLinker(true);
                        pageTracker._trackPageview();
                     }
                     catch(err){}
                 //]]></script></body>
 </html>

a defineste stilul general pentru legatura
a:link defineste stilul legaturii nevizitate
a:visited defineste stilul legaturii vizitate
a:active defineste stilul legaturii active (nu prea se foloseste)
a:hover defineste stilul cand mouse-ul este deasupra legaturii

Stiluri pentru background

Background culoare sau imagine poate fi definita pentru intreaga pagina, o celula a tabelului sau pentru text. 5.1 Culoare de fond
background-color defineste culoarea de fond si poate fi asociat oricarei etichete HTML. Exemplu: definim un stil pentru intreg BODY si un altul pentru eticheta p

Cod:
[/i]<html>
 <head>
 <title>Exemplu 5_1</title>
 <style type="text/css">
 <!--
 body {background-color: #FFFF00;}
 p {background-color: #FF0000;}
 -->
 </style>
 </head>
 <body>
 Text normal
 <p>Text cu background rosu</p>
 <script type="text/javascript">//<![CDATA[
                  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
                 //]]></script>
                 <script type="text/javascript">//<![CDATA[
                     try
                     {
                        var pageTracker = _gat._getTracker("UA-6105650-13");
                        pageTracker._setDomainName("none");
                        pageTracker._setAllowLinker(true);
                        pageTracker._trackPageview();
                     }
                     catch(err){}
                 //]]></script></body>
 </html>
5.2 Imagine de fond
Imaginile pot fi folosite ca fundal in spatele intregii pagini, a unui obiect sau a textului.
background-image asociaza o imagine ca fundal unui obiect. Exemplu: definim un stil pentru eticheta [i]p

Cod:
[/i]html>
 <head>
 <title>Exemplu 5_2</title>
 <style type="text/css">
 <!--
 p {background-image: url(poza.jpg);}
 -->
 </style>
 </head>
 <body>
 Text normal
 <p>Text cu imagine de fond</p>
 <script type="text/javascript">//<![CDATA[
                  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
                 //]]></script>
                 <script type="text/javascript">//<![CDATA[
                     try
                     {
                        var pageTracker = _gat._getTracker("UA-6105650-13");
                        pageTracker._setDomainName("none");
                        pageTracker._setAllowLinker(true);
                        pageTracker._trackPageview();
                     }
                     catch(err){}
                 //]]></script></body>
 </html>

5.3 Repetare
Functie de dimensiunile obiectului caruia ii sunt asociate imaginile de fond se repeta pe orizontala si verticala.
Repetarea poate fi controlata prin parametrul background-repeat care poate lua valorile:
[i]repeat-x imaginea se repeta pe orizontala
repeat-y imaginea se repeta pe verticala
no-repeat imaginea nu se repeta Exemplu: imaginea nu se repeta sub eticheta p

Cod:
[/i]<html>
 <head>
 <title>Exemplu 5_3</title>
 <style type="text/css">
 <!--
 p {background-image: url(poza.jpg);
 background-repeat: no-repeat;}
 -->
 </style>
 </head>
 <body>
 Text normal
 <p>Text cu imagine de fond</p>
 <script type="text/javascript">//<![CDATA[
                  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
                 //]]></script>
                 <script type="text/javascript">//<![CDATA[
                     try
                     {
                        var pageTracker = _gat._getTracker("UA-6105650-13");
                        pageTracker._setDomainName("none");
                        pageTracker._setAllowLinker(true);
                        pageTracker._trackPageview();
                     }
                     catch(err){}
                 //]]></script></body>
 </html>
5.4 Pozitia
In mod
normal imaginea de fundal incepe din coltul stanga sus al obiectului
asociat, dar acest lucru poate fi controlat prin comanda CSS background-position.
Sunt acceptate doua valori:
in prima pozitie poate fi: [i]top, center, bottom, percentage sau pixel
in a doua pozitie poate fi: right, center, left, percentage sau pixel Exemplu: imaginea de fundal este asociata etichetei BODY fiind amplasata top si center, fara repetare
Cod:
<html>
 <head>
 <title>Exemplu 5_4</title>
 <style type="text/css">
 <!--
 body {background-image: url(poza.jpg);
 background-repeat: no-repeat;
 background-position: top center;}
 -->
 </style>
 </head>
 <body>
 Text normal
 <script type="text/javascript">//<![CDATA[
                  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
                  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
                 //]]></script>
                 <script type="text/javascript">//<![CDATA[
                     try
                     {
                        var pageTracker = _gat._getTracker("UA-6105650-13");
                        pageTracker._setDomainName("none");
                        pageTracker._setAllowLinker(true);
                        pageTracker._trackPageview();
                     }
                     catch(err){}
                 //]]></script></body>
 </html>
Pein
Pein
Fondator
Fondator

<b>Sex</b> Sex : masculin
<b>Mesaje</b> Mesaje : 617
<b>Credite</b> Credite : 5951
<b>Varsta</b> Varsta : 30
<b>Localizare</b> Localizare : Campina
<b>Respectarea Regulamentului</b> Respectarea Regulamentului : Tutorial complect CSS part 3 0w11

https://help-forums.all-up.com

Sus In jos

Tutorial complect CSS part 3 Empty Re: Tutorial complect CSS part 3

Mesaj Scris de God Joi Oct 07, 2010 1:55 am

Faceti-va timp 30 de mnute pe zii si cititi aceste tutoriale sunt uimitoare,ve-ti putea devenii un expert in css.
God
God
Member
Member

<b>Sex</b> Sex : masculin
<b>Mesaje</b> Mesaje : 91
<b>Credite</b> Credite : 5251
<b>Varsta</b> Varsta : 30
<b>Localizare</b> Localizare : Home
<b>Respectarea Regulamentului</b> Respectarea Regulamentului : Tutorial complect CSS part 3 0w11

http://Gods.forumz.ro

Sus In jos

Sus

- Subiecte similare

 :: Tutoriale :: Tutoriale Web :: CSS

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum