CSS3 dla elementów blokowych

Jako, że w ostatnim moim wpisie, zajmowaliśmy się sposobami na nadawanie styli elementom tekstowym HTML5 za pomocą CSS3, dziś nadszedł czas na omówienie styli CSS3 dla elementów blokowych. Jak zwykle w tym “kursie” tematy do postów wybieram na podstawie informacji zawartych na stronach Microsoftu związanych z egzaminem MCSD: 70-480. W związku z tym zajmiemy się dziś takimi właściwościami CSS3 jak: właściwości zmieniające wygląd elementów blokowych; właściwości zmieniające efekty graficzne elementów; właściwości określające pozycję elementu względem reszty elementów na stronie. Przejdźmy więc do rzeczy!

Zmiana wyglądu elementów blokowych

Na początek weźmy na tapetę zmianę rozmiaru elementu blokowego. Jako, że elementy blokowe są generalnie prostokątami, do ustawiania ich rozmiaru używane są właściwości ‘width’ (szerokość) oraz ‘height’ (wysokość). Poniżej przykład użycia:

div {
    width: 50px;
    height: 50px;

    background: red; /* zeby było widać ten element */
}

Oczywiście, tak jak w przypadku ustawiania wielkości tekstu, zamiast wartości w pikselach, można użyć jednostek “em” oraz “pt”. Myślę, że na temat ustawiania rozmiaru to wszystko co można napisać, przejdźmy więc dalej.

Obramowanie

Kolejny kwestia do omówienia to obramowanie (ang. borders). Do ustawiania obramowania elementu, służą właściwości z rodziny ‘border-[ustawienie]’ - zanim przejdziemy do przykładu, omówmy kilka najważniejszych właściwości pozwalających nam ustawić obramowanie.

border-style

Na początek ‘border-style’ - właściwość tak pozwala nam na ustawienie stylu obramowania. Dostępne mamy do wyboru następujące wartości:

none - wyłącza wyświetlanie obramowania
dashed - obramowanie w postaci linii przerywanej
solid - obramowanie w postaci linii ciągłej
double - podwójne obramowanie, tzn. dwie równoległe linie oddzielone pustą przestrzenią
groove, ridge, inset, outset - obramowania imitujące trójwymiar; zależą od ustawionego koloru obramowania

border-width oraz border-color

Kolejną istotną właściwością jest ‘border-width’, pozwalająca na ustawienie grubości obramowania. Tutaj ponownie używać można wartości liczbowych w jednostkach “px”, “em” oraz “pt”.

Ostatnią właściwością przed pokazaniem przykładu jest ‘border-color’, która jak sama nazwa wskazuje pozwala na ustawienie koloru obramowania - w tym przypadku standardowo: można ustawiać wartość heksadecymalną, słowną lub jako funkcję ‘rgb’.

Przejdźmy wreszcie do przykładu:

div {
    width: 50px;
    height: 50px;

    border-style: solid;
    border-width: 1px; /* również 'em' oraz 'pt' */
    border-color: black; /* albo np. #00ffff albo rgb(234,0,70) */
}

Powyższy kod spowoduje, że element <div> wyglądać będzie następująco:

Style dla poszczególnych boków

Oprócz opisanych, istnieją jeszcze wariacje właściwości ‘border-[ustawienie]’. Można mianowicie ograniczyć poszczególne ustawienia tylko do jednego lub kilku boków elementu. Do tego celu służą właściwości, które konstruuje się następująco: ‘border-[strona]-[ustawienie]’, na przykład ‘border-bottom-style’ albo ‘border-top-color’ (generalnie mamy 4 boki a więc ‘bottom’, ‘top’, ‘left’ oraz ‘right;).

Właściwości “combo”

Oprócz tego, mamy też możliwość skorzystania z właściwości “combo”, a więc ustawienie 3 opisanych wyżej właściwości na raz, za pomocą jednej ogólnej właściwości ‘border’. Spójrzmy na przykład:

border: 1px solid black;

Za pomocą tak ustawionej właściwości obramowania uzyskamy identyczny wynik jak dla poprzedniego przykładu.

Zaokrąglanie narożników

Będąc już przy ustawianiu obramowania, należy również wspomnieć o możliwości zaokrąglania narożników elementów blokowych. Sprawa wygląda bardzo prosto ponieważ aby zaokrąglić narożniki elementu, wystarczy ustawić odpowiednią wartość właściwości ‘border-radius’. Poniższy przykład:

