Inbäddad - koden är "inbäddad" i dokumentets titel. Det påverkar bara sidan den är "inbäddad" i.

1

Externt - Stilmallar skapas i ett separat dokument. De länkar sedan till andra webbdokument och påverkar alla associerade dokument.

1

Det finns 15 bästa CSS-tekniker.

Håll ordning

Att följa en viss order är kostsamt, men det har en positiv effekt. Detta är särskilt viktigt när du använder CSS. Istället för att skriva ner koderna i den kaotiska ordning de kommer att tänka på, är det mycket bättre att organisera lagringen av koder enligt ett visst mönster.

Du bör börja med de mest allmänna och mindre viktiga punkterna, gå vidare till viktigare. Detta tillvägagångssätt skapar en logisk struktur för att underlätta framtida CSS-redigeringar. Att använda enkla diagram och strukturer är användbart inte bara för framtida redigeringar, utan också för framtida utvecklare.

Undvik inline CSS

Även om inline CSS är användbart för vissa användningsområden, bör det undvikas av någon specifik anledning. En av huvudorsakerna är att inline-stilar inte skiljer innehåll från konstruktion. Detta försvårar design och utveckling. En annan anledning är att denna stil är svårare att underhålla.

Om du behöver göra ändringar i den inline stilkoden måste dessa ändringar göras på varje sida som innehåller den. Slutligen är inline CSS-stilar inte lätta att förstå och ökar sidstorleken.

Separera innehåll från design

En av de främsta anledningarna till att använda CSS är att hålla koden och HTML åtskilda - detta gör det lättare för layoutdesignern att hitta och underhålla dem. Detta är ett bra beslut, särskilt med tanke på att webbdesignern inte nödvändigtvis är innehållsutvecklaren heller.

Datum, titel och signatur

När det gäller att ta reda på något om CSS kan kommentarerna högst upp i koden vara riktigt användbara. Speciellt när man designar teman och mallar för andra. Det är också bra att lägga till en färgprovskod i början av koden. Detta kommer att spara massor av tid för redigering och ändringar. Du behöver inte ta reda på färgkoden. Allt du behöver göra är att kopiera det.

1 / * ====== 2 Onextrapixel Team 3 Copyright 2011 OXP 4 Skrivet för - www.onextrapixel.com 5 6 swatch-färger 7 ------------- 8 13437a - mörkblå 9 1d74be - mellanblå 10 e1e1e1 - ljusgrå 11 a3a4a4 - mellangrå 12 8a8a8a - grå 13 ======== * /

Spara ett bibliotek med mallar

Om en struktur används mycket, varför inte behålla en kopia av den? Detta skulle göra det möjligt att i en liknande situation inte börja om från början nästa gång. För att göra detta, extrahera eventuella koder som inte är vanliga och spara filen som en CSS-mall för framtida referens.

Använd CSS-genvägar

Använd CSS-genvägar för att ladda din stilmall snabbt och spara tid. Detta bra CSS-kodningstrick kommer att hålla din stilmall snygg och begriplig.

Istället för det här:

Du bör skriva detta:

1 #crayon (2 marginaler: 8px 7px 0px 5px; // topp-, höger-, botten- och vänstervärden respektive. 3)

Använd användbara namntekniker

Som nämnts tidigare är en av de bästa anledningarna till att använda CSS möjligheten att separera stilar från innehåll. CSS gör det verkligen enkelt att designa om en webbplats utan att behöva röra HTML. Om elementen är namngivna så att det kommer att vara svårt att särskilja dem i framtiden, kommer detta att skapa några svårigheter och ytterligare slöseri med tid. Det är nödvändigt att använda enkel, men samtidigt förståelig namngivning av motsvarande element. Ange inte i något fall kolumnen som "pelare-vänster", eftersom du i efterföljande operationer kan förväxla var den del av koden finns, som är ansvarig för innehållet och var direkt för layouten.

Använd bindestreck istället för understreck

