Cechy i wartości

Oprócz selektorów, mamy też wartości, które wpisywane są w selektory i nadają im oznaczone cechy.

Rozpowszechnianie tej strony jest dozwolone jedynie w postaci publikowana linka do niej,
kopiowanie całości w celu rozpowszechniania jest zabronione!

#przykładowyselektor {wartość: cecha;}
Opis wartości i cechy.


Tekst
#przykładowyselektor {font-family: Arial;}
Wpisując font family chcemy określić rodzaj czcionki, który następnie wpisujemy po dwukropku.
#przykładowyselektor {text-align: left;}
#przykładowyselektor {text-align: right;}
#przykładowyselektor {text-align: center;}
#przykładowyselektor {text-align: justify;}
Jeśli chcemy wyrównać tekst, to wpisujemy wartość text-align, a oprócz tego cechy.
left - wyrównanie do lewej
right - wyrównanie do prawej
center - wyśrodkowanie
justify - wyjustowanie tekstu

#przykładowyselektor {font-size: 12px;}
Poprzez font-size ustalamy wielkość czcionki.
#przykładowyselektor {color: black;}
#przykładowyselektor {color: #000000;}
#przykładowyselektor {color: RGBa(0, 0, 0, 0.5);}
Color określa kolor tekstu.
Black/white/green, etc. - ogólne określenie koloru, który chcemy uzyskać.
#xxxxxx - kolor HTML
RGBa(x, x, x, y) - kolor RGB, natomiast ostatnia liczba nadaje przezroczystość kolorowi. Jest to zawsze liczba od 0,0 do 1,0, gdzie 0 to przezroczyste, a 1 nieprzezroczyste. Przykładowo półprzezroczyste to 0,5.
#przykładowyselektor {text-transform: uppercase;}
#przykładowyselektor {text-transform: lowercase;}
#przykładowyselektor {text-transform: capitalize;}
uppercase – wszystko pisane jest wielkimi literami
lowercase – wszystko pisane jest małymi literami
capitalize – każda pierwsza litera w słowie pisana jest wielką literą
#przykładowyselektor {letter-spacing: 2px;}
#przykładowyselektor {word-spacing: 10px;}
wetter-spacing – odstęp między literami
word-spacing – odstęp między słowami
#przykładowyselektor {text-decoration: none;}
#przykładowyselektor {text-decoration: underline;}
#przykładowyselektor {text-decoration: overline;}
#przykładowyselektor {text-decoration: line-through;}
none – brak dekoracji
underline – podkreślenie
overline – linia nad słowem
line-through – przekreślenie słowa
#przykładowyselektor {text-shadow: 10px 10px 10px #444;}
Nadanie elementowi cienia.
Pierwsza liczba - przesunięcie cienia względem osi x (poziom)
Druga liczna - przesunięcie cienia względem osi y (pion)
Trzecia liczba - stopień rozmycia cienia
Czwarty element - kolor cienia
#przykładowyselektor {font-weight: bold;}
#przykładowyselektor {font-weight: normal;}



Font-weight ustala grubość czcionka:
bold - pogrubienie
normal - czcionka jest niepogrubiona (przydatna opcja, gdy czcionka jest domyślnie pogrubiona, a my nie chcemy żeby taka była)
#przykładowyselektor {font-style:italic;}
Tekst jest pisany kursywą.

Ramki
#przykładowyselektor {border: x y z;}
#przykładowyselektor {border-right: x y z;}
#przykładowyselektor {border-left: x y z;}
#przykładowyselektor {border-bottom: x y z;}
#przykładowyselektor {border-top: x y z;}
Zacznijmy od wartości border.
border – ramka dookoła gadżetu
border-right – ramka w prawym boku gadżetu
border-left – ramka w lewym boku gadżetu
border-bottom – ramka w dolnym boku gadżetu
border-top – ramka w górnym boku gadżetu

