Proprietati CSS pentru margini - BORDER

Size: px

Start display at page:

Download "Proprietati CSS pentru margini - BORDER"

Imogen Baker
6 years ago
Views:

1 Proprietati CSS pentru margini - BORDER Property Values Description border border-bottom border-width border-bottom-width O proprietate pentru setarea celor 3 proprietati intr-o singura linie O proprietate pentru setarea intr-o singura declarare a proprietatilor pentru marginea de jos (bottom) border-bottom-color Seteaza culoarea marginii de jos border-bottom-style Seteaza stilul marginii de jos border-bottom-width Seteaza grosimea marginii de jos color Seteaza culoarea celor 4 margini poate avea pana la 4 culori border-left border-left-width O proprietate pentru setarea tuturor prorpietatilor pentru marginea din stanga intr-o singura declarare. border-left-color Seteaza culoarea marginii din stanga border-left-style Seteaza stilul marginii din stanga border-left-width border-right length border-right-width Seteaza grosimea marginii din stanga O proprietate pentru setarea tuturor prorpietatilor pentru marginea din dreapta intr-o singura declarare. border-right-color Seteaza culoarea marginii din dreapta border-right-style Seteaza stilul marginii din dreapta border-right-width none hidden dotted dashed solid double groove ridge inset Seteaza grosimea marginii din dreapta Seteaza stilul celor 4 margini intr-o singura declaratie

2 border-top outset border-top-width O proprietate pentru setarea tuturor prorpietatilor pentru marginea de sus intr-o singura declarare. border-top-color Seteaza culoarea marginii de sus border-top-style Seteaza stilul marginii de sus border-top-width border-width Seteaza grosimea marginii de sus A shorthand property for setting the width of the four borders in one declaration, can have from one to four values Exemplu de margini: <style type="text/css"> p.dotted {: dotted} p.dashed {: dashed} p.solid {: solid} p.double {: double} p.groove {: groove} p.ridge {: ridge} p.inset {: inset} p.outset {: outset} </style> bla bla Internet Explorer 5.5 suporta toate tipurile de stiluri de linie <p class="dotted"> margine dotted <p class="dashed"> margine dashed <p class="solid"> margine solid <p class="double"> margine double <p class="groove"> margine groove <p class="ridge"> margine ridge <p class="inset"> margine inset <p class="outset"> margine outset </body>

3 Proprietatile CSS ale marginilor Aceste proprietati seteaza marginile in jurul unui element HTML. Proprietate Valori Descriere margin margin-bottom margin-top margin-right margin-bottom margin-left auto O proprietate care seteaza cele patru margini intr-o singura declarare Seteaza marginea de jos a unui element HTML

margin-left margin-right margin-top auto auto auto Seteaza marginea din stanga a unui element HTML Seteaza marginea din dreapta a unui element HTML Seteaza marginea

4 margin-left margin-right margin-top auto auto auto Seteaza marginea din stanga a unui element HTML Seteaza marginea din dreapta a unui element HTML Seteaza marginea de sus a unui element HTML Exemplu <style type="text/css"> p.margin {margin: 2cm 3cm 3cm 5cm} </style> bla bla <p class="margin"> bla bla cu margini bla bla </body>

5 Observam ca marginile in paragraful care are ca atribut clasa margin au fost puse in ordinea: sus, dreapta, jos, stanga Proprietatile CSS pentru padding Aceste proprietati definesc spatiul dintre marginea elementului si continutul elemnetului Nu se admit valori negative! Proprietate Valori Descriere padding padding-bottom padding-left padding-right padding-top padding-top padding-right padding-bottom padding-left length length length O proprietate care seteazaintr-o singura declarare toate distantele fata de margini ale unui element HTML Seteaza distanta de la marginea de jos a elementului HTML Seteaza distanta de la marginea din stanga a elementului HTML Seteaza distanta de la marginea din dreapta a elementului HTML Seteaza distanta de la marginea de sus a elementului HTML Exemplu: <style type="text/css"> td {padding: 2.5cm} td.doua {padding: 1cm 2.5cm} </style> <table border="1"> <tr> <td> O celula de tabel in care textul e la o distanta de 2.5 cm fata de marginea celulei </td> </tr> </table> <br> <table border="1"> <tr> <td class="doua"> O celula cu margini sus si jos de 1cm iar stanga, dreapta de 2.5cm td> </tr> </table>