Med äldre webbläsare kraschar CSS eller fungerar inte alls om understreck används. Att använda ett bindestreck istället för ett understreck resulterar i bättre kompatibilitet med tidigare versioner av webbläsare och färre krascher.

Upprepa dig inte

Ett av de bästa CSS-tricken för att göra ditt liv enklare är att använda kort notation där det är möjligt. Leta alltid efter sätt att gruppera liknande element som kan använda samma teckenstorlek, marginaler och färg. Ha en klar uppfattning om hur CSS kommer att tolka dessa genvägar. Ordningen för att se den liknar rörelsen av en timvisare från 12 - upp, höger, ner och sedan vänster.

Mer effektivt än så här:

1 h1 (2 marginal: 1em 0 2em 0; 3 font-size: 1em; 4 färg: # 222; 5) 6 7 h2 (8 marginal: 1em 0 2em 0; 9 font-size: 1em; 10 färg: # 222 ; elva)

Undvik att använda riktigt stora bilder

Om du använder stora bilder som bakgrund på en webbsida ökar sidans laddningstid. Det är en bra idé att använda små bilder, och om möjligt lägga till dem med CSS-funktioner där det behövs.

1 brödtext (2 bakgrunder: url (bg.jpg) repeat-x; 3)

Bli av med kodfryllor

Att använda några av tipsen ovan hjälper verkligen till att minska storleken på din stilmall. Detta kommer att resultera i snabbare sidladdning. Dessutom är en mindre stilmall lättare att underhålla och uppdatera. Ta alltid bort onödiga koder och slå samman där det är möjligt.

Ett annat knep för att krympa tabellen är att inte definiera noll som en måttenhet. Om marginalen ska sättas till 0, behöver du inte skriva 0px eller 0cm. CSS kommer att förstå att 0 är noll, oavsett enhet.

CSS-validering

Om fel uppstår under kompileringen av koden, är det nödvändigt att spendera tid på att leta efter och fixa dem. För att spara tid, använd W3C CSS Validator för att hjälpa dig upptäcka några av de vanligaste CSS-felen. Det är gratis och väldigt bekvämt.

Använd funktionen Återställ CSS

Genom att använda Reset CSS kommer det att vara möjligt att undvika inkonsekvens mellan olika webbläsare. I praktiken är det viktigt att ta bort fält som är inkompatibla, samt andra inkompatibiliteter av attribut, vilket leder till att webbsidor ser olika ut på olika webbläsare. Funktionen Återställ CSS hjälper dig att uppnå sidkonsistens i olika webbläsare.

html, body, iv, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, akronym, adress, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, liten, strejk, stark, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, etikett, legend, tabell, bildtext, tbody, tfoot, thead, tr, th, td (marginal: 0; utfyllnad: 0; kant: 0; kontur: 0; font-weight: herit; font-style: herit; font-size: 100%; font-family : ärva; vertikal-justera: baslinje;) 2: fokus (kontur: 0;) 3 body (linjehöjd: 1; färg: # 000; bakgrund: #fff;) 4 ol, ul (liststil: ingen; ) 5 tabeller (border-kollaps: separat; kant-mellanrum: 0;) 6 caption, th, td (text-align: left; font-weight: normal;)

Skriv först för Gecko och anpassa sedan för IE och Webkit

Vanligtvis, om CSS fungerar korrekt för Gecko-webbläsare (Netscape, Firefox Mozilla, Camino, Flock), är det mycket troligt att det kommer att fungera bra med andra webbläsare - IE och Webkit (Safari, Chrome). För att spara tid och frustration när du försöker reda ut kodningsfel är det bäst att börja med att skriva CSS för Gecko-webbläsare.

Var försiktig

Det är en god vana att hålla webbläsarspecifika stilmallar åtskilda från varandra, inklusive JavaScript, villkorliga kommentarer och koder på serversidan som krävs för att göra det.
Den här metoden är utmärkt för att undvika hackerattacker på huvudformatmallarna.
Det är absolut nödvändigt att hålla din CSS hanterbar också.

Slutsats

Det finns många fördelar med att använda CSS. Det gör inte bara att sidor laddas snabbt, utan att använda de 15 bästa CSS-teknikerna ovan gör det inte bara ditt liv enklare, utan också designen och redigeringen av teman och mallar. Att använda CSS är fördelaktigt när du arbetar med Google. Sökmotorn ger mer vikt åt innehållet överst i HTML-dokumentet. När sökmotorspindlar genomsöker HTML-koden på en webbplats genomsöker de innehållet som kommer först. Med hjälp av CSS är det enkelt att skapa en layout där innehållet kommer först och sedan följer resten av sidornas källkod.

CSS (Cascading Style Sheets), eller Cascading Style Sheets används för att beskriva utseendet på ett markup-språkdokument. Vanligtvis används CSS-stilar för att skapa och utforma webbsideselement och användargränssnitt skrivna i HTML och XHTML, men kan också appliceras på alla typer av XML-dokument, inklusive XML, SVG och XUL.

Kaskadformatmallar beskriver regler för formatering av element med hjälp av egenskaper och de tillåtna värdena för dessa egenskaper. För varje element kan du använda en begränsad uppsättning egenskaper, resten av egenskaperna kommer inte att ha någon effekt på den.

En stildeklaration består av två delar: webbsideselementet - väljare, och formateringskommandona är - annonsblock... Väljaren talar om för webbläsaren vilket element som ska formateras, och deklarationsblocket (koden i klammerparenteser) listar formateringskommandona - egenskaper och deras värden.

Typer av kaskadformatmallar och deras detaljer

1. Typer av stilmallar

1.1. Extern stilmall

Extern stilmallär en textfil med filtillägget .css som innehåller en uppsättning CSS-elementstilar. Filen skapas i en kodredigerare, precis som en HTML-sida. Filen kan endast innehålla stilar, ingen HTML-uppmärkning. En extern stilmall kopplas till en webbsida med hjälp av taggen placerad inne i sektionen ... Dessa stilar fungerar för alla sidor på webbplatsen.

Flera stilmallar kan bifogas till varje webbsida genom att lägga till flera taggar i följd genom att ange syftet med denna stilmall i attributet media tag. rel = "stylesheet" anger typen av länk (stilmallslänk).

Attributet type = "text / css" är valfritt i HTML5-standarden och kan utelämnas. Om attributet saknas är standardtyp = "text / css".

1.2. Interna stilar

Interna stilar inbäddad i avsnittet HTML-dokument och definieras inuti taggen... Inre stilar har företräde framför externa stilar, men är sämre än inline-stilar (specificeras med stilattributet).

...

1.3. Inline stilar

När vi skriver inline stilar, skriver vi CSS-koden till en HTML-fil, direkt inuti elementtaggen med stilattributet:

Var uppmärksam på denna text.

Dessa stilar påverkar bara det element som de är specificerade för.

1.4. @Importregel

@Importregel tillåter inläsning av externa stilmallar. För att @import-direktivet ska fungera måste det visas i stilmallen (extern eller intern) före alla andra regler:

@import-regeln används också för att inkludera webbteckensnitt:

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

2. Typer av väljare

Väljare representerar webbsidans struktur. De används för att skapa regler för formatering av element på en webbsida. Väljare kan vara element, deras klasser och identifierare, såväl som pseudoklasser och pseudoelement.

2.1. Universalväljare

Matchar alla HTML-element. Till exempel, * (marginal: 0;) nollställer marginalerna för alla webbplatselement. Väljaren kan också användas i kombination med pseudoklassen eller pseudoelementet: *: efter (CSS-stilar), *: markerat (CSS-stilar).

2.2. Elementväljare

Med elementväljare kan du formatera alla element av en viss typ på alla sidor på webbplatsen. Till exempel kommer h1 (font-family: Lobster, cursive;) att ställa in den allmänna formateringsstilen för alla h1-rubriker.

2.3. Klassväljare

Klassväljare låter dig ställa in stilar för ett eller flera element med samma klassnamn som finns på olika platser på sidan eller på olika sidor på webbplatsen. Om du till exempel vill skapa en rubrik med rubrikklassen lägger du till ett klassattribut med värderubriken i öppningstaggen

och ställ in stilen för den angivna klassen. Stilar skapade med klassen kan appliceras på andra element, inte nödvändigtvis av den här typen.

Instruktioner för användning av en persondator

2.4. Identifieringsväljare

ID-väljaren låter dig formatera ett specifikt föremål. ID:t måste vara unikt och kan bara visas en gång på en sida.

2.5. Ättlingväljare

Underordnade väljare tillämpar stilar på element i ett behållarelement. Till exempel kommer ul li (text-transform: versaler;) att välja alla li-element som är avkomlingar till alla ul-element.

Om du vill formatera ättlingar till ett specifikt element måste du ställa in en stilklass för det elementet:

p.first a (färg: grön;) - denna stil kommer att tillämpas på alla länkar, ättlingar till stycket med den första klassen;

p .first a (färg: grön;) - om du lägger till ett mellanslag kommer länkar som finns inuti valfri klasstagg .first, som är en underordnad av elementet, att formateras

Först a (färg: grön;) - denna stil kommer att tillämpas på alla länkar som finns inuti ett annat element som utsetts av .first class.

2.6. Barnväljare

Ett underordnat element är ett direkt underordnat element till dess innehållande element. Ett element kan ha flera underordnade, och varje element kan bara ha en förälder. Den underordnade väljaren låter dig tillämpa stilar endast om det underordnade elementet omedelbart följer efter det överordnade elementet och det inte finns några andra element mellan dem, det vill säga det underordnade elementet är inte längre kapslat.
Till exempel kommer p> strong att välja alla starka element som är underordnade av p-elementet.

2.7. Systerväljare

En systerrelation uppstår mellan element med en gemensam förälder. Syskonväljare låter dig välja föremål från en grupp syskon.

h1 + p - kommer att välja alla första stycken omedelbart efter en tagg

utan att påverka resten av styckena;

h1 ~ p - markerar alla stycken som är syskon till någon h1-rubrik och omedelbart efter den.

2.8. Attributväljare

Attributväljare väljer element baserat på ett attributnamn eller attributvärde:

[attribut] - alla element som innehåller det specificerade attributet - alla element för vilka alt-attributet är satt;

selector [attribut] - element av denna typ som innehåller det angivna attributet, img - endast bilder för vilka alt-attributet är satt;

selector [attribut = "värde"] - element av denna typ som innehåller det angivna attributet med ett specifikt värde, img - alla bilder vars namn innehåller ordet blomma;

selector [attribut ~ = "värde"] - element som delvis innehåller detta värde, till exempel om flera klasser specificeras för ett element separerade med ett mellanslag, p - stycken vars klassnamn innehåller funktion;

selector [attribut | = "värde"] - element vars lista med attributvärden börjar med det angivna ordet, p - stycken vars klassnamn är funktion eller börjar med funktion;

selector [attribut ^ = "värde"] - element vars attributvärde börjar med det angivna värdet, a - alla länkar som börjar med http: //;

selector [attribut $ = "value"] - element vars attributvärde slutar med det angivna värdet, img - alla bilder i png-format;

selector [attribut * = "värde"] - element vars attributvärde innehåller det angivna ordet var som helst, a - alla länkar vars namn innehåller bok.

2.9. Pseudoklassväljare

Pseudoklasser är klasser som faktiskt inte är kopplade till HTML-taggar. De låter dig tillämpa CSS-regler på element när en händelse utlöses eller följer en specifik regel. Pseudoklasser karakteriserar element med följande egenskaper:

: hover - vilket element som helst som muspekaren svävar över;

: fokus - ett interaktivt element som har navigerats till med tangentbordet eller aktiverats med musen;

: aktiv - ett element som aktiverades av användaren;

: giltiga - formulärfält vars innehåll har kontrollerats i webbläsaren för överensstämmelse med den angivna datatypen;

: invalid - formulärfält vars innehåll inte matchar den angivna datatypen;

: aktiverad - alla aktiva formulärfält;

: disabled - disabled form fields, d.v.s. i ett inaktivt tillstånd;

: inom intervall - formulärfält vars värden ligger inom det angivna intervallet;

: utanför intervallet - formulärfält vars värden inte ingår i det angivna intervallet;

: lang () - element med text på det angivna språket;

: not (väljare) - element som inte innehåller den angivna väljaren - klass, identifierare, namn eller typ av formulärfältet -: inte ();

: target - elementet med #-symbolen som refereras till i dokumentet;

: markerad - valda (valda av användaren) formulärelement.

2.10. Strukturell pseudoklassväljare

Strukturella pseudoklasser väljer barn enligt parametern som anges inom parentes:

: nth-child (udda) - udda barn;

: n:te-barn (jämnt) - även barn;

: nth-child (3n) - vart tredje element bland barn;

: nth-child (3n + 2) - väljer vart tredje element som börjar med det andra barnet (+2);

: nth-child (n + 2) - väljer alla element med början från det andra;

: nth-child (3) - väljer det tredje barnet;

: nth-last-child () - i listan över barn väljer elementet med den angivna platsen, liknande: nth-child (), men med början från den sista, i motsatt riktning;

: first-child - låter dig stila endast det allra första barnet av taggen;

: last-child - låter dig formatera det sista underordnade av taggen;

: enda barn - väljer elementet som är det enda barnet;

: empty - väljer element som inte har några underordnade;

: root - väljer elementet som är roten till dokumentet - html-elementet.

2.11. Väljare av pseudoklasser av strukturtyp

Indikerar en specifik typ av underordnad tagg:

: nth-of-type () - väljer element i analogi med: nth-child (), samtidigt som man endast tar hänsyn till elementtypen;

: först av typen - väljer det första barnet av den givna typen;

: last-of-type - väljer det sista elementet av den givna typen;

: nth-last-of-type () - väljer ett element av den givna typen i listan över element enligt den angivna platsen, med början från slutet;

: endast-av-typ - Väljer det enda elementet av den angivna typen bland underordnade av det överordnade elementet.

2.12. Pseudoelementväljare

Pseudoelement används för att lägga till innehåll som genereras med hjälp av innehållsegenskapen:

: första bokstaven - väljer den första bokstaven i varje stycke, gäller endast blockelement;

: första raden - väljer den första raden i elementets text, gäller endast för blockelement;

: före - infogar genererat innehåll före elementet;

: efter - lägger till genererat innehåll efter elementet.

3. Kombination av väljare

För ett mer exakt urval av element för formatering kan du använda kombinationer av väljare:

img: nth-of-type (even) - kommer att välja alla jämna bilder, vars alternativa text innehåller ordet css.

4. Gruppering av väljare

Samma stil kan tillämpas på flera element samtidigt. För att göra detta, på vänster sida av deklarationen, lista de nödvändiga väljare separerade med kommatecken:

H1, h2, p, span (färg: tomat; bakgrund: vit;)

5. Arv och kaskad

Arv och kaskad är två grundläggande begrepp i CSS som är nära besläktade. Arv innebär att element ärver egenskaper från sin förälder (elementet som innehåller dem). Kaskaden visar sig i hur olika typer av stilmallar appliceras på ett dokument, och hur motstridiga regler åsidosätter varandra.

5.1. Arv

Arvär den mekanism genom vilken vissa egenskaper överförs från en förfader till dess ättlingar. CSS-specifikationen tillhandahåller arv av egenskaper relaterade till textinnehållet på en sida, såsom färg, teckensnitt, bokstavsmellanrum, radhöjd, liststil, textjustering, textindrag, textomvandling, synlighet, vit -mellanrum och ord-mellanrum. Detta är praktiskt i många fall eftersom du inte behöver ställa in teckenstorlek och teckensnittsfamilj för varje element på webbsidan.

Blockformateringsegenskaper ärvs inte. Dessa är bakgrund, kantlinje, display, flytande och klar, höjd och bredd, marginal, min-max-höjd och -bredd, kontur, översvämning, utfyllnad, position, textdekoration, vertikaljustering och z-index.

Tvångsarv

Genom att använda nyckelordet ärva kan du tvinga ett element att ärva valfritt egenskapsvärde från dess överordnade element. Detta fungerar även för egenskaper som inte ärvs som standard.

Hur CSS-stilar ställs in och fungerar

1) Stilar kan ärvas från det överordnade elementet (ärvda egenskaper eller genom att använda ärvt värde);

2) Stilar som finns i stilmallen nedan åsidosätter stilarna i tabellen ovan;

