CSS verbinden. Wat is CSS, een CSS-bestand verbinden

Er zijn verschillende manieren om CSS-tabellen aan een HTML-document te koppelen.

Ingebouwde stijlen

U kunt CSS-stijlen rechtstreeks in HTML-opmaak instellen door een CSS-regel aan de gewenste tag toe te voegen met behulp van het stijlkenmerk.

Rode tekstkleur

CSS-stijlen zijn geregistreerd bij de tag met behulp van stijl attribuut. Op deze manier kunnen we CSS-stijlen toepassen op elke tag op een HTML-pagina. In dit voorbeeld hebben we gebruikt CSS-kleureigenschap voor een paragraaf, waarbij de betekenis ervan wordt vastgelegd kleur: rood. We kunnen meerdere CSS-eigenschappen tegelijk instellen; vergeet niet elk eigenschap-waardepaar te scheiden met een symbool ";" .

Minus deze benadering is dat deze eigenschap zal zijn alleen toegepast op een specifieke p-tag, zullen andere paragrafen deze eigenschap niet zien, wat een overeenkomstig groot minpunt is. Bovendien is zo'n pagina eenvoudig onmogelijk te handhaven. Het wijzigen van ingebouwde CSS-eigenschappen moet voor elke nieuwe pagina worden herhaald.

Derde minpunt deze aanpak is traag laadsnelheid van pagina En rommelige HTML-opmaak. We kunnen geen CSS-eigenschapsgegevens in de cache opslaan, d.w.z. Elke keer dat de pagina wordt geladen, zal de browser de eigenschappen opnieuw berekenen.

Plus deze aanpak ben jij het is niet nodig om CSS te maken bestand, en u kunt snel wijzigingen aanbrengen in de foutopsporingsmodus en de resultaten ervan bekijken.

Interne stijlbladen

De tweede manier om CSS-stijlen met elkaar te verbinden is door CSS-stijlen via een tag aan de pagina toe te voegen

Als u nu CSS-kiezers kunt gebruiken om een ​​groep tags op een pagina te selecteren, maar het probleem bij het maken van nieuwe pagina's, blijft deze methode ook hier onopgelost. Bovendien kunt u nog steeds geen CSS-stijlen in de cache opslaan.

Externe stylesheets verbinden

De handigste manier om met CSS-tabellen te werken is door externe stijlbladen te gebruiken. Ze worden extern genoemd omdat de CSS-code afzonderlijk van de HTML-opmaak wordt geplaatst en door middel van een lijn met de pagina wordt verbonden

Waar binnen href-kenmerk moet worden gespecificeerd pad naar CSS-bestand ( Een bestand dat al onze CSS-stijlen bevat, de bestandsextensie moet .css zijn).

We kunnen dus op elke nieuwe pagina een verbindingsreeks aan dit bestand toevoegen. En alle stijlen die op de eerste HTML-pagina werkten, zullen ook op de volgende worden toegepast.

Omdat we nu CSS in een apart bestand hebben, downloadt de browser het de eerste keer dat het wordt geopend en in de toekomst, als het bestand niet is gewijzigd, gebruikt het het verder (het bestand komt terecht in de browsercache), daarom , zal de pagina veel sneller laden, en als u tegelijkertijd de minimalisatie van CSS- en js-bestanden gebruikt, zal het laden vele malen sneller gebeuren.

Ook kunnen wij CSS-code in verschillende bestanden plaatsen. Voor tekstontwerp bijvoorbeeld het bestand fonts.css en voor al het andere stijlen.css. En verbind ze met de HTML-pagina, want... U kunt meerdere CSS-bestanden tegelijk aan één HTML-pagina koppelen.

Met behulp van de @import-richtlijn

Naast het rechtstreeks verbinden met de pagina met behulp van de tag link, is het mogelijk om stijlen binnen een CSS-bestand te verbinden met behulp van een richtlijn @importeren.

Zoals hierboven vermeld, kunt u meerdere CSS-bestanden tegelijk verbinden binnen één HTML-bestand met behulp van de linkregel. Maar dat is niet alles.

Indien nodig (als u een groot project heeft met veel CSS-bestanden), kunt u alle CSS-bestanden in één gemeenschappelijk CSS-bestand importeren en aan het document koppelen, waarna alle andere CSS daarin wordt geïmporteerd.

Voor CSS-bestanden importeren touwtje wordt gebruikt

@import-URL("stijl.css");

Waar tussen de haakjes het pad naar het geïmporteerde CSS-bestand staat.

