Inne działy

 

 

Szybki przewodnik po CSS

 

Jest to Krótki przewodnik dla twórców stron internetowych, gdzie mamy wymienione wszystkie właściwości CSS, zdefiniowane w World Wide Web Consortium rekomendowane dla Specyfikacji kaskadowych arkuszy stylów, poziom 2

Zamieszczamy możliwe wartości każdej właściwość, zdefiniowane, jako słowa kluczowe lub jako jedną z następujących wartości:

  • angle: Wartość liczbowa, a następnie deg, grad lub rad.
  • color: Nazwa koloru lub wartość szesnastkowa RGB lub RGB potrójna forma: rgb(red, green, blue) 
  • frequency: Wartość liczbowa, w hz lub khz, wskazując Hertz lub kiloHz 
  • length: Opcjonalny znak (albo + lub -), zaraz po liczbie (z lub bez przecinka dziesiętnego), natychmiast następuje: identyfikator jednostki dwóch znaków jak px lub pt lub em itp. 
  • number: Opcjonalny znak, zaraz po liczbie (z lub bez przecinka dziesiętnego).
  • Percent:  Opcjonalny znak, występuje liczba (z lub bez przecinka dziesiętnego), bezpośrednio po nim znak procentu.
  • shape:  Słowo kluczowe shape, następnie nawiasy-zamkniętej listy parametrów oddzielonych przecinkami. Obecnie obsługiwany jest tylko kształt rect, który oczekuje czterech parametrów liczbowych wskazujących na przesunięcia górnej, prawej, dolnej i lewej krawędzi prostokąta.
  • time: Wartość liczbowa, w s lub ms, wyznaczająca czas w sekundach i milisekundach.
  • url:  Słowo kluczowe url, zaraz (bez spacji) po lewej stronie nawiasu, następuje adresu URL, opcjonalnie ujęty w pojedyncze lub podwójne cudzysłowy, a następnie prawy nawias okrągły. Na przykład: url("http://www.uazz.pl/")

 

WłaściwośćMożliwe wartościOpis
azimuth
  • angle
  • left-side
  • far-left
  • left
  • center-left
  • center
  • center-right
  • right
  • far-right
  • right-side
Opisuje położenie źródła dźwięku wzdłuż osi poziomej środowiska słuchacza.
background Wartości z właściwości złożonych. Złożone właściwość dla następujących właściwości:
  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat
background-attachment
  • scroll
  • fixed
Określa, czy obraz tła jest stały w oknie lub przewija się wraz z dokumentem
background-color
  • color
  • transparent
Ustawia kolor tła elementu
background-image
  • url
  • none
Ustawia tło elementu
background-position
  • percent
  • none
  • length
  • top
  • center
  • bottom
  • left
  • right
Określa początkowe położenie elementu obrazu tła, jeśli określony; wartości zwykle występują parami x, y; domyślne położenie to 0% 0%.
background-repeat
  • repeat
  • repeat-x
  • repeat-y
  • no-repeat
Określa, jak obraz w tle jest powtarzany (kafelki) w elemencie
border Zobacz opis Ustawia wszystkie cztery krawędzie elementu; wartością jest jeden lub więcej kolorów, wartość dla border-width i wartości dla border-style
border-bottom Zobacz opis Określa element w dolnej granicy; wartością jest jeden lub więcej kolorów, wartość border-bottom-width, i wartość dla border-style
border-bottom-width
  • length
  • thin
  • medium
  • thick
Określa szerokość elementu dolnej krawędzi.
border-collapse
  • collapse
  • separate
Ustawia algorytm renderowania obramowania tabeli
border-color
  • color
  • transparent
Ustawia kolor wszystkich czterech granic elementu; Domyślnie jest to kolor elementu
border-left-color
  • color
Ustawia kolor elementu po lewej stronie granic; Domyślnie jest to kolor elementu
border-right-color
  • color
Ustawia kolor prawej krawędzi elementu; Domyślnie jest to kolor elementu
border-top-color
  • color
Ustawia kolor elementu górnej granicy; Domyślnie jest to kolor elementu
border-bottom-color
  • color
Ustawia kolor elementu dolnej granicy; Domyślnie jest to kolor elementu
border-left Zobacz opis Ustawia lewe obramowanie elementu; wartością jest jeden lub więcej kolorów, wartość border-left-width i stylu dla border-style.
border-left-width
  • length
  • thin
  • medium
  • thick
Określa grubość lewego obramowania elementu
border-right Zobacz opis Ustawia prawe obramowanie elementu; wartością jest jeden lub więcej kolorów, wartość border-right-width i stylu dla border-style.
border-right-width
  • length
  • thin
  • medium
  • thick