3) Ett element kan stylas från olika källor. Du kan kontrollera vilka stilar som används i webbläsarens utvecklarläge. För att göra detta, över elementet, måste du högerklicka och välja "Visa kod" (eller något liknande). Den högra kolumnen kommer att lista alla egenskaper som är inställda för detta element eller ärvt från det överordnade elementet, såväl som stilfilerna i vilka de är specificerade och kodradens ordningsnummer.

4) När du definierar en stil kan du använda valfri kombination av väljare - elementväljare, elementpseudoklass, klass eller elementidentifierare.

5.2. Kaskad

CascadingÄr en mekanism som styr slutresultatet när olika CSS-regler tillämpas på samma element. Det finns tre kriterier som avgör i vilken ordning egenskaperna tillämpas - den! Viktiga regeln, specificiteten och i vilken ordning stilmallarna ingår.

Den viktiga regeln

Regelvikt kan ställas in med nyckelordet! Viktigt, som läggs till direkt efter egenskapsvärdet, till exempel span (font-weight: bold! Viktigt;). Regeln ska placeras i slutet av deklarationen, före den avslutande parentesen, utan mellanslag. Sådant tillkännagivande kommer att ha företräde framför alla andra regler. Denna regel låter dig åsidosätta egenskapsvärdet och ställa in ett nytt för ett element från en elementgrupp om det inte finns någon direkt åtkomst till filen med stilar.

