CSS 基本 | css多個style
h1{margin:0;padding:20px0;color:#00539F;text-shadow:3px3px1pxblack;}Youmayhavenoticedtheresahorriblegapatthetopofthebody.Thathappensbecausebrowsersapplysomedefaultstylingtothe
(en-US)[1]element(amongothers),evenwhenyouhaventappliedanyCSSatall!Thatmightsoundlikeabadidea,butwewantevenanunstyledwebpagetohavebasicreadability.Togetridofthegapweoverrodethedefaultstylingbysettingmargin:0;.Nextup,wevesettheheadingstopandbottompaddingto20pixels,andmadetheheadingtextthesamecolorasthehtmlbackg...
h1 { margin: 0; padding: 20px 0; color: #00539F; text-shadow: 3px 3px 1px black; }You may have noticed theres a horrible gap at the top of the body. That happens because browsers apply some default styling to the <h1> (en-US)[1] element (among others), even when you havent applied any CSS at all! That might sound like a bad idea, but we want even an unstyled webpage to have basic readability. To get rid of the gap we overrode the default styling by setting margin: 0;.
Next up, weve set the headings top and bottom padding to 20 pixels, and made the heading text the same color as the html background color.
One rather interesting property weve used here is text-shadow, which applies a text shadow to the text content of the element. Its four values are as follows:
The first pixel value sets the horizontal offset of the shadow from the text — how far it moves across: a negative value should move it to the left. The second pixel value sets the vertical ...