Określa grubość prawej krawędzi elementu
border-spacing Zobacz opis Z oddzielnymi granicami ustawia odstęp pomiędzy granicami. Jedna wartość ustawia pionowe i poziome odstępy i dwie wartości ustawia odpowiednio odstępy w pionie i poziomie.
border-style
  • dashed
  • dotted
  • double
  • groove
  • inset
  • none
  • outset
  • ridge
  • solid
Ustawia styl obramowania elementu dla wszystkich czterech wartości
border-top Zobacz opis Ustawia górne obramowanie elementu; wartością jest jeden lub więcej kolorów, wartość border-top-width i stylu dla border-style.
border-top-width
  • length
  • thin
  • medium
  • thick
Określa grubość górnej krawędzi elementu.
border-width
  • length
  • thin
  • medium
  • thick
Określa grubość wszystkich czterech granic elementu
bottom
  • length
  • percent
Używane z właściwością position do dolnej krawędzi elementu
caption-side
  • top
  • bottom
  • left
  • right
Ustawia pozycję dla nagłówka tabeli
clear
  • both
  • left
  • none
  • right
Zestaw, które marginesy elementu nie mogą być obok elementów pływających; element jest przesunięty na dół, aż do końca marginesu 
clip
  • shape
Określa widoczną część element.
color
  • color
Ustawia kolor elementu
content Zobacz opis Wstawia generowane zawartości elementu.
counter-increment Zobacz opis Zwiększa licznika o 1; wartością jest lista nazw licznika, z każdą nazwę opcjonalnie występuje: wartość, która jest zwiększana.
counter-reset Zobacz opis Resetuje licznik do zera; wartością jest lista nazw licznika, z każdą nazwą opcjonalnie występuje: wartość, do której jest resetowany.
cue-after
  • url
  • none
Odtwarza dźwięk wyznaczonych po elemencie, który jest używany
cue-before
  • url
  • none
Odtwarza dźwięk wyznaczony przed elementem, który jest używany
cursor
  • url
  • auto
  • crosshair
  • default
  • active
  • pointer
  • move
  • e-resize
  • ne-resize
  • nw-resize
  • n-resize
  • se-resize
  • sw-resize
  • s-resize
  • w-resize
  • text
  • wait
  • help
  • progress
Definiuje kształt kursora
direction
  • ltr
  • rtl
Definiuje kierunek przepływu treści elementu
display
  • block
  • inline
  • list-items
  • marker
  • none
Określa sposób wyświetlania elementu
elevation
  • angle
  • below
  • level
  • above
  • higher
  • lower
Ustawia głośność, z jąką dźwięk jest odtwarzany
empty-cells
  • hide
  • show
Z oddzielnymi granicami ukrywa puste komórki w tabeli
float
  • left
  • none
  • right
Określa, jeśli element unosi się w lewo lub w prawo pozwalając, aby tekst, owinąć wokół niego lub być wyświetlany inline
font Zobacz opis Ustawia wszystkie atrybuty czcionki dla elementu. Wartość jest jedną z wartości:
  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family
font-family Lista nazwy czcionek Określa czcionkę dla elementu, konkretną czcionkę lub jako ogólną rodzinę serif, sans-serif, cursive, fantasy, and monospace.
font-size
  • xx-small
  • x-small
  • small
  • medium
  • large
  • xlarge
  • xx-large
  • larger
  • smaller
  • length
  • percent
Określa rozmiar czcionki
font-size-adjust
  • none
  • ratio
Dopasowuje proporcje bieżącej czcionki
font-stretch
  • wider
  • normal
  • narrower
  • ultracondensed
  • extracondensed
  • condensed
  • semi-condensed
  • semiexpanded
  • expanded
  • extra-ex
Określa szerokość na odcinku bieżącej czcionki
font-style
  • normal
  • italic
  • oblique
Ustawia różne style czcionek w trzech różnych wartościach.
font-variant
  • normal
  • small-caps
Określa czcionkę w kapitaliki
font-weight
  • normal
  • bold
  • bolder
  • lighter
  • number
Definiuje pogrubienie czcionki. Jeśli numer jest używany, musi być wielokrotnością 100 między 100 a 900; 400 jest normalne, 700 jest taka sama, jak słowa kluczowe wytłuszczone
height
  • length
  • auto
Określa wysokość elementu
left
  • length
  • percent
Używane z właściwością position do lewej krawędzi elementu
letter-spacing
  • length
  • normal
Wstawia dodatkowy odstęp między znakami tekstu
line-height
  • length
  • number
  • normal
  • percent
Ustawia odległość między liniami bazowymi 
list-style Zobacz opis Określanie wszystkich właściwości listy w jednej deklaracji:
  • list-style-image
  • liststyle-position
  • list-style-type
list-style-image
  • url
  • none
