Korzystając z tej strony zgadzasz się z polityką prywatności i regulaminem.
Akceptuj
WebInside.plWebInside.plWebInside.pl
  • Aktualności
  • Technologie
  • WWW
  • E-marketing
  • AI
  • Poradniki
  • e(Biznes)
Szukaj
  • Kontakt
  • Forum
WebInside.pl © 2023.
Czytasz: Tabela właściwości CSS
Udostępnij
Zaloguj się
Powiadomienia
Aa
WebInside.plWebInside.pl
Aa
Szukaj
  • Strona główna
  • Aktualności
  • Technologie webowe
  • Publicystyka
  • E-marketing
  • Poradniki
  • AI
  • Technologie
  • Artykuły partnerskie
  • Więcej
    • Kontakt
    • Mapa strony
Masz już konto? Zaloguj się
  • Aktualności
  • Technologie
  • WWW
  • E-marketing
  • AI
  • Poradniki
  • e(Biznes)
WebInside.pl © 2023.
WebInside.pl > Technologie webowe > Tabela właściwości CSS
Technologie webowe

Tabela właściwości CSS

WebInside.pl
Ostatnia aktualizacja: 25.07.2003
WebInside.pl
Udostępnij
Udostępnij

Pod tą nazwą kryje się duuuuża tabela, w której zawarte są cechy i wartości albo właściwości i wartości. Pojęcia te znamy z rozdziału „Selektor {cecha:wartość}”. Po przestudiowaniu tej tabelki będziemy w stanie stworzyć coraz bardziej rozbudowane CSS.

Zawartość
TekstMarginesyTłoObramowaniaWykazy

Dla przejrzystości, tabelkę podzieliłem na kilka grup:

Tekst

CECHA WYJAŚNIENIE MOŻLIWE WARTOŚCI
font-family Krój czcionki Dowolna nazwa czcionki (np. verdana), jeżeli jest wielowyrazowa, to musi zostać ujęta w (najlepiej pojedynczy) cudzysłów np. 'hollywood hills’
font-size Wielkość czcionki W jednostkach (np. 11px), w procentach, xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller
font-weight Grubość czcionki normal, bold, bolder, lighter, liczba: 100-900
font-style Określa czy czcionka jest pisana kursywą czy nie normal, italic, oblique
font-variant Kapitaliki czy zwykła czcionka normal, small-caps
color Kolor tekstu Nazwa angielska albo wartość szesnastkowa.
text-decoration Dekoracja tekstu none, underline, overline, line-through, blink
text-transform Transformacja tekstu none, capitalize, uppercase, lowercase
text-align Wyrównanie tekstu left, center, right, justify
text-indent Wcięcie tekstu Dowolna wartość procentowa lub wyrażona w jednostkach (np. 10pt)
line-height Odstęp pomiędzy wierszami normal, dowolna wartość procentowa lub wyrażona w jednostkach (np. 10pt)
letter-spacing Odstęp między literami normal, dowolna wartość procentowa lub wyrażona w jednostkach (np. 1cm)
word-spacing Odstęp między wyrazami normal, dowolna wartość procentowa lub wyrażona w jednostkach (np. 1cm)
vertical-align Pionowe wyrównanie tekstu baseline, sub, super, top, text-top, middle, bottom, text-bottom, wielkość wyrażona w procentach
white-space Określa, w jaki sposób mają być wyświetlane spacje normal, pre, nowrap

Marginesy

CECHA WYJAŚNIENIE MOŻLIWE WARTOŚCI
margin-left Wielkość lewego marginesu auto, dowolna wartość wyrażona w jednostkach (np. 2em) lub procentach
margin-right Wielkość prawego marginesu auto, dowolna wartość wyrażona w jednostkach (np. 2em) lub procentach
margin-top Wielkość górnego marginesu auto, dowolna wartość wyrażona w jednostkach (np. 2em) lub procentach
margin-bottom Wielkość dolnego marginesu auto, dowolna wartość wyrażona w jednostkach (np. 2em) lub procentach
padding-left Wielkość lewego wewnętrznego marginesu Dowolna wartość wyrażona w jednostkach (np. 2em) lub procentach
padding-right Wielkość prawego wewnętrznego marginesu Dowolna wartość wyrażona w jednostkach (np. 2em) lub procentach
padding-top Wielkość górnego wewnętrznego marginesu Dowolna wartość wyrażona w jednostkach (np. 2em) lub procentach
padding-bottom Wielkość dolnego wewnętrznego marginesu Dowolna wartość wyrażona w jednostkach (np. 2em) lub procentach

Tło

CECHA WYJAŚNIENIE MOŻLIWE WARTOŚCI
background-color Kolor tła Nazwa angielska, wartość szesnastkowa lub transparent (przezroczystość).
background-image Rysunek w tle none lub url(nazwa_pliku)
background-attachment Określa, czy tło ma być przewijane wraz z tekstem czy nie. scroll, fixed
background-repeat Powtarzanie się tła repeat, no-repeat, repeat-x, repeat-y
background-position Pozycja tła Dowolna wartość procentowa lub wyrażona w jednostkach, left, right, center, bottom, top

Obramowania

