10 prostych przykładów kodu CSS, których możesz się nauczyć w 10 minut

10 prostych przykładów kodu CSS, których możesz się nauczyć w 10 minut

Gdy zaczniesz bawić się w HTML, prawdopodobnie będziesz zainteresowany dodaniem większej wizualnej siły do ​​swoich stron internetowych. CSS jest najlepszym sposobem, aby to zrobić. CSS pozwala wprowadzać zmiany na całej stronie bez polegania na wbudowanym stylu.





Oto kilka prostych przykładów CSS, które pokażą Ci, jak dokonać podstawowych zmian stylizacji na Twojej stronie internetowej.



1. Podstawowy kod CSS do łatwego formatowania akapitów

Stylowanie za pomocą CSS oznacza, że ​​nie musisz określać stylu za każdym razem, gdy tworzysz element. Możesz po prostu powiedzieć „wszystkie akapity powinny mieć ten konkretny styl” i gotowe.





Powiedzmy, że chcesz każdy akapit (

, jeden ze znaczników HTML, które każdy powinien znać), aby był nieco większy niż zwykle. I z ciemnoszarym tekstem zamiast czarnego.

Związane z: Ściągawka HTML



Kod CSS do tego to:

p { font-size: 120%; color: dimgray; }

Prosty! Teraz za każdym razem, gdy przeglądarka renderuje akapit, tekst odziedziczy rozmiar (120 procent normalnego) i kolor ('dimgray').



Jeśli jesteś ciekawy, jakich kolorów zwykłego tekstu możesz użyć, sprawdź to Lista kolorów CSS od Mozilli.

2. Przykład CSS do zmiany wielkości liter

Chcesz stworzyć oznaczenie akapitów, które powinny być pisane małymi kapitalikami? Przykładem CSS na to byłoby:



p.smallcaps { font-variant: small-caps; }

Aby utworzyć akapit w całości pisany małymi kapitalikami, użyj nieco innego tagu HTML. Oto jak to wygląda:

Your paragraph here.

Dodanie kropki i nazwy klasy do elementu określa podtyp tego elementu zdefiniowany przez klasę. Możesz to zrobić za pomocą tekstu, obrazów, linków i prawie wszystkiego innego.

Jeśli chcesz zmienić zestaw tekstu na konkretny przypadek, użyj tych przykładów kodu CSS:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

Ostatnia zaczyna się wielką literą każdego zdania.

Zmiany stylu nie ograniczają się do akapitów. Łączu można przypisać cztery różne kolory: jego kolor standardowy, kolor odwiedzony, kolor wskaźnika i aktywny kolor (wyświetlany po kliknięciu). Użyj tego przykładowego kodu CSS:

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

W przypadku linków po każdym „a” następuje dwukropek, a nie kropka.

Każda z tych deklaracji zmienia kolor linku w określonym kontekście. Nie ma potrzeby zmiany klasy łącza, aby zmienić kolor.

Podkreślony tekst wyraźnie wskazuje na link, ale czasami lepiej jest usunąć to podkreślenie. Osiąga się to za pomocą atrybutu „tekst-dekoracja”. Ten przykład CSS pokazuje, jak usunąć podkreślenia w linkach:

a { text-decoration: none; }

Wszystko ze znacznikiem linku ('a') pozostanie niepodkreślone. Chcesz to podkreślić, gdy użytkownik najedzie na nie kursorem? Po prostu dodaj:

a:hover { text-decoration: underline; }

Możesz również dodać tę dekorację tekstową do aktywnych łączy, aby podkreślenie nie zniknęło po kliknięciu łącza.

Chcesz przyciągnąć więcej uwagi do swojego linku? Przycisk linku to świetny sposób, aby to zrobić. Ten wymaga jeszcze kilku linijek:

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Wyjaśnijmy ten przykładowy kod CSS.