div {
    width: 50px;
    height: 50px;

    border: 1px solid black;
    border-radius: 10px;
}

spowoduje wyświetlenie następującego elementu <div>:

Jak widać aby nadać elementowi zaokrąglenie na narożnikach, wystarczy podać promień zaokrąglenia.

Właściwość “outline”

Pozostając wciąż przy tym temacie, wspomnieć muszę również o właściwości ‘outline’ czyli takim dodatkowym obramowaniu, które występuje jednak poza elementem blokowym. Jeśli chodzi o wartości tej właściwości to obowiązują dokładnie te same zasady co w przypadku zwykłego obramowania, w związku z tym proponuję spojrzeć tylko na przykład:

div {
    width: 50px;
    height: 50px;

    border: 3px dotted black;
    outline: 3px solid red;
}

A oto efekt nadania powyższego stylu elementowi <div>:

Jak widać dookoła zwykłego obramowania (przerywana linia) narysowana została dodatkowa czerwona linia - to właśnie “outline”. Należy pamiętać, że to dodatkowe obramowanie nie wlicza się do wymiarów elementu.

Właściwość “padding”

Następna istotna właściwość elementów wpływająca na ich wygląd to ‘padding’. Jest to swego rodzaju margines, tyle że wewnątrz elementu. Jego ustawienie powoduje odsunięcie od krawędzi elementu blokowego, elementu znajdującego się wewnątrz. Najlepiej zobaczyć to na przykładzie:

div {
    width: 100px;
    height: 100px;

    border: 1px solid black;

    padding: 10px;
}

Efekt tak ustawionego stylu przedstawia się następująco:

Jakiś tekst

Myślę, że przykład doskonale pokazuje działanie tej właściwości - tekst zamiast być przyklejonym do lewego górnego rogu, jest odsunięty od niego na 10px. W przypadku tej właściwości możliwe jest oczywiście użycie również jednostek “em” oraz “pt”. Oprócz tego, mamy dostępne warianty ‘padding-top’, ‘padding-bottom’, ‘padding-left’ oraz ‘padding-right’, które jak się domyślacie, pozwalają na ustawienie “paddingu” tylko dla jednego z boków elementu blokowego.

Marginesy

Ostatnia właściwość w tym paragrafie to ‘margin’. Tutaj mamy bardzo podobną sytuację jak w przypadku właściwości ‘padding’, tyle że nie odsuwamy elementów od krawędzi wewnętrznej tylko zewnętrznej. Przykład użycia:

div {
    width: 100px;
    height: 100px;

    border: 1px solid black;

    margin: 10px;
}

Efekt tego ustawienia jest następujący:

Jakiś tekst

Widać wyraźnie, że element <div> jest odsunięty na 10px od otaczających go elementów. Przy okazji widzimy jak zachował się tekst kiedy nie mamy już ustawionej wartości ‘padding’ ;)

Zapis skrócony

Na koniec chciałbym jeszcze dodać małą uwagę dotyczącą właściwości, które tyczą się jednocześnie wszystkich krawędzi elementu blokowego. Oprócz przypisywania im jednej wartości można jeszcze zrobić to na trzy inne sposoby. Spójrzmy na przykład, dla właściwości ‘margin’:

margin: 0px 10px; /* top+bottom left+right */
margin: 10px 0px 10px 10px; /* top right bottom left */
margin: 25px 50px 75px; /* top right+left bottom */

Mamy zatem możliwość pełnej kontroli nad właściwościami, również w powyższej, skróconej formie.

Zmiana efektów graficznych

W tym paragrafie przejdźmy do właściwości CSS3 odpowiedzialnych za efekty graficzne.

Właściwość “opacity”

Na początek właściwość pozwalająca spowodować przezroczystość elementu - mowa tutaj o ‘opacity’. Przykład użycia:

opacity: 0.4;

