• Acasă
  • Despre noi
  • Autori
  • Mărturii
  • Arhivă
  • Trimite Articol
  • Contact

WORLDIT

Lumea în 1 și 0.

  • Știri
    • Tehnologie
    • Tehnologie mobilă
    • Securitate
    • Developers
    • Știință
    • Benzi desenate
    • Jocuri
    • Intern
  • Tehnic
    • Browser
    • C#
    • C/C++
    • Challenge
    • HTML/CSS
    • Javascript, Ajax, jQuery
    • Open Source
    • PHP
    • Python
    • Securitate IT
    • Socializare
    • WordPress
    • Altele
  • Recenzii
  • Interviuri
  • Evenimente

Cateva trucuri si sfaturi pentru CSS

9
  • Publicat de Andrei Avădănei
  • în HTML/CSS · Tehnic
  • — 13 oct., 2009 at 2:59 pm

thumb3[1]

1. Scrieti codul grupat

Orice web site este format din Header, Content si Footer, ar trebui pastrata aceeasi ordine si in fisierul CSS.

/* Header Section */
#header {
	width: 100%;
}

/* Content Section */
#content {
	float: left;
	width: 970px;
}

/* Articles Section */
.article {
	float: left;
	width: 500px;
}

/* Sidebar Section */
#sidebar {
	float: left;
	width: 470px;
}

/* Footer Section */
#footer {
	width: 100%
}

2. Folositi prescurtari

Folosirea prescurtarilor in CSS este foarte importanta, nu numai ca salveaza timp dar si marimea fisierului.

/* NEPRESCURTAT */
.neprescurtat {
	margin-top: 5px;
	margin-right: 6px;
	margin-bottom: 7px;
	margin-left: 8px;
	padding-top: 5px;
	padding-right: 6px;
	padding-bottom: 7px;
	padding-left: 8px;
}

/* PRESCURTAT */
.prescurtat {
	margin: 5px 6px 7px 8px; /* top - right - bottom - left */
	padding: 5px 6px 7px 8px; /* top - right - bottom - left */
}

3. Formatarea Textului

<p class="litereMari">textul va fi afisat cu litere mari</p>
<p class="litereMici">TEXTUL VA FI AFISAT CU LITERE MICI</p>
/* Litere Mari */
.litereMari {
	text-transform: uppercase; /* Textul va fi scris cu litere Mari*/
}

/* Litere Mici */
.litereMici {
	text-transform: lowercase; /* Textul va fi scris cu litere Mici*/
}

4. Centrarea Layoutului

Sunt destul de multe moduri de a centra un Layout in CSS dar cel care il prezint eu este cel mai usor dupa parerea mea, si cel mai des folosit.

body {
	width: 970px;
	margin: 0 auto; /* 0 = top bottom | auto = right left */
}

5. Utilizarea unui Reset

…sau Reset Browser Default este o metoda extrem de buna care rezolva multe probleme cu anumite browsere.

/* Resets Browser defaults */

body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
	margin: 0;
	background: #fff url('images/bg.png') repeat-x;
}

* :focus {
	outline: 0;
}

p, b, span, h1, h2, h3, h4, h5, h6, b, ol, ul, li, div, a, a:hover, img, input, textarea, small {
	margin: 0;
	padding: 0;
	border: none;
	list-style: none;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}

a {
    color: #0072ff;
	text-decoration: none;
}

a:hover {
	color: #313131;
	text-decoration: underline;
}

.clearfix {
    clear: both;
    line-height: 1px;
}

6. Scrieti codul intr-un anumit mod.

O sa prezit doua din cele mai folosite moduri de scriere, personal il prefer pe primul pentru ca mi se pare mult mai usor de citit.

/* Primul mod de scriere */

.text {
	font-size: 1.2em;
	color: #ccc;
	padding: 3px 5px;
}
/* Al doilea mod de scriere */