Hallo lieve lezers van de blogsite. Na een blok artikelen gewijd aan HTML, besloot ik je kennis te laten maken met CSS, aangezien opmaaktools niet voldoende zijn om documenten te ontwerpen. Over het algemeen is het leren van HTML slechts de eerste fase in het leren maken van websites; de volgende stap is het leren van CSS. Dus laten we het uitzoeken wat is CSS en waarom zijn ze nodig?.

Als je naar pagina's met pure HTML kijkt, zien ze er onaantrekkelijk uit. Monotone tekst, tabellen zonder kaders, sombere zwart-witte kleuren... Natuurlijk kun je webpagina's helderder maken met HTML, maar deze aanpak maakt de broncode alleen maar rommelig en biedt geen enkele flexibiliteit. Daarom is in de moderne lay-out de persoon die verantwoordelijk is voor het externe ontwerp van websitepagina's CSS-stijltaal of gewoon een stijlblad.

Trapsgewijze stijlbladen(dit is de afkorting CSS - Cascading Style Sheets) zijn een reeks parameters (stijlen) die het ontwerp van de webpagina zelf en de afzonderlijke elementen ervan beschrijven. Deze instellingen bepalen de pagina-achtergrond, tekstkleur, alinea-uitlijning, tabelrandopties en meer.

Met behulp van de HTML-taal vorm je dus de structuur van webpagina's, je stelt bijvoorbeeld . En met behulp van CSS-regels geef je aan hoe deze elementen van een HTML-document in de browser worden weergegeven. Dat wil zeggen dat u het lettertype en de kleur, de tekstuitlijning, de achtergrondkleur van de elementen, verschillende inspringingen, enz. Instelt. Bovendien kan één CSS-regel de visuele presentatie van meerdere elementen van een webpagina tegelijk beïnvloeden.

Daarom zult u hoogstwaarschijnlijk minimale kennis nodig hebben van de mogelijkheden van trapsgewijze stijlbladen, zowel bij het maken van een geheel nieuwe website als bij het aanbrengen van wijzigingen in een bestaand project. Allereerst zal deze kennis nodig zijn bij het werken aan websiteontwerp.

Stijlen toevoegen of CSS aan een HTML-document koppelen

Voordat u over de syntaxis of eigenschappen van trapsgewijze stijlbladen gaat praten, moet u leren hoe u ze aan een HTML-document kunt koppelen. Er zijn drie manieren om CSS aan HTML te koppelen.

1. De eerste methode is om stijlen in een apart bestand of meerdere bestanden met de .css-extensie te plaatsen. Gebruik in dit geval om CSS-stijlen te verbinden link, dat het pad naar het externe stijlbestand bevat. Deze metatag wordt in het kopgedeelte van de bijbehorende webpagina tussen de head-tags geplaatst. Hier is het formaat om het te schrijven:

Het pad naar het stijlbestand wordt geschreven als de waarde van het href-attribuut. Het rel-attribuut vertelt de browser naar welk bestand de link-tag verwijst. De waarde "stylesheet" geeft aan dat dit bestand een extern stylesheet is. Het type-attribuut specificeert het MIME-type van het bestand. Voor een extern stijlblad is het MIME-type "text/css".

Dit is hoe de regel voor het verbinden van CSS-stijlen in HTML-code eruit zal zien:

...
.css"/>
...

Het voordeel van deze methode is dat extern stijlblad kan aan meerdere webpagina's tegelijk worden gekoppeld.

2. De tweede manier is om zogenaamde mondiale stijlen, die rechtstreeks in de html-code van de webpagina worden geschreven. Ze zijn opgesloten in een tweepersoonskamer stijl label en wordt meestal in het hoofdgedeelte tussen de head-tags geplaatst:

...

...

Het nadeel van deze methode is dat de CSS-regels van globale stijlen alleen worden toegepast op de webpagina waarin ze zijn geschreven.

3. De derde methode zijn de zogenaamde ingebouwde of interne stijlen. Om dit te doen, hoeft u alleen maar de vereiste html-tag te plaatsen Stijlkenmerk, dat een reeks CSS-eigenschappen als parameters bevat:

Paragraaf met grijze achtergrond en rode tekst

Bovendien zijn de eigenschappen die zijn opgegeven in het stijlattribuut slechts op één html-element van toepassing. Meestal wordt deze methode voor het verbinden van stijlen gebruikt in de fase van het debuggen van het siteontwerp, waarna de resulterende CSS-eigenschappen worden overgebracht naar een bestand met externe stijlen.

