Jak korzystać z CSS — porady i wskazówki dotyczące projektowania stron internetowych dla początkujących

Nawet Ty możesz nauczyć się, jak używać CSS do stylizowania stron internetowych dzięki tym wskazówkom CSS dla początkujących.

Nie musisz nic wiedzieć o kodzie komputerowym. Wszystko, co musisz wiedzieć, to jak kopiować i wklejać.

Ale najpierw, czym jest CSS?

Kaskadowe arkusze stylów (CSS) to kod języka arkuszy stylów, którego twórcy motywów używają do opisywania i zmiany prezentacji lub wyglądu dokumentu HTML.

Co robi CSS?

Mówiąc prościej, plik CSS sprawia, że ​​strony HTML wyglądają ładnie.

Bez względu na to, z jakiej platformy blogowej korzystasz, możesz zmienić właściwości CSS, aby Twój blog wyglądał jeszcze lepiej.

Nie ma znaczenia, z jakiej platformy blogowej korzystasz.

W ustawieniach motywu będziesz mieć opcję Niestandardowy CSS lub Dodatkowy CSS .

Być może nigdy nie spojrzałeś na tę opcję.

Lub, jeśli tak, możesz pomyśleć, że nauczenie się kodowania jest zbyt trudne.

Ale to jest bardzo łatwe.

Nie wiem nic o tworzeniu stron internetowych ani składni CSS, ale mogę zmienić atrybut stylu w kilka sekund.

Wszystko, co musisz zrobić, to skorzystać z Narzędzi dla programistów w przeglądarce Chrome lub Firefox i poznać kilka prostych sztuczek i wskazówek dotyczących CSS.

Spójrzmy, jakie to łatwe.

Dlaczego chcesz się nauczyć, jak edytować CSS swojego bloga?

Prawdopodobnie masz wiele ustawień w motywie swojego bloga.

Ale istnieje wiele mniejszych elementów, których może brakować.

Nawet w motywach premium dla WordPress niektóre opcje nie są dostępne w opcjach standardowych.

Właśnie dlatego możesz pomóc swojemu CSS działać lepiej, wprowadzając własne edycje i zmiany.

Zmieniając zewnętrzny arkusz stylów, może odwoływać się do wszystkich stron HTML.

Zmiana nagłówków HTML na jednej stronie spowoduje zmianę tagu HTML na wszystkich Twoich stronach.

Odwołanie nazywa się pseudoelementem.

Oznacza to, że zmiana wyglądu nagłówka H2 spowoduje zmianę wszystkich nagłówków H2 w Twojej witrynie.

Ale nie musisz uczyć się wszystkiego o tych komplikacjach.

Wszystko, co musisz wiedzieć, to to, że to działa i że możesz stylizować swojego bloga dokładnie tak, jak chcesz, aby wyglądał, nie wiedząc nic o kodowaniu.

Zacznijmy od kilku prostych wskazówek CSS dla początkujących.

Jak łatwo zmienić wbudowany CSS

Pierwszym krokiem jest otwarcie bloga w przeglądarce Firefox, Chrome lub Microsoft Edge.

W poniższych przykładach użyłem przeglądarki Firefox. Uważam, że jest trochę bardziej przyjazny w użyciu niż Chrome.

Ale oba działają w podobny sposób.

Otwórz swojego bloga w nowej karcie lub oknie. Możesz przejść do strony, którą chcesz zmienić.

Teraz otwórz Narzędzia programistyczne, Inspektor, z menu Narzędzia w przeglądarce Firefox lub menu Widok w przeglądarce Chrome.

Kliknij Inspektor, aby otworzyć panel narzędzi.

Możesz wybrać dowolny element stylu wbudowanego na swojej stronie, używając strzałki wyboru w lewym górnym rogu panelu narzędzi.

Przesuń kursor po stronie, aby wybrać element. Lub możesz kliknąć poszczególne elementy na liście.

Zobaczysz każdy wybrany element podświetlony na niebiesko w widoku swojej strony internetowej w przeglądarce.

Teraz możesz wprowadzić zmiany w wyglądzie swojej strony.

Korzystanie z selektora CSS

W moim przykładzie zamierzam zmienić wygląd elementu tytułowego H2.

Możesz zmienić element H1, tekst główny lub podpis obrazu.

Chcę zacząć od zmiany rozmiaru czcionki. Wszystko, co musisz zrobić, to kliknąć znacznik stylu font-size i zmienić numer.

Zmieniłem rozmiar z 33px na 56px. Widać, że rozmiar nagłówka jest teraz większy.

