1. Hvad er CSS Cascading Style Sheets?

Hej mine kære læsere. Jeg besluttede at åbne en ny del af webstedet dedikeret til at arbejde med CSS cascading style sheets.

Så, hvad er cascading style sheets css?

css(Engelsk) Cascading Style Sheets — cascading style sheets) - beskrivelsessprog udseende dokument skrevet med markup-sprog.
For at gøre det lettere for en nybegynder at forstå, er cascading style sheets css designet til at skabe smukke, nemme at redigere designs til html-webstedssider.

Cascading style sheets blev først brugt i 90'erne af forrige århundrede. Men i starten var de ikke så populære, som de er nu, pga forskellige browsere HTML-sider, der brugte CSS, blev opfattet og vist anderledes.

Efter nogen tid, for at forenkle arbejdet for webstedsbyggere, begyndte browsere at blive "tilpasset" til de samme standarder. I dag gengiver næsten alle programmer, der bruges til at se internetsider, sider, der bruger CSS cascading style sheets.

Mine observationer!!! Ifølge mine personlige observationer, f.eks seneste versioner browsere som Opera, Mazilla ForeFox, Maxthon, Google Chrome Og Internet Explorer Sider, der bruger cascading style sheets, vises næsten identisk, men hvis browsere ikke gør det sidste generationer, så vil selve hjemmesidens sider se anderledes ud. Og for at dit websted skal se ens ud i næsten alle browsere, er der specielle teknologier til at specificere cascading style sheets.

Så lad os begynde at skabe nyt bord stilarter og tilslut det til vores dokument.

2. Hvordan laver man et cascading css style sheet?

I denne del af artiklen vil vi oprette og forbinde et cascading stylesheet til den enkleste html-side.

Så lad os gøre dette:

1. Vi opretter en mappe, der vil indeholde vores html-side og cascading style sheet.
Lad min mappe hedde "css"

2. Vi laver en simpel html-side (index.html). Du kan læse, hvordan dette gøres.

3. Lad os nu skabe en enkel Tekstdokument(svarende til skabe html sider), kald det bare style.css.

Som et resultat bør du få dette:

Det er det, filen der vil indeholde css-stilene er klar.

Lad os nu forbinde det oprettede typografiark til filen index.html.

3. Hvordan forbinder man et cascading style sheet css?

Så for at forbinde et typografiark til en html-side, skal du i index.html-filen i tagget tilføj tag:

Her i attributten href="style.css" stien til filen med css-stile er angivet. I dette tilfælde css fil og index.html er i samme mappe.

For eksempel, hvis vores index.html-fil havde følgende kode:

Vigtig!!! Forresten, glem ikke at indstille kodningen til 1251 (ANSI-kyrillisk), når du gemmer filen index.html i Notesblok. For hvis du ikke gør dette og gemmer filen i en anden kodning, vil browseren vise dig "doodles" i stedet for tekster.

Hvis alt er gjort og gemt korrekt, vil du se følgende i browseren:

Det er alt, filen index.html er blevet oprettet, og css style sheets er også blevet forbundet til den.

Lad os nu tjekke, hvordan css-typografiark fungerer.

Så lad os starte med den enkleste ting og sætte mærket en ny stil, definerer baggrunden html billede sider, sidebaggrundsfarve (hvis billeder er deaktiveret i sidens besøgendes browser), top- og bundmargener, standardskrifttype, dens størrelse og farve.

For at indstille et baggrundsbillede skal du markere det i mappen med vores filer.

Og hvis du planlægger at lære at skabe professionelle onlinebutikker ved hjælp af Magento-motoren, så er dette nemmest at gøre ved hjælp af min forfatters videokursus.

Anvendelse af et typografiark til et dokument

Integrering af typografiark i et dokument
Indstilling af en stil for et separat dokumentfragment
Import af et typografiark

Angivelse af flere egenskaber på én gang
Gruppering af vælgere
Kommenter på et typografiark
Stilegenskaber
baggrundsegenskaber
Indramningselementer
Liste egenskaber
Tekstegenskaber
Gruppering af egenskaber for at gøre det nemmere at definere en typografi
Ejendomsarv
Brug af kontekstvælgere
Hvorfor Style Sheets kaldes Cascading

Style sheets er en del af W3C-retningslinjerne og er et standardværktøj. Webformatering- sider, der bruger metoder, der er typiske for desktop udgivelsessystemer. Microsoft Internet Explorer 3.0 var den første browser, der understøttede typografiark. Netscape Navigator-browseren har understøttet typografiark siden version 4.0B2 (Beta 2), tilgængelig i februar 1997.

Detaljerede oplysninger om W3C-anbefalinger kan findes på: h ttp://www.w3.org/pub/WWW/TR/WD-cssl.html . W3C-standarden bruger udtrykket "cascading style sheets level 1 (CSSI").

