CSS3: Handledning med alla grunder för nybörjare
I den här tutorialen kommer vi att presentera CSS3 till dig. CSS3 är den nya standarden för att definiera utformningen av en webbplats eller ett dokument. Förutom HTML är CSS den viktigaste grunden för webbutveckling.
CSS3 Tutorial: Krav
Innan du kan börja programmera CSS, behöver du en redaktör. Vi rekommenderar den gratis redigeraren Notepad ++, som endast är tillgänglig för Windows. Om du arbetar med Mac hittar du bra alternativ här. Du behöver också kunskap om HTML. Grunderna i HTML5 finns i ett annat praktiskt tips.
Tutorial: Struktur av CSS-kommandon
Först lär vi oss den grundläggande strukturen i CSS-kommandon.
- I grund och botten, när du bygger ett CSS-kommando, måste du fråga dig själv vem som ska ta vilket värde från en viss egenskap.
- Exempel: Alla
Rubriker bör ha värdet rött i teckensnittsfärgegenskapen.
- Syntaxen ser då ut så här: [element] {[egenskap]: [värde]; }
- I vårt exempel färgar vi rubriken så här: h1 {färg: röd; }
- Vilket antal egendomsvärden som par kan följa varandra i de lockiga parenteserna.
- Viktigt: Varje par måste avsluta med en semikolon.
CSS3 handledning: Bädda in CSS i HTML
Det finns tre sätt att bädda in CSS i HTML, men bara ett av dem är verkligen vettigt.
- Variant 1: Justering direkt i elementet med stilattributet. exempel:
rubrik
- Det gäller bara det här elementet. Även här kan flera egendomsvärden användas i följd.
- Variant 2: I början av HTML-filen i en tagg i dokumentet. Exempel: h1 {färg: röd; bakgrundsfärg: blå; }
- Variant 3: lägg ut till ett annat dokument. Skriv kommandona i en extern fil med tillägget .css. Du inkluderar sedan den här filen i HTML-huvudet.
- I nästan alla fall bör du använda variant 3. Detta är det enda sättet att använda designen i flera HTML-filer utan att behöva skriva samma kod flera gånger.
CSS3 handledning: Element, ID och klasser som väljare
Det första värdet före stag motsvarar alltid väljaren. Detta avgör vem följande ska tillämpas.
- Du kan helt enkelt använda en dag som väljare. Detta påverkar sedan alla delar av denna tagg. I exemplet ovan skulle varje h1-rubrik vara röd.
- Alternativt kan du använda ett ID för att se till att endast ett element kan användas. För att göra detta, lägg till attributet i HTML-elementet:
Min rubrik
- Referera sedan detta ID i CSS-arket med ett # framför väljaren: #myHeader {color: red; }
- Alternativt kan du tilldela klasser för att påverka vissa, men inte alla, av elementen:
Min rubrik
- I stället för ett #, använd en '.' I CSS före väljaren: .myH1Class {färg: röd; }
CSS-handledning: viktiga funktioner
Nedan är de viktigaste egenskaperna du behöver för att manipulera utseendet på element.
- färg: tilldela en typsnittsfärg. Många vanliga färger är fördefinierade, till exempel röd, svart, vit, gul, etc. Du kan ange enskilda färger som hexvärden: # B3D2FF
- bakgrundsfärg: Använd detta för att tilldela bakgrundsfärgen. Du kan använda samma färger som för färg.
- kant: Definiera en ram runt ett element. kant: svart 2px solid; skapar till exempel en svart ram.
- font-size: Ställ in fontstorlek. Relativa (em) eller punkt (pt) värden är vanliga här.
- bredd och höjd: Ange elementets bredd och höjd. Detta görs vanligen statiskt via pixlar (px) eller relativt till det maximala värdet i procent: div {bredd: 70%; höjd: 300px; }
- float: Använd vänster och höger för att ange om elementet ska vara vänster- eller högerriktat.
- stoppning: Ange stoppningen. Du kan till exempel placera text i en ruta.
- marginal: Liknar padding, förutom att du anger marginalen här. På så sätt kan du skapa ett mellanrum mellan två rutor.
CSS3 handledning: möjligheter med CSS3
Med CSS3 är det mindre ofta nödvändigt att skapa och integrera din egen grafik eftersom fler effekter kan skapas dynamiskt.
- opacitet: Med ett värde mellan 0 och 1 kan du enkelt bestämma elementens transparens.
- Färger kan nu anges i HSL-format. 'H' står för nyans (nyans), 'S' för mättnad (mättnad) och 'L' för ljushet: färg: hsl (300, 100%, 60%);
- box-skugga: Tilldela en skugga för ett område. box-skugga: 10px 10px 10px röd; skulle skapa en röd skugga till höger och nedan.
- border-radius: Skapa helt enkelt rundade hörn för ytor eller bilder.
Hur du ändrar HTML-linjeavståndet med CSS kan läsas i nästa praktiska tips.