HTML och CSS för nybörjare (9 / 10 steg)
Steg 9: Försköna sidan!
Nu kommer vi göra ändringar på webbplatsen som jag gjort tidigare.
< html >
< head >
< title > HTML och CSS < / title >
< style >
H1 {
färg: grå;
marginal till vänster: 400 pixlar;
font-family: Roboto;
}
p {
färg: blå;
font-family: Roboto;
marginal till vänster: 400 pixlar
}
UL {
List-style-type: cirkel;
stoppning: 20px;
}
Li {
färg: grön;
marginal till vänster: 400 pixlar;
}
< / stil >
< / head >
< body >
< h1 > HTML och CSS < / h1 >< b >< u >< p > Vad kan du göra med HTML? < /p >< /u >< /b >
< ul >
< li > designa webbsidor. < /li >
< li > skapa interaktiva innehåll. < /li >
< li > länk sidor för att göra en hel webbplats. < /li >
< /ul >
< br >
< b >< u >< p > Vad är CSS för, då? < /p >< /u >< /b >
< ul >
< li > att göra innehåll ser bättre. < /li >
< li > ändra färg, storlek, etc. för element. < /li >
< /ul >
< / body >
< / html >
Som ni kan se, kroppen koden är densamma, endast style-tagg har lagts till. Jag har lagt några egenskaper och värden för att göra sidan ser bättre ut. Jag kommer att förklara varje en efter en.
färg: grå;
Egenskapen color ändrar teckenfärgen för elementet h1 till grå.
marginal till vänster: 400 pixlar;
Egenskapen marginal-vänster definierar vänstermarginalen i ett element. Här är det 400 pixlar.
font-family: Roboto;
Egenskapen font-family anger teckensnittet för elementet. I det här fallet är det Roboto.
List-style-type: cirkel;
Den här egenskapen ändrar kula i en oordnad lista.
stoppning: 20px;
Egenskapen padding definierar utrymmet runt elementet. Här är det 20 pixlar.