Definiuje obraz do wykorzystania, jako znacznik elementu listy, zamiast wartości dla:
  • list-style-type
.
list-style-position
  • inside
  • outside
Właściwość określa, czy list-item znaczniki powinny się pojawić wewnątrz lub na zewnątrz przepływu treści.
list-style-type
  • circle
  • disc
  • square
  • decimal
  • lower-alpha
  • lower-roman
  • none
  • upper-alpha
  • upperroman
Definiuje znacznik elementu listy do listy nieuporządkowanej (circle, disc, or square) lub dla uporządkowanej listy (decimal, loweralpha, lower-roman, none, upper-alpha, or upper-roman)
margin
  • length
  • percent
  • auto
Definiuje wszystkie cztery marginesy elementu
margin-bottom
  • length
  • percent
  • auto
Definiuje dolny margines elementu. Wartość domyślna to 0.
margin-left
  • length
  • percent
  • auto
Definiuje lewy margines elementu. Wartość domyślna to 0.
margin-right
  • length
  • percent
  • auto
Definiuje prawy margines elementu. Wartość domyślna to 0.
margin-top
  • length
  • percent
  • auto
Definiuje margines górny elementu. Wartość domyślna to 0.
marker-offset
  • length
  • auto
Właściwość marker-offset może być używana w listach punktowanych do określania odległości między najbliższymi krawędziami obramowania bloku znacznika.
marks
  • crop
  • cross
  • none
  • inherit
Właściwość jest używana do zestawu znaczników przycięcia i krzyż znaki na mediach stronicowanych. To jest stosowane z regułą @page.
max-height
  • percent
  • length
  • none
Właściwość max-height jest używana, aby ograniczyć wysokość elementu.
max-width
  • percent
  • length
  • none
Właściwość max-width jest używana do ustawiania maksymalnej szerokości elementu.
min-height
  • percent
  • length
Właściwość min-height jest używana, aby ograniczyć wysokość elementu.
min-width
  • percent
  • length
Właściwość min-width jest używana, aby ograniczyć szerokość elementu.
orphans
  • number
Ustawia minimalną liczbę linii dozwolonych w fragmentach osieroconych paragrafów.
outline Zobacz opis Właściwość outline jest skróconą własnością, aby określić wszystkie właściwości konspektu.
outline-color
  • color
  • invert
Właściwość outline jest skróconą własnością, aby określić wszystkie właściwości konspektu.Właściwość outline-color jest używana do określenia koloru konturu. Należy zauważyć, że w odróżnieniu od granicy nieruchomości, zarys nie zajmują dodatkowego miejsca i może być nie prostokątny.
outline-color-style
  • none
  • hidden
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
Właściwość outline-style służy do określania stylu konspektu. Należy zauważyć, że w odróżnieniu od granicy nieruchomości, zarys nie zajmują dodatkowego miejsca i może być nie prostokątny.
outline-width
  • thin
  • medium
  • thick
  • length (i.e. 1px)
  • inherit
Właściwość outline-color jest używana do określenia koloru konturu. Należy zauważyć, że w odróżnieniu od granicy nieruchomości, zarys nie zajmuje dodatkowego miejsca i może być nie prostokątny.
overflow
  • auto
  • hidden
  • scroll
  • visible
Określa, jak zawartość przepełnienia jest renderowana
padding Zobacz opis Definiuje wszystkie cztery wartości padding wokół elementu
padding-bottom
  • length
  • percent
Definiuje wypełnienie dolne elementu. Wartość domyślna to 0
padding-left
  • length
  • percent
Definiuje lewy padding elementu. Wartość domyślna to 0
padding-right
  • length
  • percent
Określa prawy padding elementu. Wartość domyślna to 0
padding-top
  • length
  • percent
Określa najlepsze uzupełnienie elementu. Wartość domyślna to 0
page
  • name
Kojarzy układ strony o nazwie elementu
page-break-after
  • auto
  • always
  • avoid
  • left
  • right
Przełamywanie strony przed, po lub w środku elementu
page-break-before
  • auto
  • always
  • avoid
  • left
  • right
Przełamywanie strony przed, po lub w środku elementu
page-break-inside
  • auto
  • avoid
Przełamywanie strony przed, po lub w środku elementu
pause
  • percent
  • time
To jest skrócona własność używana do ustawiania właściwości 'pause-before "i" pause-after'.
pause-after
  • percent
  • time
Ta właściwość określa pauzę do wstawienia po rozmowie wykonania elementu treści. 
pause-before
  • percent
  • time
Właściwość jest używana w słuchowych mediów (audio), aby określić pauzę przed elementem.
pitch
  • frequency
  • x-low
  • low
  • medium
  • high
  • x-high