Først er det nødvendigt at præcisere, hvad der menes med navnet "style sheets". De fleste moderne teksteditorer giver brugeren mulighed for at definere den stil, der skal bruges til at formatere dokumentet. Især kan du vælge et afsnitsformat med en enkelt linjeafstand, i Courier-skrifttype og med en tomme venstre margen. Denne formateringsstil kan efterfølgende anvendes på et vilkårligt antal afsnit i dette og andre dokumenter. NT stilark

M L opfører sig på nøjagtig samme måde. Nedenfor er en kort liste over de vigtigste funktioner:

Skift mellemrummet mellem linjer, ord og individuelle tegn.

Indstilling af venstre, højre, top og bundmargen for et element (en blok HTML-beholdertekst).

Indstilling af indrykning af et element.

Skift størrelse, stil og andre attributter for et elements skrifttype.

Indstilling af en kant omkring et element.

Inklusion baggrundsbillede og baggrundsfarve pr. element.

Den store fordel ved borde HTML stilarter er evnen til at adskille formateringsoperationen fra indholdet af dokumentet. Bestem først, hvordan teksten skal se ud et eller andet sted på siden, og indtast derefter selve teksten. Hvis du senere beslutter dig for, for eksempel at ændre skriftfarven på overskrifterne til blå, skal du bare ændre stilen på disse overskrifter. Der er ingen grund til at ændre teksten .

Der er fire metoder til at anvende et typografiark til et dokument:

Linking - du kan linke et HTML-dokument med et typografiark gemt i separat fil.

Indlejring - du kan indlejre et typografiark i et HTML-dokument ved hjælp af en beholder



Tag

Som nævnt tidligere, gemmes typografiark i tekstfiler, der er nemme at redigere. De er ikke svære at oprette manuelt, men der er særlige redaktører stilark, f.eks. populært program Microsoft FrontPage.

Typografiark giver dig mulighed for at definere en typografi for et eller flere tags. For eksempel kan du oprette et typografiark, der definerer typografier for tags

,

,

OG . Hver definition kaldes Herske (regl e). Reglen indeholder vælger(HTML tag) efterfulgt af erklæring(definition af stil). Vælgeren er bindeleddet mellem definitionen og tagget. Nedenfor er et eksempel på en regel, der specificerer stilen for hvert af titeltaggene

:

H1 (farve: blå)

Erklæringen er omgivet af krøllede seler. Hver erklæring har to dele: navnet på ejendommen og den værdi, der er tildelt den, adskilt af et kolon. HTML inkluderer snesevis af egenskaber (skriftstørrelse, skrifttype, farve, margin-højre osv.), som vil blive diskuteret nedenfor. Hver egenskab kan antage flere værdier, hvoraf den ene er tildelt den som standard.

I det foregående eksempel blev der kun angivet én farveegenskab. Der er dog intet, der forhindrer dig i at definere en hel række egenskaber i ét tag, og adskille dem fra hinanden med et semikolon:

HI (farve: blå; skriftstørrelse: 12 pkt; tekstlinje: center)

I dette eksempel vil fremviseren vise hver overskrift på første niveau i 12-punkts blå skrifttype og justere dem til midten af ​​vinduet. Alle andre egenskaber vil bruge deres standardværdier (for eksempel vil egenskaben font-style blive sat til normal).

Hvis du har brug for at definere den samme stil for flere tags, kan du angive dem på en separat liste:

P (skriftstørrelse: 12 pkt)
UL (skriftstørrelse: 12pt)
LI (skriftstørrelse: 12pt)

HTML giver dig mulighed for at gøre det samme i en mere kompakt form - på én linje:

P, UL, LI (skriftstørrelse: 12 pt)

Kommaet er et påkrævet element her. Hvis den udelades, ændres betydningen af ​​reglen (se afsnittet " " senere i dette kapitel).

Efterhånden som dit stylesheet bliver mere komplekst, bliver du sandsynligvis nødt til at inkludere flere oplysninger om formålet med en regel. Kommentarer vises mellem /* og */ tegn og ignoreres af browsere, for eksempel:

BODY (margin-venstre: lin) /* Indryk 1 tomme */
H1 (margin-venstre: -lin) /* Skift til venstre 1 tomme */
H2 (margin-venstre: -lin) /* Skift til venstre 1 tomme */

HTML giver dig mulighed for at definere en bred vifte af typografiarkegenskaber. Egenskabsnavne består af et, eller oftere to eller tre ord, adskilt af en bindestreg. I komplekse navne repræsenterer det første ord normalt kategorien og er også en stenografi for egenskabsnavnet (se afsnittet " ").

