Hoe een stylesheet op te nemen. CSS aan een HTML-document toevoegen

laat een reactie achter 6,950

Goede dag. Alexey Gulynin heeft contact. In dit eerste artikel over CSS wil ik het hebben over CSS in het algemeen en hoe . CSS is Cascading Style Sheets(of eenvoudigweg stijlen genoemd) die verantwoordelijk zijn voor het weergeven van elementen op uw html-pagina. Als u alleen elementen aan de html-pagina toevoegt zonder attributen, dan worden ze allemaal van boven naar beneden geplaatst en uitgelijnd aan de linkerkant van de browser. Het is saai en eentonig.

De html-elementen zijn het skelet van onze pagina, d.w.z. html is verantwoordelijk voor wat er op de pagina wordt weergegeven. CSS antwoordt op zijn beurt HOE al deze elementen weer te geven. U kunt dezelfde html-pagina maken en er duizenden ontwerpopties voor bedenken. En dit alles ziet eruit als verschillende sites. U kunt op internet surfen en zien hoeveel mooie sites er zijn in de uitgestrektheid.

Inmiddels had je moeten begrijpen dat als je een mooi ontwerp wilt maken, je het zonder CSS niet kunt doen. Daarom, vooruit, naar het begrip van deze wetenschap, CSS genaamd.

Laten we een CSS-stylesheet toevoegen aan onze html-pagina. Dit gebeurt in de titel van het document, tussen de tags. .. :

CSS-verbinding

Laten we eens kijken wat we hier schreven. Stijlbestanden worden opgenomen met behulp van de link-tag. Het al bekende href-attribuut verwijst naar het pad naar het stijlbestand. Hier kunt u zowel absolute als relatieve paden opgeven. In dit geval wordt aangenomen dat ons bestand style.css zich in dezelfde map bevindt als het bestand waarin we de stijlen opnemen. Het type="type/css" attribuut geeft aan dat het documenttype css is, het rel="stylesheet" attribuut vertelt de browser dat we stijlen verbinden (rel met Engels "relationship" - relaties).

Je kunt elementen ook op andere manieren stylen. Laten we een html-pagina maken met de volgende inhoud:

CSS-verbinding

Eerste paragraaf

Eerste paragraaf

Eerste paragraaf

Eerste paragraaf



Naast het maken van een bestand met stijlen, kunnen we stijlen naar de kop van het document schrijven met behulp van de tag

Eerste paragraaf

Tweede paragraaf

derde alinea

vierde alinea



Stijlen kunnen ook direct op het element worden ingesteld met behulp van het stijlattribuut (dit is de zogenaamde inline-stijl). Laten we de tweede alinea groen maken en rechts uitlijnen. Om dit te doen, moet u de volgende structuur toevoegen:

Tweede paragraaf

Nu kunnen we zien dat de alinea groen is geworden en naar rechts is uitgelijnd.

Er is nog een andere manier om stijlen aan een html-pagina toe te voegen. Deze geïmporteerde stijlen. Ze worden ingesteld in de paginakoptekst, maar uit een bestand, niet rechtstreeks:

Bij het toevoegen van stijlen aan een pagina kunnen er conflicten optreden. In een stijlbestand kunnen we bijvoorbeeld de tekstkleur van alle alinea's (p-tag) op rood instellen en op een ervan een inline-stijl toepassen. Dus hoe vertel je de browser welke kleur hij moet gebruiken? Laten we de prioriteiten definiëren die door de browser worden gebruikt:

1) Stijlen uit een bestand (hebben de laagste prioriteit)
2) Geïmporteerde stijlen
3) Inline-stijlen
4) inline stijlen (hebben de hoogste prioriteit, d.w.z. de browser zal ze als eerste uitvoeren).

In dit artikel heb je geleerd hoe je kunt css verbinden met html-pagina en hoe u deze stijlen kunt toepassen.

Alexey Gulynin had contact, laat je opmerkingen achter, tot ziens in de volgende artikelen.

Goede dag! In dit artikel laat ik verschillende methoden zien voor het opnemen van CSS in HTML. Ik zal ook de verschillende subtiliteiten en nuances van verschillende manieren om stijlen met elkaar te verbinden uitleggen.

Interne verbinding

Een interne stylesheet is een set stijlen, onderdeel van de code van een webpagina, die altijd tussen de openings- en sluitingstags moet staan. HTML-code, in de body-tag van een webpagina. Voorbeeld:

Interne verbinding van stijlen

Gele tekst met Verdana-lettertype