W kolejnych trzech ramkach objaśnione są liczby xyz, które oznaczają kolejno: kolor, wielkość i  styl.
#przykładowyselektor {border-left: black y z;}
#przykładowyselektor {border-left: #000000 y z;}
#przykładowyselektor {border-left: RGBa(0, 0, 0, 0.5) y z;}

Po wybraniu odpowiedniej wartości, trzeba teraz nadać jej cechy. Jedną z nich jest kolor.
Black/white/green, etc. - ogólne określenie koloru, który chcemy uzyskać.
#xxxxxx - kolor HTML
RGBa(x, x, x, y) - kolor RGB, natomiast ostatnia liczba nadaje przezroczystość kolorowi. Jest to zawsze liczba od 0,0 do 1,0, gdzie 0 to przezroczyste, a 1 nieprzezroczyste. Przykładowo półprzezroczyste to 0,5.
#przykładowyselektor {border-left: #000000 2px z;}
Po wybraniu koloru czas na wielkość.
Wielkość ustawiamy w pikselach – wystarczy wtedy ustawić dowolną liczbę, a wielkość (a właściwie grubość) ramki zmieni się.
#przykładowyselektor {border-left: #000000 2px solid;}
#przykładowyselektor {border-left: #000000 2px double;}
#przykładowyselektor {border-left: #000000 2px dotted;}
#przykładowyselektor {border-left: #000000 2px dashed;}
Teraz czas na określenie stylu ramki.
solid – zwykła ramka.
double – podwójna ramka.
dotted – ramka kropkowana.
dashed – ramka przerywana.