Uwzględnienie wszystkich czterech stanów linków gwarantuje, że przycisk nie zniknie, gdy użytkownik najedzie na niego kursorem lub go kliknie. Możesz także ustawić różne parametry dla najechania i aktywnych linków, np. zmiana koloru przycisku lub tekstu.

Kolor tła jest ustawiany za pomocą koloru tła, a kolor tekstu za pomocą koloru. Padding definiuje rozmiar pola --- tekst jest dopełniony o 10 pikseli w pionie i 25 pikseli w poziomie.

Text-align zapewnia, że ​​tekst jest wyświetlany na środku przycisku, a nie z boku. Dekoracja tekstu, jak w ostatnim przykładzie, usuwa podkreślenie.

zabronione nie masz pozwolenia na dostęp

Kod CSS „display: inline-block” jest nieco bardziej skomplikowany. Krótko mówiąc, pozwala ustawić wysokość i szerokość obiektu. Zapewnia również rozpoczęcie nowej linii po wstawieniu.

6. Przykładowy kod CSS do tworzenia pola tekstowego

Zwykły akapit nie jest zbyt ekscytujący. Jeśli chcesz wyróżnić element na swojej stronie, możesz dodać obramowanie. Oto jak to zrobić za pomocą łańcucha prostego kodu CSS:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

Ten jest prosty. Tworzy solidną fioletową ramkę o szerokości pięciu pikseli wokół dowolnego akapitu ważnej klasy. Aby akapit odziedziczył te właściwości, po prostu zadeklaruj to w ten sposób:

Your important paragraph here.

To zadziała niezależnie od wielkości akapitu.

Istnieje wiele różnych stylów obramowania, które można zastosować; zamiast „jednolity” spróbuj „kropkowany” lub „podwójny”. Tymczasem szerokość może być „cienka”, „średnia” lub „gruba”. Kod CSS może nawet określać grubość każdego obramowania indywidualnie, na przykład tak:

border-width: 5px 8px 3px 9px;

Daje to górne obramowanie pięciu pikseli, prawe obramowanie ośmiu, dolne trzy i lewe obramowanie o rozmiarze dziewięciu pikseli.

7. Wyśrodkuj elementy za pomocą podstawowego kodu CSS

Jak na typowe zadanie, centrowanie elementów kodem CSS jest zaskakująco nieintuicyjne. Kiedy już to zrobisz kilka razy, stanie się to znacznie łatwiejsze. Masz kilka różnych sposobów na wyśrodkowanie rzeczy.

W przypadku elementu blokowego (zwykle obrazu) użyj atrybutu margin:

.center { display: block; margin: auto; }

Gwarantuje to, że element jest wyświetlany jako blok, a margines z każdej strony jest ustawiany automatycznie. Jeśli chcesz wyśrodkować wszystkie obrazy na danej stronie, możesz nawet dodać „margin: auto” do tagu img:

img { margin: auto; }

Aby dowiedzieć się, dlaczego to działa w ten sposób, sprawdź Objaśnienie modelu pudełkowego CSS w W3C .

Ale co, jeśli chcesz wyśrodkować tekst za pomocą CSS? Użyj tego przykładowego kodu CSS:

.centertext { text-align: center; }

Chcesz użyć klasy „centertext”, aby wyśrodkować tekst w akapicie? Po prostu dodaj tę klasę do

etykietka:

This text will be centered.

8. Przykłady CSS do dostosowywania dopełnienia

Dopełnienie elementu określa, ile miejsca powinno być z każdej strony. Na przykład, jeśli dodasz 25 pikseli wypełnienia u dołu obrazu, następujący tekst zostanie przesunięty o 25 pikseli w dół. Dopełnieniem może być wiele elementów, nie tylko obrazy.

Załóżmy, że chcesz, aby każdy obraz miał 20 pikseli wypełnienia po lewej i prawej stronie oraz 40 pikseli na górze i na dole. Najbardziej podstawowe wykonanie kodu CSS w tym celu to:

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

Istnieje jednak krótsza instrukcja CSS, która przedstawia wszystkie te informacje w jednym wierszu:

img { padding: 40px 25px 40px 25px; }

Ustawia to górne, prawe, dolne i lewe dopełnienia na prawą liczbę. Dzięki zastosowaniu tylko dwóch wartości (40 i 25) można go jeszcze skrócić:

img { padding: 40px 25px }

Gdy używasz tylko dwóch wartości, pierwsza wartość jest ustawiana dla góry i dołu, a druga dla lewej i prawej.

9. Wyróżnij wiersze tabeli za pomocą kodowania CSS

Kod CSS sprawia, że ​​tabele wyglądają znacznie ładniej niż domyślne siatki. Dodawanie kolorów, dostosowywanie ramek i dostosowywanie stołu do ekranów urządzeń mobilnych jest łatwe. Ten prosty przykład CSS pokazuje, jak podświetlić wiersze tabeli, gdy najedziesz na nie myszą.

tr:hover { background-color: #ddd; }

Teraz za każdym razem, gdy najedziesz myszą na komórkę tabeli, ten wiersz zmieni kolor. Aby zobaczyć inne fajne rzeczy, które możesz zrobić, sprawdź Strona W3C na temat fantazyjnych tabel CSS .

10. Przykład CSS do przesuwania obrazów między przezroczystymi i nieprzezroczystymi

Kod CSS może również pomóc w robieniu fajnych rzeczy z obrazami. Oto przykład CSS, który wyświetla obrazy z mniej niż pełnym przezroczystością, więc wydają się nieco „wybielone”. Gdy najedziesz myszą na obrazy, zostaną one całkowicie skrojone:

img { opacity: 0.5; filter: alpha(opacity=50); }

Atrybut „filter” działa tak samo jak „przezroczystość”, ale Internet Explorer 8 i starsze wersje nie rozpoznają pomiaru nieprzezroczystości. W przypadku starszych przeglądarek dobrym pomysłem jest jego uwzględnienie.

Teraz, gdy obrazy są nieco przezroczyste, możesz sprawić, by były całkowicie nieprzezroczyste po najechaniu myszą:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 przykładów CSS z kodem źródłowym

Dzięki tym przykładom kodu CSS powinieneś mieć znacznie lepsze pojęcie o tym, jak działa CSS. Szablony CSS może pomóc, ale zrozumienie surowych elementów jest niezbędne.

Oto 10 prostych przykładów kodu CSS:

  1. Łatwe formatowanie akapitów
  2. Zmień wielkość liter
  3. Zmień kolory linków
  4. Usuń podkreślenia linków
  5. Utwórz przycisk linku
  6. Utwórz pole tekstowe
  7. Elementy wyśrodkowane
  8. Dostosuj dopełnienie
  9. Wyróżnij wiersze tabeli
  10. Spraw, aby obrazy były nieprzezroczyste

Przeglądając je ponownie, zauważysz kilka wzorców, które możesz zastosować do przyszłego kodu. I wtedy wiesz, że naprawdę zacząłeś być mistrzem CSS. Ale pamiętanie o tym może być trudne. Możesz dodać tę stronę do zakładek, aby móc z niej skorzystać w przyszłości.

Udział Udział Ćwierkać E-mail Ściągawka z podstawowymi właściwościami CSS3

Opanuj podstawową składnię CSS dzięki naszej ściągawce do właściwości CSS3.

Czytaj dalej Powiązane tematy
  • Programowanie
  • Projektowanie stron
  • CSS
  • Skrypty
O autorze Christian Cawley(1510 opublikowanych artykułów)

Zastępca redaktora działu Security, Linux, DIY, Programming i Tech Explained oraz Really Useful Producent podcastów, z dużym doświadczeniem w obsłudze komputerów i oprogramowania. Christian jest współtwórcą magazynu Linux Format, majsterkowiczem Raspberry Pi, miłośnikiem Lego i fanem gier retro.

Więcej od Christiana Cawleya

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować