Elementen uitlijnen in HTML. CSS-basisprincipes. Uitlijning van lettertypen en spaties

Hallo! We blijven de basis van de HTML-taal beheersen. Laten we eens kijken wat u moet schrijven om de tekst uit te lijnen met het midden, de breedte of de randen.

Laten we, om ter zake te komen, eens kijken hoe u tekst in HTML op drie verschillende manieren kunt centreren. De laatste twee zijn direct gekoppeld aan het stylesheet. Het kan een CSS-bestand zijn dat verbinding maakt met de pagina's van de site en hun uiterlijk definieert.

Methode 1 - direct werken met HTML

Het is eigenlijk heel simpel. Zie voorbeeld hieronder.

Lijn de alinea uit met het midden.

Als u tekstfragmenten op een andere manier wilt verplaatsen, voert u in plaats van de parameter "center" de volgende waarden in:

  • uitvullen – tekst uitlijnen op de breedte van de pagina;
  • rechts – aan de rechterkant;
  • links - naar links.

Naar analogie kunt u de inhoud verplaatsen die zich in de headers (h1, h2) en container (div) bevindt.

Methode 2 en 3 - stijlen gebruiken

Het hierboven gepresenteerde ontwerp kan enigszins worden getransformeerd. Het effect zal hetzelfde zijn. Om dit te doen, moet je de onderstaande code schrijven.

Tekstblok.

In deze vorm wordt de code rechtstreeks in de HTML geschreven om de tekstinhoud te centreren.

Er is een andere alternatieve manier om resultaten te bereiken. U moet een paar stappen uitvoeren.

Stap 1. Schrijf in de hoofdcode

Tekstmateriaal.

Stap 2. Voer in het meegeleverde CSS-bestand de volgende code in:

Rovno (tekst uitlijnen: centreren;)

Ik merk op dat het woord "rovno" slechts de naam is van een klasse die anders kan worden genoemd. Dit wordt overgelaten aan het oordeel van de programmeur.

Naar analogie kunt u in HTML eenvoudig tekst gecentreerd, uitgevuld en uitgelijnd aan de rechter- of linkerrand van de pagina maken. Zoals u kunt zien, zijn er veel meer dan één optie om uw doel te bereiken.

Even een paar vragen:

  • Doet u een non-profit informatieproject?
  • Wilt u dat uw website goed scoort in zoekmachines?
  • Wilt u online inkomsten verdienen?

Als alle antwoorden positief zijn, kijk dan eens naar een geïntegreerde aanpak voor website-ontwikkeling. De informatie zal vooral nuttig zijn als deze op het WordPress CMS draait.

Ik wil erop wijzen dat uw eigen websites slechts een van de vele mogelijkheden zijn om passief of actief inkomen op internet te genereren. Mijn blog is gewijd aan financiële mogelijkheden online.

Heeft u ooit gewerkt op het gebied van verkeersarbitrage, copywriting en andere activiteiten die door samenwerking op afstand primaire of extra inkomsten genereren? Je kunt dit en nog veel meer nu leren op de pagina's van mijn blog.

Ik zal in de toekomst veel echt nuttige informatie publiceren. Blijf in contact. Als u wilt, kunt u zich per e-mail abonneren op Workip-updates. Het abonnementsformulier vindt u hieronder.

Er zijn verschillende manieren om HTML-inspringing vóór tekst in te stellen. Maar voor compatibiliteit en toegankelijkheid tussen browsers bespreken we de meest populaire methoden:

Om vóór tekst of alinea te laten inspringen, is het beter om CSS te gebruiken. Hieronder vindt u voorbeelden van hoe u labels kunt verschuiven met Cascading Style Sheets. Plak elk van de volgende codevoorbeelden tussen HTML-tags .

De volgende code maakt een CSS-klasse "tab" die de tekens en alinea 40 pixels vanaf de linkerrand verplaatst:

Door de bovenstaande code in de sectie te plakken , je kunt het overal uitvoeren door het toe te voegen aan alineatags (

) zoals hieronder weergegeven:

Voorbeeld tabblad

Als u van plan bent deze stijl op meerdere pagina's toe te passen, kunt u beter een .css-bestand maken en dit aan alle webpagina's koppelen. Om HTML te laten inspringen, voegt u de volgende regel toe tussen de tags en maak een link naar het bestand. Wij noemden het " basis.css«:

Zodra het CSS-bestand is gemaakt, opent u het om het te bewerken en voegt u dezelfde code toe, behalve de tag