Hur skapar jag ett länkat kaskadformat (CSS)?
Hur skär jag CSS-koden mellan de inledande och stängande taggarna?
Genom åren har webbdesign och utvecklingsstandarder förändrats. En av dessa förändringar är användningen av Cascading Style Sheets (CSS) för att kontrollera det totala utseendet på en webbplats. Genom att använda CSS i din webbdesign kan du som utvecklare göra omfattande ändringar på hela webbplatsen medan du bara ändrar en kodrad.
- 1Börja med att öppna en enkel textredigerare som anteckningsblock (i tillbehörsmappen i Windows-programmenyn).
- 2De första stiländringarna du kommer att påverka kommer att påverka hela webbsidan så att du börjar med att justera bakgrundsfärgen och textfärgen på hela sidan. Första typen av kropp {
- 3Försök nu ändra bakgrundsfärgen genom att skriva bakgrundsfärg: omedelbart följt av färgkoden och avsluta raden med ett semikolon (varje rad i en stilkod måste avslutas med ett semikolon). Färgkoden kan anges på flera sätt.
- Hexadecimal notation - en sexsiffrig alfanumerisk kod som visar de röda, gröna och blå värdena i den ordningen för den färgen. (dvs. # 000000 är svart, #FFFFFF är vitt, # FFFF00 är gult).
- Röd, grön, blå procent - använder ett procentvärde för att beteckna hur mycket av varje färg som representeras (dvs. rgb (100%, 100%, 0%) är gul och rgb (100%, 50%, 0%) är orange).
- Röda, gröna blå värden - denna teknik liknar procentandelen men värdet som används är från 0 till 128 (dvs. rgb (128128,128) är vitt och rgb (6464,64) är grått).
- Färgnamn - vissa färger kan anges som textvärde som svart, vitt, rött, blått, grönt.
- 4För att påverka textens färgfärg: följt av önskad färg. Använd någon av de tekniker som anges ovan för att ändra bakgrundsfärgen.
För att påverka textens färgfärg: följt av önskad färg. - 5Stäng body-taggen genom att skriva ett slut}
- 6I det här exemplet kommer vi att göra liknande ändringar av <h1> -taggen (rubrik 1) genom att nästa skriva h1 {
- 7Ändra teckensnittet som kommer att användas av webbläsaren för att återge all text som finns i denna tagg. Här kommer vi att använda verdana-teckensnittet som är ett av standardteckensnitt som är installerat med de flesta Windows-operativsystem. En bra tumregel är att lista två önskade typsnittstyper och sedan en typsnittsklass. Du skulle implementera detta genom att skriva font-family: verdana, arial, sans serif; Som vi har visat här kan du dock bara välja bara ett typsnitt.
- 8För att ändra storleken på texten skriver du font-size: följt av önskad storlek. Storleken kan definieras i pixlar och em s. För närvarande definierar du textstorleken till 22 pixlar.
- 9Ändra färgen på texten med samma metoder som definierats ovan för att påverka kroppsstilen. I det här exemplet gör vi texten grå genom att skriva hexadecimal färgkodfärg: #CCCCCC;
- 10Glöm inte att stänga definitionen av h1-stil genom att skriva}
- 11För att ändra stycketag börjar du med att skriva p {och göra ändringar som liknar de som gjorts i h1-stildefinitionen.
- 12När du är nöjd med dina stildefinitioner måste du spara filen i ett format som webbläsaren känner igen. I det här fallet kommer vi att spara filen som styles.css även om du faktiskt kan namnge filen som du valde så länge den slutar i.css (dvs. mystyle.css, myfile.css, sitestyle.css). För personer som använder Windows-anteckningsblock, se till att rullgardinsmenyn "Spara som typ" säger "Alla filer" eller ett extra.txt-filtillägg läggs till. I det här exemplet sparar vi också vår CSS i samma mapp som webbsidan vi arbetar med.
En av dessa förändringar är användningen av Cascading Style Sheets (CSS) för att kontrollera det totala utseendet på en webbplats. - 13Använd fortfarande din textredigerare och öppna html-filen där du vill länka CSS.
- 14Infoga följande kodrad någonstans mellan <head> -taggarna: '' '<link rel = "stylesheet" type = "text / css" href = "LmNzcw ==" media = "all">' ''
- link rel = "stylesheet" (Länkrelationen till dokumentet är ett formatmall)
- type = "text / css" - berättar webbläsaren vilken typ av dokument du länkar till.
- href = "styles.css" - sökvägen till platsen för stilarket.
- media = "all" - anger vilken typ av media som länktaggen hänvisar till.
- 15Uppdatera eller öppna din webbläsare för att se de ändringar du har gjort på din webbsida.
- När du sparar filen kom ihåg att skriva.css efter filnamnet och spara filtypen som "Alla filer".
- Indrag varje definition för att göra din kod lättare att läsa.
Frågor och svar
- Hur skär jag CSS-koden mellan de inledande och stängande taggarna?Markera koden och tryck sedan på Ctrl + X. I grund och botten valde du koden genom att markera och Ctrl + X är genväg för klippning.
