CSS Samouczek
Rozpoczęcie pracy z CSS
Szukaj…
Uwagi
Style mogą być tworzone na kilka sposobów, umożliwiając różne stopnie ponownego użycia i zakres, gdy są określone w źródłowym dokumencie HTML. Zewnętrzne arkusze stylów można ponownie wykorzystywać w dokumentach HTML. Osadzone arkusze stylów dotyczą całego dokumentu, w którym zostały określone. Style wbudowane mają zastosowanie tylko do pojedynczego elementu HTML, na którym są określone.
Wersje
Zewnętrzny arkusz stylów
Zewnętrzny arkusz stylów CSS można zastosować do dowolnej liczby dokumentów HTML, umieszczając element <link> w każdym dokumencie HTML.
Atrybut rel o <link> znacznika musi być ustawiona na "stylesheet" , i href atrybut względnej lub absolutnej ścieżkę do arkusza. Podczas gdy używanie względnych ścieżek URL jest ogólnie uważane za dobrą praktykę, można również stosować ścieżki bezwzględne. W HTML5 atrybut type można pominąć .
Zaleca się umieszczenie znacznika <link> znaczniku <head> pliku HTML, aby style były ładowane przed stylami elementów. W przeciwnym razie użytkownicy zobaczą flash niestylizowanej treści .
Przykład
hello-world.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello world!</h1>
<p>I ♥ CSS</p>
</body>
</html>
style.css
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
Upewnij się, że podałeś poprawną ścieżkę do pliku CSS w href. Jeśli plik CSS znajduje się w tym samym folderze co plik HTML, wówczas ścieżka nie jest wymagana (jak w powyższym przykładzie), ale jeśli jest zapisany w folderze, określ go w ten sposób href="foldername/style.css" .
<link rel="stylesheet" type="text/css" href="foldername/style.css">
Zewnętrzne arkusze stylów są uważane za najlepszy sposób obsługi CSS. Jest to bardzo prosty powód: gdy zarządzasz witryną, powiedzmy, 100 stron, wszystkie kontrolowane za pomocą jednego arkusza stylów, i chcesz zmienić kolory linków z niebieskiego na zielony, łatwiej jest dokonać zmiany w pliku CSS i pozwól, aby zmiany „kaskadowo” na wszystkich 100 stronach, niż przejść na 100 osobnych stron i dokonać tej samej zmiany 100 razy. Ponownie, jeśli chcesz całkowicie zmienić wygląd swojej witryny, musisz tylko zaktualizować ten jeden plik.
Możesz załadować tyle plików CSS na swoją stronę HTML, ile potrzebujesz.
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="override.css">
Reguły CSS są stosowane z kilkoma podstawowymi regułami, a kolejność ma znaczenie. Na przykład, jeśli masz plik main.css z jakimś kodem:
p.green { color: #00FF00; }
Wszystkie akapity z klasą „zieloną” zostaną zapisane w kolorze jasnozielonym, ale można to zastąpić innym plikiem .css, dołączając go po main.css. Możesz mieć override.css z następującym kodem postępującym zgodnie z main.css, na przykład:
p.green { color: #006600; }
Teraz wszystkie akapity z klasą „zieloną” będą napisane w ciemniejszej zieleni niż w jasnozielonej.
Obowiązują inne zasady, takie jak zasada „! Ważna”, specyfika i dziedziczenie.
Gdy ktoś po raz pierwszy odwiedza Twoją witrynę, jego przeglądarka pobiera kod HTML bieżącej strony plus połączony plik CSS. Następnie, gdy przechodzą do innej strony, przeglądarka musi tylko pobrać kod HTML tej strony; plik CSS jest buforowany, więc nie trzeba go ponownie pobierać. Ponieważ przeglądarki buforują zewnętrzny arkusz stylów, strony ładują się szybciej.
Style wewnętrzne
CSS zawarty w <style></style> w dokumencie HTML działa jak zewnętrzny arkusz stylów, z tym wyjątkiem, że znajduje się w dokumencie HTML, w którym ma styl, a nie w osobnym pliku, dlatego może być stosowany tylko do dokumentu, w którym jest zyje. Zauważ, że ten element musi znajdować się w elemencie <head> do sprawdzania poprawności HTML (chociaż będzie działał we wszystkich obecnych przeglądarkach, jeśli zostanie umieszczony w body ).
<head>
<style>
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>I ♥ CSS</p>
</body>
Style wbudowane
Użyj stylów wbudowanych, aby zastosować stylizację do określonego elementu. Pamiętaj, że nie jest to optymalne. Zaleca się umieszczanie reguł stylu w znaczniku <style> lub zewnętrznym pliku CSS, aby zachować rozróżnienie między zawartością a prezentacją.
Style wbudowane zastępują dowolny styl CSS w znaczniku <style> lub zewnętrznym arkuszu stylów. Chociaż może to być przydatne w niektórych okolicznościach, fakt ten najczęściej ogranicza możliwość utrzymania projektu.
Style w poniższym przykładzie odnoszą się bezpośrednio do elementów, do których są dołączone.
<h1 style="color: green; text-decoration: underline;">Hello world!</h1>
<p style="font-size: 25px; font-family: 'Trebuchet MS';">I ♥ CSS</p>
Style wbudowane są na ogół najbezpieczniejszym sposobem zapewnienia zgodności renderowania między różnymi klientami e-mail, programami i urządzeniami, ale ich pisanie może być czasochłonne, a zarządzanie nimi trudne.
Reguła CSS @import (jedna z reguł CSS at)
Reguła @import CSS służy do importowania reguł stylów z innych arkuszy stylów. Reguły te muszą poprzedzać wszystkie inne typy reguł, z wyjątkiem reguł @charset; ponieważ nie jest to instrukcja zagnieżdżona, @import nie może być używany wewnątrz reguł grupy warunkowej. @import .
Jak korzystać z @import
Możesz użyć reguły @import na następujące sposoby:
A. Z wewnętrznym znacznikiem stylu
<style>
@import url('/css/styles.css');
</style>
B. Z zewnętrznym arkuszem stylów
Następująca linia importuje plik CSS o nazwie additional-styles.css z katalogu głównego do pliku CSS, w którym się pojawia:
@import '/additional-styles.css';
Możliwy jest również import zewnętrznego CSS. Częstym przypadkiem użycia są pliki czcionek.
@import 'https://fonts.googleapis.com/css?family=Lato';
Opcjonalnym drugim argumentem reguły @import jest lista zapytań o media:
@import '/print-styles.css' print;
@import url('landscape.css') screen and (orientation:landscape);
Zmiana CSS za pomocą JavaScript
Czysty JavaScript
Możliwe jest dodawanie, usuwanie lub zmiana wartości właściwości CSS za pomocą JavaScript poprzez właściwość style elementu.
var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';
Zwróć uwagę, że właściwości stylu są nazwane w stylu małej litery wielbłąda. W tym przykładzie widać, że właściwość css font-family staje się fontFamily w javascript.
Alternatywą do pracy bezpośrednio na elementach jest utworzenie elementu <style> lub <link> w JavaScript i dołączenie go do <body> lub <head> dokumentu HTML.
jQuery
Modyfikowanie właściwości CSS za pomocą jQuery jest jeszcze prostsze.
$('#element').css('margin', '5px');
Jeśli chcesz zmienić więcej niż jedną regułę stylu:
$('#element').css({
margin: "5px",
padding: "10px",
color: "black"
});
jQuery zawiera dwa sposoby zmiany reguł css, które zawierają w nich łączniki (tj. font-size ). Możesz umieścić je w cudzysłowach lub nazwę reguły stylu wielbłąda.
$('.example-class').css({
"background-color": "blue",
fontSize: "10px"
});
Zobacz też
Listy stylów za pomocą CSS
Istnieją trzy różne właściwości stylizacji elementów list-style-type : list-style-type list-style-image list-style-position i list-style-position , które należy zadeklarować w tej kolejności. Domyślne wartości to odpowiednio dysk, na zewnątrz i brak. Każda właściwość może być zadeklarowana osobno lub za pomocą właściwości skróconej list-style .
list-style-type określa kształt lub typ punktora używanego dla każdego elementu listy.
Niektóre dopuszczalne wartości typu list-style-type :
- dysk
- okrąg
- plac
- dziesiętny
- dolno-rzymski
- górno-rzymski
- Żaden
(Pełna lista znajduje się na stronie wiki specyfikacji W3C )
Aby na przykład użyć kwadratowych punktów wypunktowania dla każdego elementu listy, należy użyć następującej pary właściwości i wartości:
li {
list-style-type: square;
}
Właściwość list-style-image określa, czy ikona elementu listy jest ustawiona z obrazem, i przyjmuje wartość none lub adres URL wskazujący na obraz.
li {
list-style-image: url(images/bullet.png);
}
Właściwość list-style-position określa, gdzie umieścić znacznik elementu listy, i przyjmuje jedną z dwóch wartości: „inside” lub „outside”.
li {
list-style-position: inside;
}