Klovy.pl – Twoje centrum wiedzy!
Related Articles
Witaj w 4 części nauki HTML
Rozwijamy CSS!
1. Navbar
Tym razem coś o paskach navigacji. Navbar zazwyczaj znajduje się u góry, lub po boku strony, na naszej stronie główny navbar znajduje się po lewej stronie. Pomaga on w znalezieniu oraz poruszaniu się po stronie. Prosty przykład paska nawigacji w HTML i CSS:
HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prosty Navbar z CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<a href="#">Strona główna</a>
<a href="#">O nas</a>
<a href="#">Usługi</a>
<a href="#">Kontakt</a>
</nav>
</header><section class="main-content">
<h1>Witaj na naszej stronie!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section></body>
</html>CSS z notatkami:
/* Resetowanie stylów */
- {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Stylizacja nawigacji */
header {
background-color: #333;
color: #fff;
padding: 10px 0;
}nav {
text-align: center;
}nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}nav a:hover {
text-decoration: underline;
}/* Stylizacja sekcji głównej */
.main-content {
text-align: center;
padding: 50px 0;
}.main-content h1 {
font-size: 36px;
margin-bottom: 20px;
}.main-content p {
font-size: 18px;
color: #555;
}
2. Przyciski
Bardzo często używany element na stronie internetowej, zazwyczaj używany do przeniesienia na podstronę, czy potwierdzenia akcji. W HTML mamy znacznik <button> lecz my dodamy CSS. Przykład kilku przycisków z użyciem CSS:
HTML:<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przyciski z CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="primary">Przycisk</button>
<button class="secondary">Przycisk</button>
<button class="success">Przycisk</button>
<button class="danger">Przycisk</button>
</body>
</html>
CSS:
/* Stylizacja przycisków */
button {
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 5px;
font-size: 16px;
}.primary {
background-color: #007bff;
color: #fff;
}.secondary {
background-color: #6c757d;
color: #fff;
}.success {
background-color: #28a745;
color: #fff;
}.danger {
background-color: #dc3545;
color: #fff;
}button:hover {
opacity: 0.8;
}
Tym razem w kodzie CSS użyłem kilku nowych rzeczy:
- cursor – zmieniamy wygląd kursora, w naszym przypadku na 'pointer’, czyli tak jakbyśmy chcieli klikać,
- border-radius – zaokrąglenie na bokach,
- oraz:
button:hover {
opacity: 0.8;
}
w przypadku najechania(hover) na 'button’, zmieniamy przeźroczystość, 'ściemniając’ przycisk aby wyglądał na najechany.
3. Formularze
Tym razem poruszymy wygląd naszych formularzy. Dodamy:
- pola na dane,
- prostą walidację,
- przycisk 'wyślij’,
oczywiście na ten moment formularz nie jest nigdzie wysyłany. Kod do projektu:
HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formularze z CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<label for="name">Imię:</label>
<input type="text" id="name" name="name"><br><br> <label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Wyślij">
</form></body>
</html>CSS:
/* Stylizacja formularzy */
form {
max-width: 300px;
margin: 0 auto;
}label {
display: block;
margin-bottom: 5px;
}input[type="text"],
input[type="email"],
input[type="submit"] {
padding: 10px;
margin-bottom: 10px;
width: 100%;
border-radius: 5px;
border: 1px solid #ccc;
}input[type="submit"] {
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}input[type="submit"]:hover {
opacity: 0.8;
}4. Tabele
Mniej przydatna rzecz w HTML, tabela w której można wyświetlić dane. W późniejszym czasie, przy JS czy PHP, będzie można dodać automatyczne wpisywanie danych do tabeli. W tym przypadku użyłem przykładowych danych, bez przeniesienia na rzeczywistość. Przykładowy kod:
HTML:<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabele z CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<table>
<tr>
<th>Imię</th>
<th>Nazwisko</th>
<th>Wiek</th>
</tr>
<tr>
<td>Jan</td>
<td>Kowalski</td>
<td>30</td>
</tr>
<tr>
<td>Anna</td>
<td>Nowak</td>
<td>25</td>
</tr>
<tr>
<td>Marek</td>
<td>Roztocki</td>
<td>54</td>
</tr>
<tr>
<td>Nadia</td>
<td>Solna</td>
<td>10</td>
</tr>
</table>
</body>
</html>
CSS:
/* Stylizacja tabel */
table {
border-collapse: collapse;
width: 100%;
}th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}th {
background-color: #f2f2f2;
}tr:nth-child(even) {
background-color: #f2f2f2;
}tr:hover {
background-color: #ddd;
}
Nic nowego, sama powtórka 🙂
5. Przykład strony z użyciem CSS
W tym przykładzie użyłem:
- navbar,
- sidebar,
- przyciski,
Sama strona nie jest bardzo zaawansowana pod względem stylu, oraz nie ma żadnych funkcjonalności. Lecz na początek to też ważny projekt. Kod do strony:
HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład strony z CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Logo</h1>
<nav>
<ul>
<li><a href="#">Strona główna</a></li>
<li><a href="#">O nas</a></li>
<li><a href="#">Usługi</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header><main>
<section class="sidebar">
<h2>Menu</h2>
<ul>
<li><a href="#">Opcja 1</a></li>
<li><a href="#">Opcja 2</a></li>
<li><a href="#">Opcja 3</a></li>
<li><a href="#">Opcja 4</a></li>
</ul>
</section>
<section class="content">
<h2>Tytuł</h2>
<p>Treść artykułu...</p>
</section>
</main></body>
</html>
CSS:
/* Resetowanie stylów */
- {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Stylizacja nagłówka */
header {
background-color: #333;
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}nav ul {
list-style-type: none;
display: flex;
}nav ul li {
margin-right: 20px;
}nav ul li a {
color: #fff;
text-decoration: none;
}/* Stylizacja głównego kontenera */
main {
display: grid;
grid-template-columns: 200px 1fr;
grid-gap: 20px;
padding: 20px;
}/* Stylizacja bocznego menu */
.sidebar {background-color: #c9c9c9;
padding: 20px;
border-radius: 10px;}
.sidebar ul {
list-style-type: none;
}.sidebar ul li {
margin-top: 10px;
margin-bottom: 10px;
}a {
text-decoration: none;
color: black;
}/* Stylizacja treści */
.content {
background-color: #fff;
padding: 20px;
}
Na dzisiaj to tyle z czytania.
ZADANIE DOMOWE
oczywiście dla chętnych, napisz własną stronę internetową z navbarem, oraz formularzem logowania po kliknięciu przycisku 'zaloguj’.
Wyglądem pochwal się na discordzie!
https://discord.com/invite/AtvyPgKz3D