CSS-stijlen maken. Cascading stylesheet-syntaxis - regels, eigenschappen, selectors.

Keuzeschakelaar (
Eigendom: waarde;
Eigendom: waarde;
...
Eigenschap: waarde
}

Die. een stijlregel bevat een stijlkiezer en een lijst met stijleigenschappen met hun waarden tussen accolades (“(” en “)”):

• keuzeschakelaar gebruikt om te binden aan elementen van een webpagina waarnaar het zijn effect zou moeten uitbreiden;
• “Eigenschap: Waarde”-paren worden gescheiden door een puntkomma (";") en er kunnen er zoveel zijn als gewenst;
• tussen het laatste paar “Eigenschap: Waarde” en de sluitende accolade kan het puntkomma-symbool worden weggelaten;
• stijl eigendom vertegenwoordigt een van de parameters van een HTML-pagina-element: tekstkleur, lettertype, hoeveelheid inspringing;
• spaties en regeleinden bij het schrijven van CSS-regels zijn niet cruciaal, de browser negeert ze, dus u kunt de code opmaken zoals u wilt;
• De code is ook niet hoofdlettergevoelig.

Om het duidelijker te maken, laten we een paar voorbeelden bekijken.

Laten we eens kijken naar deze CSS-regel:

• body is een selector die de naam van de tag vertegenwoordigt ;
• achtergrond — stijleigenschap die wordt gebruikt om de achtergrondparameters in te stellen;
• #0000FF is de waarde van de achtergrondstijleigenschap, een kleurcode in RGB-indeling.

Als gevolg hiervan wordt deze stijl toegepast op het hoofdgedeelte van de webpagina en wordt de pagina-achtergrond in de opgegeven kleur gekleurd. De betreffende stijl wordt genoemd tag-overschrijvingsstijl, omdat de selector een tagnaam zonder tekens is< и >.

Laten we naar een ander voorbeeld kijken:

h1 (
lettergrootte: 24px;
kleur: groen;
}

Deze stijl geeft aan dat de browser alle tekst in tags weergeeft

groen en stelt de lettergrootte in op 24 pixels.

Als tagkiezer kunt u naast de tagnaam ook opgeven Klas:

Gele tekst (kleur:geel)

De klassenaam moet bestaan ​​uit letters van het Latijnse alfabet, cijfers en koppeltekens en moet beginnen met een letter. En in de definitie van een CSS-regel moet er een punt vóór de klassenaam staan, wat betekent dat er een stijlklasse wordt gedefinieerd. Deze stijl wordt toegepast op alle tags die de opgegeven stijl hebben klasse attribuut en de waarde ervan zal gelijk zijn stijlklassenaam zonder punt:

Deze paragraaf heeft oranje tekst

In het voorbeeld zijn we gebonden aan de tag

Css-regel met behulp van klassenaam geeltekst. Hierdoor wordt de tekst in deze paragraaf oranje weergegeven.

U kunt meerdere stijlklassenamen opgeven als de waarde van het clsss-attribuut, gescheiden door spaties. In dit geval is het effect van de stijlklassen:

Cursieve tekst (lettertype: cursief)

gele cursieve tekst

In dit voorbeeld naar de tag

We hebben twee klassen tegelijk toegevoegd: gele tekst en cursieve tekst. Als gevolg hiervan wordt de inhoud van de tag weergegeven in geel en cursief lettertype.

Naast klassen kunnen CSS-regels als selector worden gebruikt identificatie, waarmee een unieke naam voor het element wordt opgegeven. Alles is hier hetzelfde als bij de stijllessen, alleen zijn er een paar verschillen:

• in de CSS-regelselector wordt ook de naam van de ID gespecificeerd, maar in plaats van een punt voor de naam wordt een hekje “#” geplaatst;
• binding aan een html-element wordt uitgevoerd via ID-attribuut, waarvan de waarde is ingesteld op de naam van de stijl zonder het hekje;
• de waarde van het id-attribuut moet uniek zijn binnen de pagina, dat wil zeggen dat er in de html-code slechts één element kan zijn met een bepaalde waarde van het id-attribuut, anders is de code niet geldig.

Laten we voor de duidelijkheid een voorbeeld bekijken:

#textcenter(tekst uitlijnen: centreren;)

Centreer tekst

Er wordt een css-regel aan het p (paragraaf)-element gekoppeld met behulp van het id-attribuut, dat de tekst uitlijnt op het midden van de pagina. Het is niet langer toegestaan ​​om elementen op de pagina aan te maken met deze id attribuutwaarde, anders is de html-code niet geldig.

