Wprowadzenie do zajęć w html i css

Rozumie się samo przez się, że tworzenie stron internetowych jest ogromne. Duża część tego wynika z tego, że prawie wszyscy są w Internecie. Jednak brakuje programistów w tej dziedzinie i dlatego program rozwoju sieci jest tak łatwo dostępny i bezpłatny. Mając to na uwadze, pokażemy ci trochę o czym jest HTML i CSS. Mówiąc dokładniej, pokażemy Ci, jak działają „klasy”.

Nie zaczynamy od samego początku, ponieważ jest już mnóstwo darmowego programu nauczania. Zamiast tego pokażemy Ci, jak działają klasy, ponieważ jest to niezbędny element do stylizacji Twojej witryny. Pomyśleliśmy również, że warto go omówić, zanim opublikujemy nasze spojrzenie na interfejs Bootstrap API Twittera, ponieważ klasy również są w nim wymagane.

Zrzeczenie się odpowiedzialności, jeśli jesteś zupełnie nowy w HTML i CSS, prawdopodobnie nie jest to dobry początek. Jeśli jednak jesteś obeznany z tym, nie powinno być zbyt trudno go podnieść. Ale jeśli szukasz kompletnego samouczka dla początkujących, istnieje wiele świetnych opcji online. Aby wymienić tylko kilka, jest FreeCodeCamp, The Odin Project, CodeAcademy, Code School, Team Treehouse, Udacity i wiele innych. Jeśli zdecydujesz się rozpocząć kopanie w jednym z nich, zdecydowanie zalecam trzymanie się jednego z nich (np. Free Code Camp) i dokończenie go przed rozpoczęciem kolejnego, ponieważ wiele „podstawowych” treści może być dość powtarzalnych.

Nie wchodząc w grę, zagłębmy się w to, o co chodzi w klasach.

Jak działają klasy

Zajęcia są niezwykle przydatne. Eliminują powtarzalność stylizacji HTML. Bez zajęć stylizowałbyś każdy element indywidualnie. A jeśli miałbyś dwa takie same elementy, ale chciałbyś stylizować każdy z nich inaczej? To byłby kompletny bałagan. Właśnie dlatego mamy zajęcia. Klasy dodają strukturę organizacyjną do kodu HTML, umożliwiając utrzymanie kodu w stosunkowo czystości. Ponadto klasy mogą być używane więcej niż jeden raz. Innymi słowy, nigdy nie będziesz musiał dwukrotnie tworzyć tych samych reguł stylizacji.

Oto jak wyglądają klasy w naszym etykietka:

Jak widać, pod naszym tagiem ciała mamy dwa

elementy o różnych klasach. Pierwszy

tag ma klasę „head1”, podczas gdy drugi tag ma klasę „head2”. W naszym CSS zamiast stosować stylizację tylko do

element, możemy zastosować stylizację do poszczególnych klas. Dlaczego mielibyśmy to zrobić?

Głównym powodem jest to, że nie chcesz wszystkich

elementy mające tę samą stylizację. Stworzenie strony internetowej spowodowałoby wiele problemów, a ponadto strony nie wyglądałyby zbyt dobrze. Klasy pozwalają nam zastosować stylizację tylko do jednego wystąpienia tagu, a nie wszystkich

tagi w całym dokumencie. Jak piszesz zajęcia w HTML? Lubię to:

Niektóre treści

Możesz dodać właściwość „class” do prawie dowolnego elementu HTML.

Wspaniały! Mamy więc zajęcia, ale w ich obecnym stanie tak naprawdę nic nie robią. To dlatego, że nie dodaliśmy jeszcze żadnych zasad stylizacji do klasy. Aby to zrobić, musimy utworzyć osobny dokument .css. Nazywam to po prostu main.css. W tym dokumencie stylizowalibyśmy taką klasę:

Aby wybrać klasę, którą chcemy nadać styl, robimy to:

.head1 {kolor: czerwony; wyrównanie tekstu: środek; }

W nawiasach klamrowych znajdują się wszystkie „zasady” (lub stylizacja), które stosujemy do tej klasy. Istnieje wiele różnych zasad, które możesz wprowadzić do tej klasy. W moim przypadku zmieniłem kolor tekstu na czerwony za pomocą reguły „kolor” i wyśrodkowałem tekst za pomocą reguły „wyrównanie tekstu”. Możesz znaleźć pełną listę reguł CSS, a także ich dokumentację z Mozilla's Developer Network.

Teraz nasza stylizacja nadal nie jest stosowana do klas w naszym dokumencie HTML, a to dlatego, że jeszcze nie połączyliśmy ze sobą dwóch plików. Wróć do pliku HTML i w tag, chcesz połączyć plik CSS, wykonując następujące czynności:

Twój dokument HTML powinien wyglądać następująco:

Twój projekt testowy powinien wyglądać tak w Internecie:

Bardziej szczegółowe wideo przedstawiające te kroki znajduje się poniżej.

Wideo

Wniosek

I to wszystko na zajęcia! Są bardzo proste do zrozumienia. Oczywiście na dużych i popularnych stronach, które odwiedzasz, zasady w ramach zajęć są o wiele bardziej skomplikowane niż to, co omówiliśmy, ale w najbardziej podstawowej formie, czyli w jaki sposób działają.

Jeśli masz jakieś pytania lub masz problemy z długim czasem, daj nam znać w komentarzach poniżej lub na forach PCMech! Lub, jeśli chcesz być zainteresowany kompletnym przewodnikiem HTML / CSS dla początkujących na PCMech, daj nam również znać!