Wat zijn externe en interne stylesheets? Definitie van kleuren. CSS-lessen. Structurele pseudo-klasse selector

Tafel CSS-stijlen Als we de definitie zelf nemen, is het een taal om het uiterlijk van een document te beschrijven. Dat wil zeggen, HTML is verantwoordelijk voor de structuur van de pagina en CSS-stijlbladen zijn verantwoordelijk voor het gehele ontwerp. Ik heb hier informatie verzameld waarmee u het stijlblad vrijelijk kunt gebruiken. Ik zal niet schrijven over hoe noodzakelijk het is om het te weten, omdat het al duidelijk is - zonder dit kun je de site niet min of meer naar een hoger niveau tillen normaal uiterlijk. Als iemand net CSS-stijlen begint te leren, zijn deze materialen voldoende om CSS te leren.

1. Basiszaken

Ik zal beginnen met de basis. Toen ik deze site begon, schreef ik kleine tutorials over het leren van CSS-stijlbladen. De lessen zijn zeer geschikt voor zowel degenen die net beginnen als voor degenen die al iets weten om hun kennis op te frissen. Alles wordt daar gepresenteerd in foto's en echte voorbeelden.

Een kleine uitweiding: Toen ik het onderwerp website bouwen begon te bestuderen, leerde ik bijna alles HTML-tags en ze inspireerden me niet veel. Maar nadat ik het CSS-stijlblad begon te bestuderen en elk van de eigenschappen probeerde toe te passen, vond ik het zo leuk (ik zou het niet hebben gemaakt als ik het niet leuk vond). Ik zag dat je er geweldige dingen mee kunt doen met behulp van CSS. Dit is geen programmeertaal die maanden duurt om te leren. Het stylesheet kan in één (maximaal twee) weken onder de knie worden.

Natuurlijk bestudeer je niet absoluut alle eigenschappen en hun betekenis, en dat is ook niet nodig! U hoeft alleen de basis te kennen, zodat u het in uw projecten kunt gaan toepassen en gebruiken. Een belangrijke nuance is dat u de eigenschap die u zojuist hebt geleerd, ONMIDDELLIJK moet toepassen echt voorbeeld. Laat het uw eigen website zijn of eenvoudige HTML website - geen verschil. Het belangrijkste is dat je het zelf probeert te schrijven en het resultaat ziet.

Ik heb veel voorbeelden op mijn site die CSS gebruiken. Samen bevatten ze ruim 100 lessen! Als je tenminste de basis kent, kun je alle voorbeelden uit de lessen veilig veranderen en toepassen.

Mijn lessen over de basis trapsgewijze stijlen CSS

2. CSS- en CSS3-spiekbriefjes

Nou, je hebt de basis geleerd en na een paar dagen ben je alles vergeten met "succes" en waarschijnlijk denk je dat dit niet jouw ding is en dat alles ingewikkeld is. Ik wil je een beetje opvrolijken - ik ken zelf niet iedereen CSS-eigenschappen. Maar wat houdt mij tegen om ze op internet te bekijken?

Toegegeven, voorlopig ga je naar Yandex of Google, dan typ je het verzoek dat je nodig hebt. En als de zoektocht je nog steeds niet geeft wat je nodig hebt. Je kunt op deze manier veel tijd doorbrengen en toch niet vinden wat je echt zocht.

Gelukkig, goede mensen Ze hebben zeer nuttige spiekbriefjes samengesteld die me meer dan eens hebben geholpen. Het is voldoende om erachter te komen waar alles is en dan is het vinden van de benodigde eigenschappen niet moeilijk.

CSS- en CSS3-spiekbriefjes

Dit zijn simpelweg onvervangbare materialen bij het ontwerpen en ontwikkelen van een website. De tijd die nodig is om afgeleid te worden en op internet naar beschrijvingen van eigendommen te zoeken, wordt vele malen korter.