Wartość przypisana do właściwości powinna się zawierać pomiędzy 0 a 1 (gdzie 0 to brak całkiem przezroczyste, a 1 to brak przezroczystości. Poniżej efekt zastosowania tej właściwości:

Jakiś tekst

Kwadrat wewnętrzny ma ustawiony kolor biały oraz wartość właściwości ‘opacity’ na 0.6. Jak widać nie jest on do końca biały ponieważ spod spodu prześwituje kolor czerwony. Również tekst nie jest do końca czarny, ponieważ na niego również działa przezroczystość.

Obrazek tła

Za pomocą CSS3 możliwe jest rówenież ustawienie obrazka jako tła dla elementu blokowego HTML. Można to zrobić w prosty sposób za pomocą właściwości ‘background-image’. Poniżej przykład użycia tej właściwości:

background-image:url('some_image.jpg');
background-repeat:no-repeat;
background-position:right bottom;

Pierwsza linia pokazuje w jaki sposób ustawić można obrazek jako tło - wystarczy użyć funkcji ‘url’ podając adres URL obrazka. W kolejnej linii widać w jaki sposób możemy zdecydować czy obrazek ma być powtarzany czy nie - w tym przypadku wyłączamy powtarzanie obrazka. Mamy jednak możliwość również ustawienia powtarzania w poziomie (‘repeat-x’), powtarzania w pionie (‘repeat-y’) oraz powtarzania w obu płaszczyznach (poprosty ‘repeat’). W ostatniej linii widzimy, że możliwe jest również wybranie pozycji obrazka względem krawędzi elementu blokowego.

Oczywiście istnieje też możliwość zapisu skróconego za pomocą właściwości ‘background’:

background:url('some_image.jpg') repeat;

Ostatnią właściwością dotyczącą tła elementów blokowych, którą chciałbym w tym poście przytoczyć jest ‘background-clip’. Pozwala ona na określenie przestrzeni rysowania dla tła, a dostępne dla niej wartości to:

border-box - przestrzeń ograniczona obramowaniem włącznie
paddiing-box - przestrzeń ograniczona obramowanie ale nie wliczając to samego obramowania
content-box - przestrzeń zawartości, czyli nie zawiera przestrzeni pomiędzy obramowaniem a przestrzenią określoną właściwością ‘padding’

Myślę, że najlepiej przetestować to na stronie w3schools.com.

Cień elementu blokowego

Czas przejść do ostatniej właściwości w tym paragrafie, a więc do ‘box-shadow’. Najlepiej od razu spojrzeć na przykład:

box-shadow: 10px 10px 8px gray;

Pierwsze dwie wartości odpowiadają za przesunięcie cienia odpowiednio w poziomie i w pionie. Trzecia to rozmycie cienia, a ostatnia to kolor cienia. Podobnie jak w przypadku poprzedniej właściwości, zachęcam do przetestowania tego na stronach w3schools.com.

Zmiana pozycji względem innych elementów dokumentu

Na temat właściwości ‘position’ pisałem już w tym cyklu, w poście na temat pozycjonowania elementów za pomocą CSS3, dlatego tutaj tylko krótkie przypomnienie zagadnienia. Właściwość ta może przyjmować następujące wartości:

static - jest to domyślna wartość właściwości ‘position’ - ta właśnie wartość jest ustawiana dla każdego elementu jeśli sami jej nie zdefiniujemy. Elementy pozycjonowane w ten sposób są zawsze pozycjonowane względem normalnego przepływu (ang. flow) dokumentu
relative - takie pozycjonowanie powoduje, że element przemieszczany jest o zadaną wartość względem swojej oryginalnej pozycji (czyli takiej jaką zająłby przy pozycjonowaniu statycznym). Właściwości ‘right’, ‘left’ itd. służą do określania kierunku i odległości o jaką ma nastąpić przesunięcie. Elementy pozycjonowane w ten sposób mogą zachodzić na inne elementy, ale są przez nie widoczne jakby zajmowały swoje miejsce przed przesunięciem
absolute - elementy pozycjonowane bezwzględnie to pozycjonowanie względem najbliższego (w górę) elementu rodzica, który ma ustawione pozycjonowane inne niż statyczne (jeśli takowego nie ma, pozycjonuje się względem elementu <html>). Element taki, podobnie jak elementy pozycjonowane statycznie (fixed), zachowuje się tak, jakby był niewidoczny dla innych elementów dokumentu (nie wpływa na przepływ elementów - nie zajmuje miejsca)
fixed - w tym przypadku elementy pozycjonowane są względem okna przeglądarki - podczas “scrollowania” pozostają widoczne w tym samym miejscu, a pozostałe elementy dokumentu HTML, zachowują się tak jakby tak pozycjonowanego elementu w ogóle nie było. Za pomocą pozostałych czterech właściwości pozycjonowania, można sterować umiejscowieniem elementu w oknie przeglądarki (czyli de facto odpowiednim odsunięciem go od poszczególnych boków okna)