Tabellen giver et overblik over egenskaberne for HTML typografiark Kategorikolonnen viser om en egenskab kan grupperes med andre egenskaber. Den tredje kolonne giver information om, hvorvidt ejendommen er nedarvet eller ej af underordnede tags (for ejendomsarv, se afsnittet " ").

		Arv
		HTML-typografiark giver dig mulighed for at dekorere baggrunden for et sideelement med en farve eller et billede. Det skal bemærkes, at vi her og længere vil tale om at bruge egenskaber ikke for hele siden, men for et separat element. For eksempel hvis du definerer en baggrund for et tag , så vil kun tags have denne baggrund hele siden: U L (baggrundsbillede: URL(http://www.myserver.com/images/watermark.gif)) W3C-anbefalinger giver mulighed for at definere kanter, margener og hvidt mellemrum for sideelementer. Du kan f.eks. omslutte en overskrift i en ramme eller ændre margener i et afsnitsmærke<Р>for at organisere et indrykning for alle tekstafsnit. Til disse formål kan du bruge følgende grupper af egenskaber: border - bruges til at definere en kant placeret til venstre, højre, top og bund af et element. Du kan indstille bredden, farven og stilen på rammen. margin - bruges til at definere margener placeret til venstre, højre, toppen og bunden af ​​et element. Du kan også indstille bredden af ​​margenerne. polstring - bruges til at angive det ledige mellemrum mellem rammen og indholdet af elementet. Disse egenskaber bruges til at angive, hvordan lister vises. Med deres hjælp kan du ændre placeringen af ​​markøren (liste-stil-position egenskab), stil eller billede af markøren (liste-stil-type og liste-stil-billede egenskaber). Listegenskaber nedarves, dvs. hvis egenskaben er defineret i tagget , vil den være gyldig for alle tags UL beholder. Egenskaber giver dig fuld kontrol over, hvordan fremviseren viser tekst. Med deres hjælp kan du styre farve, størrelse, skrifttype, linjeafstand osv. Alle tekstegenskaber vil blive beskrevet i detaljer nedenfor. Mange af de ovenfor beskrevne egenskaber kan grupperes med hinanden. Altså i stedet for reglen H1 (font-weight: fed; font-style: normal; font-size: 12pt; font-family: serif) Du kan skrive en mere kortfattet formulering: H1 (skrifttype: fed normal 12pt serif) HTML-typografiark giver dig mulighed for at gruppere egenskaberne for kant, baggrund, skrifttype, liste, margen og udfyldning. Lad os overveje hver af grupperne separat. grænseejendomsgruppe Du kan gruppere kantegenskaber på fem forskellige måder. Du kan definere egenskaber for en individuel rammeside vha b rækkefølge-top, border-right, border-bottom OG border-venstre, eller definer hele rammen på én gang ved hjælp af kant. Med hver af disse egenskaber kan du angive bredden, stilen og farven på kanten, for eksempel: b ordre-top: tynd prikket sort baggrundsejendomsgruppe I baggrundsegenskabsgruppen kan du angive værdier for farve, billede, gentagelse, vedhæftning og position, for eksempel: baggrund: hvid URL(http://www.myserver.com/image/bg.gif) repeat-x fast øverst til venstre skrifttype egenskabsgruppe Skrifttypegruppen kan tildeles vægt, stil, størrelse og familieværdier, for eksempel: skrifttype: fed normal 12 pkt gange, serif liste ejendomsgruppe Egenskaber grupperes ved hjælp af egenskaben listestil. Det er muligt at angive et billede for en markør, type og position af markøren, for eksempel: liste-stil: firkantet URL(http://www.myserver.com/images/marker.gif) inde margin ejendomsgruppe Margingruppen kan bruges til at definere en bredde for hver af de øverste, højre, nederste og venstre marginer, for eksempel: margen: .5in 1in .5in 1in Hvis kun én værdi er angivet, vil fremviseren gøre de andre felter til samme bredde. Hvis du ikke angiver en eller to værdier, vil felter med en uspecificeret værdi have samme bredde som de modsatte felter. For eksempel, hvis du udelader den sidste værdi (venstre), vil bredden af ​​venstre marginer være lig med bredden af ​​højre marginer, dvs. 1 tomme. Polstring ejendomsgruppe I polstringsgruppen kan du angive værdier for top, højre, bund og venstre, for eksempel: polstring: .25in .25in .25in .25in Hvis der kun er angivet én værdi, vil fremviseren tildele den samme værdi til de manglende værdier. Hvis du ikke angiver en eller to værdier, vil tomme rum med uspecificerede værdier have samme bredde som deres modsatte værdier. For eksempel, hvis du udelader den sidste værdi (venstre), vil mellemrummet mellem venstre side af rammen og elementets indhold være det samme som mellemrummet i højre side. I HTML arver underordnede tags nogle egenskaber af deres overordnede tags. For eksempel alle container-tags (< P >Og ) vil have nogle tag-egenskaber . Præcis samme tag arver tag-egenskaber . Overvej følgende kode: Hej. Dette er et tekstafsnit. Dette understreges Dette dokuments typografiark angiver farven i tagget < P > blå er dog farven til tagget ikke eksplicit defineret (standard er sort). Der er intet at bekymre sig om her, da dette tag er i den overordnede container Og dermed arver den blå farve. Nogle gange bliver det nødvendigt at definere to (eller flere) stilarter for et tag. Det kan for eksempel være nødvendigt at angive to stilarter for et tag : en for det tilfælde, hvor det er underordnet et tag , og den anden, når den er underordnet tagget . Dette kan gøres ved hjælp af kontekstvælgere. Kontekstvælgeren bestemmer den nøjagtige rækkefølge af tags, som en bestemt stil vil blive anvendt til. Med andre ord kan du angive, at en eller anden stil skal anvendes, for eksempel i et tag kun hvis dette tag er et underordnet tag : OL LI (liste-stil-type: decimal) For samme tag du kan definere en anden stil, kun gyldig, hvis den er underordnet et tag : UL LI (liste-stil-type: firkantet) Det skal bemærkes, at listen over vælgere ikke er adskilt af kommaer. Ellers vil alle tags på listen blive tildelt den samme stil. W3C-retningslinjerne kalder style sheets "cascading style sheets" " fordi du til layoutet af en webside kan bruge ikke én, men flere tabeller på én gang. I dette tilfælde bestemmer seeren selv rækkefølgen af ​​brug af tabeller og løser konflikter mellem dem ved hjælp af kaskadeprincippet. For eksempel kan et typografiark for en side ikke kun defineres af dens forfatter, men også af læseren, og så bestemmer de overlappende regler, hvilket typografiark der træder i kraft. Hvordan virker det? Browseren tildeler en vægtningsfaktor til hver regel. Ved fortolkning af hvert mærke gennemgår programmet alle reglerne for dette mærke og sorterer dem efter værdien af ​​vægtningskoefficienten. Den mest "vægtige" regel vinder. Følgende generelle retningslinjer findes for at løse konflikter mellem typografiark: Forrang for typografiarktyper i dokumentet (faldende): aktuel stilindstilling (inline), indlejring, sammenkædning. Du kan også ændre vægten af ​​en regel ved at bruge det vigtige nøgleord. I det følgende eksempel er værdien af ​​den røde egenskab col Værdien eller og sans-serif for egenskaben font-family er markeret med dette funktionsord, og seeren bør derfor ikke tilsidesætte dem. Men hvis to sådanne regler kommer i konflikt, løses konflikten efter de ovenfor anførte principper. H1 (farve: rød ! vigtig skrifttype-vægt: fed skrifttype-familie: sans-serif ! vigtigt) En klasse er en definition af flere stilarter af et element, som hver kan bruges på det rigtige sted på siden. For eksempel kan du definere tre variationer af H1-overskriftsstilen. At definere variationer svarer til at specificere en stil, kun et vilkårligt klassenavn føjes til tagnavnet, adskilt af en prik: H1 blå (farve: blå) H1 .rød (farve: rød) H1 .sort (farve: sort) Inkluder nu tagget i dokumentet , kan du angive en specifik stil i den ved hjælp af CLASS-attributten: Rød overskrift

CSS (Cascading Style Sheets) eller cascading style sheets, bruges til at beskrive udseendet af et dokument skrevet i et opmærkningssprog. CSS-stile bruges typisk til at skabe og style elementer på websider og brugergrænseflader skrevet i HTML og XHTML, men kan også anvendes på enhver form for XML-dokument, inklusive XML, SVG og XUL.

Cascading style sheets beskriver regler for formatering af elementer ved hjælp af egenskaber og de tilladte værdier for disse egenskaber. For hvert element kan du bruge et begrænset sæt egenskaber; andre egenskaber vil ikke have nogen effekt på det.

En stilerklæring består af to dele: websideelementet − vælger, og formateringskommandoer - annonceblok. Vælgeren fortæller browseren, hvilket element der skal formateres, og erklæringsblokken (koden i krøllede klammer) viser formateringskommandoerne - egenskaber og deres værdier.


Ris. 1. CSS stil erklæring struktur

Typer af cascading style sheets og deres detaljer

1. Typer af typografiark

1.1. Eksternt stilark

Eksternt stilark repræsenterer tekstfil med .css-udvidelsen, som indeholder et sæt CSS-stile til elementer. Filen oprettes i en kodeeditor, ligesom en HTML-side. Filen kan kun indeholde typografier uden HTML-markering. Et eksternt typografiark er forbundet til en webside ved hjælp af et tag , placeret inde i sektionen . Disse stilarter fungerer for alle sider på webstedet.

Du kan vedhæfte flere typografiark til hver webside ved at tilføje flere tags i rækkefølge , der angiver formålet med dette typografiark i medietag-attributten. rel="stylesheet" angiver typen af ​​link (link til et typografiark).

Type="text/css"-attributten er ikke påkrævet af HTML5-standarden, så den kan udelades. Hvis attributten mangler, er standardværdien type="text/css" .

1.2. Interne stilarter

Interne stilarter indlejret i et afsnit HTML-dokument og er defineret inde i tagget. Interne stilarter har forrang over eksterne, men er ringere end inline-stile (specificeret via stilattributten).

...

1.3. Indbyggede stilarter

Når vi skriver inline stilarter, skriver vi CSS-koden ind i HTML-filen direkte inde i element-tagget ved hjælp af style-attributten:

Vær opmærksom på denne tekst.

Sådanne stilarter påvirker kun det element, de er indstillet til.

1.4. @importregel

@importregel Giver dig mulighed for at indlæse eksterne typografiark. For at @import-direktivet skal virke, skal det stå i typografiarket (eksternt eller internt) før alle andre regler:

@import-reglen bruges også til at inkludere webskrifttyper:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,kyrillisk);

2. Typer af vælgere

Vælgere repræsentere strukturen af ​​en webside. De hjælper med at skabe regler for formatering af websideelementer. Vælgere kan være elementer, deres klasser og identifikatorer, såvel som pseudo-klasser og pseudo-elementer.

2.1. Universal vælger

Matcher ethvert HTML-element. For eksempel vil * (margin: 0;) nulstilles marginer for alle webstedselementer. Vælgeren kan også bruges i kombination med en pseudo-klasse eller pseudo-element: *:after (CSS styles), *:checked (CSS styles) .

2.2. Elementvælger

Elementvælgere giver dig mulighed for at formatere alle elementer af denne type på alle sider på siden. For eksempel vil h1 (font-family: Lobster, cursive;) indstille den overordnede formateringsstil for alle h1-overskrifter.

2.3. Klassevælger

Klassevælgere giver dig mulighed for at angive stilarter for et eller flere elementer med samme navn klasse placeret i forskellige steder sider eller på forskellige sider websted. For at oprette en titel med overskriftsklassen skal du f.eks. tilføje klasseattributten med værdioverskriften til åbningstagget

og indstil stilen for den angivne klasse. Typografier oprettet ved hjælp af en klasse kan anvendes på andre elementer, ikke nødvendigvis af den type.

Brugsanvisning personlig computer

.headline (teksttransform: store bogstaver; farve: lyseblå; )

2.4. ID-vælger

ID-vælgeren giver dig mulighed for at formatere en specifikt element. Id'et skal være unikt og kan kun optræde én gang på én side.

#sidebar (bredde: 300px; float: venstre;)

2.5. Efterkommervælger

Efterkommervælgere anvender typografier på elementer i et containerelement. For eksempel vil ul li (tekst-transform: store bogstaver;) - vælge alle li-elementer, der er børn af alle ul-elementer.

Hvis du skal formatere efterkommere specifikt element, skal dette element gives en stilklasse:

s. først a (farve: grøn;) — denne stil vil gælde for alle links efterkommer af et afsnit med klasse først;

p .first a (farve: grøn;) - hvis du tilføjer et mellemrum, vil links placeret inde i ethvert .first class tag, der er et underordnet element af elementet, blive stylet

Først a (farve: grøn;) - denne stil vil blive anvendt på ethvert link, der er placeret inde i et andet element, udpeget af class.first .

2.6. Børnevælger

Et underordnet element er et direkte underordnet element af dets indeholdende element. Et element kan have flere børneelementer, og hvert element kan kun have én forælder. Børnevælgeren giver dig kun mulighed for at anvende typografier, hvis det underordnede element kommer umiddelbart efter det overordnede element, og der ikke er andre elementer mellem dem, det vil sige, at det underordnede element ikke er indlejret i noget andet.
For eksempel vil p > stærk vælge alle stærke elementer, der er børn af p-elementet.

2.7. Søstervælger

Søsterskab opstår mellem elementer, der deler en fælles forælder. Søskendevælgere giver dig mulighed for at vælge elementer fra en gruppe af elementer på samme niveau.

h1 + p - vil vælge alle første afsnit umiddelbart efter et tag

uden at påvirke de resterende afsnit;

h1 ~ p - vil vælge alle afsnit, der er søster til enhver h1-overskrift og umiddelbart efter den.

2.8. Attributvælger

Attributvælgere vælger elementer baseret på attributnavnet eller attributværdien:

[attribut] - alle elementer, der indeholder den specificerede attribut - alle elementer, for hvilke alt-attributten er specificeret;

selector[attribut] - elementer af denne type, der indeholder den specificerede attribut, img - kun billeder, for hvilke alt-attributten er specificeret;

selector[attribute="value"] - elementer af denne type, der indeholder den specificerede attribut med en specifik værdi, img - alle billeder, hvis titel indeholder ordet blomst;

selector[attribut~="værdi"] - elementer, der delvist indeholder givet værdi, for eksempel, hvis flere klasser er specificeret for et element adskilt af et mellemrum, p - afsnit, hvis klassenavn indeholder feature ;

selector[attribute|="value"] - elementer, hvis liste over attributværdier begynder med det angivne ord, p - afsnit, hvis klassenavn er feature eller begynder med feature ;

selector[attribute^="value"] - elementer, hvis attributværdi begynder med den angivne værdi, a - alle links, der starter med http:// ;

selector[attribut$="value"] - elementer, hvis attributværdi slutter med den angivne værdi, img - alle billeder i png-format;

selector[attribut*="værdi"] - elementer, hvis attributværdi indeholder det angivne ord hvor som helst, a - alle links, hvis navn indeholder bog .

2.9. Pseudo-klasse vælger

Pseudo-klasser er klasser, der faktisk ikke er knyttet til HTML-tags. De giver dig mulighed for at anvende CSS-regler på elementer, når en hændelse opstår eller adlyder en specifik regel. Pseudo-klasser karakteriserer elementer med følgende egenskaber:

:hover - ethvert element, som musemarkøren holdes over;

:fokus - interaktivt element, som blev tilgået ved hjælp af tastaturet eller aktiveret ved hjælp af musen;

:active - element, der blev aktiveret af brugeren;

:valid - formularfelter, hvis indhold er blevet kontrolleret i browseren for overensstemmelse med den angivne datatype;

:invalid — formularfelter, hvis indhold ikke matcher den angivne datatype;

:enabled - alle aktive formularfelter;

:disabled — blokerede formularfelter, dvs. i en inaktiv tilstand;

:in-range - formfelter, hvis værdier er i det angivne område;

:out-of-range - formularfelter, hvis værdier ikke er inden for det angivne interval;

:lang() - elementer med tekst på det angivne sprog;

:not(selector) - elementer, der ikke indeholder den angivne vælger - klasse, identifikator, navn eller formularfelttype - :not() ;

:target er et element med #-symbolet, der refereres til i dokumentet;

:checked — valgte (brugervalgte) formularelementer.

2.10. Strukturel pseudo-klasse vælger

Strukturelle pseudoklasser vælger underordnede elementer i henhold til parameteren angivet i parentes:

:nth-child(ulige) - ulige underordnede elementer;

:nth-child(even) - lige underordnede elementer;

:nth-child(3n) - hvert tredje element blandt børn;

:nth-child(3n+2) - vælger hvert tredje element, begyndende med det andet barn (+2) ;

:nth-child(n+2) - vælger alle elementer fra den anden;

:nth-child(3) - vælger det tredje underordnede element;

:nth-last-child() - på listen over underordnede elementer, vælger elementet med angivet sted, svarende til:nth-child() , men startende fra den sidste, i den modsatte retning;

:first-child - giver dig mulighed for kun at style det allerførste underordnede element i tagget;

:last-child - giver dig mulighed for at formatere det sidste underordnede element i tagget;

:only-child - vælger et element, der er det eneste underordnede element;

:empty - vælger elementer, der ikke har nogen børn;

:root - vælger det element, der er roden i dokumentet - html element.

2.11. Strukturel type pseudo-klasse vælger

Angiver en bestemt type underordnet tag:

:nth-of-type() - vælger elementer svarende til :nth-child() , men tager kun hensyn til elementets type;

:first-of-type - vælger det første barn af en given type;

:last-of-type - vælger sidste element af denne type;

:nth-last-of-type() - vælger et element given type i en liste over elementer i henhold til den angivne placering, startende fra slutningen;

:only-of-type - vælger det eneste element af den angivne type blandt de underordnede elementer i det overordnede element.

2.12. Pseudoelementvælger

Pseudo-elementer bruges til at tilføje indhold, som genereres ved hjælp af indholdsegenskaben:

:first-letter - vælger det første bogstav i hvert afsnit, gælder kun for blokelementer;

:first-line - vælger den første linje af elementtekst, gælder kun for blokelementer;

:before - indsætter genereret indhold før elementet;

:after - tilføjer genereret indhold efter elementet.

3. Vælgerkombination

For mere præcist at vælge elementer til formatering kan du bruge kombinationer af vælgere:

img:nth-of-type(even) - vil vælge alle lige-numrerede billeder, hvis alternative tekst indeholder ordet css .

4. Gruppering af vælgere

Den samme stil kan anvendes på flere elementer på samme tid. For at gøre dette skal du angive de nødvendige vælgere i venstre side af erklæringen, adskilt af kommaer:

H1, h2, p, span (farve: tomat; baggrund: hvid; )

5. Arv og kaskade

Arv og kaskade er to grundlæggende begreber i CSS, der er tæt beslægtede. Nedarvning er, hvor elementer arver egenskaber fra deres overordnede (det element, der indeholder dem). Kaskaden viser sig i hvordan forskellige typer typografiark anvendes på et dokument, og hvordan modstridende regler tilsidesætter hinanden.

5.1. Arv

Arv er den mekanisme, hvorved visse egenskaber overføres fra en forfader til dens efterkommere. CSS-specifikationen giver mulighed for nedarvning af egenskaber relateret til sidens tekstindhold, såsom farve, skrifttype, bogstavmellemrum, linjehøjde, listestil, tekstjustering, tekstindrykning, teksttransformering, synlighed, hvid -mellemrum og ord- mellemrum. I mange tilfælde er dette praktisk, fordi du ikke behøver at indstille skriftstørrelse og skriftfamilie for hvert element på websiden.

Egenskaber relateret til blokformatering nedarves ikke. Disse er baggrund, kant, display, flydende og klar, højde og bredde, margin, min-max-højde og -bredde, kontur, overløb, polstring, position, tekst-dekoration, vertikal-justering og z-indeks.

Tvangsarv

Ved hjælp af søgeord arv kan tvinge et element til at arve enhver egenskabsværdi af dets overordnede element. Dette virker selv for egenskaber, der ikke er nedarvet som standard.

Hvordan CSS-stile er indstillet og fungerer

1) Typografier kan nedarves fra det overordnede element (nedarvede egenskaber eller brug af arveværdien);

