Zbliża się artykuł dla początkujących, czas poznać wspaniały świat CSS! Kaskadowe arkusze stylów (CSS) to standardowa metoda stylizacji strony internetowej. W rzeczywistości nie powinieneś mieć żadnych stylów w HTML. HTML nie został zaprojektowany jako język prezentacji, jest raczej językiem strukturalno-semantycznym. Innymi słowy, HTML powinien nadawać strukturę treści, a CSS powinien kontrolować rzeczywistą prezentację.
Trochę trudno to wszystko opisać w jednym artykule, ale CSS nie jest tak trudny do zrozumienia. Zasadniczo twój kod HTML ma trzy rodzaje „haczyków”. Prawdopodobnie już znasz jedną z nich, jest to Twój wspólny, codzienny tag. Możesz także nadać unikalny identyfikator każdemu elementowi lub klasie, który można zastosować do dowolnej liczby elementów. CSS może chwytać się tych „haczyków” (nie jest to termin techniczny) i stylizować element, o którym mowa.
Zróbmy boczny krok i zobaczmy, jak najpierw wdrożyć CSS. W tej chwili zastosujmy następującą składnię w pliku, w sekcji nagłówka (istnieje wiele innych sposobów, możesz także wywołać CSS z zewnętrznego pliku).
Możesz napisać kod CSS pomiędzy znacznikiem początkowym i końcowym. Kod CSS jest również bardzo prosty pod względem składni. Musisz określić selektor, a następnie niektóre właściwości i wartości. Selektor będzie jednym z tych „zaczepów”, na które spojrzeliśmy, pozwoli ci określić, co chcesz zmienić styl. Właściwość pozwoli ci określić, którą właściwość tego elementu chcesz zmienić (rozmiar tekstu, kolor itp.), A wartość określa, na którą chcesz ją zmienić. Prawidłowa składnia to „selektor {właściwość: wartość; właściwość: wartość}”
Mając tę wiedzę bezpiecznie w głowie, przyjrzyjmy się dokładniej naszym „hakom”, które staną się naszymi selektorami. Jak powiedziałem, metka może być hakiem. Powiedz, że chcesz, aby kolor czcionki we wszystkich akapitach był pomarańczowy. Możesz to zrobić, stosując następujący kod CSS: „p {color: # ff9900;}”. Selektor to „p” rzeczywisty znacznik w HTML, właściwość to „kolor”, który kontroluje kolor tekstu, a wartość to „# ff9900”, który jest kodem koloru. Możesz także napisać „pomarańczowy”, ale kody kolorów dają większą kontrolę (więcej na ten temat w innym artykule).
To nie jest takie trudne, prawda? Ok, więc teraz wszystkie akapity mają pomarańczowy kolor tekstu, ale co, jeśli chcemy, żeby był inny? Możesz umieścić je w div zamiast akapitu, ponieważ podaliśmy tylko, że akapity powinny mieć pomarańczowy tekst. To bardzo złe podejście, ale pokazuje, jak działa CSS. Nie powinieneś tego robić z wielu powodów, przede wszystkim dlatego, że tracisz trochę semantyki, ten fragment tekstu jest akapitem, więc powinien znajdować się w znaczniku akapitu. Po drugie, dzięki takiemu podejściu bardzo szybko zabraknie tagów do użycia. Tak więc w tym przypadku stosujemy inne „haki”, możemy określić unikalny identyfikator lub klasę. Zastosujmy identyfikator, ponieważ chcemy tylko zmiany dla tego jednego akapitu.
W twoim HTML identyfikator jest stosowany jako atrybut tagu w następujący sposób:
Rzeczywisty identyfikator nie jest ważny, ale staraj się nie zaczynać go cyfrą i nie miej w nim dużo znaków specjalnych (podkreślenie jest w porządku). Możemy użyć identyfikatora w naszym kodzie CSS, stosując następującą regułę oprócz reguły, którą już mamy: „p # example {color: black;}”. Selektor wskazuje teraz konkretnie na ten jeden akapit, w którym podaliśmy identyfikator „przykład”.
Gdybyśmy zastosowali klasę, mielibyśmy
Jest jednak prostszy sposób, aby to zrobić, możesz po prostu określić klasę, na przykład: „.example {color: black;}”. To pokazuje, jak należy „odczytać” kod. Ilekroć widzisz tylko klasę, powinieneś przeczytać ją jako „zmień kolor tekstu wszystkich elementów tej klasy na czarny”. Jeśli widzisz znacznik, a nawet inny identyfikator lub klasę z przodu, powinieneś przeczytać go jako (w przypadku akapitu) „zmień kolor tekstu wszystkich akapitów tej klasy na czarny”.
To są podstawy CSS, może być pomocna lista właściwości, ale w sieci jest wiele zasobów, aby dowiedzieć się więcej o CSS, ale wrócę z więcej informacji i możesz zacząć czytać Scriptastique, aby uzyskać więcej informacji na temat CSS.
Podsumowanie
Nazwa artykułu
Jak stylizować stronę za pomocą CSS
Opis
Ten przewodnik dla początkujących zawiera instrukcje dotyczące stylizowania stron internetowych za pomocą CSS do zmiany kolorów, czcionek i innych elementów strony.
Autor
Daniel Pataki