Het is waar dat, zoals u begrijpt, hoe meer u websites bouwt of ontwerpt, hoe minder u naar deze tooltip hoeft te kijken, aangezien alle noodzakelijke eigenschappen altijd in het geheugen blijven. Maar toch is het niet overbodig om deze set spiekbriefjes bij de hand te hebben.

Het is net als op school: zelfs als je geen spiekbriefje gebruikt, is je ziel er op de een of andere manier toch rustiger mee 😆.

Waar zijn stijlbladen voor?

U hebt eerdere pagina's gemaakt omdat deze zijn gemaakt vóór de komst van trapsgewijze stijlbladen of CSS (Cascading Style Sheets).

De belangrijkste problemen waarmee website-ontwikkelaars vóór de komst van CSS werden geconfronteerd:

Positioneringsprobleem (pagina-indeling). Hoewel hiervoor tabellen werden gebruikt (ze waren hier oorspronkelijk niet voor bedoeld), losten ze niet alle problemen op. Het is niet mogelijk om het volgende te doen:
- Kan niet worden ingesteld vaste maten een of ander blok. Bijvoorbeeld, tekstblok zal zich verspreiden als het overloopt (zelfs als het in de tafel staat).
- U kunt geen vaste coördinaten instellen voor de blokpositie op de pagina.
- Je kunt niet het ene blok op het andere plaatsen. Probeer bijvoorbeeld een afbeelding op een tafel of een andere afbeelding te plaatsen.

Het tweede probleem was dat ik elke keer de lettergrootte en -kleur, de eigenschappen van tabelcellen, enz. Op de pagina's moest instellen. Hierdoor werd de pagina aanzienlijk groter, waardoor deze langzamer laadde. Als u de kleur of lettergrootte wilt wijzigen, moet u alle pagina's bewerken.

Het derde probleem was dat alle browsers dit hebben individuele instellingen. Een browser kan bijvoorbeeld het lettertype vergroten, waardoor de hele pagina vervormd raakt.

Met behulp van CSS kunnen deze problemen worden opgelost.

Manieren om CSS te gebruiken

Er zijn drie manieren om stijlbladen te gebruiken:

Interne stijlbladen(Inline Style Sheets) - met behulp van een speciaal attribuut worden ze rechtstreeks in HTML-tags geplaatst.
Voorbeeld-HTML:

Voorbeeld-CSS:

Zoals u kunt zien, bleek de Inline Style Sheet-code meer te zijn dan alleen HTML. Daarom mag ISS alleen worden gebruikt als dit moet worden gespecificeerd specifiek onderdeel uw eigen individuele stijl.
Met behulp van het extra stijlkenmerk kunnen we de stijlparameters definiëren die we in elke tag nodig hebben. Dit is het meeste makkelijke manier, en het werkt binnen slechts één tag. Maar stel je eens voor hoeveel de bestandsgrootte zal groeien, en hoe lastig het zal zijn om dit te repareren als we de stijl voor elke tag specificeren.

Globale stijlbladen(Global Style Sheets) - definieer de stijl van elementen in het hele document.
Hiervoor wordt de tag gebruikt …

Gerelateerde stijlen

Het handigst, want met hun hulp kun je je eenvoudig registreren uniforme stijl de hele site. Een gekoppelde stijl betekent dat alle CSS-stijlen in een apart bestand staan ​​met de extensie .css.

Deze aanpak is ook handig omdat het pagina-ontwerpregels scheidt van hun inhoud, CSS-code gemakkelijk kan worden gewijzigd zonder HTML-bestanden te verstoren, en het principe van codescheiding erg belangrijk is, vooral bij grote projecten.

Gebruik de tag om regels uit een CSS-bestand aan een HTML-pagina te koppelen toegevoegd aan de container , en zijn attributen.

Hier is de regel die de regels uit het bestand met elkaar verbindt mijnstijl.css met HTML-pagina:

rel="stylesheet" specificeert dat de tag verwijst naar een stylesheetbestand, href="mijnstijl.css" stelt zijn adres in. De adresseringsregels zijn hetzelfde als reguliere koppelingen– het pad kan absoluut, relatief, enz. zijn.

Geïmporteerde stijlen

Met behulp van de opdracht @importeren u kunt stijlen uit een CSS-bestand aan de huidige tabel toevoegen. Dit kan bijvoorbeeld nodig zijn als u het gespecificeerde individuele documentontwerp wilt aanvullen met behulp van globale stijlen, universele regels van apart bestand. De methode kan niet worden gebruikt met inlinestijlen.

De onderstaande code importeert een bestandstabel in het document elke.css, die zich in de map met het bewerkte HTML-document bevindt:

@import-URL (elke.css);

Het commando wordt geschreven in de regel onder de openingstag

Waar zijn stijlbladen voor?

Cascading stylesheets of CSS (van het Engelse Cascading Style Sheets) zijn een gevolg verdere ontwikkeling HTML en geef ons de mogelijkheid om naar het volgende niveau van informatiepresentatie te gaan. Met stijlbladen kunt u de semantische inhoud van een pagina scheiden van het ontwerp ervan.

Zoals we ons herinneren, boden de eerste versies van de HTML-standaard geen enkele manier om de weergave van informatie te controleren. Het algemene concept van hypertekst was bedoeld om informatie toegankelijk te maken voor elk apparaat dat tekst kon reproduceren. Voor opmaak werd aanbevolen om alleen logische tags te gebruiken die koppen, subkoppen, lijsten, paragrafen, citaten, enz. definiëren. - dat wil zeggen de elementen waaruit de structuur van het document bestaat. De interpretatie van het optreden bleef volledig op het geweten van de terminalterminal.

Sindsdien is er echter veel veranderd, en HTML-standaard verloor zijn oorspronkelijke slankheid. Al vroeg voegde Netscape "verbeterde tags" toe die een grotere controle mogelijk maakten over de weergave van de gepresenteerde informatie. De innovatie sloeg aan en alle Netscape-extensies werden de facto een standaard. Toen deed Microsoft hetzelfde. Toen ze het beseften, was HTML een vreselijke mix van logische en ontwerptags, incompatibele extensies, en kwam het volledig niet meer overeen met het oorspronkelijke concept: informatie presenteren op elk apparaat, ongeacht de kenmerken van de informatie-uitvoer.

Vervolgens werd op grote schaal gestandaardiseerd. Als gevolg hiervan werd de HTML 3.2-standaard geboren. Hij was niet revolutionair, maar zette alleen alle innovaties op zijn plaats en ontwikkelde deze algemene aanbevelingen voor browserfabrikanten. Revolutionaire veranderingen werden geïntroduceerd in een nieuwe standaard: HTML 4.0 of, zoals het genoemd werd, Dynamic HTML. Lagen, stijlbladen en universeel objectmodel browser.

De nieuwe standaard probeerde terug te keren naar de oorsprong van het HTML-concept. De vierde versie raadt, net als de eerste, aan om pagina's zo te maken dat ze op elk apparaat kunnen worden afgespeeld - of het nu een 21-inch monitor is of een klein apparaat zwart-wit scherm mobiele telefoon.

Hoe werd het probleem van het presenteren van de schijn van informatie opgelost? Dit is waar de revolutionaire aanpak ligt. Het wordt aanbevolen om het hele ontwerp in een extern stijlbestand te plaatsen. De hoofdpagina bevat alleen informatie en links naar de benodigde stijlen.

Wanneer de pagina wordt weergegeven specifiek apparaat er moet een geschikt stylesheet worden gebruikt. Voor een mobiele telefoon en een computermonitor moeten ze natuurlijk verschillend zijn. In het eerste geval gebruiken we een minimaal ontwerp, waardoor we informatie op de meest optimale en compacte manier kunnen presenteren. In het tweede geval hebben we de beschikking over alle rijkdom aan lettertype- en kleurontwerp.

