20 nuttige CSS-tips voor beginners

In de oudheid zijn we afhankelijk van ontwikkelaars en programmeurs om de website bij te werken, ook al is het maar een klein probleem. Dankzij de CSS en zijn flexibiliteit kunnen stijlen onafhankelijk van de codes worden geëxtraheerd. Nu, met enig basiskennis van CSS, kan zelfs een beginneling de stijl van een website gemakkelijk veranderen.

Of je nu geïnteresseerd bent in het oppikken van CSS om je eigen website te maken, of gewoon om de look en feel van je blog te tweaken, het is altijd goed om te beginnen met de fundamenten om een ​​sterkere basis te krijgen. Laten we een paar bekijken CSS Tips waarvan we dachten dat het nuttig zou kunnen zijn voor beginners. Volledige lijst na sprong.

1. Gebruik reset.css

   Als het aankomt op het renderen van CSS-stijlen, hebben browsers zoals Firefox en Internet Explorer verschillende manieren om ze af te handelen. reset.css reset alle fundamentele stijlen, dus u begint met een echte lege nieuwe stylesheets.

   Hier zijn er maar weinig die vaak worden gebruikt reset.css frameworks - Yahoo Reset CSS, Eric Meyer's CSS Reset, Tripoli

2. Gebruik steno-CSS

   Shorthand CSS geeft je een kortere manier om je CSS-codes te schrijven, en het belangrijkste - het maakt de code overzichtelijker en gemakkelijker te begrijpen.

   In plaats van CSS op deze manier te maken

   .header background-color: #fff; achtergrondafbeelding: url (afbeelding.gif); achtergrondherhaling: geen herhaling; achtergrondpositie: linksboven; 

   Het kan in het volgende kort zijn:

   .header background: #fff url (image.gif) no-repeat linksboven

   Meer - Introductie van CSS Shorthand, Handige CSS-verkorte eigenschappen

3. Begrip Klasse en ID kaart

   Deze twee selectors verwarren vaak beginners. In CSS, klasse wordt weergegeven door een punt "." terwijl ID kaart is een hash '#'. In een notendop ID kaart wordt gebruikt op een stijl die uniek is en zichzelf niet herhaalt, klasse aan de andere kant, kan hergebruik zijn.

   Meer - Klasse versus ID | Wanneer gebruik je Class, ID | Klasse en ID samen toepassen

4. Kracht van

