Hur man utformar en sida med CSS?

Till exempel har denna sida ingen CSS. Jag har ingen CSS. Jag har heller ingen CSS. Men med CSS kan du skapa detta.

CSS (Cascading Style Sheets) är ett webbspråk som används i samarbete med HTML eller XHTML. Den används för att lägga till presentationseffekt och stil till webbsidor kodade i (X) HTML (hänvisar till både HTML och XHTML). CSS är ett ganska enkelt språk att lära sig och använda.

CSS kan skapa fantastiska stilar och effekter på webbsidor. Även om den här stilen är enkel om den kombineras med många andra kan vackra webbsidor skapas.

Innan du börjar

En CSS-stil består av tre viktiga delar.

Det är viktigt att du har tidigare HTML-kunskaper innan du lär dig CSS. En bra artikel för att lära dig grundläggande HTML är att skriva en enkel sida i html. Bra webbplatser är w3schools, codecademy och html tutorials.

Steg

1
Förstå anatomin i en CSS-stil. CSS är ett enkelt och enkelt språk. En CSS-stil består av tre viktiga delar. Ta det här CSS-kodavsnittet: p {color: red; font-size: 2em;}. Den här stilen gör alla stycken (data i <p> -taggar) röda och ökar teckenstorleken. De tre delarna kallas väljaren, deklarationsblocket och deklarationerna.
- Den väljare i vårt exempel är p före öppnandet stag. En väljare definierar vilken del av HTML som kommer att få stilen (i detta fall HTML-stycken).
- Den förklaringen blocket i vårt exempel är allt från öppningen stag till stängnings stag. Deklarationsblocket består av deklarationer för den stilen. En stil har bara ett deklarationsblock.
- Vårt exempel har faktiskt två deklarationer. De är färg: röda; och font-storlek: 2em;. Deklarationer berättar vad du vill göra med det element som definieras i stilens väljare. Du kan ha så många deklarationer som du vill i en stil.
2

Skapa ett formatmall med stilar för varje element på sidan du vill utforma.
3

Använd deklarationer. I en CSS-stil definierar deklarationer vilken del av elementet du vill utforma och hur det ska visas. Till exempel för att göra denna text röd är deklarationen färg: röd; (det här exemplet använder faktiskt HTML-typsnittstaggen eftersom guideredigeraren inte stöder en del av CSS som behövs). Se till att du avslutar deklarationer med semikolon.

Del 1 av 6: deklarationer

Deklarationer går in i deklarationsblocket för en viss stil.

1
Några vanliga förklaringar är:
- färg: ändrar teckensnittsfärgen så här. Möjliga värden: blå, röd eller en hex-kod.
- font-weight: ändrar teckensnitt till fetstil, kursiv osv. Möjliga värden: fet, kursiv.
- text-align: justerar text. Möjliga värden: höger, vänster, mitt.
- border: ändrar eller skapar en ram runt det valda elementet. Ett möjligt värde kan vara kantlinje: 1 pixlar fast rött. Detta skapar en ram med 1 pixel i storlek som är solid och röd i färg.
- margin: detta skapar en marginal runt det valda elementet. Ett möjligt värde är margin-left: 5px. Detta skapar lägger till fem pixlar av tomt utrymme till toppen av elementet.
- bakgrundsfärg: ändrar bakgrunden. Möjliga värden: röd, svart och hex-kod.
2

Observera att detta bara är mycket enkla deklarationer. Många webbplatser använder bland annat mer komplexa deklarationer för positionering.

Del 2 av 6: stilark

1
Skapa stilark. Style Sheets består av många stilar tillsammans. Det finns tre typer av stilark:
- Externa stilark är textfiler som sparas med förlängningen.css. De är länkade till ett HTML-dokument med taggen <link>.
- Interna formatmallar är stilar definierade i taggen <skript>. De skapas i HTML-dokumentet.
- Inbyggda stilar är stilar som deklareras i taggen de gäller för. Till exempel är <p style = "color: red"> en inbyggd stil som deklareras i taggen den gäller för.
2

Tänk på att många rekommenderar att du använder externa stilark. Även om detta är en bra praxis är det lättare att använda interna stilark när du lär dig CSS. Det rekommenderas inte att du använder inline-stilar.

Del 3 av 6: Använda externa och interna formatmallar

1

För att länka till ett externt stilark, lägg till <link rel = "stylesheet" href = "LmNzcw ==" />. Den här taggen används i dokumentets huvud. När du länkar till ett stilark används det på hela sidan. Attributet href definierar filens plats och namn på ditt stilark. Alla externa formatmallar måste sparas med tillägget.css och skapas i en textredigerare som anteckningsblock.
2

För att skapa ett internt stilark, inkludera <style type = "text / css"> formatmallar här </script>. Alla stilar går mellan de två skripttaggarna. Till exempel här är en enkel sida som använder interna stilar för att göra alla stycken gröna.

Del 4 av 6: css och div-taggen

1

CSS är ett kraftfullt verktyg för att placera element på skärmen. Det kan använda stilar och div-taggen för att skapa sidofält och layouter med flera kolumner. Till exempel har denna sida ingen CSS.

Jag har ingen CSS

Jag har heller ingen CSS

Men med CSS kan du skapa detta:

Nu har jag CSS

Skapa ett formatmall med stilar för varje element på sidan du vill utforma.

Jag har också CSS nu

1

Observera att även om detta är en mycket grundläggande förändring kan den kopplas med mer CSS och HTML för att skapa en vacker layout med två kolumner.

Del 5 av 6: kommentarer

I en CSS-stil definierar deklarationer vilken del av elementet du vill utforma och hur det ska visas.

CSS-kommentarer ser ut så här: / * Kommentar * /. Det är en bra idé att inkludera kommentarer i din kod för att förbättra läsbarheten.

Del 6 av 6: sätta ihop allt

1

Ett färdigt internt CSS-stilark tillsammans med ett HTML-dokument skulle se ut så här:
2

Detta formatmall skapar en marginal på 15 pixlar till vänster om alla stycken. Sedan lägger den till en 5 pixel kant till vänster om styckena. Slutligen blir det mörkblå. Sammantaget ser den här sidan ut så här:

Jag är ett stycke. Med CSS får du en gräns till vänster såväl som en färgförändring.

Tips

Använd om möjligt kommentarer för att öka läsbarheten.
Gå ut och lär dig mer CSS! Den här artikeln låtsas inte att den lärde dig allt som finns att veta.
Börja med väljare på toppnivå
Tillämpa parametrarna för universell stil
Skriv alla regler för varje väljare på samma plats
Gruppera väljarna med samma parametrar och betydelser
Inkludera alltid ett semikolon i slutet av en deklaration.

Saker du behöver

En textredigerare som Anteckningar.
En webbläsare.
En dator.

Läs också: Hur blockerar du en avsändare via e-postadress i Hotmail?