Ramki umieszczone wokół obrazów lub tekstu ozdabiają witrynę i urozmaicają jej projekt. Jeśli używasz tabel do tworzenia obramowań, kod dla każdego obramowania zajmie zbyt dużo miejsca. Również w tym przypadku będziesz musiał przepisać kod HTML dla każdej ramki. Dzięki CSS możesz łatwo utworzyć obramowanie o dowolnej grubości i kolorze, pisząc prosty kod raz dla wszystkich elementów, które będą otoczone tą obramowaniem. Ta technologia pozwoli w razie potrzeby zmienić rodzaj ramek w witrynie w ciągu kilku minut.
Czy to jest to konieczne
- - mieć własną stronę internetową;
- - wiedzieć, czym jest CSS i gdzie na stronie są napisane te style.
Instrukcje
Krok 1
Aby utworzyć ramkę, najpierw napisz następujący kod w CSS:
ramka {}
Krok 2
Aby ustawić obramowanie o żądanym rozmiarze, użyj parametru border-width, który ustawia szerokość linii w pikselach. Na przykład, jeśli linia ramki powinna mieć szerokość 3 piksele, wpis będzie wyglądał tak:
ramka {szerokość-obramowania: 3px;}
Krok 3
Teraz zdefiniuj styl obramowania za pomocą parametru border-style. Jeśli chcesz utworzyć obramowanie, którego boki są regularnymi liniami ciągłymi, umieść następujący wpis w kodzie między nawiasami klamrowymi - border-style: solid.
Krok 4
Kropkowane obramowanie można uzyskać, pisząc tak: border-style: dotted. Sprawdzanie stylu obramowania: przerywana da Ci przerywaną ramkę.
Krok 5
Możesz uczynić obramowanie podwójną ciągłą linią w następujący sposób: border-style: double. Użyj stylu obramowania: rowek lub stylu obramowania: grzbiet, aby umieścić tekst lub obrazy w ramkach z efektami ubocznymi 3D. Różnica między tymi dwiema opcjami polega na tym, że w pierwszym przypadku ramka składa się z linii wciętych, aw drugim wypukłych.
Krok 6
Użyj tego kodu: border-style: wstawka, aby stworzyć efekt wstawki z obramowaniem elementu witryny. Aby treść obramowania wraz z obramowaniem wręcz przeciwnie była wypukła, napisz border-style: outset.
Krok 7
Możesz dodać żądany kolor do ramki za pomocą parametru border-color, również umieszczonego między nawiasami klamrowymi. Jeśli chcesz, aby obramowanie było czerwone, napisz kolor obramowania: czerwony, niebieski - kolor obramowania: niebieski, pomarańczowy - kolor obramowania: pomarańczowy.
Krok 8
Kod graniczny CSS wraz ze wszystkimi opcjami wygląda tak:
ramka {szerokość obramowania: 3px; styl obramowania: solidny; kolor obramowania: niebieski;}
Krok 9
Teraz w HTML napisz to:
Zawartość ramki Zamiast frazy „Zawartość ramki” wstaw tekst lub kod żądanego obrazu.
Krok 10
W ten sposób możesz zaprojektować nieograniczoną liczbę elementów na stronie. Aby zmienić wygląd ramki, wystarczy zmienić kod CSS.