5. a.k.een link lijst, is erg handig wanneer ze correct gebruikt worden
   of
   , vooral om een ​​navigatiemenu te stijlen.

   • Vergeten , proberen

     Een van de grootste voordelen van CSS is het gebruik van

     om totale flexibiliteit op het gebied van styling te bereiken.

     zijn in tegenstelling tot

     , waar inhoud wordt 'vergrendeld' binnen een

     zijn cel. Het is veilig om het meest te zeggen lay-outs zijn haalbaar met het gebruik van en juiste styling, nou misschien behalve massale tabellarische inhoud. Meer - Tafels zijn dood, Tafels Vs. CSS, CSS versus tabellen CSS-foutopsporingstools Het is altijd goed om meteen een voorvertoning van de lay-out te krijgen tijdens het aanpassen van de CSS, het helpt om CSS-stijlen beter te begrijpen en debuggen. Hier zijn enkele gratis CSS-foutopsporingstools die u in uw browser kunt installeren: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar en Firebug. Vermijd overbodige selectors Soms kan uw CSS-verklaring eenvoudiger zijn, wat betekent dat als u merkt dat u het volgende codeert: ul li ... ol li ... tabel tr td ... Ze kunnen worden ingekort tot gewoon li ... td ... Uitleg: bestaat alleen in of en en zal alleen binnen zijn dus er is echt niet nodig om ze opnieuw in te voegen. Weten !belangrijk Elke stijl gemarkeerd met !belangrijk wordt ongeacht of er een overschrijvingsregel eronder wordt gebruikt, in gebruik genomen. .pagina achtergrondkleur: blauw! belangrijk; background-color: red; In het bovenstaande voorbeeld, background-color: blue wordt aangepast omdat het is gemarkeerd met !belangrijk, zelfs als er een is background-color: red; onder het. !belangrijk wordt gebruikt in situaties waarin u een stijl wilt forceren zonder dat deze wordt overschreven, maar deze werkt mogelijk niet in Internet Explorer. Vervang tekst door afbeelding Dit is gebruikelijk om te vervangen titel van een op tekst gebaseerde titel naar een afbeelding. Dit is hoe je het doet. h1 text-indent: -9999px; achtergrond: url ("title.jpg") zonder herhaling; width: 100px; hoogte: 50px; Uitleg: text-indent: -9999px; gooit de titel van je tekst van het scherm, vervangen door een afbeelding aangegeven door achtergrond: ... met een vaste breedte en hoogte. CSS-positionering begrijpen Het volgende artikel geeft u een duidelijk begrip van het gebruik van CSS-positionering - positie: … Meer - Leer CSS Positionering in tien stappen CSS @importeren vs Er zijn 2 manieren om een ​​extern CSS-bestand te bellen - respectievelijk met @importeren en . Als u niet zeker weet welke methode u moet gebruiken, volgen hier enkele artikelen om u te helpen beslissen. Meer - Verschil tussen @import en link Formulieren ontwerpen in CSS Webformulieren kunnen eenvoudig worden ontworpen en aangepast met behulp van CSS. Deze volgende artikelen laten u zien hoe: Meer - Tafelloze vorm, Vorm tuin, Nog meer vormbesturingselementen stylen Raak geïnspireerd Als je op zoek bent naar een goed ontworpen CSS-gebaseerde website voor inspiratie, of gewoon wilt bladeren om een ​​goede gebruikersinterface te vinden, hier zijn enkele CSS-showcase-sites die we aanbevelen: CSS Remix CSS schoonheid CSS Elite CSS Mania CSS Leak Houd CSS-codes schoon Als je CSS-codes rommelig zijn, zul je uiteindelijk in verwarring coderen en het moeilijk krijgen om de vorige code te beoordelen. Om te beginnen kun je de juiste inspringing maken en ze op de juiste manier becommentariëren. Meer - 12 Uitgangspunten voor het schoonhouden van uw code, CSS-codes online opmaken Typografie Meting: px vs em Het hebben van problemen bij het kiezen van de meeteenheid px of em? Deze volgende artikelen kunnen u een beter begrip geven van de typografie-eenheden. Compatibiliteitstabel voor CSS-browsers We weten allemaal dat elke browser verschillende manieren heeft om CSS-stijlen weer te geven. Het is goed om een ​​referentie, een diagram of een lijst te hebben met de volledige CSS-compatibiliteit voor elke browser. CSS-ondersteuningstabel: # 1, # 2, # 3, # 4. Ontwerp meerdere kolommen in CSS Heeft u problemen om de linker, middelste en rechterkolom goed uit te lijnen? Hier zijn enkele artikelen die kunnen helpen: Op zoek naar de Heilige Graal Faux Columns Belangrijkste redenen waarom uw CSS-kolommen in de war zijn Litte Boxes (voorbeelden) Indelingen met meerdere kolommen Klim out of the box Absolute kolommen Ontvang een gratis CSS-editors Toegewijde editors zijn altijd beter dan een notitieblok. Hier zijn enkele die we aanbevelen: Meer - Simpele CSS, blocnote ++, Een CSS-stijl-editor Inzicht in mediatypen Er zijn weinig mediatypen als u CSS declareert . print, projectie en scherm zijn enkele van de meest gebruikte typen. Als u ze op de juiste manier begrijpt en gebruikt, kunt u de toegankelijkheid van de gebruiker verbeteren. In het volgende artikel wordt uitgelegd hoe u met CSS-mediatypes omgaat. Meer - CSS en mediatypen, W3 mediatypen, CSS-mediatypen, CSS2 mediatypen 20 handige iPhone-apps voor ontwikkelaars en ontwerpers 20 nuttige SVG-hulpmiddelen voor betere grafische weergave 20 ultralichte en elegante lettertypen voor webontwerpers Volgend artikel 20 Handige Firefox Sidebar-add-ons Vorig artikel 20 handige apps om het meeste uit Instagram te halen