Czym są selektory i właściwości w CSS?
Wersja audio:
Kaskadowe arkusze stylów (CSS) to podstawowa technologia używana do stylizacji dokumentów internetowych. Składa się z trzech podstawowych elementów: selektorów, właściwości i wartości. W tym artykule zagłębimy się w każdy z tych komponentów, podając po drodze przykłady ilustrujące ich użycie.
Selektory
Selektory CSS to wzorce używane do wybierania i stylizowania elementów HTML. Pozwalają one zdefiniować sposób wyświetlania określonych elementów, niezależnie od tego, czy chodzi o zmianę ich koloru, rozmiaru, układu czy innych właściwości stylizacji. Przyjrzyjmy się różnym typom selektorów i ich działaniu.
Selektory typów:
Selektory typów, znane również jako selektory elementów, kierują elementy HTML na ich nazwy znaczników. Są to najprostsze i najczęściej używane selektory. Na przykład, aby nadać styl wszystkim akapitom (elementy <p>) na stronie internetowej, można użyć następującego kodu CSS:
p {
color: blue;
}
W załączonym pliku HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>This is a blue paragraph.</p>
<p>Another blue paragraph.</p>
</body>
</html>Po uruchomieniu pliku html w dowolnej przeglądarce internetowej zobaczysz następujące dane wyjściowe:
Tutaj wszystkie elementy będą miały niebieski tekst.
Selektory klas:
Selektory klas są ukierunkowane na elementy z określonymi atrybutami klas. Zaczynają się one od kropki (.), po której następuje nazwa klasy. Na przykład, nadajmy styl wszystkim elementom z klasą "highlight":
.highlight {
background-color: yellow;
font-weight: bold;
}
W HTML:
<div class="highlight">This is highlighted text.</div>
<p>This is a regular paragraph.</p>
<div class="highlight">Another highlighted text.</div>Efekt wyjściowy:
Ten CSS sprawił, że elementy z klasą "highlight" pojawiły się z żółtym tłem i pogrubionym tekstem.
Selektory ID:
Selektory ID są ukierunkowane na elementy z unikalnymi atrybutami id. Zaczynają się one od skrótu (#), po którym następuje nazwa identyfikatora. Identyfikatory powinny być unikalne na stronie. Na przykład, nadajmy styl elementowi o identyfikatorze "header":
#header {
font-size: 24px;
text-align: center;
}
I na stronie HTML:
<header id="header">This is the header</header>Efekt wyjściowy:
Ten CSS zmienił rozmiar czcionki i wyrównanie tekstu elementu o identyfikatorze "header".
Uniwersalne selektory:
Selektor uniwersalny (*) dopasowuje wszystkie elementy na stronie. Jest to potężny, ale potencjalnie wymagający wydajności selektor. Na przykład, aby usunąć wszystkie domyślne marginesy i dopełnienie ze wszystkich elementów:
* {
margin: 0;
padding: 0;
}
Z selektora uniwersalnego należy korzystać oszczędnie, ponieważ może on wpływać na wiele elementów i wydajność.
Selektory atrybutów:
Selektory atrybutów kierują na elementy z określonymi atrybutami i wartościami. Na przykład, aby nadać styl wszystkim linkom (elementom) z określoną wartością atrybutu target:
a[target="_blank"] {
text-decoration: underline;
}
Strona HTML:
<a href="https://example.com" target="_blank">Visit Example</a>Efekt wyjściowy:
Ten CSS podkreślił linki z atrybutem docelowym ustawionym na "_blank".
Właściwości w CSS
Właściwości CSS to reguły kontrolujące wizualne aspekty elementów HTML. Definiują one atrybuty, takie jak kolor, rozmiar, odstępy i inne. Właściwości te są podstawą do tworzenia stylowych i responsywnych projektów stron internetowych.
Podstawy właściwości CSS
Korzystanie z właściwości CSS jest niezbędne przy projektowaniu stron internetowych. Definiują one sposób wyświetlania elementów HTML na stronie internetowej. Właściwość CSS składa się z nazwy właściwości i wartości, oddzielonych dwukropkiem. Oto podstawowa struktura:
property-name: property-value;Na przykład, jeśli chcesz ustawić kolor elementu tekstowego na czerwony, użyj właściwości color w następujący sposób:
color: red;Stosowanie właściwości CSS do elementów HTML
Aby zastosować właściwości CSS do elementów HTML, należy wybrać element(y) docelowy(e) i określić właściwości w zestawie nawiasów klamrowych {}. Zwykle odbywa się to w bloku <style> w sekcji HTML <head> lub w zewnętrznym pliku CSS. Oto przykład zastosowania właściwości CSS do elementu HTML:
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS code */
h1 {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<!-- HTML element -->
<h1>This is a Heading</h1>
</body>
</html>Otwórz ten plik html w przeglądarce internetowej, a zobaczysz następujące dane wyjściowe:
W tym przykładzie wybieramy element i ustawiamy jego właściwość koloru na niebieski, a właściwość rozmiaru czcionki na 24 piksele.
Wspólne właściwości CSS
- kolor
Właściwość color definiuje kolor tekstu elementu. Można używać predefiniowanych nazw kolorów, szesnastkowych kodów kolorów, wartości RGB lub wartości HSL. Oto przykład:
/* Using predefined color name */
p {
color: green;
}
/* Using hexadecimal color code */
span {
color: #FF5733;
}
- Czcionka
Właściwość font-size określa rozmiar tekstu w elemencie. Można ją określić w pikselach, jednostkach em, procentach lub innych prawidłowych jednostkach.
p {
font-size: 18px;
}
h2 {
font-size: 2em;
}
- Kolor tła
Właściwość background-color ustawia kolor tła elementu. Można użyć tych samych wartości kolorów, co w przypadku właściwości color:
div {
background-color: #F5A623;
}
- Margines i wypełnienie
Właściwości margin i padding kontrolują odpowiednio odstępy wokół i wewnątrz elementu. Można je ustawić indywidualnie dla każdej strony (góra, prawo, dół, lewo) lub w skrócie:
/* Individual margin values */
div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
}
/* Shorthand margin and padding */
p {
margin: 10px; /* All sides */
padding: 5px 10px; /* Top and bottom, right and left */
}
- Granica
Właściwość border pozwala zdefiniować obramowanie wokół elementu. Można określić szerokość, styl i kolor obramowania:
div {
border: 2px solid #333;
}
Właściwości CSS odgrywają kluczową rolę w projektowaniu stron internetowych, kontrolując wizualne aspekty elementów HTML. Zrozumienie, jak skutecznie korzystać z tych właściwości, jest niezbędne do tworzenia atrakcyjnych i dobrze zorganizowanych stron internetowych.
Wnioski
Podsumowując, selektory i właściwości CSS są podstawowymi elementami składowymi projektowania i stylizacji stron internetowych. Selektory umożliwiają kierowanie na określone elementy HTML, grupy elementów, a nawet elementy z określonymi atrybutami, zapewniając precyzyjną kontrolę nad sposobem prezentacji treści internetowych. Zrozumienie różnych typów selektorów umożliwia efektywne tworzenie stylowych i responsywnych układów stron internetowych.
Z drugiej strony, właściwości CSS definiują wizualne atrybuty elementów HTML. Właściwości te pozwalają kontrolować wszystko, od koloru tekstu i rozmiaru czcionki po kolory tła, odstępy i obramowania. Efektywne wykorzystanie właściwości CSS pozwala przekształcić zwykłe dokumenty HTML w atrakcyjne wizualnie i angażujące użytkownika strony internetowe.