Specificitet

För varje regel beräknar webbläsaren väljarspecificitet och om elementet har motstridiga egendomsdeklarationer, beaktas regeln med mest specificitet. Specificitetsvärdet har fyra delar: 0, 0, 0, 0. Specificiteten för en väljare bestäms enligt följande:

för id, lägg till 0, 1, 0, 0;
0, 0, 1, 0 läggs till för klass;
0, 0, 0, 1 läggs till för varje element och pseudoelement;
för inline stil läggs direkt till ett element - 1, 0, 0, 0;
den universella väljaren har ingen specificitet.

H1 (färg: ljusblå;) / * specificitet 0, 0, 0, 1 * / em (färg: silver;) / * specificitet 0, 0, 0, 1 * / h1 em (färg: guld;) / * specificitet: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2 * / div # main p.about (färg: blå;) / * specificitet: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2 * / .sidebar (färg: grå;) / * specificitet 0, 0, 1, 0 * / #sidebar (färg: orange;) / * specificitet 0, 1, 0, 0 * / li # sidofält (färg: aqua;) / * specificitet: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1 * /

Som ett resultat kommer dessa regler att tillämpas på elementet, vars specificitet är större. Till exempel, om ett föremål har två specificiteter med värden 0, 0, 0, 2 och 0, 1, 0, 1, så vinner den andra regeln.

Ordningen på de bifogade tabellerna

Du kan skapa flera externa stilmallar och koppla dem till en webbsida. Om olika tabeller innehåller olika egenskapsvärden för ett element, kommer regeln som finns i stilmallen i listan nedan att tillämpas på elementet.

Vi har släppt en ny bok, "Content Marketing on Social Media: How to Get Into the Heads of Subscribers and Fall in Love with Your Brand".

CSS är ett språk för att forma utseendet på ett dokument som skapats med ett märkningsspråk. CSS används ofta som ett verktyg för att beskriva webbsidor som tidigare skrivits i XHTML och.