Naast de weloverwogen methoden voor het beschrijven van stijlen, kun je met css creëren gecombineerde stijlen en stel meerdere identieke stijlen tegelijk in. Laten we een voorbeeld bekijken:

h1.redtext, p sterk (kleur: rood)

In het voorbeeld zijn twee selectors gespecificeerd, gescheiden door komma's: “h1.redtext” en “p strong”. De eerste selector zegt dat in alle h1-elementen waarvan de klasse-attribuutwaarde gelijk is aan redtext, de tekst in rood wordt weergegeven. In de tweede selector zal hetzelfde gebeuren voor alle sterke elementen die genest zijn binnen de p-tag:

Deze titel wordt in rood weergegeven

platte tekst, rode tekst

Hallo, mijn lieve lezers van de blogsite. In het artikel van vandaag wordt gesproken over methoden of manieren om een ​​CSS-stijlblad op te nemen. Ik zal je vertellen hoe je dat kunt verbind CSS met html-site vier manieren. Deze vier verbindingsmethoden zullen in de toekomst van pas komen, omdat er momenten zijn waarop u al deze verbindingsmethoden op een site moet gebruiken. Voor degenen die niet weten wat CSS-stijlbladen zijn: .

Laten we beginnen...

Gerelateerde stijlbladen.

CSS-verbindingsmethode - nr. 1

Methode nr. 1 is de handigste manier om stijlen voor een site te definiëren. Alle stijlen voor de site worden in één afzonderlijk bestand opgeslagen en worden voor alle webpagina's gebruikt. Om een ​​CSS-tabel aan een HTML-pagina te koppelen of te koppelen, gebruikt u de LINK-tag in de paginatitel.

Rubriek

De voordelen van deze methode:

1. Gebruik één CSS-stijlbestand voor alle webpagina's van de website;

2. U kunt het uiterlijk van de site wijzigen via het stijlblad zonder webpagina's te bewerken;

3. Wanneer u de stijl in één style.css-bestand wijzigt, wordt de stijl automatisch toegepast op alle pagina's waar een verbinding in het CSS-bestand aanwezig is. Het is erg handig;

4. Wanneer een website voor de eerste keer wordt geladen, wordt het CSS-stijlbestand in de cache op de lokale computer van de gebruiker opgeslagen, gescheiden van de webpagina's. Hierdoor laadt de site veel sneller.

Globale stijlbladen.

CSS-verbindingsmethode - nr. 2

Methode nr. 2 is niet zo effectief en handig als methode nr. 1, maar er zijn momenten waarop deze methode om CSS te verbinden noodzakelijk is.
Deze stijl is verbonden en geschreven in het document zelf en wordt in de header van de webpagina tussen de tags geplaatst . Sluit stijltag aan

Rubriek

In dit voorbeeld liet ik zien dat de koptekststijl werd gewijzigd

. Op deze webpagina hoeft u nu alleen maar de tag op te geven

en de stijlen worden er automatisch aan toegevoegd.

Interne stijlen.

CSS-verbindingsmethode - nr. 3

Methode nr. 3 wordt in zeldzame gevallen gebruikt. Een inlinestijl wordt gebruikt om een ​​enkele tag op een webpagina te wijzigen. Gebruik de parameter om een ​​stijl te verbinden stijl.

Voorbeeld van het verbinden van een CSS-tabel:

Rubriek

Gecombineerde methode om stijlen te verbinden.

CSS-verbindingsmethode - nr. 4

Deze methode gebruikt verschillende stijlen tegelijk, die we hierboven hebben gebruikt (methode nr. 1 - nr. 3).

Voorbeeld van het verbinden van een CSS-tabel:

Rubriek

Rubriek

Als gevolg hiervan krijgen we, als we het voorbeeld volgen, de eerste kop in rood met een grootte van 50 pixels, en de volgende in groen en met een grootte van 90 pixels.

Ik herhaal dat alle beschreven methoden voor het gebruik van CSS onafhankelijk kunnen worden gebruikt of met elkaar kunnen worden gecombineerd. Dit is te zien in methode nr. 4.

Goede dag allemaal.

Dus in een van de vorige artikelen hebben we kennis gemaakt.

Maar we hebben één heel belangrijk probleem niet aangepakt. Namelijk - hoe CSS-stijlen aan HTML-code kunnen worden gekoppeld pagina's van onze website.

