Heute werden wir über Styling-Links und Styling-Listen sprechen.
Wenn es an der Zeit ist, die Links auf Ihrer Seite zu gestalten,
ist es wirklich wichtig, dass Sie sich daran erinnern, dass Links sind, was eine Website bilden.
Es ist diese Vernetzung, die Menschen dabei hilft, Wissen zu erlangen.
Suchmaschinen helfen dabei, Text und Inhalte mit dem Text und
Inhalt einer anderen Person zu verknüpfen.
Also, heute werden wir spezifisch über Links reden, denn
ich möchte, dass du darüber nachdenkst, wie du Styling bist.
Wenn Sie einen Link formatieren, können Sie im Allgemeinen
dieselben Attribute verwenden, die Sie für alles andere verwendet haben.
Ihre Kopfzeilen, Ihre Absätze, Dinge wie diese.
Verknüpfungen haben jedoch eine spezielle zusätzliche Eigenschaft
namens text-decoration.
Also in diesem Beispiel hier, was ich vor mir habe, ist, dass
anstatt meine Links inline sind, was bedeutet, dass sie nebeneinander gehen,
ich werde sagen, hey, ich möchte, dass meine Links getrennt werden, übereinander.
Hoffentlich sieht Ihnen der größte Teil dieses Codes vertraut aus.
Sie haben diese Idee, dass das Display Block ist, es wird untereinander gehen.
Das Schriftgewicht, ich möchte, dass es ein bisschen fett ist.
Ich habe eine neue Farbe und eine neue Hintergrundfarbe festgelegt.
Jetzt habe ich eine Breite festgelegt, und wenn Sie versuchen, eine Breite festzulegen und
es nicht funktioniert, denken Sie daran, dass Links standardmäßig inline sind und
sie keine Breite haben, es sei denn, Sie ändern sie in Block oder Inline-Block.
Ich werde auch den Text ausrichten, etwas Padding hinzufügen, und diese Textdekoration,
keine, das ist neu.
Hier steht, hey,
ich will diese Unterstreichung loswerden, die normalerweise unter Links erscheint.
Also bin ich von hier oben in der oberen Ecke
zu etwas gegangen, das hier unten ein bisschen mehr gestylt ist.
In der Tat sieht es fast nicht einmal wie ein Link aus.
Also lassen Sie uns darüber reden.
Manchmal
versuchen die Leute, wenn sie ihre Links installieren, es viel mehr wie Schaltflächen aussehen zu lassen.
Und das wollen wir vermeiden, weil wir semantisch sein wollen.
Wenn Sie eine Schaltfläche möchten, verwenden Sie stattdessen ein Buttonelement.
Und Sie können das ganz einfach tun, indem Sie einfach das Button-Tag anstelle
des Anker-Tags einfügen.
Und wieder, auf die gleiche Weise können Sie es auf viele verschiedene Arten stylen.
Aber ich möchte, dass Sie verstehen, dass es so
viele verschiedene Dinge gibt, die Sie mit Links tun können und so viel Styling, das Sie mit
ihnen tun können, stellen Sie sicher, dass die Leute verstehen, dass es ein Link ist, den sie betrachten.
Oder, wenn sie ein Bildschirmlesegerät verwenden, ist es ein Link, von dem sie hören.
Eine weitere neue Sache über Links,
die wir noch nicht gesehen haben, ist diese Idee, dass Links Zustände haben.
Haben Sie jemals bemerkt, dass, wenn Sie auf eine Webseite gehen,
manchmal einige der Links blau sind, und einige von ihnen sind lila?
Und Sie erkennen, dass nach ein wenig,
die lila sind, sie da sind, weil Sie sie besucht haben, vorher.
Also, was wir haben, ist, dass wir diese verschiedenen Staaten haben.
Und ich werde sie sehr schnell durchgehen und später,
wenn wir darüber reden, was Pseudokurse genannt werden, werden wir noch mehr darüber reden.
Aber schnell, ein A mit diesem Doppelpunkt direkt hier Link
sagt einfach, dass dies nur ein normaler Link ist, Sie haben es schon gesehen,
ein; besucht sagt hier ist ein Link und mein Browser sagt mir.
Es weiß, dass ich schon mal darauf geklickt habe.
Standardmäßig wird es eine andere Farbe haben.
Wir haben auch einen Link mit der Hover-Aktivität darüber.
Also haben Sie wahrscheinlich gesehen, dass, wenn Sie Ihre Maus über etwas halten,
so wie ich den Stift hier drüben halte.
Ist, dass es etwas Verrücktes macht.
Vielleicht ändert es die Farbe oder andere Dinge wie das.
So wird der Mauszeiger aktiviert, indem Sie die Maus über einen Link halten.
Welche Art von bringt eine interessante Frage auf,
funktioniert das auf Touchscreens?
Wenn Sie Ihre Seite entwickeln, müssen Sie sich daran erinnern, dass Hover nicht unbedingt
funktionieren wird, wenn Leute auf ein Telefon oder ein Tablet oder so etwas darauf zugreifen.
Was mich in einen anderen Staat bringt, der Fokus genannt wird.
Der Fokusstatus ist also, was passiert, wenn jemand Ihre Seite durch Tabulatoren bläst.
Wenn sie Tab drücken, wird es von Element zu Element springen.
Und wenn es zu diesem speziellen Link kommt, wird es wissen, dass ich im Fokus bin, also
wenn du etwas anderes machen willst, vielleicht dasselbe, was du tust, wenn Leute schweben,
so kannst du diese Aktivität auslösen.
Okay, und die letzte ist diejenige, die ich wirklich denke, ist die seltsamste von allen,
ich würde es vielleicht sogar dumm nennen, aber ich habe nicht das Internet und HTML erstellt und
ich respektiere, aber es ist wirklich seltsam, denn was dieser sagt, ist hey,
das ist der Link, wie ich darauf klicke.
Und der Grund, warum ich das für seltsam halte, ist, dass für die meisten von uns,
wenn wir auf einen Link klicken, wir auf eine neue Seite gehen, damit
wir nicht einmal sehen werden, was Styling passiert ist.
In Ordnung?
Lass uns weitermachen und darüber reden, wie wir das machen.
Aber bevor ich es tue, kommen wir wieder auf diese Vorstellung des Vorrangs zurück.
Cascading Stylesheets sind sehr groß auf diesem.
Wenn Sie sich entscheiden, dass Sie diese verschiedenen Zustände verwenden möchten,
müssen Sie sich beim Schreiben Ihrer Stylesheets an einige Regeln erinnern.
Erstens, wenn Sie ein:hover verwenden möchten, muss es nach einem:link kommen.
Und als nächstes, a:visited und a:active müssen sie nach einem:hover kommen.
Es ist also nur diese Hierarchie, die stattfindet, während Sie Ihre Seiten überstreichen.
Schauen wir uns jetzt ein Beispiel für Code an und wie ich meine Links style.
In diesem Beispiel
habe ich hier nur drei Links, die ich in keiner Weise gestylt habe.
Ich habe einen Link zur Einführung in das Webdesign,
einen Link zur University of Michigan und einen Link zur Kent State University
, wo ich meinen Untergrad gemacht habe.
Aber was passiert, wenn ich vorangehe und etwas CSS hinzufüge?
Hier oben oben habe ich all die typischen Dinge, über die wir vorher gesprochen haben,
die Breite und die Farbe.
Ich habe die Textdekoration hinzugefügt, und
was ich auch hinzufügen wollte, ist diese Idee des Randes, wo ich jeden meiner Links
übereinander mit ein wenig Platz dazwischen zentrieren kann.
In Ordnung, also schauen wir uns mal an, wie das aussieht, und
Sie können sehen, dass jeder Link wirklich viel anders aussieht, okay.
Und Sie können sehen, wenn ich meinen Stift sehe,
wenn ich den Mauszeiger über jede von ihnen halte, was passiert ist, dass sich die Farbe ändert.
Wie ich das zum Laufen gebracht habe, ist genau hier drüben.
Immer wenn mein Link in einen Hover-Zustand wechselt,
weiß er, die Hintergrundfarbe und die Schriftfarbe zu ändern.
Okay, nun, was ist ein:focus, und was habe ich hier unten ein wenig, a:active?
Was hier los ist, ist, dass ich in den a:focus für
diejenigen Leute gesetzt habe, die durch meine Seite tabbing sind.
So, wie Sie mich Tab sehen, können Sie sehen, Einführung in Web Design geht in den
Fokus, und dann die University of Michigan
und dann Kent State, und ich tue das, indem ich die Seite durchblättere.
Die letzte Regel, die aktive Regel, ist etwas, das ich Ihnen zeigen werde und
dann irgendwie von dort abbrechen werde.
Wie das aktive funktioniert, ist, dass, wenn Sie tatsächlich auf eine Seite klicken,
es einen Rahmen um diesen Link hinzufügen wird.
Die seltsame Sache ist, dass, sobald ich fertig bin,
klicken wir auf eine neue Seite gehen.
Es bricht also irgendwie ab, man sieht diese Grenze nicht wirklich,
es sei denn, ich halte sie sehr absichtlich fest, einfach so.
Also, in diesem Beispiel habe ich versucht, Ihnen die zwei verschiedenen Möglichkeiten zu zeigen, wie Sie
Links formatieren können.
Nun lasst uns weiter und darüber nachdenken, etwas detaillierter.
Wenn Sie diese Links stylen, wieder einmal kann ich die Bedeutung der
Zugänglichkeit nicht genug betonen, wir wollen sicherstellen, dass Ihre Links Links sind und
dass die Leute wissen, dass sie da sind.
Sobald Sie fertig sind, mit Links herum zu spielen, lassen Sie uns voran und
beginnen, über Styling Listenelemente nachzudenken.
Wenn Sie Listen Stil Stil, Art der Standardeigenschaften sie alle gleich aussehen.
Sie haben den einen, zwei, drei oder den Kreis, Kreis, Kreis, aber
wir können all das ändern, wir können Dinge über die Schriftart und
den Rand hinaus ändern, um den Stil zu betrachten, den Ihre Listen annehmen.
Einige der Dinge, die wir betrachten können, sind Ihr List-Style-Typ,
Ihr List-Stil-Bild.
Die Listenformatposition und nur der Listenstil selbst.
Der Listenformattyp sagt im Grunde, wie soll ich die verschiedenen
Listenelemente angeben?
Standardmäßig für geordnete Listen wieder haben wir die eins, zwei, drei, aber
Sie können verschiedene Werte angeben.
Sie können sagen, ich möchte, dass es untere römische Zahl, obere römische Zahl,
untere alphabetische numerische, Sie können mit diesen spielen, um das Gefühl zu bekommen, das Sie wollen.
Also in diesem Fall sind wir von 1 und 2 zu A und B gegangen
und wenn ich stattdessen niedrigere Alpha getan hätte, hätten wir Kleinbuchstaben a und Kleinbuchstaben b gehabt.
Wenn Sie List-Style-Typ für ungeordnete Listen tun, normalerweise, was Sie haben, und
es hängt von Ihrem Browser ab, ist der kleine Kreis oder die kleine Festplatte.
Wir können das ändern, und
wir können genau das einbringen, was Sie wollen, um sicherzustellen, dass es sein wird.
Eine weitere Option, mit der Sie spielen können, ist diese Idee
, diese Standardmarkierungen vollständig loszuwerden und
stattdessen ein benutzerdefiniertes Bild anstelle dieses traditionellen Markers zu verwenden.
Und wenn Sie das tun,
bringt es irgendwie auf diese Idee der List-Style-Position zurück.
Viele Male werden Sie Ihre Position verschieben,
je nachdem, welchen List-Stil Sie verwenden.
Hier unten habe ich ein Beispiel dafür, wo ich sage, dass ich mein Listenstil-Bild will.
Ich habe zuerst Platz, hier steht, hey, wenn Sie das Bild nicht finden können, gehen Sie voran und
verwenden Sie quadratisch, sonst möchte ich, dass Sie dieses Bild hier verwenden.
In Ordnung? Gehen wir also weiter und
schauen wir uns ein anderes Beispiel an.
In der Datei list.html, was ich hier eingefügt habe, sind zwei verschiedene Arten von Listen,
eine ungeordnete Liste und eine geordnete Liste.
Und ich habe sie einfach mit ein paar anderen Informationen gefüllt.
Und wenn du dir diesen Bildschirm ansiehst, den ich für
dich hier ein bisschen größer machen werde, wenn ich kann.
Sie können sehen, dass die ungeordneten Listen nur die Kreise verwenden, und
die sortierten Listen verwenden die Standardnummern.
Also, lasst uns jetzt damit spielen.
Lassen Sie uns voran und legen Sie ein Stylesheet.
In meinem Stylesheet habe ich da reingegangen, sagte, was ich mit meinen
Listenstilen tun will, ist, dass ich es zu oberen römischen und Ziffern wechseln und stattdessen auch ein Quadrat verwenden möchte.
So sah es vorher aus, und so sehen wir danach aus.
Also, Sie können sehen, es gibt nur noch ein bisschen mehr.
Und dies ist eine sehr einfache Möglichkeit, Ihre Seite
nach oben zu ändern, wie andere Benutzer normalerweise ihre Seite machen.
Eine andere Option, die ich Ihnen nur zeigen wollte,
weil das jeder wirklich mag, ist die Idee, das Listenstil-Bild zu verwenden.
Also werde ich hier runtergehen und diesen Code auskommentieren.
Und wenn Sie sich erinnern, wenn Sie auf diese Idee geachtet haben
, dass diese neue Regel hier unten alle Regeln überschreiben wird.
Also lasst uns weiter gehen und sicherstellen, dass ich meine Seite gespeichert habe, und lasst uns weitergehen und neu laden.
Und in diesem Fall ist das, was passiert ist, dass wir diese regulären Marker entfernt haben
und ich meinen kleinen Blitz reingesteckt habe.
Also, Dinge wie diese zu tun sind nicht schwierig, aber
um ehrlich zu sein, dauert es ein wenig Zeit, besonders wenn Sie Bilder verwenden,
um sicherzustellen, dass Sie alles genau auf die gleiche Weise geschrieben haben.
Tippfehler sind wirklich der Mörder.
Es geht nicht darum, dass es schwierig ist,
es geht darum, dass du nur sehr vorsichtig bist, wenn du diese Dinge machst.
Okay, also lasst uns voran gehen und überprüfen, worüber wir bisher gesprochen haben.
Und nicht nur in diesem Vortrag, sondern im Kurs so weit wir heute bekommen haben.
Und was ich betonen möchte, ist, dass wir bisher Tags stylen, und
diese Tags können immer nur diese Eigenschaftswert-Paare nehmen und
Sie können Ihre Seite in etwas wirklich Großes verwandeln.
Wir sind dabei, etwas Neues und ein bisschen Anderes zu erleben.
Wir werden über Pseudo-Klassen und IDs und Selektoren sprechen.
Und ich möchte sicherstellen, dass Sie sich wohl fühlen,
diese verschiedenen Regeln selbst zu bauen, bevor Sie Fortschritte machen.
Jetzt bequem zu sein bedeutet nicht, dass du perfekt bist.
Es bedeutet nicht, dass Sie wissen, wie man alles macht.
Was es bedeutet, ist, dass Sie zuversichtlich genug sind, um zu gehen und
beginnen Sie mit einigen der Tools, die da draußen sind, um Ihre Website zu verbessern.
Ich liere zwei von ihnen hier, nur weil sie beide sehr gut im
Fall der Chris Pederick Website bekannt sind, oder ich persönlich fand sie wirklich hilfreich.
Eine andere Option ist nur denken Sie daran, dass Sie dort ausgehen
können und Sie eine Websuche nach Entwickler-Tools durchführen können.
Du bist nicht der Erste, und du wirst nicht die letzte Person sein,
die Probleme beim Styling deiner Seite hat.
Meine allgemeine Hoffnung wäre, dass Sie wirklich zu den Foren des
Coursera-Kurses gehen oder in welchem Klassenzimmer Sie sich befinden und Ihre Kommilitonen um Hilfe bitten würden.
Denn wirklich, der einzige Weg zu lernen ist zu üben, zu
üben, Probleme zu stoßen, etwas Hilfe zu bekommen und weiterzumachen.
Wenn Sie mehr und mehr Web-Design tun, hoffe ich, dass Sie das Vertrauen gewinnen,
um etwas wirklich cool zu machen, auf das Sie stolz sind.
Also bleib da rein.
Danke.