Właściwość określa średnią strojenia głosu używanego do renderowania tekstu mówionego
pitch-range
  • number
Ustawia zakres skoku, z 0 (flat) do 100 (broad); domyślnie 50
play-during
  • url
  • mix
  • none
  • repeat
Określa czy w tle dźwięk ma być odtwarzany, podczas gdy zawartość elementu jest używana.
position
  • absolute
  • fixed
  • relative
  • static
Ustawia model pozycjonowania dla elementu
quotes Lista ciągów Określ cudzysłowów dla osadzonych cytatów:
richness
  • number
Ustawia bogactwo głosu, z 0 (flat) do 100 (mellifluous); domyślnie 50
right
  • length
  • percent
Używane z właściwością position do prawej krawędzi elementu.
size
  • auto
  • length
  • portrait
  • landscape
  • inherit
Właściwość size jest używana w mediach stronicowanych, aby określić rozmiar strony.
speak
  • normal
  • none
  • spell-out
Określa, jak zawartość elementu jest używany.
speak-header
  • always
  • once
Określa, czy nagłówki tabeli są wypowiedziane raz dla każdego wiersza lub kolumny lub za każdym razem, gdy komórka jest używana.
speak-numeral
  • continuous
  • digits
Określa, jak mają być wymawiane cyfry
speak-punctuation
  • code
  • none
właściwość określa, jak znaki interpunkcyjne będą odczytywane.
speech-rate
  • number
  • x-slow
  • slow
  • medium
  • fast
  • x-fast
  • faster
  • slower
Ustawia szybkość mowy; number ustawia szybkość słów na minutę
stress
  • number
Ustawia nacisk głosu, z 0 (catatonic) do 100 (hyperactive); domyślnie 50.
table-layout
  • auto
  • fixed
Określa algorytm renderowania tabel
text-align
  • center
  • justify
  • left
  • right
Określa styl wyrównania tekstu elementu
text-decoration
  • blink
  • line-through
  • none
  • overline
  • underline
Definiuje brak dekoracji tekstu; wartości mogą być łączone
text-indent
  • length
  • percent
Definiuje wcięcia pierwszego wiersza tekstu w elemencie; Domyślnie jest 0
text-shadow See description Tworzy cienie tekstu różnych kolorów i przesunięcia
text-transform
  • capitalize
  • lowercase
  • none
  • uppercase
Przekształca tekst w elemencie odpowiednio
top
  • length
  • percent
Używany z właściwością position do określenia górnej krawędzi elementu.
vertical-align
  • percent
  • baseline
  • bottom
  • middle
  • sub
  • super
  • text-bottom
  • text-top
  • top
Ustawia pionowe pozycjonowanie elementu
visibility
  • collapse
  • hidden
  • visible
Określa, czy element jest widoczny w dokumencie lub tabeli
voice-family List of voices Wybiera rodziny o nazwie głosu aby mówić o zawartości elementu
volume
  • number
  • percent
  • silent
  • x-soft
  • soft
  • medium
  • loud
  • x-loud
Ustawia wielkość mówionych treści; zakres wartości liczbowych z 0 do 100
white-space
  • normal
  • nowrap
  • pre
Określa, jak tekst w ust ma być wyświetlany
widows
  • number
Ustawia minimalną liczbę linii dozwolonych w fragmentach owdowiałych paragrafów.
width
  • length
  • percent
  • auto
Określa szerokość elementu
word-spacing
  • length
  • normal
Powoduje wstawienie dodatkowych odstępów między wyrazami
z-index
  • number
Ustawia warstwę renderowania dla bieżącego elementu.

 

 Pseudo-klasy & Pseudo-elementy:

 

WłaściwośćOpis
:active Zastosuj tą klasę, aby dodać efekt specjalny do elementu aktywnego
:focus Ta klasa umożliwia dodawanie efektów specjalnych do elementu podczas gdy element ma fokus
:hover Ta klasa umożliwia dodawanie efektów specjalnych do elementu po zatrzymaniu wskaźnika myszy nad nim
:link Umożliwia dodawanie efektów specjalnych dla nieodwiedzonych linków
:visited Ta klasa umożliwia dodawanie efektów specjalnych do odwiedzonego łącza
:first-child Ta klasa umożliwia dodawanie efektów specjalnych do elementu, który jest pierwszym dzieckiem jakiegoś innego elementu.
:lang Użyć tej klasy, aby określić język, aby użyć określonego elementu
:first-letter Ten element umożliwia dodawanie efektów specjalnych do pierwszej litery tekstu
:first-line Ten element umożliwia dodawanie efektów specjalnych do pierwszej linii tekstu
:before Tego elementu należy użyć do wstawiania niektórych treści przed elementem
:after Tego elementu należy użyć do wstawiania niektórych treści po elemencie

 

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.