Witajcie, przyjaciele YCLAS! W tym tygodniu dzielimy się kilkoma wskazówkami i dobrymi pomysłami, aby Twoja strona wyglądała lepiej dzięki kodowi CSS.
Musisz wiedzieć, że wygląd Twojej strony zdecyduje, czy użytkownicy i klienci zostaną, czy odejdą w poszukiwaniu lepiej wyglądającej strony.
Najpierw musisz włączyć korzystanie z CSS w panelu swojej strony; Kliknij tutaj, aby zobaczyć, jak włączyć i dodać niestandardowy CSS w YCLAS.
Zaczynajmy!
Tło
Obecnie najlepsze strony korzystają z degradowanych teł – to prosta i płynna zmiana koloru; jeśli wybierzesz odpowiednie, Twoja strona zyska nowoczesny styl. Tutaj masz 3 różne modne tła:
Gradient #1 (kolory Pacyfiku)
#grad
{background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
Gradient #2 (mocne kolory)
#grad
{background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}
Gradient #3 (łagodne kolory)
#grad
{background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}
Czcionki
Czcionka Twojej strony odgrywa kluczową rolę, zalecamy korzystanie z czcionek bezszeryfowych (Sans-Serif), takich jak:
Arial
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
Tahoma
p.sansserif {
font-family: Tahoma, Geneva, sans-serif;
}
Trebuchet MS
p.sansserif {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
To czcionki wygodne dla oka.
Obramowania elementów
Kolejna wskazówka to zastosowanie zaokrąglonych krawędzi dla elementów, co sprawia, że Twoja strona wygląda prosto i nowocześnie, aby to osiągnąć, użyj tego kodu:
p.round {
border: 2px solid black;
border-radius: 8px;
}
Możesz dostosować kolor (solid black) oraz radius (8px) obramowania.
Pasek nawigacji
Pasek nawigacji jest jedną z najważniejszych rzeczy na stronie internetowej. Dobrze wykonany pasek nawigacji pomoże użytkownikom właściwie poruszać się po Twojej stronie. Tutaj jest Sticky-Active/Current Navigation Bar; sprawi on, że Twój pasek nawigacji będzie przesuwał się i przyklejał na górze, zależnie od pozycji przewijania:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4682B4;
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: White;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4169E1;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#search">Search</a></li>
<li><a href="#YCLAS">YCLAS</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
Możesz zmienić kolory (Background, Text, and Active/Current Link), oraz zmienić rozmiar (Padding) paska nawigacji.
Responsywne obrazy
Obrazy! Obecnie obrazy są niezbędne na każdej stronie internetowej, i jesteśmy przyzwyczajeni do widzenia obrazów wszędzie; ale nie wystarczy tylko umieścić obraz na swojej stronie, musisz ustawić ten obraz jako responsywny, aby lepiej wyglądał na każdym urządzeniu. Aby to osiągnąć, użyj tego kodu dla wszystkich obrazów, które chcesz uczynić responsywnymi:
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="X" width="IMG width" height="IMG height">
Litera X reprezentuje adres URL obrazu, w IMG Width i IMG Height musisz wpisać oryginalny rozmiar obrazu.
Układ strony
To rozmieszczenie głównych elementów na Twojej stronie, np. nagłówek – nagłówek jest pierwszym elementem, który widzi każdy użytkownik wchodzący na stronę, więc musi być łatwy do zrozumienia i prosty. Tutaj jest kod CSS dla nagłówka z obrazem i tekstem:
body {
margin: 0;
}
.header {
background:url(X) no-repeat;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>HEADER TEXT</h1>
</div>
Litera X reprezentuje adres URL obrazu, w Padding możesz ustawić rozmiar nagłówka z obrazem, a Header Text to miejsce, gdzie wpisujesz to, co chcesz wyświetlić na obrazie nagłówka.
Kolejnym głównym elementem Twojej strony jest Stopka, umieszczona na dole strony, równie ważna jak nagłówek. Możesz użyć tego kodu, aby stopka dobrze wyglądała:
.footer {
background-color: #00FFFF;
padding: 25px;
text-align: center;
}
Możesz zmienić kolor i rozmiar (padding) stopki.
Nowoczesny CSS w 2026 roku: co się zmieniło od tych wskazówek
Fragmenty kodu powyżej wciąż pokazują podstawowe idee, ale CSS zmienił się bardzo od napisania tego wpisu. Przeglądarki dzielą teraz wspólny zestaw podstawowych funkcji (baseline), a szablon, na którym działa Twoja strona, decyduje, jakie selektory może docelowo obsłużyć Twój CSS. Oto, co warto wiedzieć, zanim wklejsz coś do swojego niestandardowego CSS.
Sprawdź wsparcie przeglądarek za pomocą Baseline
Baseline, zdefiniowane przez W3C WebDX Community Group, oznacza funkcję jako „nowo dostępną”, gdy działa we wszystkich głównych przeglądarkach (Chrome, Edge, Firefox i Safari, na komputerach i urządzeniach mobilnych). Staje się „powszechnie dostępna” 30 miesięcy później, gdy większość stron może z niej korzystać bez obaw o starsze przeglądarki. MDN pokazuje status Baseline na górze każdej strony dokumentacji. Poniżej funkcje, które zastępują większość powyższych rozwiązań zastępczych:
| Zamiast... | Używaj dzisiaj | Status Baseline (MDN) |
|---|---|---|
| Powtarzania kolorów hex w każdej regule | Niestandardowe właściwości CSS (zmienne), np. var(--nova-accent) | Dawno ugruntowane |
| Ręcznego wybierania odcieni hover | color-mix(), np. kolor akcentu zmieszany z 18% czerni | Powszechnie dostępne (we wszystkich głównych przeglądarkach od maja 2023) |
| Dodatkowych klas lub JavaScript do stylowania elementu nadrzędnego | :has(), np. form:has(:invalid) button { opacity: .6; } | Powszechnie dostępne (we wszystkich głównych przeglądarkach od grudnia 2023) |
| Długich, powtarzanych selektorów | Zagnieżdżanie CSS za pomocą & | Powszechnie dostępne (we wszystkich głównych przeglądarkach od grudnia 2023) |
| Zapytań o media powiązanych z szerokością ekranu | Zapytania kontenerowe (@container), aby karta dopasowywała się do kolumny, w której się znajduje | Powszechnie dostępne (we wszystkich głównych przeglądarkach od lutego 2023) |
Elementów menu unoszonych (li { float: left; }) | Flexbox: display: flex; gap: 8px; | Dawno ugruntowane |
Zacznij od swojego szablonu, nie od pustej strony
Aktualny przewodnik Yclas włącza niestandardowy CSS w Design > Custom CSS, za pomocą przełącznika „Use custom CSS”. Ostrzega też, że nazwy klas różnią się między szablonami, więc reguła napisana dla jednego szablonu może nie działać po zmianie szablonu. Ogólne selektory, takie jak #grad lub ul, albo nie robią nic, albo przestylizowują każdą listę na Twojej stronie, więc zawsze celuj w klasy, które faktycznie wykorzystuje Twój szablon (kliknij prawym przyciskiem na element i wybierz Inspect/Zbadaj w przeglądarce, aby je znaleźć).
Nowe strony Yclas działają na szablonie Nova, który jest zbudowany na zmiennych CSS. Aby zmienić główny kolor, użyj ustawienia koloru akcentu w opcjach szablonu, a nie CSS: przyciski, linki i wyróżnienia podążają za nim, a odcień hover jest obliczany automatycznie. W przypadku innych zmian, nadpisanie zmiennej jest bezpieczniejsze niż przepisywanie reguł, bo jedna linia zmienia każdy element, który jej używa:
:root {
--nova-radius: 10px; /* bardziej zaokrąglone lub kwadratowe karty i przyciski */
--nova-radius-sm: 6px;
}
Jeszcze dwie zasady, które uchronią Cię przed problemami. Pole niestandardowego CSS przyjmuje tylko CSS, więc pomiń <style>, <head> i tagi HTML pokazane w niektórych fragmentach powyżej. I sprawdź każdą zmianę zarówno na telefonie, jak i na komputerze, przed zapisaniem.
Wypróbuj te wskazówki i daj nam znać, czy działają dla Ciebie!
Uwaga: korzystanie z kodu CSS wymaga pewnych umiejętności i doświadczenia, jeśli nigdy nie używałeś CSS, zalecamy skorzystanie z tutoriali CSS i przewodników CSS, aby osiągnąć to, czego szukasz. Jeśli nie chcesz korzystać z CSS, możesz użyć naszych szablonów, oferujemy różnorodne niestandardowe szablony stron Kliknij tutaj, aby je zobaczyć.
Pozdrawiamy,
zespół YCLAS.