Het stijlblad hoeft slechts één keer te worden geschreven bij het maken van een site voor elk apparaat waarop informatie moet worden weergegeven. Bovendien kan het stylesheet voor de hele site hetzelfde zijn. En daarom is het niet nodig om op elke pagina dezelfde stijlbeschrijvingen te herhalen.

Door alle stijlinformatie in één extern bestand te plaatsen, worden andere geopend handige functies- door de inhoud van slechts één (!) stijlbestand te wijzigen, kunnen we immers het hele ontwerp van de site in enkele seconden veranderen. Bovendien zijn er geen verdere wijzigingen nodig. Dit is natuurlijk alleen waar als de site oorspronkelijk correct is ontworpen.

Nu we de theorie een beetje hebben begrepen, gaan we verder met de praktijk, en beginnen we met de kwestie van het koppelen van een stylesheet aan een HTML-bestand.

Verbindende stylesheets
Om deze taak te volbrengen, kunnen we een van de drie voorgestelde methoden gebruiken:

extern bestand

beschrijving in het kopgedeelte

inline-beschrijving

Laten we beginnen met de eenvoudigste, met de zogenaamde inline beschrijving of beschrijving ingebouwd in een tag:

Deze tekst wordt overschreven door de stijl

Met behulp van het extra stijlkenmerk kunnen we de stijlparameters definiëren die we in elke tag nodig hebben. Dit is de gemakkelijkste manier en werkt binnen slechts één tag. Maar stel je eens voor hoeveel de bestandsgrootte zal groeien, en hoe lastig het zal zijn om dit te repareren als we de stijl voor elke tag specificeren. Deze werkwijze verschilt niet veel van bijvoorbeeld het direct beschrijven van de uitstraling met behulp van de tag.

Het is veel handiger om vooraf alle benodigde ontwerpstijlen te definiëren en deze vervolgens eenvoudig op de juiste tags toe te passen. Dit is de tweede manier: de beschrijving in het titelgedeelte. Het effect strekt zich uit tot de hele pagina. Stijlen worden gedefinieerd met behulp van klassen, dit zijn lijsten met de definitie van alle noodzakelijke ontwerpparameters.

Wanneer u deze methode gebruikt, moet de stijlbeschrijving in het kopgedeelte worden geplaatst:


....



Nu kunnen deze stijlen overal in de html-code worden toegepast. Hiervoor wordt de volgende constructie gebruikt:

Deze tekst is geschreven in kopstijl

Deze tekst is in rood geschreven

Zoals je kunt zien, is alles niet zo ingewikkeld. Het belangrijkste is om de basisprincipes te begrijpen. Naast het definiëren van nieuwe klassen, hebben we ook de mogelijkheid om standaardtags te overschrijven. Labelen bijvoorbeeld

Nu ziet alle tekst tussen tags eruit zoals gedefinieerd door deze stijl. Dit is erg handig en u kunt bestaande pagina's eenvoudig aanpassen aan het gebruik van stijlen. Bovendien verkleint dit de grootte van het bestand enigszins vanwege de afwezigheid van onnodige klassenattributen.

En ten slotte is de derde manier om de beschrijving van stijlen naar een extern bestand over te brengen. De invloed ervan strekt zich uit tot alle bestanden waarin de beschrijving is opgenomen. Deze methode komt het meest overeen met het concept van HTML 4.0. Voor het geval we moeten veranderen verschijning site, dan is het voldoende om alleen dit ene bestand te corrigeren. Vergelijk het met eerdere methoden. In de ene zul je de beschrijving op elke pagina moeten veranderen, en in de andere nog meer - naast elke tag, wat natuurlijk volkomen ongeïnspireerd is.