CECHA WYJAŚNIENIE MOŻLIWE WARTOŚCI
border-color Kolor obramowania Nazwa angielska lub wartość szesnastkowa.
border-style Styl obramowania none – domyślnie, dotted – kropki, dashed – linie przerywane, solid – linia ciągła, double – podwójne, Groove – efekt 3D, Ridge – efekt 3D, Inset – efekt3D, Outset – efekt3D
border-color Kolor obramowania Nazwa angielska lub wartość szesnastkowa.
border-width Grubość obramowania W jednostkach, thin, medium, thick
border-left Cechy lewego obramowania W jednostkach, thin, medium, thick, dowolny kolor oraz to co w border-style
border-right Cechy prawego obramowania W jednostkach, thin, medium, thick, dowolny kolor oraz to co w border-style
border-top Cechy górnego obramowania W jednostkach, thin, medium, thick, dowolny kolor oraz to co w border-style
border-bottom Cechy dolnego obramowania W jednostkach, thin, medium, thick, dowolny kolor oraz to co w border-style

Wykazy

CECHA WYJAŚNIENIE MOŻLIWE WARTOŚCI
list-style-type Typ markera (domyślnie kropka) disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none
list-style-image Obrazek jako marker url(nazwa_obrazka), none
list-style-position Ppzycja tekstu w stosunku do markera outside, indise

Może Cię zainteresować

Sprawdź, jak zostać testerem oprogramowania lub Java developerem! Poznaj kursy online!

Architektura globalnego e-commerce: Jak zbudować sklep gotowy na podbój świata?

Java obchodzi 30. urodziny – język programowania który zmienił świat technologii

Jak zacząć projektować aplikację, nie mając gotowego pomysłu?

Serwer dla małej firmy – czym kierować się przy jego wyborze?

WebInside.pl 2003-07-25 2003-07-25
Udostępnij ten artykuł
Facebook Twitter Kopiuj link Wydrukuj
Udostępnij
Poprzedni artykuł CSS na kilka sposobów
Następny artykuł Kaskadowość i dziedziczenie w CSS
Zostaw komentarz lub opinię

Dodaj komentarz Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Najnowsze artykuły

Procesor AMD Ryzen 7
Najlepsze procesory z pamięcią 3D V-Cache: Wydajność dla graczy i profesjonalistów
Technologie
Jak przygotować sklep internetowy na automatyzację obsługi klienta?
Artykuły partnerskie
the nvidia logo is displayed on a table
Nvidia przyłapana? Gigant AI chciał kupić miliony pirackich książek
AI Aktualności
Najczęstsze błędy w SMS marketingu: jak nie przepalić budżetu?
E-marketing
4 najczęstsze cyberzagrożenia w przemyśle
Technologie
Jak uratować zaschnięty tusz do drukarki? Skuteczne domowe sposoby i porady
Poradniki
Model 3D jako wspólne źródło danych dla projektu, produkcji i montażu
Artykuły partnerskie
Dlaczego wideo z telefonu sprzedaje na TikToku lepiej niż profesjonalne spoty?
Artykuły partnerskie
Dwa ekrany zawsze pod ręką – zalety korzystania z monitora przenośnego na co dzień
Technologie
Rola nowoczesnych technologii w procesie rehabilitacji
Artykuły partnerskie
banner
Chcesz umieścić swoją reklamę w portalu WebInside.pl?
Skontaktuj się z nami, a zaproponujemy interesujące formy reklamy.
Skontaktuj się

Inne polecane artykuły

Technologie webowe

Sprawdź, jak zostać testerem oprogramowania lub Java developerem! Poznaj kursy online!

5 min czytania
Technologie webowe

Architektura globalnego e-commerce: Jak zbudować sklep gotowy na podbój świata?

7 min czytania
MacBook Pro showing programming language
Technologie webowe

Java obchodzi 30. urodziny – język programowania który zmienił świat technologii

9 min czytania
AktualnościTechnologie webowe

Jak zacząć projektować aplikację, nie mając gotowego pomysłu?

9 min czytania
woman in black top using Surface laptop
Technologie webowe

Serwer dla małej firmy – czym kierować się przy jego wyborze?

5 min czytania
Technologie webowe

Jaki hosting wybrać pod Laravel? Kompleksowy przewodnik dla twórców aplikacji webowych

6 min czytania
programming language
Technologie webowe

Kaskadowość w CSS – wszystko, co musisz wiedzieć

7 min czytania
two women talking while looking at laptop computer
Technologie webowe

Darmowe kreatory stron WWW – stwórz swoją stronę w godzinę

14 min czytania
//

WebInside.pl – portal technologiczny. Aktualności ze świata technologii, webmastering, marketing internetowy, AI, poradniki.

 

Partnerzy

Wszystkie kategorie

  • AI
  • Aktualności
  • Artykuły partnerskie
  • E-marketing
  • e(Biznes)
  • Poradniki
  • Publicystyka
  • Technologie
  • Technologie webowe

Ostatnio dodane

  • Najlepsze procesory z pamięcią 3D V-Cache: Wydajność dla graczy i profesjonalistów
  • Jak przygotować sklep internetowy na automatyzację obsługi klienta?
  • Nvidia przyłapana? Gigant AI chciał kupić miliony pirackich książek
  • Najczęstsze błędy w SMS marketingu: jak nie przepalić budżetu?

Kontakt

Chcesz się z nami skontaktować? Jesteś zainteresowany reklamą lub artykułem sponsorowanym?

Skorzystaj z formularza kontaktowego lub napisz do nas na kontakt@webinside.pl

WebInside.plWebInside.pl
WebInside.pl © 2023 | Mapa strony | Forum | Polityka prywatności
Witaj ponownie!

Zaloguj się do swojego konta

Zapomniałeś hasła?