Crib: hvordan man indsætter CSS tekst

Web-ressourcen anslås af brugere i henhold til dens eksterne tiltrækningskraft. Derfor kan selv en informativt brugbar tekst ikke læses på grund af at den er dårligt designet. Konklusion - du skal omhyggeligt og forsigtigt henvende dig ikke kun til det semantiske indhold på siderne på hjemmesiden, men også til dets visuelle repræsentation. Fremkomsten af CSS teknologi har udvidet mulighederne for at skabe attraktive artikler. En af de egenskaber, der er beregnet til at lette opfattelsen af, hvad der er skrevet, er CSS-tekstindrykket.

Margener og indsnit: Hvad er forskellen?

Før du begynder at formatere teksten, skal du forstå, hvilke felter og streger der er. På trods af at disse markeringselementer ser ens ud til brugeren i en række tilfælde, er der grundlæggende forskelle mellem dem:

• Feltet er indstillet af polstringsegenskaben , marginen er margin ;
• Feltet er bestemt af afstanden mellem indholdet og grænsen af blokken, indrykning - mellem grænserne for naboblokke;
• Felter kan begge tages i betragtning i elementets dimensioner (bredde og højde), og ikke.

Marginalegenskaben

Så, for at angive den vandrette eller lodrette forskydning af CSS-teksten, brug marginkonstruktionen . Denne egenskab anvendes på

-tagget i referencematerialet i dokumentet. I det enkleste tilfælde er det skrevet som:

Margin: 12px.

En sådan linje betyder, at en indrykning på 12 pixels vil blive lavet fra alle sider omkring tekstblokken (eller en hvilken som helst anden blok). For at øge hullet, for eksempel tre gange, er det nok at skrive ned:

Margin: 36px.

Men hvad nu hvis intervallet mellem blokke skal være anderledes på hver side? Udviklere af websider bruger flere former for optagelse:

1. Margin: 11px 22px.
2. Margin: 11px 22px 33px.
3. Margin: 11px 22px 33px 44px.

I det første eksempel indrykkes indsnittene af blokernes nedre og øvre grænser med 11 pixel på siderne af blokken - med 22 pixel. I henhold til den anden form for optagelse er mellem blokets øverste kant og indholdet 11 pixels, mellem bunden - 33 pixels på siderne - 22 pixels. I tredje tilfælde vil indsnittet i CSS-teksten være 11 pixels på toppen, 22 pixels til højre, 33 pixels fra bunden og 44 pixels til venstre.

Det er også muligt at registrere afstanden til kanten af blokken fra kun den ene side: margen-top, margen-bunden, margen-venstre, margen-højre . Oversætter navnene på ejendomme til russisk, det er nemt at gætte deres formål. For eksempel indikerer følgende indtastning, at den højre margen vil være 22 pixels:

Margen-højre: 22º.

For andre parter antages afstande omkring blokken at svare til værdien af moderelementet.

Egenskaben for margen har en funktion, som udvikleren skal huske, når CSS-tekstindrykket anvendes vertikalt. Intervaller af naboelementer er ikke stablet, men overlejret på hinanden. For eksempel, lad en af blokkene have en margin-bund: 15px , og margin-top- blokken ved siden af den : 35px . Skolearitmetik og sund fornuft tyder på, at den samlede afstand mellem dem vil være 50 pixels. I praksis er det ikke sådan. En blok med en stor margen vil "absorbere" sin nabo. Som et resultat vil intervallet mellem elementerne være 35 pixel.

"Rød" linje

Udfærdigelse af dokumentet i en teksteditor foretrækker brugere at indstille hvert nyt afsnit ved hjælp af den "røde" linje. Ved hjælp af CSS er tekstindrykket til venstre let at gøre - tekstindrykkekonstruktionen bruges. Det er skrevet som følger:

Tekstindtryk: 11px.

Det vil sige, den første linje i stykket vil blive flyttet i forhold til venstre kant med 11 pixels. For at gøre teksten på websiden mere som et dokument i editoren, skal du desuden indstille justeringen til bredden, det vil sige skrive:

Tekstindtryk: 11px;

Tekst-align: retfærdiggør.

Ud over pixels, når man beskriver markeringen, er det tilladt at bruge andre enheder - tommer, point, procent. Lad blokken have en CSS tekstmargin på 10%. Med en blokbredde på 500 pixels vil den røde linje være 50 pixels (10% af 500).

Der kan indstilles en arveværdi for denne ejendom. En sådan rekord siger, at blokken bruger en lignende egenskab af moderblokken.

Tekstindtryk: arve.

Overraskende kan stykkeindrykket også tage negative værdier! I dette tilfælde dannes såkaldte fremskrivninger, dvs. hovedteksten forbliver på plads, og den første linje forskydes til venstre med 22 pixels:

Tekstindtryk: -22px.

For at sikre, at bogstaverne ikke krydser browserens venstre kant ud over tekstindrykket, skal du bruge konstruktionen til at indstille feltet:

Padding-left: 22px.

Nyttige anbefalinger

De vigtigste CSS-egenskaber til tekstformatering overvejes. Og for at konsolidere dem vil hjælpe med at øve. Her er et par endelige tips om, hvordan man anvender det materiale, man lærte ved udvikling af hjemmesider:

• Den røde linje og indrykning af teksten er forskellige begreber, og forskellige egenskaber bruges til at angive dem;
• For lodrette indryk fungerer ikke matematikens regler - intervallerne er overlejret, elementet med en større værdi "vinder";
• En negativ afsnit indrykning bruges til at angive den første linje i stykket ved hjælp af billedet.