. U moet aan elke webpagina een stylesheet toevoegen. Als de site een groot aantal pagina's heeft die hetzelfde ontwerp nodig hebben, wordt het toevoegen en bewerken van stijlen een ondankbare taak - het proces zal erg lang duren. Daarom worden interne stylesheets als onhandig beschouwd.

Externe stylesheets komen veel vaker voor. U hoeft de tabel alleen maar te verbinden met alle benodigde webpagina's met behulp van de tag met het rel attribuut (definieert de relatie tussen de pagina en het opgenomen bestand) en de stylesheet-waarde, wat betekent dat het opgenomen bestand een stylesheet bevat. Het href-attribuut is het pad (URL) naar uw .css-bestand:

Door slechts één bestand te bewerken, kunt u de stijl voor de hele site in één keer wijzigen, ongeacht het aantal pagina's dat deze heeft. Dit is erg handig, vooral voor grote bronnen.

Les: Een stijlblad maken

Omdat externe stylesheets het handigst zijn en veel worden gebruikt bij ontwerpontwikkeling, zullen we leren hoe we ze kunnen maken. Op deze pagina kunt u het archief met bestanden voor deze les downloaden.

In de map vind je een HTML-document met een eenvoudig paginavoorbeeld en een afbeelding (te gebruiken in de tutorial). Open het HTML-document in een browser. U zult zien dat de pagina er volkomen normaal uitziet. Laten we een stijl voor haar schrijven om haar een aantrekkelijker uiterlijk te geven.

Voor nu hoef je niet te diep in te gaan op wat dit of dat stukje code betekent. Nu moet je het principe van werk begrijpen. Laten we beginnen.

CSS verbinden met HTML

Om te beginnen, open je een teksteditor op je computer (kladblok is voldoende) en maak je een leeg bestand met de naam style , dat je opslaat met de extensie .css (u zou een style.css-bestand moeten krijgen). Sla het bestand op in dezelfde map als het gedownloade HTML-document.

Open het HTML-document in een teksteditor en in een browser (om het gemakkelijker te maken om wijzigingen in het uiterlijk van de pagina te zien). Toevoegen tussen tags de volgende code:

Kort over wat je net hebt gedaan. Door deze code in een HTML-document te plakken, doet u het volgende:

  • een link heeft verstrekt naar een lettertype genaamd Roboto Condensed, dat van de Google-server zal worden gehaald (we zullen later meer hebben over Google-lettertypen);
  • inclusief onze externe stylesheet style.css (tot nu toe leeg).

De CSS-stijl schrijven

Sla de wijzigingen op in het HTML-document en ga naar het lege .css-bestand dat u hebt gemaakt. Laten we de pagina opmaken:

Html ( padding-top: 5px; background-image: url(background.jpg); )

Sla uw wijzigingen op. Gefeliciteerd, je hebt de eerste regel geschreven - het gaat om de tag . De eerste eigenschap, padding-top, voegt een top padding van 5 pixels toe tussen het browservenster en de inhoud van de webpagina. Met de tweede eigenschap, background-image , heb je een afbeelding voor de achtergrond van de hele pagina opgenomen door het pad naar het afbeeldingsbestand op te geven (in dezelfde map als het HTML-document).

Vernieuw de geopende webpagina in de browser. Als alles correct is gedaan, ziet u dat de achtergrond op de pagina is verschenen en dat de inspringing tussen de bovenkant van het venster en de tekst iets is vergroot.