Nie martw się. Nie zmieniłeś swojej opublikowanej strony bloga. To, co widzisz w okienku przeglądarki, to tylko podgląd zmian.

Możesz dowolnie bawić się dowolnym elementem HTML.

Wszystko, co widzisz w okienku przeglądarki, to tylko podgląd tego, jak będą wyglądać Twoje zmiany w regule CSS.

Teraz chcę zmienić kolor tekstu.

Jeśli klikniesz kolorową kropkę między znacznikiem koloru a numerem, otworzysz selektor kolorów.

Teraz po prostu wybierz kolor, którego chcesz użyć.

Zmiana koloru atrybutu HTML jest prosta. Tutaj zmieniłem kolor z czarnego na niebieski.

Wygląda dobrze, ale wysokość linii mogłaby być lepsza. zmienię to.

Bieżące ustawienie to 1,2, co oznacza zbyt dużą odległość między wierszami. Chcę, aby linie były bliżej siebie.

Więc zmienię na 1.0.

To wygląda dużo lepiej.

Wprowadziłem trzy zmiany w wyglądzie nagłówka H2 w trybie podglądu. Zmieniłem rozmiar czcionki, kolor i odstępy między wierszami.

Teraz nadszedł czas, aby dodać te zmiany do mojej aktywnej witryny.

Jak uzyskać kod do swojej witryny

Musisz skopiować linie kodu, które zmodyfikowałeś.

Wybierz i skopiuj cały kod. Upewnij się, że skopiowałeś wszystkie wiersze, w tym ostatni nawias.

Teraz wklej go do edytora tekstu. Możesz użyć Notatnika na komputerze PC lub Edytora tekstu na komputerze Mac.

Kolejna zmiana, którą wprowadziliśmy dotyczyła koloru. Tę linię też musimy skopiować.

Wystarczy skopiować linię dla koloru.

Na powyższym obrazku widać, że element H2 jest pogrubiony. Oznacza to, że jest to ten sam pseudoelement, co nasz pierwszy kod. Możesz więc używać ich razem.

Skopiuj wiersz.

Teraz dodaj wiersz do edytora tekstu.

Może być konieczne dodanie lub usunięcie kilku spacji, aby linia koloru była wcięta tak samo.

Teraz możesz dodać te trzy zmiany do swojej aktywnej witryny.

Dodaj kod do swojej witryny

Przejdź do opcji motywu i wybierz opcje CSS.

W motywach WordPress znajduje się w Konfiguratorze motywu i nazywa się Dodatkowy CSS lub Niestandardowy CSS.

Będzie się nazywać podobnie na innych platformach blogowych.

Teraz skopiuj cały kod z edytora tekstu i wklej go na karcie Dostosowywanie.

Gdy tylko wkleisz kod, przeglądarka wyświetli wprowadzone zmiany.

Kliknij opublikuj i gotowe.

Oto porównanie przed i po moich zmianach.

Możesz zrobić znacznie więcej

Moje porady CSS dla początkujących wprowadzenie krok po kroku do edycji HTML Stylizacja CSS to dopiero początek.

Możesz zrobić o wiele więcej, jeśli chcesz eksperymentować i próbować zmieniać inne elementy.

Łatwo jest dodawać obramowania lub cienie do obrazów, przesuwać tekst w lewo lub w prawo lub zmieniać szerokość tekstu podstawowego.

Możesz przesuwać marginesy lub zmniejszać lub zwiększać wypełnienie i modyfikować wyrównanie.

Istnieją setki opcji, które możesz edytować.

Pamiętaj, że pracując w Narzędziach dla programistów, nie będziesz mieć wpływu na swoją witrynę.

Wszelkie wprowadzone zmiany są podglądem i tylko wizualizacją w tym oknie przeglądarki.

Nie ma znaczenia, czego spróbujesz, czy to działa, czy nie.

Pomyśl o tym jak o placu zabaw, dzięki któremu dowiesz się, o ile więcej możesz zrobić, aby nadać styl swojej witrynie lub blogowi.

Bądź ciekawy, a będziesz się dobrze bawić, ucząc się tej nowej umiejętności dzięki tym wskazówkom dotyczącym CSS dla początkujących.

Duża dodatkowa wskazówka dotycząca narzędzi programistycznych

Teraz, gdy masz otwartą ramkę Narzędzi dla programistów, możesz zrobić jedną bardzo fajną rzecz.

Możesz przetestować szybkość swojej witryny.

Wszystko, co musisz zrobić, to kliknąć kartę Sieć.

Następnie kliknij CTRL + R.

Szybkość pełnego załadowania strony zobaczysz na czerwono na linii u dołu oznaczonej strzałką.