Hoe wordt een extern bestand ingesloten? Eerst wordt een stijlbestand gemaakt met een beschrijving van alle klassen die we nodig hebben (mystyle.css):

Koptekst (tekst uitgelijnd: gecentreerd; lettergrootte: 27pt;)
.rood ( kleur: rood; )
p (tekst uitlijnen: gecentreerd; lettergrootte: 12pt;)


....

....


Dit is de handigste methode en het wordt aanbevolen om deze voor het hoofdstijlblad te gebruiken.

Waarom zei ik "belangrijkste"? Feit is dat je in de praktijk alle drie de methoden moet gebruiken, en dit is waar de “cascading” van stijlen een rol speelt. Maar hier zullen we het de volgende keer over hebben.

Laten we het gesprek over het gebruik van stijlbladen voortzetten. Laten we eerst de trapsgewijze stijlen behandelen, en dan verdergaan met een bespreking van de syntaxis en een overzicht van de meest voorkomende parameters die worden gebruikt bij het maken van stijlen.

Trapsgewijze stijlen
Laten we dus eerst eens kijken waarom stijlen cascadering worden genoemd. Laat mij, beste lezer, u nogmaals manieren geven om stijlen op een pagina te implementeren:

door een apart stijlbestand te gebruiken en dit in te voegen met behulp van een tag

stijlbeschrijving in de documentkop

Een stijl toepassen als parameter in een tag.

Cascading betekent dat stijlen kunnen worden overschreven. De bovenstaande lijst met manieren om stijlen te implementeren volgt de volgorde van overschrijven. Een stroomafwaartse methode kan een hogere methode overschrijven.

We hebben bijvoorbeeld in het externe stijlbestand gedefinieerd dat de tekst in de tag

moet geschreven zijn in een 10-punts lettertype. Maar als we in de paginatitel bovendien aangeven dat dezelfde tekst in de tag staat

moet worden geschreven in een 12-punts lettertype, dan wordt de tekst in precies dat formaat weergegeven, d.w.z. de stijl in de paginakoptekst overschrijft de stijl in het externe bestand.

Waar is het voor? O, dit is heel nuttig ding. En nu zal ik dit laten zien met een specifiek voorbeeld. Laten we aannemen dat de volgende stijl is gedefinieerd voor alle links in de koptekst op onze pagina:




En daarom wordt elke tekst die een hyperlink is, automatisch rood en niet langer onderstreept. En dus besloten we om het copyright aan het einde van de pagina aan te geven, maar het niet erg opvallend te maken, om er niet de aandacht op te vestigen. Maar toch willen we dat het auteursrecht ook een link is. We moeten dit op slechts één plek op de pagina doen en het definiëren van een extra klasse hiervoor is onpraktisch. In dit geval wij hulp zal komen trapsgewijze stijlen. Het is voldoende om de linkkleur lokaal te overschrijven:

Auteursrecht (C)
1998-2001 Kersenontwerp

We hebben dit gedaan met behulp van de parameter style, en zoals u zich herinnert, werkt deze alleen binnen de tag waarin deze is gedefinieerd. Dat is precies wat we nodig hebben.

Dat heb je waarschijnlijk gemerkt in het bovenstaande voorbeeld dat ik introduceerde nieuw etiket. Het is speciaal voor dergelijke gevallen ontworpen. Het enige wat het doet is een gebied definiëren waarop we de stijl kunnen toepassen. Dit is een erg handig label, want... voegt geen onnodige opvulling voor of na zichzelf in (dat wil zeggen lege verticale ruimte), zoals een tag dat doet

In welke tags is het beter om stijlen te definiëren met behulp van een klasse? Meestal wordt hiervoor een van de volgende ontwerpen gebruikt:

Iets



Iets

Iets

Label

