Oké welkom terug.
In deze video gaan we werken aan de styling van onze site op dit moment.
Het is zeker niet in de buurt wat het zou moeten uitzien als op het einde.
Dus laten we hen daadwerkelijk naast elkaar vergelijken door.
Hier is van ons hier.
Dus sommige van de grote veranderingen moeten we ervoor het afronden van de hoeken het toevoegen van enkele regelafstand hier boven.
Het veranderen van de styling van de knoppen hier.
Dus deze knoppen niet echt uitzien als knoppen tot je de muisaanwijzer over hen en we krijgen een hover effect onze knoppen zijn absoluut afschuwelijk en we hebben geen hover effect op hen hebben.
Ook de positie ervan is iets verkeerd.
Zoals je kunt zien als ik hier denk tekst krijg ik maar als ik fris waren dat tech ruimte is al opgenomen versus op onze versie als ik denk dat de tekst duwt alles weg aan de zijkanten.
Ook is er een animatie hier.
Dus als ik klik op hoe ze vervagen langzaam op ons toen we op goed als ik klik op een fout antwoord het gewoon onmiddellijk wordt verwijderd.
Dus willen we een overgang naar die toe te voegen.
Ook hebben we de H-1 hier dat wat werk aan onze behoeften.
Het moet nemen meer ruimte.
We moeten om de achtergrondkleur te veranderen.
We willen het lettertype te wijzigen.
We moeten ervoor zorgen dat de spanwijdte van onze kleur correct is geformatteerd, dus het is op zijn eigen lijn en het is een groter lettertype.
Ook moeten we het lettertype voor het hele lichaam te veranderen.
Dus dit zijn allemaal hetzelfde lettertype.
En tot slot je zult merken we hebben een beetje ruimte hier tussen de streep en het einde van het lichaam en in de oplossing versie is er geen ruimte.
OK.
Laten we beginnen door eerst het aanpakken dit H-1.
Dus we gaan naar mijn deelgebied tekst en ga naar de H-1 en het eerste ding dat zal doen is gewoon af te stemmen dingen in het midden, zoals je kunt zien in de oplossing.
Wat zijn uitgelijnd naar het centrum.
Dus alles wat we moeten doen is het toevoegen van tekst align centrum en op te slaan en te vernieuwen.
Ok lichte verbetering.
Next up Laten we veranderen de achtergrondkleur zodat de kleur gaat nog steeds blauw te zijn, maar je zult merken dat als ik de pagina nu vernieuwen werkt het prima.
Maar als ik weer opfrissen en dan heb ik het spel te winnen of ik klik op de nieuwe kleuren.
Het gaat terug naar zwart en dat is omdat onze javascript code is te overschrijven dat wij het instelt terug naar deze donkergrijze zwartachtig kleur in onze javascript.
We moeten naar de plaatsen waar we zijn het resetten van deze kleur, die is 2 3 2 3 2 3 te vinden.
Daar gaan we.
We willen alleen maar om dit te veranderen nog steeds blauw te zijn.
En dat is ook wanneer ik vernieuwen begint het is nog steeds blauw.
Ik krijg nieuwe kleuren.
Het blijft zo nog blauw.
OK.
Dus dat is dat.
Laten we nu te ontdoen van alle de zwarte ruimte aan weerszijden van onze H-1.
Dus in onze H-1 gaan we om zich te ontdoen van al marge marge nul boven en onder links en rechts.
Dus let op wat er gebeurt als om dat te doen.
Dat zwarte ruimte weg gaat aan alle kanten, behalve voor dit beetje van afstand aan de linker bovenkant en rechts.
En dat komt niet uit of H-1, dat is eigenlijk afkomstig uit het lichaam.
Dus om te bevestigen dat we kunnen gaan om het lichaam en geef het de marge nul.
En om nu aandacht te besteden aan deze kleine kloof zal ik vernieuwen en dat gaat weg.
Dus onze witte streep gaat helemaal naar de zijkant net zoals zij doet in deze versie hier.
OK.
Next up Laten we focussen op het plezier.
Zodat het plezier zal hetzelfde voor al onze elementen.
De knoppen en de H-1 en de overspanning hier is het allemaal hetzelfde lettertype iets ander lettertype gewichten.
En we gaan gewoon een van de ingebouwde te gebruiken in fonts het systeem vaunts die Avenir wordt genoemd.
Dus dat gaat lettertype Avenir zijn.
Dat is een lettertype dat niet kan werken op elk systeem die er zijn.
Dus we gaan om toe te voegen in een andere optie die Mont. Serat net als dat.
Dus eindigen we met deze leuke hier wat natuurlijk niet precies hetzelfde uitziet.
En dat komt neer op onze tekengewicht.
Dus moeten we het gewicht te veranderen van dit lettertype, want het is een H1.
De standaard is om het vet of te hebben, zoals 700 of 800 of zelfs 900 tekengewicht.
Wat wij willen doen is geef het lettertype gewicht normaal.
Dus wanneer onze H-1 tekengewicht normaal kan toevoegen en op te slaan.
Vernieuwen.
Dat is op zoek dichterbij.
Nu is er een paar andere dingen die we moeten veranderen.
De eerste daarvan is dat dit alles hoofdletters en we kunnen dat doen met RCSS middel van tekst te transformeren hoofdletters en bespaar Dus nu kijken dichter en zal ook willen ervoor zorgen dat onze kleur is op zijn eigen lijn en dat we stijl die iets anders overspannen om dat te doen.
We gaan hier in de loop gaan in ons team en eigenlijk gaan we uit te bewerken de leeftijd van hem een ​​beetje.
En dit is de eerste manier waarop we gaan om dit werk te maken.
We zullen een andere manier om het te doen met Pearcey SS te zien, maar we gaan beginnen met het stylen van deze waar we de grote op een lijn en vervolgens naar een pauze toe te voegen.
We kunnen ABR tag gebruiken en eigenlijk is dit niet een geweldig idee voor zover stijl het is een beetje afgekeurd, maar het is een snelle en eenvoudige manier om te beginnen het toevoegen van enkele aangiften en sommige regeleinden en dat is alles wat deze tag doet is het voegt een regeleinde.
Daarom willen we de ene na de Grote we willen een pauze en dan is onze overspanning en dan willen we nog een pauze en daarna de kleur spel aan de onderkant en als we Ververs nu kun je zien dat we steeds dichterbij.
Nu moeten we ons richten op het maken van de spanwijdte van een stuk groter.
Dus deze band heeft een idee van het kleurenscherm.
Dus we gaan om over te gaan naar R C S S en selecteer kleurenscherm net als dit.
Id kleurenscherm en dan gaan we zeggen lettergrootte is 200 procent van de H-1 lettergrootte.
En als we frissen we nu krijgen dit veel groter lettertype.
En we steeds dichterbij.
We hebben onze breaks hier.
Je merkt ook wel dat we veel meer ruimte tussen de regels dan wij hier.
Dus er zijn een paar dingen die we kunnen doen om te werken aan dat.
De eerste is verander de regel hoogte.
Dus we geven het een lijn hoogte van 1,1 en op te slaan.
En laten we eens kijken naar onze versie opnieuw en verfrissen en je kunt zien dat krimpt een beetje.
Maar nu verloren ruimte aan de bovenkant en de onderkant.
We hebben een beetje ruimte is er.
Dus wat we zullen doen is in en voeg wat opvulling.
Dus we gaan padding toe te voegen aan de boven- en onderkant niet alleen links en rechts en we willen 20 pixels aan de boven- en onderkant, zodat we kunnen doen dat net als dit opvulling 20 pixels en nul.
We zouden ook hebben gedaan padding top 20 pixels en opvulling bodem, maar dit is een mooiere korte manier van doen te frissen en je kunt zien we zijn er bijna nu.
Dus onze header ziet er prima uit.
We hebben het juiste lettertype het juiste lettertype manier waarop het is allemaal in hoofdletters de juiste achtergrond kleur.
Laten we ervoor zorgen als ik speel blijft er goed uitziet allemaal goed.
Het volgende wat we moeten aanpakken zijn de knoppen op de navigatiebalk.
Dus we hebben zeker een lange weg te gaan om die te verbeteren.
Het eerste wat we willen doen is zich te ontdoen van de grenzen, zodat we dit niet voor de hand liggende rand om de knop te hebben.
We willen ook om zich te ontdoen van de achtergrondkleur.
Dus er geen achtergrond zou moeten zijn zoals je hier kunt zien.
Het is gewoon wachten tot we zweven of totdat we een te selecteren.
Ook willen we ervoor zorgen dat het lettertype familie is hetzelfde als dit lettertype hier.
Dus laten we beginnen.
En ik ga tot alle knoppen, zodat de knop te selecteren en we gaan gewoon grens niets te zeggen en op te slaan.
Besteed aandacht aan de knoppen, toen ik te vernieuwen.
OK.
Dus hebben we nu geen grens.
Maar we hebben nog steeds dat achtergrondkleur.
Dus nu dat dezelfde achtergrond niemand en op te slaan en te vernieuwen en we steeds dichterbij.
Dus nu hebben we alleen maar platte tekst.
En we zullen beginnen met het maken van al die tekst in hoofdletters, zoals we hebben meer dan hier.
Dus maken we gebruik van tekst omzetten weer net die lijn kopiëren over pasta die in daar en te vernieuwen.
Nu zijn onze knoppen zijn allemaal in hoofdletters.
Het volgende wat we willen doen is ervoor zorgen dat de knop gaat de hele weg van de top naar de bodem van de div streep container.
Nu duurt het slechts een deel van de ruimte zodat we kunnen doen door hoogte 100 procent.
En dat betekent dat het zal duren tot 100 procent van het omvattende element zoals je kunt zien dat ons komt een stuk dichterbij.
We nu net nodig hebt om sommige kleuren veranderen veranderen de lettergrootte van het lettertype gewicht en verander dan de hover effect dat we niet hebben ingesteld nog omhoog.
Het volgende ding dat zal doen is het lettertype wacht een beetje zwaarder en verander de kleur nog steeds blauw te zijn ook.
Dus lettertype gewicht zal doen zevenhonderd en dan kleur zal ook nog steeds blauw zijn.
En laten we controleren of je refresh.
Dus het wordt een beetje ouder en je kunt ook zien dat de kleur nu is veranderd in die nog steeds blauw dezelfde kleur hebben we hier terug.
Er is een heel kleine verandering die we kunnen maken dat de brief spatiëring om één pixel te veranderen.
En als je goed oplet, toen ik te vernieuwen kun je dingen gespreid maar een klein beetje tussen elke letter te zien.
Leslie laten we focussen op de lettergrootte.
Ze lijken een beetje te klein.
Dus gaan we gewoon gebruik maken van de lettergrootte en zet deze op te erven.
En als ik refresh je kunt zien dat ze de lettergrootte erven en we hoeven niet te expliciet gezegd.
Dus laten we nu eens een kijkje nemen.
Een van de grote verschillen is dat ze op dit moment anders zijn verdeeld.
Zodra de pagina wordt geladen hebben we hier de ruimte op onze versie.
Maar we hebben niet dat de ruimte totdat we op een knop klikken.
Dus wat we moeten doen is eigenlijk te stylen de overspanning die hier en die spanwijdte heet boodschap en we gaan te willen gaan en geef dat sommige eigenschappen om het te laten nemen dat ruimte en alles wat we moeten doen is een eigenschap eigenlijk.
Dus gaan we onze boodschap die deze ventilator weer te geven te selecteren en we gaan om het pand display te veranderen in overeenstemming te zijn.
BLOCK Dus wat dat zal doen als ik refresh zul je niet merken een groot verschil meteen, maar dat is omdat we moeten ook toewijzen een met je weet geef het een met 20 procent en op te slaan en te vernieuwen.
We hebben nu deze overspanning, hoewel het niets in dat in beslag neemt 20 procent van dit scherm hebben.
Zodat deze elementen aan de kant en dat is precies wat we willen duwt.
Laten we eens een kijkje nemen en te vergelijken.
Oké dus dat lijkt aardig in de buurt.
Nu, wat zullen we werken aan de volgende keer wordt het verkrijgen van de geselecteerde klasse om de juiste kleur te passen en het hebben van onze hover effect ook.
Dus dat gaat in onze knop en we gaan naar de hover effect eerst toevoegen.
Dus alles wat we moeten doen is het toevoegen in de knop Colan Huffer en we gaan naar de doopvontkleur te veranderen wit zijn en de achtergrondkleur te staalblauw zijn.
Dus we eigenlijk het omkeren van de kleuren en we zullen slaan en te vernieuwen.
Nu zoals ik hang je kunt zien krijg ik dat effect.
Perfect.
En onze geselecteerde klasse die we hebben, is van plan om precies hetzelfde uitzien.
Gewoon naar de stijlen te kopiëren.
Er is geen verschil wanneer we zweven over iets versus wanneer het is geselecteerd.
Ze moeten er hetzelfde uitzien.
Dus je kunt zien dat er goed uitziet en ik zweven en slechts terwijl ik zweven.
Heeft het te krijgen dat blauwe achtergrond en witte tekst kleur.
En als ik verhuis het gaat weg.
Er is een klein verschil.
Als ik de muisaanwijzer op de oplossing knoppen merken dat het verdwijnt in die kleur.
Het is niet alleen een instant-schakelaar op mijn versie.
Het schakelt gewoon meteen.
We kunnen dat oplossen met behulp van een C Ss overgang woning in de knop selector.
We gaan om de overgang te schrijven en doorgeven.
Twee argumenten zijn twee waarden en de eerste is wat we willen de overgang en in ons geval zijn we gewoon gaan om het toe te voegen aan elke eigenschap en dan is de volgende hoe lang we willen dat het over te nemen.
Dus ik ga het overdrijven in eerste instantie met twee seconden.
Dus nogmaals de woning overgang is hoe we CSX kunnen vertellen hoe je overgangen tussen kleurveranderingen of lettergrootte veranderingen en eigenschappen animeren.
Dus wat ik heb gezegd is dat te allen tijde eigendom veranderingen op een knop die in ons geval zal echt alleen maar kleur en achtergrond zijn.
Dus wanneer de kleur verandert en de achtergrond kleur verandert moet twee seconden te nemen en je zult zien wanneer ik te vernieuwen.
En ik zweven.
O, dat is nog steeds niet werkt.
Ik mis mijn s hier 2,00 s.
En nu als ik verfrissen en zweven duurt twee seconden om in te vervagen en als ik klik op de geselecteerde klasse duurt eveneens twee seconden toe te voegen en het duurt twee seconden te vervagen wanneer ik vertrek.
Dus twee seconden is zeker te lang.
Ik denk dat ik het streven naar ongeveer punt drie seconden.
Laten we eens testen die uit.
Daar gaan we.
Het ziet er goed uit voor mij.
Het laatste grote ding is het verkrijgen van de afgeronde hoeken op deze pleinen van de manier waarop we de afgeronde hoeken wordt met behulp van een eigenschap met de naam Border radius.
Dus ik heb de mediaan docs geopend als je wilt om een ​​kijkje te nemen.
Het is een goed te lezen.
Maar ze tonen u een aantal voorbeelden over de verschillende dingen die je kunt doen met raad een straal.
Dus wat we gaan doen is het een lichte grens radius en deze zijn pleinen hier.
En laten we eens kijken naar wat we streven.
Dus dat zijn wat we willen krijgen.
Dus het was een lichte lichte curve.
Laten we naar onze vierkant klasse en wijs een straal grens en laten we iets heel overdreven om te beginnen Ik zal je laten zien wat er gebeurt als we 50 procent doen.
We krijgen cirkels en je zou eigenlijk de voorkeur aan kringen gebruiken.
Ik was gezien het gebruik ervan, maar uiteindelijk heb ik de voorkeur deze afgeronde hoek pleinen en het nummer dat ik heb gebruikt is 15 procent.
En we zullen gewoon dubbel te controleren en te vergelijken die.
OK dus dat ziet er goed uit.
Vijftien procent, maar als je wilde ik zal je laten zien wat er gebeurt als we iets als 5 procent en refresh deed.
We krijgen zeer licht afgeronde hoeken.
Dus ga ik terug naar mijn 15 vernieuwen en nu hebben we onze mooie afgeronde hoeken, maar we moeten ook werken aan het verkrijgen van de animatie-effect, want toen ik op een van deze klikken.
Merk op hoe wanneer de kleur verandert verdwijnt net als de hover effect verdween in en uit.
Om dat te bereiken moeten we ook de eigenschap overgang te gebruiken, maar in een iets andere manier.
Dus ik ga naar plein en het enige dat we willen de overgang is de achtergrondkleur of gewoon achtergrond.
En weer laten we een lange tijd als 2,0 seconden en zien hoe dat eruit ziet.
Dus ik verfrissen en ik op één van deze zal klikken.
U kunt zien dat het duurt twee hele seconden te vervagen.
Dus we willen niet iets dat lang duren.
Waarschijnlijk gaan voor nulpunt zes misschien.
Laten we het proberen.
OK.
Dat lijkt me redelijk.
Zodat u kunt zien wanneer deze achtergrond verandert het duurt 0,6 seconden.
Wat is het verschil is echter dat wanneer andere eigenschappen veranderen zij daardoor niet animeren als onze knoppen waar we zeiden toen een eigenschap verandert moet punt nemen drie seconden.
We zijn alleen gericht op de achtergrond en dat verandert.
Het moet 0,6 seconden.
Een klein ding dat we willen wel bewust zijn van is dat het pand overgang niet in alle browsers zal werken op de manier waarop we hebben het nu geschreven als browser vriendelijk mogelijk.
We moeten eigenlijk toe te voegen in twee woningen die wij geen verschil in functionaliteit niet zullen merken, maar er zijn gewoon voor de browser ondersteuning.
Dus de eerste is Web Kit Dasch overgang en we zullen gewoon hier toevoegen exact dezelfde waarde, net als dat.
En dan moeten we nog een die dit moet één streepje Moz M. Ozy.
Dit zijn dus eigenlijk browser voorvoegsels.
Dus Web Kit is voor Web Kit die een een motor die browsers zoals Safari.
En dan hebben we Moz en Mozy, die korte vorm is Zilah dat is wat Firefox is gebouwd op.
Dus dit zijn slechts om wat meer ondersteuning toe te voegen, omdat de woning overgang nog niet in elke browser is ingebouwd.
Dus we vernieuwen.
Niets moet anders lijken.
Ons spel werkt nog steeds op dezelfde manier en we krijgen nog steeds dezelfde animatie en we moeten hetzelfde doen hier beneden toen we allemaal hebben overgestapt alleen deze dupliceren en veranderen overgangsmaatregelen en de overgang al 0,3 seconden voor de MOOC overgang.
Een laatste ding dat we hier kunnen oplossen is het stukje tussenruimte tussen de streep en het begin van ons netwerk.
Zodat u kunt zien hebben we wat meer afstand hier dat we hier niet hebben.
En op dit moment als we inspecteren hebben we een element dat is rond onze net.
We hebben onze pleinen en we hebben een div id container en dat container div gaat rond alle 6 pleinen.
Dus we kunnen gebruiken en gewoon voeg wat afstand aan die container div we gewoon een marge zal toevoegen aan de boven- en onderkant.
Dus ik denk dat we het al gestyled een beetje.
Daar gaan we.
Dus zeiden we marge is nul.
En auto wat wij zullen doen plaats vinden marge 20 pixels aan de boven- en onderkant en auto links en recht dat is hoe het is gecentreerd.
Daarom willen we dat zijn auto links en rechts, maar 20 pixels op de top refresh.
We hebben onze afstand.
OK dus we klaar zijn met de styling voor nu.