.text { font-size: 1.2em; color: #ccc; padding: 3px 5px; }

7. Nu folositi acelasi atribut de doua ori.

.text {
	font-size: 1.2em;
	color: #ccc;
	padding: 3px 5px;
}

.text a {
	font-size: 1.2em;
	text-decoration: nonel
}

Nu este necesar sa folosim font-size: 1.2em; de doua ori pentru ca deja .text a a luat acea valuoare de la .text , aceasta este o greseala foarte des intalnita de mine.

Autor : thiefunu

Etichete: centrarecssprescurtariresetsfaturithiefunu

— Andrei Avădănei a scris 1246 articole

Andrei scrie pe worldit.info din vara lui 2011. Este fondatorul Asociatiei Centrul de Cercetare in Securitate Informatica din Romania - CCSIR si coordoneaza DefCamp, cea mai importanta conferinta de securitate informatica & hacking din Europa Centrala si de Est. Andrei ofera in cadrul Bit Sentinel servicii de securitate informatica, penetration testing, security management, recuperarea de pe urma unui atac cibernetic, training-uri si workshop-uri.

  • Articolul anterior Problema „float” in CSS
  • Articolul următor BFG Gaming Laptop

9 Comentarii

  1. Tweets that mention Cateva trucuri si sfaturi pentru CSS | WorldIT -- Topsy.com spune:
    octombrie 13, 2009 la 4:20 pm

    […] This post was mentioned on Twitter by HardCoders. HardCoders said: RT @worldIT: [WorldIT] Cateva trucuri si sfaturi pentru CSS http://bit.ly/6go3n […]

  2. miculprogramator spune:
    octombrie 13, 2009 la 7:48 pm

    Thanks for all this stuffs, Vlad! 😀

  3. Claudiu spune:
    octombrie 15, 2009 la 9:06 am

    Sper ca nu te superi daca vin cu mici completari 🙂

    De obicei imi fac structura si nu schimb alte proprietati (font-size, color etc) decat dupa ce introduc continut (dummy content, lorem ipsum, orice ca sa-mi fac o idee cum arata). Asa sunt sigur ca nu rescriu proprietati inherited.

    Cat despre structura, este foarte usor de urmarit o structura cat de cat ordonata:

    #wrapper {
        width: 990px;
        margin: 0 auto;
        /* css styles rule */
          }
    #header {
          height: 120px;
           /* I'm a header */
          }
    #header .logo {
            /* whatever */
           }
    .logo a{
            /* whatever again */
           }
    #content { 
           }
        /* etc etc */
    
    

    spre deosebire de o structura aliniata la stanga:

    #wrapper {
    /* I'm ugly */
    }
    #header {
    /* ^ Yes you are */
    }
    #header .logo {
    /* I'm a logo */
    }
    .logo a {
    /* I'm a link in the logo */
    }
    /* etc etc */
    

    Probabil e o un obicei ramas de la programarea in C/C++, PHP, de la structuri if – else, for etc imbricate.

    O alta idee ar fii sa tii layoutul intr-un fisier separat, apoi sa incarci stylesheeturi diferite in functie de pagina, ca sa nu incarci pe o pagina stiluri pe care nici macar nu le folosesti.

    Another thing, de obicei vad unde am gresit dupa ce termin layout-ul si sunt multumit de el. Firebug pentru Mozzila iti arata exact pentru fiecare element ce proprietati are elementul, inclusiv proprietatile suprascrise. Daca vad proprietati suprascrise identice cu cele active, atunci e clar ca e o greseala 🙂

    Si ultimul lucru pe care as vrea sa-l mentionez e in legatura cu „Reset browser defaults”. Da, este foarte bine de folosit unul ca sa evitam „surprizele”, dar ai o mica greseala.

    „font-size: 62.5%; /* Resets 1em to 10px */”

    62.5% e o marime relativa, la fel ca em. Proprietatile in procente sunt relative la marimea elementului parinte, iar em sunt relative la marimea standard a fontului.

    Linia care ai scris-o tu este aproximativa, iar normal ar fii 62.8% daca vrei sa fii mai exact (dar tot aprox). Este ok pentru paragrafe, dar cand trebuie sa faci un design pixel-perfect nu te poti baza pe asa ceva. O alta problema e in IE. Degeaba scrii jos un fix pentru IE cand ii dai in cap cu prima linie. Cand deschide o pagina, IE iti va lua 62.5% ≈ 1em ≈ 10 px ca marime medium. Daca medium e 10px, iti dai seama pana la ce marime poti mari fontul… cam nasol pentru cei cu monitoare mari sau vedere slaba.

    Other than that, great list of tricks 😉 Keep up!

  4. Claudiu spune:
    octombrie 15, 2009 la 9:13 am

    ^ imi face trim la spatiu sus, nu am apucat sa editez 🙁

  5. Avadanei Andrei spune:
    octombrie 15, 2009 la 3:03 pm

    Ti-am editat eu comentariul si l-am formatat cum am considerat eu ca ai vrut sa sugerezi,daca nu a fost asta corecteaza-ma.

    BTW : Multumesc de competari!!! 😀

  6. Claudiu spune:
    octombrie 16, 2009 la 8:47 am

    Multumesc! Dar, daca poti, mai editeaza odata 🙂 Uite aici un exemplu:

    #header {
    ……..}
    #header .logo {
    ……………}
    #content {
    …….}
    #rightcol {
    …….}

    Inclusiv formatarea proprietatilor cum ai editat deja 🙂

    P.S.: Ce tag-uri accepta textboxul? Ce ai folosit pentru formatare, pre?

  7. Avadanei Andrei spune:
    octombrie 16, 2009 la 5:23 pm

    @Claudiu : Accepta tagurile clasice de html. Eu folosesc <pre class=”brush:css”> pentru formatare. E bine acum ? 😀

  8. Patrascu Vlad spune:
    noiembrie 10, 2009 la 1:59 pm

    @Claudiu eu mai mult prefer formatarea:

    #wrapper {
    width: 960px;
    margin: 0 auto;
    }

    …decat…

    #wrapper {
    width: 960px;
    margin: 0 auto;
    }

    Ma rog acum depinde de preferintele fiecaruia 😀

  9. Ashantyk spune:
    septembrie 17, 2011 la 10:46 pm

    ar merge completat si body,html{height:100%} in caz ca vei avea overlay-uri cat ferestra documentului web sau sidemenu ce vrei sa ajunga perfect de sus pana jos, fara scrollbar. si poate si mark{background:transparent} pt ca firefox 6 iti pune background galben de highlight la acest tag si ar mai fi si altele, dar mi-e lene sa ma gandesc la toate acum :))


  • Facebook

    WorldIT.info
  • Ultimele Atacuri Cibernetice din Romania – RO Hacked

    [wp_rss_retriever url="https://rohacked.bit-sentinel.com/feed/" excerpt="none" items="5" read_more="false" new_window="true" thumbnail="false" cache="0"] RO Hacked este registrul atacurilor cibernetice din România.
  • Caută

  • Articole Recomandate

    • Recent Posts
    • Tags
    • Număr record de participanți la DefCamp 2015, cel mai important eveniment dedicat securității cibernetice din Europe Centrala si de Estdecembrie 2, 2015
    • La DefCamp 2015 vei afla prin ce tehnici pot fi evitate măsurile de securitate ale sistemelor informatice criticeoctombrie 16, 2015
    • Ultima sansa sa rezervi bilete de tip Early Bird la DefCamp 2015septembrie 1, 2015
    • 15 sfaturi despre cum poti deveni un programator bun venite de la specialisti romaniaugust 4, 2015
    • algoritmica Android antivirus Apple Avadanei Andrei benzi desenate BitDefender blog browser C++ Chrome concurs eveniment Facebook Firefox Google google chrome hacking html5 infografic informatica internet Internet Explorer IT javascript linux Microsoft Mozilla Firefox online PHP programare retea sociala review Romania securitate Tehnologie Twitter web Windows Windows 7 Wordpress WorldIT worldit.info Yahoo! YouTube
  • februarie 2021
    L Ma Mi J V S D
    1234567
    891011121314
    15161718192021
    22232425262728
    « dec.    
  • Link-uri Sponsorizate

    • laptop second hand

    • Calculatoare Second Hand

    • cod voucher pc garage

  • Home
  • Tehnic
  • HTML/CSS
  • Cateva trucuri si sfaturi pentru CSS
  • Important

    • Bit Sentinel
    • Centrul de Cercetare în Securitate Informatică din România
    • DefCamp
  • Prieteni

    • BetiT.ro
    • bijuterii handmade
    • Computerica | Resurse gratuite PC
    • Descopera.org
    • Gadgeturi si IT – Giz.ro
  • Prieteni

    • PC – Config
    • RO Hacked
    • Stiri IT

Copyright © 2009-2014 WORLDIT. Toate drepturile Rezervate.
Termeni și condiții | Contact | Licența Creative Commons