Grunnleggende om innholdsoppsett - kurs RUB 3900. fra Hexlet, trening 18 timer, Dato: 1. desember 2023.
Miscellanea / / December 04, 2023
I dag gir stilark store muligheter for å style tekst og blokker på en side: bakgrunn, farge, bruk av lyd og video. Alle disse elementene lar deg lage fargerike og tilgjengelige nettsteder for brukere. Det ble brukt mye tid på å lære nye velgere, pseudo-klasser og pseudo-elementer. De lar deg stilisere innhold på en ekstraordinær måte.
Tester
Dette er praktiske oppgaver som vi anbefaler å gjennomføre etter endt kurs. Oppgavene vil hjelpe deg med å få ytterligere erfaring med programmering og konsolidere dine ervervede ferdigheter. Vanligvis anbefaler vi å gjennomføre 3-5 tester. Men hvis det ikke går, fortvil ikke. Bare kom tilbake til dem senere.
1. Introduksjon
Arbeid med innhold er en grunnleggende del når man lager et prosjekt. Det er innhold skjult bak vakre animasjoner, blokker og bilder. Brukeren kommer til nettstedet eller åpner en applikasjon for det. I denne leksjonen skal vi kort se på temaene som vil bli studert gjennom kurset.
teori
2. Boksmodell og CSS
Hvilke CSS-egenskaper påvirker størrelsen på elementer når de vises på siden? La oss huske konseptet med boksmodellen og studere hvordan margin, polstring og kantegenskaper fungerer for å sette ekstern/intern polstring og synlige grenser til et element. La oss bli kjent med egenskapen for boksstørrelse, som endrer standardoppførselen til boksmodellen
teori
3. Tekststiler
Å lage en side er først og fremst å jobbe med tekst. Uansett hvor vakkert designet er, hvis informasjonen er vanskelig eller umulig å lese, vil brukeren raskt forlate siden. I denne leksjonen vil vi bli kjent med de grunnleggende egenskapene til tekststiling.
teori
tester
trening
4. Fonter og arbeid med dem
Har du hørt uttrykket "leke med fonter"? Det er på tide å gjøre dette. Vi lærer å koble fonter ved hjelp av CSS, kontrollere tekststørrelse, design og angi linjeavstand. På slutten av leksjonen vil vi studere den generaliserte fontegenskapen, som du kan bruke til å angi 6 forskjellige tekststiler samtidig
teori
tester
trening
5. Lister
Lister er en integrert del av teksten. De lar deg gruppere relaterte fragmenter, forene dem i henhold til deres betydning. I denne leksjonen skal vi utforske de tilgjengelige typene lister i HTML, øve på nestinglister og berøre temaet stylinglistemarkører
teori
tester
trening
6. Kolonner
Å lage et magasinoppsett med flere kolonner var problematisk ved bruk av CSS. Med bruken av CSS3-standarden dukket det opp en ny modul - CSS Multi-column Layout, som gjorde det mulig å lage kolonner med automatisk innholdsoverføring. La oss studere egenskapene til CSS Columns-modulen og begrensningene som er pålagt med denne metoden for tekststiling
teori
tester
trening
7. Enheter
Akkurat som i den virkelige verden, bruker layoutverdenen måleenheter for å indikere elementstørrelser, utfylling, tekststørrelse og så videre. I denne leksjonen vil vi bli kjent med de grunnleggende måleenhetene og deres forhold til elementer på nettstedet. La oss studere begrepet relative og absolutte enheter og identifisere forskjellen mellom em og rem enheter
teori
tester
trening
8. Medieelementer
Besøkende på nettstedet liker ikke bare å lese tekst, men oppfatter også informasjon gjennom medieelementer: bilder, video, lyd. Hvordan legge dem til på riktig måte og ta hensyn til nettleserforskjeller? Hvorfor har bildet på nettstedet et lite innrykk nederst? La oss utforske dette og litt mer i leksjonen.
teori
tester
trening
9. Tabeller
Bord er en layoutdesigners mareritt. Det brukes mange tagger for å lage dem, og små feil kan ødelegge stemningen. I denne leksjonen, trinn for trinn, vil vi studere opprettelsen av enkle og komplekse tabeller, vi vil forstå hvor feil kan oppstå fra og hvordan vi kan forhindre dem. Ved slutten av leksjonen vil du trygt kunne lage tabeller og slutte å være redd for dem.
teori
tester
trening
10. Skjemaer
Skjemaer er et viktig interaktivt element på en nettside. I likhet med lenker gir skjemaer interaksjon mellom brukeren og siden, slik at du kan sende inn data. La oss lære hvordan du lager skjemaer, legger til tekstfelt, utvalgsfelt, lister og knapper. La oss berøre temaet tilgjengelighet av skjemaer for funksjonshemmede
teori
tester
trening
11. Velgere
For denne leksjonen lærte og testet vi enkle velgere som tillot oss å velge elementer etter klasse, identifikator eller tag. Hvordan kan du ellers velge et element på siden? I denne leksjonen vil vi analysere relaterte og nærliggende velgere, lære hvordan du bruker velgere etter attributt
teori
tester
trening
12. Pseudo-klasser
La oss fortsette temaet velgere i CSS og bli kjent med konseptet med en pseudo-klasse. La oss lære hvordan du bruker dem til å velge partalls- eller oddetallselementer, hvordan du legger til nye svevestiler musen på et element og hvorfor selv elementer vil være slik når du bare bruker et bestemt pseudo-klasse. La oss forstå elementtilstander og strukturelle pseudoklasser
teori
tester
trening
13. Pseudo-elementer
Mangler du elementer på siden? Pseudo-elementer kommer til unnsetning - elementer laget ved hjelp av CSS. I denne leksjonen skal vi se på hvordan pseudo-elementer lages, hvorfor de trengs og hvilke funksjoner de har. La oss se hvordan listemarkører styles i CSS
teori
tester
14. Flyte
Overløp er en situasjon der innholdet i en beholder er større enn størrelsen på selve beholderen. Denne situasjonen kan ødelegge layouten selv for en erfaren layoutdesigner. Vi vil lære hva vi skal gjøre med dette og hvordan vi håndterer innholdsskjuling ved å bruke overflow-egenskapen i denne leksjonen. La oss se på tekstoverflyt-egenskapen og lære hvordan du legger til ellipse i tekster hvis det ikke er nok plass til det
teori
tester
trening
15. CSS-variabler
Tenk deg at det på et nettsted er et dusin blokker med bakgrunn i samme farge. Du må endre alle disse fargene. Hvordan du gjør dette uten å hele tiden bytte ut fargen i hver velger og hvordan variabler kan hjelpe vil vi lære i denne leksjonen. La oss se på hvordan variabler lages og brukes, lære om omfang og hvorfor globale variabler er bedre enn per-selektorvariabler
teori
tester
16. Bakgrunn
En layoutdesigner står ofte overfor behovet for å style ikke bare spesifikke elementer, for eksempel tabeller, lister, tekst, medieelementer og skjemaer. Noen ganger må du også stilisere blokkene de er plassert inni. For å gjøre dette kan du sette bakgrunnen for blokken med innhold, og vi vil lære hvordan du gjør dette ved å bruke bakgrunnsegenskapen i denne leksjonen. La oss studere egenskapene for å sette farge, bilde, lære hvordan du plasserer bakgrunnen og angi størrelsen
teori
tester
17. Gradienter
En enkeltfarget bakgrunn eller bilde er ikke den eneste måten å style en blokk på. Kunstnere og designere bruker ofte gradienter for å lage bakgrunner – jevne overganger fra en farge til en annen. I denne opplæringen lærer vi hvordan du lager lineære og radielle gradienter. Ved å bruke gradienter og triks, vil vi studere skapelsen av skarpe overganger mellom farger, og også lære om fargehjulet og hvordan man med dets hjelp finner fargekombinasjoner for gradienter
teori
trening
18. Selvstendig arbeid
Ytterligere oppgaver som lar deg konsolidere den ervervede teorien
19. Ytterligere materialer
Artikler og videoer kuratert av Hexlet-teamet. Vil hjelpe deg å dykke dypere inn i emnet for kurset