Hoe css te maken

Een cascading-stijlblad (CSS) is een systeem voor de codering van de website waarmee ontwerpers meerdere functies tegelijk kunnen manipuleren door bepaalde elementen toe te wijzen aan groepen. Door bijvoorbeeld een code te gebruiken voor de website Achtergrond, kunnen ontwerpers de achtergrondkleur of afbeelding op alle pagina`s van de website met één wijziging in het CSS-bestand wijzigen. Hier leest u hoe u CSS voor een basiswebsite kunt maken.

Stappen

Deel 1 van 4:
Inline CSS schrijven
  1. Titel afbeelding Creëer CSS Stap 1
1. Zorg ervoor dat u een basisbegrip van HTML-tags hebt. Je moet weten hoe tags werken en van de SRC en href attributen.
  • Titel afbeelding Maak CSS Stap 2
    2. Leer een deel van de Basic CSS-eigenschappen. Je zult merken dat er heel veel eigenschappen zijn. Het is echter niet nodig om ze allemaal te leren.
  • Sommige goede basis CSS-eigenschappen om te weten zijn kleur en font-familie.
  • Titel afbeelding Maak CSS Stap 3
    3. Meer informatie over waarden voor elke respectieve eigenschap. Alle eigenschappen hebben een waarde nodig. Voor de kleur eigendom, bijvoorbeeld, kunt u de rood waarde.
  • Titel afbeelding Creëer CSS Stap 4
    4. Meer informatie over de stijl HTML-kenmerk. Het wordt gebruikt in een element zoals href of SRC. Om het te gebruiken, plaatst u in de aanhalingstekens na het gelijke teken het CSS-attribuut, een dikke darm en vervolgens de waarde van het pand. Dit staat bekend als een CSS-regel.
  • Titel afbeelding Creëer CSS Stap 5
    5. Begrijp dat inline CSS meestal niet wordt gebruikt voor websites door professionele webontwikkelaars. Inline CSS kan onnodige rommel toevoegen aan een HTML-document. Het is echter een geweldige manier om kennis te maken met hoe CSS werkt.
    • Deel 2 van 4:
    Basic CSS schrijven
    1. Titel afbeelding Creëer CSS Stap 6
    1. Start het programma dat u wilt gebruiken. Hiermee kunt u HTML- en CSS-bestanden maken.
    • Als u geen speciaal programma hebt geïnstalleerd, kunt u notitieblok of een andere teksteditor gebruiken. Sla uw bestand op zowel als een tekstbestand en een CSS-bestand.
  • Titel afbeelding Creëer CSS Stap 7
    2. Open het HTML-bestand voor uw website. U moet dit ook met een HTML-editor openen, als u een hebt geïnstalleerd.
  • Met HTML-editors kunt u op hetzelfde moment HTML en CSS bewerken.
  • Titel afbeelding Creëer CSS Stap 8
    3. Maak een tag binnen uw HTML-kop. Hiermee kunt u CSS schrijven zonder de behoefte aan een apart bestand.
  • Titel afbeelding Creëer CSS Stap 9
    4. Kies een element dat u wilt toevoegen Styling aan en typ de naam van het element gevolgd door een reeks krullende beugels ({ }). Om uw code leesbaarder te maken, plaats altijd de tweede krullende brace op zijn eigen lijn.
  • Titel afbeelding Creëer CSS Stap 10
    5. Typ tussen de beugels uw CSS-regels zoals u de stijl attribuut. Elke regel moet eindig met een puntkomma (-). Om uw code leesbaar te maken, moet elke regel op zijn eigen lijn beginnen en elke regel moet worden ingesprongen.
  • Het is erg belangrijk om op te merken dat deze styling zal beïnvloeden alle elementen van het geselecteerde type op de pagina. Meer specifieke styling wordt bedekt in het volgende gedeelte.
    • Deel 3 van 4:
    Geavanceerde CSS
    1. Titel afbeelding Maak CSS Stap 11
    1. Maak een CSS-bestand, geen HTML-bestand en sla deze op met de .CSS uitbreiding. Open ook uw HTML-bestand.
  • Titel afbeelding Maak CSS Stap 12
    2. Maak een Tag in je HTML-hoofd. Hiermee kunt u een afzonderlijk CSS-bestand koppelen aan uw HTML-document. Uw link-tag heeft drie kenmerken nodig: rel, type, en href.
  • rel middelen "relatie" en vertelt de browser wat de relatie is voor het HTML-document. Hier moet het een waarde hebben van "stylesheet".
  • type vertelt wat voor soort media wordt gekoppeld aan. Hier moet het een waarde hebben van "Tekst / CSS"
  • href Hier wordt op dezelfde manier gebruikt als het wordt gebruikt in een element, maar hier moet het koppelen aan een CSS-bestand. Als het CSS-bestand zich in dezelfde map bevindt als het HTML-bestand, moet alleen de bestandsnaam worden geschreven binnen de aanhalingstekens.
  • Titel afbeelding Maak CSS Stap 13
    3. Selecteer elementen van verschillende typen die u dezelfde styling wilt toevoegen aan. Voeg een ... toe klasse attribuut aan deze elementen en stel ze gelijk aan een klasnaam van uw keuze. Dit geeft je elementen dezelfde styling.
  • Titel afbeelding CSS Step 14
    4. Wijs welke styling een klasse te ontvangen. Typ de klasnaam in uw CSS-bestand met een periode (.) voorafgaand aan het (ik.e. .klasse).
  • Titel afbeelding Creëer CSS Stap 15
    5. Selecteer enkele elementen waarvoor u speciale styling wilt toevoegen en een ID kaart attribuut. ID`s worden gemaakt in CSS met behulp van een pondsymbool (#) in plaats van een periode.
  • ID`s zijn specifieker dan klassen, dus een ID zal elke klassenstyling overschrijven als het een attribuut met een andere waarde heeft dan de klasse.
    • Deel 4 van 4:
    Meer leren
    1. Titel afbeelding CSS Step 16
    1
    Bezoek de W3-scholen. Het is een officiële website gericht op het onderwijzen van webontwikkelingsvaardigheden. De W3 heeft tal van referenties die worden vermeld voor HTML en CSS, evenals andere webtalen.
  • Titel afbeelding Maak CSS Stap 17
    2. Zoek andere sites specifiek gericht op het leren en onderwijzen van HTML en CSS. Sites zoals CSS-trucs.com Specifiek zijn gericht op het onderwijzen van CSS- en Web Design-vaardigheden. Het vinden van gerenommeerde bronnen zal u helpen bij uw leerreis.
  • Titel afbeelding Creëer CSS Stap 18
    3. Neem contact op met webontwerpers en ontwikkelaars. Hun ervaring en knowhow kunnen je waardevolle kennis en vaardigheden leren.
  • Titel afbeelding CSS Step 19
    4. Bekijk de broncode van websites die je tegenkomt. Het bekijken van de CSS van goed ontwikkelde websites kan je manieren laten zien om delen van websites te ontwerpen. Het kopiëren als oefening En het duwen met de code kan je helpen om verschillende CSS-kenmerken te gebruiken.

    • Video

    Door deze service te gebruiken, kan sommige informatie worden gedeeld met YouTube.

    Tips

    Er zijn veel verschillende eigenschappen die je kunt manipuleren met CSS. Zoek een website met een stijl die u leuk vindt en bekijk het bronbestand. Als er een CSS-bestandsnaam is gekoppeld aan de bovenkant in de koptags, kunt u erop klikken om de verschillende eigenschappen en waarden aan de elementen te bekijken.

    Waarschuwingen

    Direct kopiëren HTML- en CSS-codering kan u helpen te leren, maar u moet uw eigen ontwerpideeën gebruiken. Het ontwerp van iemand anders is diefstal en plagiaat.
    Deel in het sociale netwerk:
    Vergelijkbaar