Kaskadowy arkusz stylów (CSS) to system kodowania stron internetowych, który pozwala projektantom manipulować kilkoma funkcjami jednocześnie, przypisując określone elementy do grup. Na przykład, używając kodu tła witryny, projektanci mogą zmienić kolor lub obraz tła na wszystkich stronach witryny za pomocą jednej zmiany w pliku CSS. Oto jak stworzyć CSS dla podstawowej strony internetowej.
Kroki
Część 1 z 4: Pisanie wbudowanego CSS
Krok 1. Upewnij się, że masz podstawową wiedzę na temat tagów HTML
Powinieneś wiedzieć, jak działają tagi i
src
oraz
href
atrybuty.
Krok 2. Naucz się podstawowych właściwości CSS
Przekonasz się, że istnieje bardzo wiele właściwości. Jednak nie jest konieczne poznawanie ich wszystkich.
-
Kilka dobrych podstawowych właściwości CSS, które warto wiedzieć:
kolor
oraz
rodzina czcionek
- .
Krok 3. Dowiedz się o wartościach dla każdej odpowiedniej właściwości
Wszystkie właściwości wymagają wartości. Dla
kolor
własności, na przykład, możesz umieścić
czerwony
wartość.
Krok 4. Dowiedz się o
styl
Atrybut HTML.
Jest używany w elemencie takim jak
href
lub
src
. Aby go użyć, w cudzysłowie po znaku równości umieść atrybut CSS, dwukropek, a następnie wartość właściwości. Jest to znane jako reguła CSS.
Krok 5. Zrozum, że wbudowany CSS nie jest zwykle używany w witrynach internetowych przez profesjonalnych twórców stron internetowych
Wbudowany CSS może niepotrzebnie zaśmiecać dokument HTML. Jest to jednak świetny sposób na zapoznanie się z działaniem CSS.
Część 2 z 4: Pisanie podstawowego CSS
Krok 1. Uruchom program, którego chcesz użyć
Powinno umożliwiać tworzenie plików HTML i CSS.
Jeśli nie masz zainstalowanego specjalnego programu, możesz użyć Notatnika lub innego edytora tekstu. Po prostu zapisz swój plik zarówno jako plik tekstowy, jak i plik CSS
Krok 2. Otwórz plik HTML swojej witryny
Powinieneś otworzyć to również za pomocą edytora HTML, jeśli masz zainstalowany.
Edytory HTML umożliwiają jednoczesną edycję HTML i CSS
Krok 3. Utwórz tag w nagłówku HTML
Umożliwi to pisanie CSS bez potrzeby osobnego pliku.
Krok 4. Wybierz element, do którego chcesz dodać stylizację i wpisz nazwę elementu, a następnie zestaw nawiasów klamrowych ({ })
Aby kod był bardziej czytelny, zawsze umieszczaj drugi nawias klamrowy w osobnym wierszu.
Krok 5. Między nawiasami klamrowymi wpisz swoje reguły CSS tak samo, jak za pomocą
styl
atrybut.
Każdy wiersz musi kończyć się średnikiem (;). Aby Twój kod był czytelny, każda reguła powinna zaczynać się w osobnym wierszu, a każdy wiersz powinien być wcięty.
Bardzo ważne jest, aby pamiętać, że ta stylizacja wpłynie na wszystkie elementy wybranego typu na stronie. Bardziej szczegółowe stylizacje zostaną omówione w następnej sekcji
Część 3 z 4: Bardziej zaawansowany CSS
Krok 1. Utwórz plik CSS, a nie plik HTML i zapisz go za pomocą
.css
rozbudowa.
Otwórz również swój plik HTML.
Krok 2. Utwórz tag w nagłówku HTML
Umożliwi to połączenie oddzielnego pliku CSS z dokumentem HTML. Twój tag linku potrzebuje trzech atrybutów:
rel
rodzaj
oraz
href
-
rel
oznacza „powiązanie” i informuje przeglądarkę, jaka jest relacja z dokumentem HTML. Tutaj powinna mieć wartość
„arkusz stylów”
- .
-
rodzaj
mówi, z jakim rodzajem mediów jest połączony. Tutaj powinna mieć wartość
„tekst/css”
-
href
- tutaj jest używany podobnie do tego, jak jest używany w elemencie, ale tutaj musi łączyć się z plikiem CSS. Jeśli plik CSS znajduje się w tym samym folderze co plik HTML, w cudzysłowie wystarczy wpisać tylko nazwę pliku.
Krok 3. Wybierz elementy różnych typów, do których chcesz dodać tę samą stylizację
Dodać
klasa
atrybut do tych elementów i ustaw je na taką samą nazwę klasy, jaką wybierzesz. Dzięki temu Twoje elementy będą miały ten sam styl.
Krok 4. Przypisz, jaką stylizację otrzyma klasa
Wpisz nazwę klasy w pliku CSS, poprzedzając ją kropką (.) (tj.
.klasa
).
Krok 5. Wybierz pojedyncze elementy, do których chcesz dodać specjalną stylizację i dodaj
NS
atrybut.
Identyfikatory są tworzone w CSS przy użyciu symbolu funta (#) zamiast kropki.
Identyfikatory są bardziej szczegółowe niż klasy, więc identyfikator zastąpi wszelkie style klasy, jeśli ma atrybut o innej wartości niż klasa
Część 4 z 4: Więcej informacji
Krok 1. Odwiedź szkoły w3
Jest to oficjalna strona internetowa, której celem jest nauczanie umiejętności tworzenia stron internetowych. W3 ma wiele odniesień do HTML i CSS, a także innych języków internetowych.
Krok 2. Znajdź inne witryny przeznaczone specjalnie do nauki i nauczania HTML i CSS
Strony takie jak CSS tricks.com mają na celu nauczanie umiejętności CSS i projektowania stron internetowych. Znalezienie renomowanych źródeł pomoże Ci w Twojej podróży edukacyjnej.
Krok 3. Skontaktuj się z projektantami stron internetowych i programistami
Ich doświadczenie i know-how mogą nauczyć Cię cennej wiedzy i umiejętności.
Krok 4. Wyświetl kod źródłowy odwiedzanych witryn
Przeglądanie CSS dobrze rozwiniętych stron internetowych może pokazać sposoby projektowania części stron internetowych. Skopiowanie go w ramach praktyki i manipulowanie kodem może pomóc w nauce korzystania z różnych atrybutów CSS.
