Share
I denna handledning kommer vi att bygga en bloggsida med hjälp av nästa generations tekniker från HTML 5 och CSS 3. Handledningen syftar till att visa hur vi ska bygga webbplatser när specifikationerna är färdiga och webbläsarens leverantörer har implementerat dem. Om du redan känner till HTML och CSS ska det vara lätt att följa med.
Innan vi börjar, överväga att använda en av våra HTML5-mallar eller CSS-teman för ditt nästa projekt, det vill säga om du behöver en snabb och professionell lösning. Eller du kan prova en av de erfarna utvecklarna på Envato Studio som kan hjälpa dig med ett brett spektrum av anpassade HTML5- och CSS-projekt.
Annars är det dags att gräva in i dessa tekniker.
HTML 5 är nästa större version av HTML. Det introducerar en massa nya element som gör våra sidor mer semantiska. Det gör det mycket lättare för sökmotorer och skärmsläsare att navigera på våra sidor och förbättra webbupplevelsen för alla. Dessutom kommer HTML 5 också att innehålla fina API för att teckna grafik på skärmen, lagra data offline, dra och släppa och mycket mer. Låt oss börja märka bloggens sida.
Innan vi börjar markera sidan ska vi få den övergripande strukturen rakt:
I HTML 5 finns det specifika taggar avsedda att markera upprubriken, navigeringen, sidofältet och sidfoten. Först, ta en titt på markeringen och jag kommer att förklara efteråt:
Sidans titel Sidans titel
Det ser fortfarande ut som HTML-markup, men det finns några saker att notera:
I stället för att använda divs för att innehålla olika delar av sidan använder vi nu lämpliga semantiska taggar. De kommer att göra det mycket lättare för sökmotorer och skärmsläsare att räkna ut vad som är vad på en sida.
Navigationen är markerad precis som vi skulle göra det i HTML 4 eller XHTML, med en oorderad lista. Nyckeln är att denna lista placeras inuti nav-taggarna.
Vi har redan definierat en ny sektion i dokumentet med sektionstaggen. Nu behöver vi bara lite innehåll.
Älskar du blommor så mycket som vi gör?
Lorem ipsum dolor sitta amet, konsekventa adipisicing elit, sed gör det ojämnaste tillfället för tillfället att arbeta med en dolore magna aliqua. Ut enim minimala vänskapsmässiga, utövande utövande av arbetskraftsarbete.
Vi lägger till ett id i sektionstaggen så att vi kan identifiera den senare när du styler. Vi använder header-taggen för att linda runt det inledande h2-elementet. Förutom att beskriva ett helt dokument ska huvudrubriken också användas för att beskriva enskilda sektioner.
Vårt huvudinnehåll består av tre avsnitt: blogginlägget, kommentarerna och kommentarformuläret. Med hjälp av vår kunskap om de nya strukturella taggarna i HTML 5 ska det vara lätt att markera det.
Gå igenom markeringen och jag kommer att förklara de nya elementen efteråt.
Detta är titeln på ett blogginlägg
Publicerad den av Mads Kjaer - 3 kommentarer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet noll rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio ...
Vi startar en ny sektion och lägger hela bloggposten i en artikel-tagg. Artikeln tagg används för att beteckna en oberoende post i en blogg, diskussion, encyklopedi, etc. och är idealisk att använda här. Eftersom vi tittar på detaljerna i ett enda inlägg har vi bara en artikel, men på bloggens framsida vi skulle lägga in varje inlägg i en artikel-tagg.
Rubrikelementet används för att presentera rubriken och metadata om bloggposten. Vi berättar användaren när inlägget skrevs, vem skrev det och hur många kommentarer den har. Observera att tidsstämpeln är insvept i en -tag. Den här taggen är också ny i HTML 5 och används för att markera en viss plats i tid. Innehållet i datetime attributet bör vara:
Markera upp kommentarerna är ganska rakt framåt. Inga nya taggar eller attribut används.
kommentarer
George Washington på Lorem ipsum dolor sitta amet, konsekventa adipisicing elit, sed gör det ojämnaste tillfället för tillfället att arbeta med en dolore magna aliqua. Ut enim minimala vänskapsmässiga, utövande utövande av arbetskraftsarbete.
Benjamin Franklin på Lorem ipsum dolor sitta amet, konsekventa adipisicing elit, sed gör det ojämnaste tillfället för tillfället att arbeta med en dolore magna aliqua. Ut enim minimala vänskapsmässiga, utövande utövande av arbetskraftsarbete.
Flera förbättringar av formulär har introducerats i HTML 5. Du måste längre göra klientsidan validering av obligatoriska fält, e-postmeddelanden, etc. Webbläsaren tar hand om detta för dig.
Det finns nya två nya typer av inmatningar, e-post och webbadress. Email anger att användaren ska ange ett giltigt e-postmeddelande och uppge att användaren ska ange en giltig webbadress. Om du skriver som ett attribut kan användaren inte lämna in ett tomt fält. "Required" är en booleskt attribut, ny för HTML 5. Det betyder bara att attributet ska deklareras utan ett värde.
Markeringen av sidofältet och sidfoten är extremt enkel. Några avsnitt med lite innehåll inom lämpliga sidor och sidfotar.
Du kan se den slutliga, ostylade markeringen här. Nu för styling.
CSS 3 bygger på principerna om stilar, väljare och kaskad som vi vet så bra från tidigare versioner av CSS. Det lägger till massor av nya funktioner, inklusive nya väljare, pseudoklasser och egenskaper. Med hjälp av dessa nya funktioner blir det mycket lättare att ställa in din layout. Låt oss dyka in.
För att börja med ska vi definiera några grundläggande regler om typografi, bakgrundsfärg på sidan, etc. Du kommer att känna igen allt detta från CSS 2.1
/ * Makeshift CSS Reset * / margin: 0; vaddering: 0; / * Tala om webbläsaren för att göra HTML 5-element som block * / header, sidfot, åt sidan, nav, artikel display: block; kropp marginal: 0 auto; bredd: 940px; typsnitt: 13px / 22px Helvetica, Arial, sans-serif; bakgrund: # f0f0f0; h2 font-size: 28px; linjehöjd: 44px; vaddering: 22px 0; h3 font-size: 18px; linjehöjd: 22px; vaddering: 11px 0; p padding-bottom: 22px;
Först återställer vi marginal- och vadderingsstilar med en enkel regel. I en produktionsmiljö skulle jag använda en mer komplett CSS Reset som Eric Meyer (för CSS 2.1) men för omfattningen av handledningen kommer detta att göra.
Vi berättar sedan till webbläsaren att göra alla nya HTML 5-element som block. Webbläsarna är bra med element som de inte känner igen (det är därför HTML 5 är något bakåtkompatibelt), men de vet inte hur dessa element ska återges som standard. Vi måste berätta för dem tills standarden är implementerad över hela linjen.
Observera också hur jag har valt att dimensionera teckensnitt i pixlar istället för ems eller%. Detta är för att behålla den progressiva karaktären av handledningen. När de stora webbläsarna en dag är helt färdiga med att implementera HTML 5 och CSS 3 kommer vi alla ha tillgång till sidzoomning istället för att bara ändra storlek på text. Detta eliminerar behovet av att definiera storlekar i relativa enheter, eftersom webbläsaren ändå skalar sidan.
Se hur sidan ser ut med den grundläggande stilen som tillämpas. Nu kan vi gå vidare till styling resten av sidan. Inga ytterligare stilar krävs för rubriken, så vi går direkt till navigeringen.
Det är viktigt att notera att kroppens bredd har definierats som 940px och att den har centrerats. Vår navigeringsfält måste spänna över hela bredden av fönstret, så vi måste tillämpa några ytterligare stilar:
Accentsconagua
nav position: absolute; vänster: 0; bredd: 100%; bakgrund: url ("nav_background"); Vi placerar navelementet absolut, justera det till vänster om fönstret och få det att spänna över hela bredden. Vi ska centrera den nestade listan för att visa den inom gränserna för layouten:
nav ul marginal: 0 auto; bredd: 940px; listestil: none;
Nu ska vi definiera några ytterligare stilar för att göra navigationsobjekten snyggare och anpassa dem till det galler som layouten baseras på. Jag har också inkluderat en stil för att markera den sida användaren är på, och vissa anpassade styling för prenumerationslänken.
nav ul li float: left; nav ul li a display: block; marginal-höger: 20px; bredd: 140px; typsnittstorlek: 14px; linjehöjd: 44px; text-align: center; text-dekoration: ingen; färg: # 777; nav ul li a: svävar färg: #fff; nav ul li.selected a color: #fff; nav ul li.subscribe a margin-left: 22px; padding-left: 33px; text-align: left; bakgrund: url ("rss.png") vänster center no-repeat; Markeringen för introduktionen är ganska enkel: En sektion med en rubrik och ett stycke text. Vi använder dock några nya CSS 3-tricks så att det blir mer tilltalande.
#intro margin-top: 66px; vaddering: 44px; bakgrund: # 467612 url ("intro_background.png") repeat-x; bakgrundsstorlek: 100%; gränsstråle: 22px; Vi använder två nya egenskaper. Den första är bakgrundsstorlek, som gör att du kan skala bakgrundsbilden. I vårt fall skala vi till 100% på båda axlarna. Om rutan expanderar när vi lägger till mer innehåll till det, kommer gradientbakgrunden att skala också. Detta är något som inte var möjligt i CSS 2.1 utan icke-semantisk uppmärkning och diverse webbläsarfrågor.
Den andra nya egenskapen är gränsstråle, som applicerar avrundade hörn till elementet. Radien av våra rundade hörn är 22px i varje hörn. Du kan ange olika värden för varje hörn eller välja att bara runda enskilda hörn.
Tyvärr är ingen av fastigheterna helt implementerade i de stora webbläsarna. Vi kan dock få lite stöd genom att använda leverantörsspecifika attribut. Bakgrundsstorlek stöds av nyare versioner av Safari, Opera och Konqueror. Borderradien stöds av nyare versioner av Safari och Firefox.
#intro ... / * Bakgrundsstorlek inte implementerad än * / -webkit-bakgrundsstorlek: 100%; -o-bakgrundsstorlek: 100%; -khtml-bakgrundsstorlek: 100%; / * Gränsvärdet har inte implementerats än * / -moz-border-radius: 22px; -webkit-gräns-radie: 22px;
Eftersom vi har en bakgrundsfärg definierad kommer det inga större problem i webbläsare som inte stöder bakgrundsstorlek, till exempel Firefox. Nu behöver vi justera rubriken och texten.
#intro h2, #intro p¬ † width: 336px; #intro h2 vaddering: 0 0 22px 0; font-weight: normal färg: #fff; #intro p padding: 0; färg: # d9f499;
Blombilden kan läggas till enkelt genom att ge #intro en andra bakgrundsbild, något som CSS 3 stöder.
#into ... background: # 467612 url ("intro_background.png") övre vänster (287px 100%) repeat-x, url ("intro_flower.png") högst upp till höger (653px 100%) Vi ger de två bakgrundsbilden uttryckliga dimensioner för att säkerställa att de inte överlappar varandra, och vi är inställda. Notera stenografi notering av bakgrundsstorlek.
Tyvärr stöder ingen webbläsare detta på ett tillförlitligt sätt, så vi måste göra det på det gammaldags sättet: genom att inkludera en inline-bild och placera den med hjälp av CSS. Se det sista exemplet för att se hur det gjordes.
Innehållsområdet och sidofältet kommer att anpassas bredvid varandra. Traditionellt skulle du göra det genom att använda floats, men i CSS 3 ska vi använda tabeller!
"Vad ?! Tabeller?" du kanske frågar och ser förvirrad ut. Du lärde dig förmodligen år sedan att använda tabeller för webblayout är ett stort nej, och det är fortfarande. Du borde aldrig använda tabellelementet för att markera en layout. Men i CSS 3 kan vi göra element som beter sig som tabeller utan att det någonsin visas i markeringen! För att börja med behöver vi några divs för att gruppera sektionerna på ett lite mer logiskt sätt.
Allt är ändå meningsfullt semantiskt, men nu kan vi stile det. Vi vill att #content div ska fungera som ett bord, med #mainContent och åt sidan som tabellceller. Med CSS 3 är det här väldigt enkelt:
#content display: table; #mainContent display: tabell-cell; bredd: 620px; padding-right: 22px; åt sidan display: tabellcell; bredd: 300px;
Det är allt! Inga mer flytande bakgrundsbilder, faux kolumnbakgrund, clearing eller kollapsande marginaler. Vi har gjort elementen så att de fungerar som ett bord, och det gör det mycket lättare för oss att göra layout.
Styling av posthuvudet är ganska trivialt så jag hoppar över till den roliga delen: flerskolans layout.
Flera kolumner av text var tidigare omöjliga utan att manuellt dela upp texten, men med CSS 3 är det en bit kaka, även om vi måste lägga till en div runt de flera styckena för att detta ska fungera med nuvarande webbläsare.
Lorem ipsum dolor sit amet ...
Pellentesque ut sapien arcu ...
Vivamus vitae nulla dolor ...
...
Nu kan vi lägga till två enkla egenskaper och kalla det en dag.
.blogPost div kolumnräkning: 2; kolumnavstånd: 22px;
Vi vill ha 2 kolumner och ett gap på 22px mellan kolumnerna. Den extra div behövs eftersom det för närvarande inte finns något stödsätt för att göra en komponentspänning mer än en kolumn. I framtiden kommer du emellertid att kunna ange egenskapen för kolumnsträcka, och vi kan bara skriva:
.blogPost kolumnräkning: 2; kolumnavstånd: 22px; .blogPost header kolumn: all;
Självklart stöds kolumnräknare och kolumnavståndsegenskaper bara av vissa webbläsare, Safari och Firefox. Vi måste använda leverantörsspecifika egenskaper för nu.
.blogPost div / * Kolumnräkning inte implementerad än * / -moz-kolumnräkning: 2; -webkit-kolumnräkning: 2; / * Kolumnhål ej implementerat än * / -moz-kolumnhål: 22px; -webkit-kolumnavstånd: 22px;
Om du tittar noga på bilden i blogginlägget ser du en drop-skugga. Vi kan generera detta med hjälp av CSS 3 och boxskuggegenskapen.
.blogPost img margin: 22px 0; boxskugga: 3px 3px 7px # 777;
Den första "3px" berättar webbläsaren där vi vill att skuggan ska stanna horisontellt. Den andra "3px" berättar där vi vill att skuggan ska stoppa vertikalt. Den sista "7px" är hur suddig gränsen borde vara. Om du ställer in den till 0 blir den helt solid. Sist men inte minst definierar vi skuggans grundfärg. Den här färgen är naturligtvis blekad, beroende på hur mycket du tar bort skuggan.
Det kommer förmodligen inte som någon överraskning att den här egenskapen inte är implementerad i alla webbläsare än. Faktum är att det bara fungerar i Safari, och du måste använda den säljarespecifika egenskapen.
.blogPost img margin: 22px 0; -webkit-box-skugga: 3px 3px 7px # 777;
Zebra-striping, eller markera varje andra element i en serie, har traditionellt involverat att välja alla element via javascript, sedan loopa igenom dem och markera alla udda element. CSS 3 introducerar pseudoklassen "nth-child", vilket gör det löjligt enkelt att göra detta utan javascript. Vi använder den för att sebra-stripe kommentarerna.
avsnitt # kommentarer artikel: nth-child (2n + 1) padding: 21px; bakgrund: # E3E3E3; gränsen: 1px solid # d7d7d7; / * Gränsradien inte implementerad än * / -moz-border-radius: 11px; -webkit-gräns-radie: 11px;
Det konstiga värdet "2n + 1" är faktiskt ganska enkelt om du förstår vad det står för:
Alternativt kan du helt enkelt skriva:
avsnitt # kommentarer artikel: nth-barn (udda) ...
Eftersom standarden innehåller de två mest använda värdena som stenografi, udda och jämn. Resten av kommentar styling ska vara lätt att förstå med din nya kunskap.
Ett par CSS 3-tekniker återanvänds i stilen av kommentarformuläret, sidfältet och sidfältet. I kommentarformuläret och sidfoten har jag använt samma typ av tabelllayoutteknik som används i huvudlayouten. I sidofältet sitter gränslinjen för att lägga till avrundade hörn till de olika sektionerna.
Se den slutliga designen med all styling applicerad.
Sidan görs korrekt i Safari 4 och nya webbläsarebaserade webbläsare, eftersom det är den enda återgivningsmotorn som stöder alla CSS 3-tekniker som vi har använt. Firefox 3 har några problem med att applicera avrundade hörn till vår blombild och det stöder inte bakgrundsstorlek, men dessutom fungerar layouten. Jag har valt att ignorera Internet Explorer eftersom det kräver lite hacking för att få HTML 5 att fungera. Du kan också definiera några fler regler och få allt som fungerar över stora webbläsare, men allt detta ligger utanför handledningen.
När HTML 5 och CSS 3 implementeras en dag i alla webbläsare blir det mycket lättare att bygga webbplatser. Vi kommer äntligen att kunna sluta använda floats för layout (vilket de aldrig var avsedda att användas för), och vi kommer att spendera betydligt mindre tid på att skriva javascript för att skala våra bakgrundsbilder eller zebra-stripe våra bord. Förhoppningsvis kommer vi att använda all denna extra tid för att studera några efterlämnade områden av webbdesign, som frontänd optimering och korrekt informationsarkitektur.
Ta en titt på våra HTML5-mallar eller CSS-teman - om du behöver en professionell, färdig lösning för ditt nästa webbprojekt.
