Att göra en hemsida om dig med Visual Studio (HTML, CSS, JQUERY) (4 / 8 steg)
Steg 4: Lägga till lite stil
CSS står för Cascading Style Sheets. Och används för att ge din hemsida lite mer stil.
Några saker om syntaxen för css. Jag ska visa dig en liten kod behållare av css:
ingående {bakgrundsfärg: röd;
stoppning: 12px;
font-size: 18px;
}
input innebär att vi lägger till denna stil till varje element med etiketten ingång. Sedan innanför klammerparenteserna definierar vi lite saker som bakgrund och kantlinje kan du också definiera vilket teckensnitt o användning.
Så nu ska vi lägga till css till vår sida. Vi gör detta genom att lägga till följande kod inuti de Taggar vi skapade i början av steg 3.
kroppen {text-align: center;
bakgrund: url ("http://bit.ly/19naIXk");
färg: vit;
font-family: Helvetica;
bakgrund-storlek: täcka;
bakgrund-position: center center;
bakgrund-repeat: Upprepa inte;
bakgrund-attachment: fixed;
}
p {
font-size: 24px;
}
ingående {
gränsen: 0;
stoppning: 12px;
font-size: 18px;
}
ingående [typ = "Skicka"] {
bakgrund: Lime;
färg: svart;
}
Ersätt url efter bakgrunden med din egen url.
Detta är hur koden ska se ut:
<! DOCTYPE html >
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< avdelning > A hemsida om mig! < / title >
< style >
kroppen {
text-align: center;
bakgrund: url ("http://bit.ly/19naIXk");
färg: vit;
font-family: Helvetica;
bakgrund-storlek: täcka;
bakgrund-position: center center;
bakgrund-repeat: Upprepa inte;
bakgrund-attachment: fixed;
}
p {
font-size: 24px;
}
ingående {
gränsen: 0;
stoppning: 12px;
font-size: 18px;
}
ingående [typ = "Skicka"] {
bakgrund: Lime;
färg: svart;
}
< / stil >
< / head >
< body >
< img src = "http://bit.ly/KYvaEA" width = "250" höjd = "250" / >
< p > Hej, mitt namn är... och jag gillar... och... < /p >
< input type = "email" platshållare = "Email" >
< input type = "Skicka" >
< / body >
< / html >
Bra gjort! Det är gjort!
Att se hur vacker du är hemsida ser ut. Du måste hitta en grön play-knappen och klicka på pilen bredvid den. Välj sedan Page inspektör att visa det i visual studio annars välja en webbläsare som du vill ha. Efter att bara hit den gröna play-knappen!