Pamiętajcie, że kolor, wielkość i styl ramki nie muszą być podane w takiej kolejności jak tutaj, można napisać np. border-left {2px solid #000000}
#przykładowyselektor {border-radius: 20px;}
#przykładowyselektor {border-radius: 20%;}




#przykładowyselektor {border-radius: 10px 0px 10px 0px;}
Border-radius to zaokrąglenie ramki. Można zaokrąglić ją w pikselach lub procentach.
20px – zaokrąglą nam się rogi o danej liczbie pikseli.
20% - rogi zaokrąglą się o daną liczbę procent. 

Jeśli mamy gadżet w kształcie kwadratu, to wpisując 50%, zrobi nam się kółko.
Jeśli nie chcemy zaokrąglać wszystkich rogów, korzystamy z ostatniego zapisu, gdzie każda cyfra jest odpowiednia za inny róg.

Tło
#przykładowyselektor {background: #fff;}
#przykładowyselektor {background: black;}
#przykładowyselektor {background: RGBa(0, 0, 0, 0.5);}
Najprostsza wersja, ustalamy po prostu kolor tła.
Black/white/green, etc. - ogólne określenie koloru, który chcemy uzyskać.
#xxxxxx - kolor HTML
RGBa(x, x, x, y) - kolor RGB, natomiast ostatnia liczba nadaje przezroczystość kolorowi. Jest to zawsze liczba od 0,0 do 1,0, gdzie 0 to przezroczyste, a 1 nieprzezroczyste. Przykładowo półprzezroczyste to 0,5
#przykładowyselektor {background-image: url("link do zdjęcia.png"); background-position: 10px 10px;}
Tłem elementu jest zdjęcie/obrazek. Należy pamiętać, aby link do zdjęcia został załączony .jpg lub .png. Dodatkowo można ustalić pozycję zdjęcia, czyli fragment, który ma być wyświetlany (gdy obrazek jest większy od elementu, którego tłem jest). Background-position można wyrazić w pikselach (px) lub procentach (%).
#przykładowyselektor {box-shadow: 10px 10px 10px #fff;}
Nadanie elementowi cienia.
Pierwsza liczba - przesunięcie cienia względem osi x (poziom)
Druga liczna - przesunięcie cienia względem osi y (pion)
Trzecia liczba - stopień rozmycia cienia
Czwarty element - kolor cienia

Inne
#przykładowyselektor {position: absolute;}
#przykładowyselektor {position: relative;}
#przykładowyselektor {position: fixed;}

Pozycjonowanie elementu, używa się go, kiedy chcemy przesunąć element i ustawić go w konkretnym miejscu.
static - pozycja statyczna, wartość domyślna, najprostsza z możliwych
relative - przesuwanie elementu względem jego pierwotnej pozycji
absolute - przesuwanie elementu względem większego "kontenera", w którym znajduje się element (np. dla napisu Autor: Nick  większym "kontenerem" jest środkowa kolumna)
fixed  - element zostaje "przyklejony" do danego miejsca i nie rusza się podczas przewijania strony;  element jest przesuwany względem okna przeglądarki
#przykładowyselektor {display: none;}
#przykładowyselektor {display: inline-block;}

#przykładowyselektor {display: inline;}
#przykładowyselektor {display: block;}
Za pomocą właściwości display możemy ustalić w jaki sposób dany element HTML ma być interpretowany przez przeglądarkę internetową. Na przykład dany element może być interpretowany przez przeglądarkę jako element wyświetlany w linii, czy też w bloku.
block - element interpretowany przez przeglądarkę jako element blokowy
inline - element interpretowany przez przeglądarkę jako element liniowy
inline-block - element interpretowany przez przeglądarkę jako element liniowo-blokowy
list-item - element interpretowany przez przeglądarkę jako element listy HTML
none - ukrycie elementu

#przykładowyselektor {padding: 10px 10px 10px 10px;}
#przykładowyselektor {padding-left: 10px;}

#przykładowyselektor {padding-right: 10px;}
#przykładowyselektor {padding-top: 10px;}
#przykładowyselektor {padding-bottom: 10px;}

Padding określa przestrzeń wokół elementów, np. gdy chcemy żeby pomiędzy tekstem a ramką postu byłą większa przestrzeń (.post{padding: 10px;})
Standardy CSS pozwalają na następujące ustawienia:
lewy - padding-left
prawy - padding-right
góra - padding-top
dół - padding-bottom

#przykładowyselektor {margin: 10px 10px 10px 10px;}
#przykładowyselektor {margin-right: 10px;}
#przykładowyselektor {margin-left: 10px;}
#przykładowyselektor {margin-top: 10px;}
#przykładowyselektor {margin-bottom: 10px;}

Określenie wartości marginesów zewnętrznych (coś jak padding, ale od zewnątrz, a nie wewnątrz elementu), pierwszy zapis jest wartością dla wszystkich stron, niższe dla strony prawej, lewej, góry, doły.
#przykładowyselektor {width: 100px;}


#przykładowyselektor {height: 100px;}
Polecenie to pozwala ustalić dokładną szerokość różnych elementów np. szerokość posta.

Polecenie to pozwala ustalić dokładną wysokość różnych elementów np. wysokość nagłówka.
#przykładowyselektor {left: 10px;}
#przykładowyselektor {right: 10px;}
#przykładowyselektor {top: 10px;}
#przykładowyselektor {bottom: 10px;}
Za pomocą właściwości możemy określić pozycję elementu HTML, który nie jest elementem wyświetlonym w domyślnej, statycznej pozycji. Dzielimy je na:
left - określenie własnej wartości lewego odsunięcia elementu
rifgt - określenie własnej wartości prawego odsunięcia elementu
top - określenie własnej wartości górnego odsunięcia elementu
bottom - określenie własnej wartości dolnego odsunięcia elementu

#przykładowyselektor {line-height: 10px;}
Dzięki tej właściwości możemy kontrolować wysokość wierszy elementu, dzięki czemu możemy zmniejszyć bądź też zwiększyć odstęp pomiędzy wierszami tekstu, który został umieszczony w danym elemencie HTML.

#przykładowyselektor {opacity: 0,3;}
Nadanie elementowi przezroczystości. Jest to zawsze liczba od 0,0 do 1,0, gdzie 0 to przezroczyste, a 1 całkowicie nieprzezroczyste. Przykładowo półprzezroczyste to 0,5.

Brak komentarzy:

Prześlij komentarz