vergelijkbaar , maar alleen met het verschil dat het een beat voor en na zichzelf doet (precies hetzelfde als
). Maar de tekststijl die wordt gebruikt om de hoofdinhoud van de pagina te typen, kan het beste worden gedaan door de tag opnieuw te definiëren
En niet door een aparte klasse te definiëren.
En een kleine toevoeging met betrekking tot de correcte weergave in beide browsers - als je die gebruikt tafelindeling voor website-ontwerp moet u de stijl van de hoofdtekst bepalen, niet alleen in de tag
, omdat Netscape weigert absoluut stijlen over te nemen die vóór de tabel zijn toegewezen.
Laten we, nu we de cascadering hebben behandeld, het hebben over de syntaxis.
CSS-syntaxis
De beschrijving van elke klasse wordt gedaan met behulp van een constructie als deze:
Klein (lettergrootte: 9pt; )
Eerst wordt de naam van de klasse aangegeven - deze kan willekeurig zijn, maar het is raadzaam om toch een betekenisvolle naam te geven. Vervolgens worden alle benodigde parameters voor deze klasse tussen accolades () weergegeven. Parameters worden van elkaar gescheiden door puntkomma's. Hier is nog een voorbeeld dat een langere beschrijving gebruikt:
Klein (lettergrootte: 9pt; kleur: #eeeee; tekstuitlijning: gecentreerd; )
Merk op dat ik in beide constructies de klassenaam begon met een punt en zo een generieke klasse definieerde, d.w.z. één die op elke tag kan worden toegepast. En dit wordt gedaan met behulp van de volgende constructie:


Aangezien er universele klassen zijn, zijn er misschien nog andere? Dat klopt, er zijn ook zogenaamde tag-klassen:
p.klein (lettergrootte: 9pt; )
Een klasse die op deze manier is gedefinieerd, werkt alleen op de tag waarvoor deze is bedoeld, en wordt voor alle andere genegeerd:
Deze tekst wordt in kleine stijl weergegeven


We kunnen parameters niet alleen voor één tag definiëren, maar ook voor meerdere tegelijk. Om dit te doen, volstaat het om ze in de stijldefinitie op te sommen, gescheiden door komma's:
p, td (lettergrootte: 9pt; kleur:groen;)
Deze techniek wordt groeperen genoemd, en in in dit geval we hebben ook gedefinieerd voor
zelfde maat en tekstkleur.
In het geval van het overschrijven van bestaande tags kunnen niet alle parameters in de stijlbeschrijving worden gespecificeerd, maar alleen de parameters die we willen wijzigen. Alle andere parameters krijgen standaardwaarden, die voor verschillende tags verschillend zijn.
Pseudo-klassen
In CSS bestaat er zoiets als een pseudo-klasse. In tegenstelling tot een gewone klasse is het effect van een pseudo-klasse niet van toepassing op de gehele tekst waarop deze stijl wordt toegepast, maar slechts op een deel ervan en is dit alleen mogelijk in een bepaalde staat. Laten we, om het duidelijker te maken, eens kijken naar het effect waarbij links alleen worden onderstreept als u er met de muis overheen beweegt. Het effect komt vrij vaak voor en kan ook op deze site worden waargenomen. Hier is een fragment van een stylesheet waarmee u het hierboven beschreven effect kunt bereiken:
a (tekstversiering: geen; )
a:hover ( tekstversiering: onderstrepen; )
De bovenste regel is een vervanging van de standaardtag , wat verbiedt dat links worden onderstreept, maar de onderste is een stijldefinitie voor de hover pseudo-klasse, die de stijl van een link beschrijft wanneer de cursor erboven staat.
En hier is nog een voorbeeld van een pseudo-klasse die een sierhoofdletter definieert aan het begin van een alinea:
p:eerste letter ( lettergrootte: 200%; lettergrootte: vet; )
Houd er rekening mee dat in beide gevallen de stijl van invloed is op een specifieke status (de gebruiker staat op het punt op een link te klikken) of op een stuk tekst (alleen de eerste letter van de alinea verandert). Dit is de betekenis van pseudo-klassen.