Hallo, alle.
Willkommen zurück.
Es ist Zeit für uns, unser endgültiges Projekt zu beginnen.
Ich hoffe wirklich, wenn du damit fertig bist, wirst du etwas haben, worauf
du dich wirklich stolz fühlst und das du teilen willst.
Auch hier ist unser Ziel, dass wir ein Stylesheet schreiben und
drei verschiedene HTML-Dateien stylen werden.
Nun, wenn Sie anfangen,
gehe ich davon aus, dass Sie die zweite Peer-Grad-Aufgabe erledigt haben.
Sie können sich frei fühlen, das so viel zu ändern, wie Sie wollen, aber
ich muss wissen, dass diese Änderungen abgeschlossen sind.
In Ordnung, also lass mich dir unser Vor- und Nachher zeigen,
wohin wir mit diesem letzten Projekt gehen.
Schauen wir uns an, was wir bisher in diesem Kurs getan haben.
Wir hatten unsere erste HTML-Ansicht.
Unsere nächste, wir haben es wirklich klar gemacht.
Unser drittes, wo wir in einem anderen Stil hinzugefügt haben.
Und schließlich,
auf unserem vierten, sieht es auf dieser ersten Seite vielleicht nicht ganz anders aus, aber
wo ich dich wirklich konzentrieren werde, ist auf der Seite Teams und auf diesem Tisch.
Du wirst sehen können, dass ich wirklich ausgegangen bin und
viel Styling in diesen Tisch gesteckt habe.
Und der Grund, warum ich Tabellen ausgewählt habe, ist, weil dies eine Chance für uns sein wird,
diese Pseudo-Klassen zu verwenden.
Verwenden Sie diese Pseudo-Elemente, verwenden Sie einige Farbverläufe,
all diese kleinen Dinge, die ein wenig schwer zu erreichen sein können,
aber sobald Sie es geschafft haben, sieht es wirklich gut aus.
Also lassen Sie uns über jede dieser kleinen Teile sprechen.
Also noch einmal, nur eine kleine Erinnerung, machen Sie ein einzelnes Stylesheet.
Ich möchte nicht ein anderes Stylesheet für
jede Seite, Sie wollen eines, das jeden abdeckt.
Und wir werden Pseudo-Elemente und Pseudo-Klassen verwenden.
Wenn Sie also ein wenig verwirrt sind, vergessen Sie nicht,
wir haben Folien, die dies sowie einige unserer Codebeispiele abdecken.
Beginnen wir also mit der Tabelle, weil das der Großteil der Seite ist.
Zumindest möchte ich, dass Sie die Schriftart, die Breite
und den Rand formatieren.
Wenn Sie nun die Schriftart formatieren, gibt es viele verschiedene Optionen, die Sie betrachten können.
Sie können verschiedene Schriftfamilien haben.
Sie können die Größe, die Gewichtung und die Linienhöhe ändern.
Einer der Gründe, warum ich die Zeilenhöhe empfehle, ist, dass
es viel einfacher ist, den Text innerhalb der Zeilen zu zentrieren, wenn Sie
die Zeilenhöhe mit der Textgröße identisch gemacht haben.
Für Ihre Breite möchte ich nicht, dass Ihr Tisch die ganze Seite aufnimmt.
Ich möchte, dass es irgendwo wahrscheinlich zwischen 75 und 90% aufnimmt.
Und einer der Gründe, warum ich will, dass du das tust,
ist, weil ich will, dass du den Tisch zentrierst.
Ich möchte, dass du mit dieser Margin-Eigenschaft spielst.
Und finden Sie heraus, wie Sie genau die richtige Menge an Platz nehmen und
es genau dort platzieren können, wo Sie es wollen.
Als Nächstes schauen wir uns die Überschrift an.
Die Tabellenüberschrift sieht also ein wenig anders aus als die anderen Zeilen, und
sie hat wirklich diese wichtige semantische Bedeutung.
Durch die Verwendung der Tabellen-Überschriften-Tags können wir diese
Idee irgendwie verdoppeln, dass wir sie anders gestalten und etwas anderes bedeutet.
Ändern Sie zuerst die Hintergrundfarbe.
Sobald Sie das zum Laufen gebracht haben,
möchte ich, dass Sie versuchen, eine Farbverlaufs-Hintergrundfarbe einzugeben.
Vergessen Sie jetzt nicht, um Gradient zu verwenden,
müssen Sie einige Browser-Präfixe einfügen.
Als nächstes fügen Sie eine Grenze hinzu, aber ich möchte nur, dass Sie die oberen beiden Ecken runden,
nicht das Ganze, und dann auch die untere Grenze dicker machen.
Schließlich, wenn Sie damit fertig sind, gehen Sie vor und
fügen Sie nur mindestens eine andere Eigenschaft, etwas, von dem Sie denken, würde cool aussehen.
Sobald Sie die Tabellenüberschrift fertig haben, lassen Sie uns voran und setzen Sie etwas Styling für
die Tabellenzeilen ein.
Das erste, was ich möchte, dass Sie tun, und es gibt einen Grund dafür,
ist, dass Sie die Deckkraft der Tabellenzeilen auf einen Wert von etwa 0,8 setzen.
Irgendwo dort.
Wo Sie den Text noch lesen können, aber es ist ein wenig ausgeblendet.
Als nächstes möchte ich, dass Sie sicherstellen, dass die erste Spalte jeder Tabellenzeile
linksbündig und die anderen beiden zentriert sind.
Nun können Sie dieses Styling innerhalb Ihrer Tabellenzeilenelemente durchführen, oder
Sie tun es möglicherweise innerhalb der Tabellenelemente, diese TDs.
Es hängt wirklich davon ab, wie Sie einspringen und versuchen, dies zu stylen.
Endlich möchte ich, dass du weitermachst und eine andere Pseudo-Klasse anlegst.
Wo, wenn jemand über einer der Zeilen schwebt,
wird es sich von einer Art verblasster zu einer dunkleren Farbe ändern.
Und ich werde Ihnen ein Beispiel dafür zeigen, bevor ich weitermache.
Wenn Sie also in dieser Tabelle bemerken,
ist der Text ein wenig ausgeblendet, da er eine schwarze Schriftfarbe ist.
Da kommt also die Deckkraft ins Spiel.
Wenn ich den Mauszeiger über jeden Teamnamen führe,
wirst du sehen, dass die Schriftart etwas dunkler wird.
Ich habe die Schriftfarbe hier nicht geändert, ich habe die Schriftfamilie,
den Typ oder so etwas nicht geändert.
Stattdessen habe ich die Deckkraft geändert, um sie auf 1 zu setzen.
Also jetzt, wenn mein Hover losgeht,
geht es zurück zu dieser ursprünglichen Art von verblassten Wert.
Jedes der Tabellenelemente kann eine beliebige Menge an Styling annehmen, die Sie
ihm geben möchten.
Aber was ich sehen möchte, dass Sie tun, ist ich möchte sehen, dass Sie die Polsterung,
die Schriftfarbe und die Hintergrundfarbe stylen.
Und ich möchte, dass Sie den Grenzradius auf zwei Pixel setzen.
Sie würden nie in der Lage sein, diese Art von ununterscheidbaren oder
subtilen Unterschied auf dem Tisch zu sehen.
Also möchte ich, dass du es reinstellst, nur damit, wenn ich dir sage, es zu tun,
merkst du, dass es eine tatsächliche Veränderung gibt.
Schließlich wäre das eine große Chance für
dich, etwas zu tun, was ich selbst nicht verdeckt habe. Ein
Teil des Seins ein Web-Designer ist zu lernen, dorthin zu gehen und
nach verschiedenen Eigenschaften zu suchen, mit denen Sie spielen können.
Also würde ich Sie ermutigen, zu gehen und Text-Schatten zu betrachten.
Es ist etwas, das ich in meinem Beispiel verwende.
Wenn Sie also wirklich versuchen möchten, es zu replizieren, gehen Sie weiter und versuchen Sie, es selbst zu verwenden.
Wieder einmal verwenden wir Peer-Grading für diese Zuweisung.
Und Noten werden sowohl auf dem Niveau der Fertigstellung als auch auf einem gewissen Niveau der Ästhetik basieren.
Richtige Codierungsstandards gelten immer, aber
Sie können Ihre bevorzugte Bildschirmgröße angeben.
Wenn sich jemand entscheidet, Ihr CSS zu nehmen und es auf den HTML anzuwenden,
können Sie sie wissen lassen, dass dies wirklich am besten auf einem großen Bildschirm oder einem kleinen mobilen Gerät aussieht.
Nun, es gibt tatsächlich viele,
viele Möglichkeiten, wie Sie dieses Stylesheet ändern könnten.
Und so will ich nicht, dass du dir Sorgen machst, jeden einzelnen Standard abzuschlagen.
Aber wenn Sie sich entscheiden, etwas ein wenig verrückt, ein wenig anders, und
etwas, das andere Leute vielleicht nicht verstehen.
Ich empfehle wirklich, dass Sie das in der Nähe des unteren Teils Ihres Stylesheets legen.
Damit sich Leute, die sich Ihren Code ansehen, wirklich auf die tatsächlichen Anforderungen konzentrieren
und dann über Ihre wirklich coolen Innovationen staunen können.
Also hoffe ich, dass dies etwas ist, das wirklich helfen wird, Ihr
Verständnis von CSS zu verfestigen.
Wenn Sie Probleme haben, sollten Sie sich frei fühlen, die Diskussionsforen zu nutzen und
wirklich fragen, was Sie nicht ganz sicher sind.
Oder teilen Sie einfach etwas Cooles, das Sie zur Arbeit haben.
Viel Glück.