</body> Proprietati CSS pentru liste Aceste proprietati se utilizeaza pentru modificarea marcatorilor unei liste Propietate Valori Descriere list-style list-style-image list-style-position

6 </body> Proprietati CSS pentru liste Aceste proprietati se utilizeaza pentru modificarea marcatorilor unei liste Propietate Valori Descriere list-style list-style-image list-style-position list-style-type list-style-type list-style-position list-style-image none url inside outside none disc circle square decimal decimal-leading-zero O proprietate care steaza intro singura declarare toate cele trei proprietati Seteaza ca marcator de list o imagine Proprietatea stabileste pozitia marcatorului e lista: in interiorul listei sau in exteriorul acesteia Seteaza tipul de marcator

lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha

7 lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha Exemplu: <style type="text/css"> ul{list-style-image: url('pic2.gif')} </style> <ul> <li>lapte</li> <li>miere</li> <li>coca Cola</li> </ul> </body> Pseudo clase CSS

8 Pseudo clasele sunt utilizate pentru a adauga efecte diferite unor selectori Pseudoclasa active hover link visited Scopul Adauga un stil special unui link selectat Adauga un stil special unui link cand mouse-ul se afla desupra sa Adauga un stil special unui link nevizitat Adauga un stil special unui link svizitat Sintaxa Sintaxa pentru pseudoclase este: selector:pseudo-clasa {proprietate: valoare} Clasele CSS pot fi utilizate la randul lor cu pseudoclase. Sintaxa este: selector.class:pseudo-clasa { proprietate: valoare } Pseudoclase pentru ancore Un link poate fi afisat in mai multe feluri dupa starea in care se afla: activ, nevizitat, vizitat sau cand mouse-ul se afla deasupra sa. Pentru a modifica aceste stari folosim urmatoarele pseudoclase: a:link {color: #FF0000} /* unvisited link */ a:visited {color: #00FF00} /* visited link */ a:hover {color: #FF00FF} /* mouse over link */ a:active {color: #0000FF} /* selected link */ Observatie: Pentru a scoate in evidenta un link este recomandabil sa se foloseasca toate cele patru pseudoclase. Meta-informatii HTML Elementul Meta Acest element HTML se pune in interiorul blocului de head in cadrul unui document HTML. Scopul sau este de a furniza meta-informatii (informatii despre informatii) despre document. In principiu aceste informatii sunt utile pentru browser sau pentru robotii de cautare (gen Googleboot). De exemplu sunt utile declararea limbii utilizate in pagina cu ajutorul atributului lang, sunt utile declararea cuvintelor cheie etc. Descrierea paginii pentru motoarele de cautare Unele motoare de cautare verifica in cadrul blocului de head meta-informatiile legate de descrierea paginii declarate de catre programator (Googlebot- indexeaza paginile doar dupa informatiile de aici si nu mai verifica?keywords?:

9 <meta name="description" content="tutorial de html, tutorial de css "> Unele motoare de cautare folosesc aceste informatii pentru a indexa pagina respective mai usor. Adaugarea de cuvinte cheie Exemplu: <meta name="keywords" content="html, CSS,"> Redirectarea catre o alta pagina: THE END <meta http-equiv="refresh" content="5;url= Ne-am mutat la adresa <a href=" Veti fi redirectati spre aceasta in 5 sec.. daca nu sunteti redirectionati automat dati click pe link-ul de mai sus </body>

IMY 110 Theme 6 Cascading Style Sheets

IMY 110 Theme 6 Cascading Style Sheets 1. Cascading Style Sheets 1.1. Cascading Style Sheets Up to now we have done styling by using the style attribute. e.g. paragraph What