2) Typografier placeret i stilarket nedenfor tilsidesætter stilarter placeret i tabellen ovenfor;

3) Styles fra forskellige kilder kan anvendes på ét element. Du kan kontrollere, hvilke stilarter der anvendes i browserens udviklertilstand. For at gøre dette skal du klikke på elementet Højreklik musen og vælg "Se kode" (eller noget lignende). Den højre kolonne viser alle egenskaber, der er indstillet på dette element eller arvet fra et overordnet element, sammen med stilfilerne, hvori de er angivet, og serienummer kodelinjer.


Ris. 2. Udviklertilstand i Google browser Chrome

4) Når du definerer en stil, kan du bruge en hvilken som helst kombination af vælgere - en elementvælger, en elementpseudoklasse, en klasse eller en elementidentifikator.

div (border: 1px solid #eee;) #wrap (width: 500px;).box (float: left;).clear (clear: both;)

5.2. Kaskade

Cascading er en mekanisme, der styrer det endelige resultat i en situation, hvor forskellige CSS-regler anvendes på det samme element. Der er tre kriterier, der bestemmer rækkefølgen, som egenskaber anvendes i – den!vigtige regel, specificitet og rækkefølgen, som typografiark inkluderes i.

Regel!vigtigt

Vægten af ​​en regel kan angives ved hjælp af nøgleordet!important, som tilføjes umiddelbart efter egenskabsværdien, for eksempel span (font-weight: bold!important;) . Reglen skal placeres i slutningen af ​​erklæringen før den afsluttende parentes, uden mellemrum. En sådan meddelelse vil have forrang frem for alle andre regler. Denne regel giver dig mulighed for at annullere en egenskabsværdi og indstille en ny for et element fra en gruppe af elementer i det tilfælde, hvor der ikke er nogen direkte adgang til stilfilen.

Specificitet

For hver regel beregner browseren selektor specificitet, og hvis et element har modstridende ejendomserklæringer, tages der hensyn til den regel, der har mest specificitet. Specificitetsværdien har fire dele: 0, 0, 0, 0. Vælgerspecificiteten er defineret som følger:

for id tilføjes 0, 1, 0, 0;
for klasse 0 tilføjes 0, 1, 0;
for hvert element og pseudo-element tilføjes 0, 0, 0, 1;
for en inline-stil tilføjet direkte til et element - 1, 0, 0, 0 ;
En universel vælger har ingen specificitet.

H1 (farve: lyseblå;) /*specificitet 0, 0, 0, 1*/ em (farve: sølv;) /*specificitet 0, 0, 0, 1*/ h1 em (farve: guld;) /*specificitet: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (farve: blå;) /*specificitet: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (farve: grå;) /*specificitet 0, 0, 1, 0 */ #sidebar (farve: orange;) /*specificitet 0, 1, 0, 0*/ li#sidebar (farve: aqua;) /*specificitet: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Som følge heraf vil de regler, der er mere specifikke, blive anvendt på elementet. For eksempel, hvis et element har to specificiteter med værdierne 0, 0, 0, 2 og 0, 1, 0, 1, så vil den anden regel vinde.

Rækkefølge af forbundne borde

Du kan oprette flere eksterne typografiark og forbinde dem til én webside. Hvis i forskellige borde vil mødes forskellige betydninger egenskaber for et element, så vil reglen i stilarket, der er angivet nedenfor, blive anvendt på elementet.

Det ved nok alle HTML specificerer strukturen af ​​dokumentet, og CSS(Cascading Style Sheets, cascading style sheets) er ansvarlig for design af websiden, placering og udseende af elementer. Det sker, at HTML og CSS ikke bruges hver for sig. Enhver webside er i bund og grund en kombination af HTML-kode og CSS-kode. Uden grundlæggende kendskab til disse
teknologi, vil det ikke være muligt at layoute noget dokument kompetent. Mange af os har undersøgt disse teknologier mere detaljeret. Men personligt formåede jeg aldrig helt at "begribe" alle sandheder og CSS funktioner. Dernæst vil jeg forsøge at fremhæve det meste vigtige punkter ting du skal vide om CSS.

Hvad er Cascading Style Sheets?

Typografier er et sæt parametre, der styrer udseendet og placeringen af ​​elementer på en webside. Se på billederne nedenfor for at forstå forskellen:

Kildekoden til et sådant dokument ser sådan ud:

1 2 3 4 5 6 7 8 9 10 11 12 13

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns=> <hovedet > <meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / > <titel > Flexagon</titel> <link rel = "stylesheet" href = "style.ess" type = "text/css" / > </hoved> <krop > <h1 > Flexagoc</h1> <р>Flexagok er en papirfigur, der har tre eller flere sider. Først ser det ud til, at dette er umuligt, men husk Mobius-strimlen, den har kun én side, i modsætning til et ark papir, og er ikke desto mindre ægte. Flexagon er også ægte, hvilket er nemt at lave og lime derhjemme. Den ligner en tosidet sekskant, men bøj den på en speciel måde, og vi ser en tredje side. Det er nemt at sikre sig, at vi har med præcis tre sider at gøre, hvis vi maler dem i forskellige farver. Ved at bøje flexagonen vil vi observere alle dens overflader på skift.</p> </body> </html>

HTML-koden i sig selv har ikke undergået nogen ændringer, og den eneste tilføjelse er linjen. Hun henviser til ekstern fil med en beskrivelse af stilene under navnet style.css. Indholdet af denne fil er vist nedenfor:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

legeme( font-size: llpt; baggrundsfarve : #f0f0f0 ; /* Webside baggrundsfarve */ farve : #333 ; /* Brødtekstfarve */ } h1 ( farve: #a52 a2 a; /* Overskriftsfarve */ skriftstørrelse: 24pt; /* Skriftstørrelse i punkter */ skrifttype-familie: Georgia, Times, serif; /* Skrifttypefamilie */ font-weight: normal; /* Normal tekststil */ } p( tekst-align: retfærdiggøre; /* Breddejustering */ margin-venstre: bOrx; /* Venstre polstring i pixels */ margin-right : Yurh; /* Højre polstring i pixels */ border-left : lpx solid #999 ; border -bottom : lpx solid #999 ; polstring -venstre: Yurh; polstring -bund: 1Opx; }

I fil style.css alle designparametre for sådanne tags som, <krop >, Og<p>
Bemærk, at selve taggene er skrevet som normalt i HTML-koden. Da stylesheet-filen kan refereres fra ethvert webdokument, reducerer dette i sidste ende mængden af ​​duplikerede data. Og takket være adskillelsen af ​​kode og design øges fleksibiliteten til at administrere dokumenttypen og hastigheden på arbejdet på webstedet.

Stiltyper

Der er flere typer typografier, der kan anvendes sammen på et dokument. Disse er browserstil, forfatterstil og brugerstil.



Browser stil. Lignende stilarter bruges, når du bruger "ren" HTML.

Brugerstil. Dette er en stil, som en webstedsbruger kan aktivere gennem deres browserindstillinger. Denne stil har højere prioritet og tilsidesætter dokumentets originale design.

Hvis der er en konflikt ved ændring af stilen for det samme dokumentelement, så har brugerens stil højeste prioritet, efterfulgt af forfatterens stil og browserens stil.

Hvordan tilføjer man stilarter til en side?

Der er flere måder at tilføje CSS-stile til en side:



Relaterede stilarter

Ved brug af relaterede stilarter beskrivelsen af ​​vælgere og deres værdier er placeret i en separat fil, normalt med en css-udvidelse, og et tag bruges til at forbinde dokumentet med denne fil . Dette tag placeres i en beholder .

Du kan forbinde disse stilarter som følger:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> "http://www.w3.org/1999/xhtml">