Body (breedte: 75%; opvulling: 40px; marge: 15px auto; achtergrondkleur: #EBEBEB; border-radius: 30px; )

Sla de wijzigingen op in het bestand. Nu jij:

  • stel het gebied in voor de inhoud van de tag , wat gelijk is aan 75% van de breedte van het browservenster;
  • zorgde voor een opvulling van 40 pixels vanaf alle kanten van het inhoudsgebied;
  • plaatste het gebied in het midden van de pagina en liet ook de boven- en onderkant van 15 pixels inspringen;
  • stel de achtergrondkleur in op #EBEBEB voor het inhoudsgebied;
  • de hoeken van een rechthoekig gebied afgerond, waarbij een afrondingsstraal van 30 pixels wordt opgegeven.

Werk het HTML-document opnieuw bij. Zorg er tegelijkertijd voor dat de cache is uitgeschakeld of laad de pagina opnieuw met de update van alle bijbehorende bestanden, met behulp van een speciale toetsencombinatie (bijvoorbeeld voor Chrome is dit Ctrl+F5).

U zult zien dat in het midden van de pagina een rechthoekig gebied met afgeronde hoeken is toegevoegd. Dit is het resultaat van uw acties in het CSS-bestand. U kunt ook proberen het browservenster kleiner te maken en te zien hoe de breedte van het rechthoekige gebied zich aanpast aan de grootte. Dit komt doordat de breedte is ingesteld als een percentage.

Lettertype wijzigen met CSS

Het is tijd om onze tekst te versieren. Voeg deze code toe aan je stylesheet en sla je wijzigingen op:

h1 ( kleur: #E87E04; lettergrootte: 2em; linkermarge: 20px; lettertypefamilie: "Roboto Condensed", schreefloos; ) h2 ( kleur: #E87E04; lettergrootte: 1.7em; linkermarge : 20px; font-family: "Roboto Condensed", schreefloos; ) p ( color: #22313F; line-height: 150%; margin-top: 20px; margin-left: 20px; font-family: "Roboto Condensed ", schreefloos ;)

Nadat u dit hebt geschreven, stelt u de lettertypekleuren in voor de h1 , h2 , p-tags, specificeert u hun grootte, voegt u een marge van 20 pixels toe vanaf de linkerrand en bovendien voor

We hebben een bovenste inspringing van 20 pixels gemaakt en de regelhoogte (regelafstand van de tekst) ingesteld op 50% meer dan de standaard. Bovendien heb je het Roboto Condensed-lettertype aan alle drie de tags gekoppeld (daarom was het in het begin noodzakelijk om er een link naar te specificeren in het HTML-bestand).

Ververs de pagina in uw browser en bewonder het resultaat van uw werk. In deze tutorial zullen we nog een ding proberen. Voeg deze code toe aan CSS:

nadruk ( font-weight: vet; )

Bewaar en ververs de pagina in de browser. U zult zien dat in de laatste alinea het lettertype in een deel van de tekst vet is geworden. Om te begrijpen wat er is gebeurd, gaat u naar het teksteditorvenster waar u het HTML-bestand helemaal aan het begin hebt geopend. Kijk eens naar de laatste alinea: een deel van de zin is verpakt in een tag met klassikaal accent. U hebt dus een stijl geschreven voor een enkele regel tekst in een alinea. In het volgende hoofdstuk zullen we meer over lessen vertellen.

Uiteindelijk zou je een pagina als deze moeten hebben:



Probeer als oefening de tekstgrootte te wijzigen voor

(laten we zeggen 1.1em) en verhoog de opvulling tussen

En de linkerrand van het inhoudsgebied met nog eens 10 pixels.

conclusies

Dit hoofdstuk heeft de syntaxis van CSS behandeld, evenals hoe u een rudimentair stijlblad kunt maken. Je hebt geleerd hoe je CSS in een HTML-pagina kunt opnemen en je hebt ook geleerd hoe je eenvoudige stijlen kunt maken. Dit zijn de belangrijkste dingen om te onthouden uit dit hoofdstuk:

Elke CSS-stijl bestaat uit verschillende elementen: een selector, een stijleigenschap en de waarde van die eigenschap.

Alle eigenschappen en hun waarden worden geschreven in een declaratieblok tussen twee accolades () nadat de selector is opgegeven.

U moet de borden goed volgen: twee accolades (openen aan het begin van het aangifteblok en sluiten aan het einde). Zonder deze haakjes werkt CSS niet correct.

Het is verplicht om een ​​dubbele punt achter de eigenschap en een puntkomma achter de waarde te plaatsen.

Schrijf voor het gemak en een betere leesbaarheid van de CSS-code elke eigenschap op een nieuwe regel en beknibbel niet op spaties en tabs.

Externe stijlbladen

We maken een normale html-pagina met de volgende code:



CSS verbinden met HTML


Kop op het eerste niveau


Dit is gewoon tekst

Koers op het tweede niveau


Dit is gewoon tekst



Maak nu een leeg document in Kladblok style.css en sla het op in dezelfde map waar de html-pagina zich bevindt:

Dit is onze stijlpagina. Laten we stijlen (style.css) toevoegen aan de html-pagina. Er is een tag in html , die verantwoordelijk is voor het verbinden van externe bestanden. Toevoegen naar html-pagina:



CSS verbinden met HTML



Kop op het eerste niveau


Dit is gewoon tekst

Koers op het tweede niveau


Dit is gewoon tekst



Interne stijlbladen

Dit stijlblad wordt gedefinieerd in het HTML-element, met behulp van het attribuut stijl. Hier is een voorbeeld:

Dit is een rode titel.

Het nadeel van deze methode is duidelijk: de parameter stijl moet voor elke kop worden ingesteld en verliest zo het voordeel van CSS.

Ingesloten stijlbladen

In dit geval wordt de stylesheet ingebed in de header van de html-pagina. HTML heeft tags , met de parameter type, geeft dit aan dat het CSS-stijlblad wordt opgenomen. Hier is een voorbeeld:



CSS verbinden met HTML




Deze kop wordt rood


Deze kop wordt rood





Alle h1 kopjes op onze pagina zijn rood. Als je wilt, kun je een van hen blauw kleuren, hiervoor moet je het interne stijlblad gebruiken:



CSS verbinden met HTML



Deze kop wordt rood


Deze kop wordt blauw


Deze kop wordt rood





In deze situatie wordt het principe van cascadering toegepast, het zal het conflict oplossen. In ons voorbeeld heeft de interne tabel een hogere prioriteit en daarom wordt de titel blauw.

De nadelen van deze methode zijn duidelijk... Voor elke HTML-pagina moet een stylesheet worden gemaakt, dus we zullen een externe stylesheet gebruiken.

Nu hebben we gekeken naar manieren om CSS met HTML te verbinden, daarna kijken we naar de CSS-syntaxis.

Er zijn 3 manieren om CSS-stijlen voor uw site te implementeren: U kunt globale CSS-stijlen gebruiken door CSS-regels aan de container toe te voegen HTML-document, u kunt een link naar een extern document toevoegen .css een bestand met alle benodigde regels, of gebruik interne CSS om de regels op een specifiek element toe te passen. In deze gids zullen we alle drie de opties voor het opnemen van CSS bekijken en hun voor- en nadelen leren kennen.

Globale CSS wordt in een container geplaatst specifieke pagina. Met deze verbinding kunnen klassen en identifiers (ID's) worden gebruikt om naar CSS-code te verwijzen, maar ze zullen alleen op die specifieke pagina actief zijn. CSS-stijlen die op deze manier zijn opgenomen, worden elke keer dat de pagina opnieuw wordt geladen geladen, zodat ze de laadsnelheid van de pagina kunnen beïnvloeden. Er zijn echter een paar situaties waarin het gebruik van CSS-globalen nuttig kan zijn. Als u bijvoorbeeld iemand een paginasjabloon moet sturen, is het veel gemakkelijker voor u om een ​​voorlopig resultaat te geven als alles op één pagina staat. Globale CSS wordt tussen tags geplaatst. Hier is een voorbeeld van een globaal stijlblad:

Voordelen van wereldwijde CSS:

  • Het stijlblad heeft slechts invloed op één pagina.
  • Global CSS kan klassen en identifiers (ID's) gebruiken.
  • Het is niet nodig om meerdere bestanden te uploaden. HTML en CSS kunnen in hetzelfde bestand staan.

Nadelen van globale CSS:

  • Verhoogde laadtijd van de pagina.
  • Verbindt slechts met één pagina - inefficiënt als u dezelfde CSS voor meerdere pagina's wilt gebruiken.

Hoe CSS te verbinden met HTML-pagina

  1. Open uw HTML-pagina in een teksteditor. Als de pagina al is geüpload naar uw hostingaccount, kunt u de teksteditor gebruiken die door uw host is geleverd. Als dit HTML-document op uw computer staat, kunt u elke teksteditor gebruiken om het te bewerken en het vervolgens opnieuw uploaden naar uw hostingaccount met .
  2. Zoek de openingstag en voeg de volgende code erna toe:

Na alle stappen zou het HTML-document met globale CSS er ongeveer zo uit moeten zien :

Hostinger-gids

Dit is onze tekst.



Optie 2 - Externe CSS

Misschien wel de handigste manier om CSS in uw site op te nemen, is door deze te koppelen aan een externe .css het dossier. In dit geval worden alle wijzigingen die in het externe CSS-bestand worden aangebracht, over het algemeen weergegeven op uw site. Een link naar een extern CSS-bestand wordt in een container geplaatst Pagina's:

Terwijl de stylesheets zelf in het bestand staan style.css. Bijvoorbeeld:

Xleftcol ( float: left; width: 33%; background:#809900; ) .xmiddlecol ( float: left; width: 34%; background:#eff2df; )

Voordelen van externe CSS:

  • Kleinere HTML-paginagrootte en schonere bestandsstructuur.
  • Hoge downloadsnelheid.
  • Dezelfde pagina kan voor verschillende pagina's worden gebruikt. .css het dossier.

Nadelen van externe CSS:

  • De pagina wordt mogelijk niet correct weergegeven totdat de externe CSS volledig is geladen.

Optie 3- Interne CSS

Interne CSS wordt gebruikt voor een specifieke HTML-tag. Attribuut

© Copyright 2017, https://qzoreteam.ru