Deze vraag is eigenlijk heel belangrijk. Tenslotte als we CSS-stijlen verkeerd binden naar de pagina's van onze site, dan kunnen we deze stijlen niet gebruiken. De browser negeert ze eenvoudigweg en we zullen niet het resultaat zien dat het gebruik van bepaalde stijlen oplevert.

Er zijn verschillende manieren om CSS-stijlen aan paginacode te binden, en vandaag zullen we proberen ze allemaal te bekijken.

Laten we beginnen.

Gebaseerd op de aard van het verbinden van CSS-cascading stylesheets met een HTML-document, zijn er: externe en interne stijlbladen.

1. Interne CSS-stijlbladen.

Interne stijlbladen bevinden zich direct op onze webpagina. Ja, ja... Direct in de HTML-code van elke afzonderlijke pagina.

Dit is natuurlijk een beetje lastig, maar toch bestaat een dergelijke mogelijkheid en ik kan het niet helpen er iets over te zeggen.

De eerste manier om CSS-stijlen aan de paginacode te koppelen, is dus door de tag te gebruiken , van toepassing op de gehele inhoud van het HTML-document. Er kunnen er zoveel zijn als je wilt, zelfs alle stijlen voor de hele site. Maar dit is een beetje verkeerd. Ik zal hier later over praten als ik naar externe stijlbladen kijk.

Soms moet dat schrijf CSS-stijlen in HTML-code.

Wanneer u bijvoorbeeld een soort reclamebanner op uw website plaatst, plaatst u de code van deze banner in de paginacode.

Om ervoor te zorgen dat deze banner correct wordt weergegeven (om de grenzen die eraan zijn toegewezen niet te overschrijden, heeft deze misschien een frame nodig, enz.), moet u er soms verschillende CSS-instructies aan toevoegen.

Maar het heeft geen zin om wijzigingen aan te brengen in het algemene stijlblad. Het spandoek is een tijdelijk fenomeen. Vandaag de één, morgen de ander. Daarom is het gemakkelijker om er stijlen voor te schrijven rechtstreeks in de code van deze banner.

Dat wil zeggen dat we CSS-stijlen alleen aan een specifiek pagina-element hoeven te koppelen. Dit gebeurt heel eenvoudig - met behulp van het stijlattribuut.

Op deze manier geschreven stijlen hebben alleen invloed op het element in wiens tag ze zijn geplaatst. In dit geval wordt alleen voor deze paragraaf (tag

). En geen ander!

2. Externe stylesheets.

De naam externe CSS-stijlbladen betekent dat ze niet in de hoofdtekst van het HTML-document zijn geschreven, maar in een apart speciaal bestand. Deze bestanden hebben de extensie .css

Dus zoals beloofd zal ik je vertellen waarom het beter is om externe stylesheets te gebruiken.

Feit is dat hierdoor de pagina’s van uw site iets sneller kunnen laden. Misschien voor een fractie van een seconde, maar sneller. Dit vermindert de belasting van uw site en handiger voor uw bezoekers: ze hoeven minder te wachten totdat pagina's zijn geladen.

Waarom gebeurt dit?

Als de CSS-stijlen voor uw site in een apart bestand staan, hoeft de browser van de gebruiker deze stijlen niet telkens te laden wanneer een nieuwe pagina wordt geladen. Het downloadt ze één keer, plaatst ze in de cache (een geheugengebied op de computer van de bezoeker) en wanneer de volgende pagina wordt geladen, worden de stijlen daar vandaan gehaald.

Er zijn twee manieren om CSS-stylesheetbestanden aan een webpagina toe te voegen.

De eerste methode, de meest voorkomende, is het gebruik van de tag met attributen: rel = "stylesheet" type = "text/css" href = "style file.css" in de paginakoptekstcode (tag ).

Bijvoorbeeld:

In dit voorbeeld worden CSS-stijlen die zijn geschreven in het style.css-bestand aan de pagina gekoppeld. Ze zijn geldig in het gehele document.

Er is een andere manier externe stijlbladen aan HTML koppelen document. Dit maakt gebruik van de @import-richtlijn. Hiermee kunt u de inhoud van een CSS-bestand in het huidige stijlblad importeren.

U kunt het zowel gebruiken om bepaalde stijlbladen aan andere toe te voegen, als om een ​​stijlbladbestand aan een HTML-document toe te voegen. Om dit te doen, moet je het in de tag schrijven HTML-code in de hoofdtekst van een webpaginatag. Voorbeeld:

Gele tekst met Verdana-lettertype