Browsed by
Day: July 18, 2016

CSS i właściwości tekstu

CSS i właściwości tekstu

Jedna z ważniejszych rzeczy dotyczących CSS i zarazem najczęściej używanych są właściwości tekstu. Jeśli chcesz się nauczyć czegokolwiek o CSS powinieneś zacząć właśnie od właściwości tekstu.

Właściwości tekstu;

Jest bardzo dużo rzeczy, które można modyfikować za pomocą kodu CSS. Jeśli chodzi o tekst do dyspozycji mamy takie rzeczy jak:

    • word-spacing
    • white-space
    • vertical-align
    • unicode-bidi
    • text-transform
    • text-shadow
    • text-indent
    • text-decoration
    • text-align
    • line-height
    • color
    • letter-spacing
    • direction

 

Przyjrzymy się każdej z tych opcji po kolei.

Właściwość word-spacing

Kontroluje odległość między wyrazami w tekście. Przykład dla akapitu:

p
{ 
word-spacing:20px;
}

Odległość między wyrazami ustawiona jest na 20 pikseli.

Właściwość white-space

Dzięki właściwości white space możliwe jest wyświetlenie kilku spacji obok siebie.

Właściwość letter-spacing

Dzięki właściwości letter-spacing możemy kontrolować odległość między literami w wyrazach. Można kontrolować akapit, nagłówki lub pojedyncze div

h1 {letter-spacing:3px}
h2 {letter-spacing:-4px}

Domyślnie nie ma odstępów między znakami. Jeśli chcesz dodać odstępy musisz dodać odpowiedni kod

Właściwość kolor

Tego chyba nie trzeba zbytnio wyjaśniać. Zdecydowanie najczęściej używana właściwość CSS.

body
{
color:blue;
}
h1
{
color:#00ff00;
}
p
{
color:rgb(0,0,255);
}

Na szczęście tutaj nie ma problemów z kompatybilnością z IE

Właściwość direction

Dzięki tej właściwości możemy określić kierunek tekstu.

div
{
direction:rtl;
}

Raczej mało przydatne w polskich warunkach, ale gdyby ktoś kiedyś chciał tworzyć stronę dla Arabów…

O marginesach w CSS

O marginesach w CSS

Marginesy w CSS określają miejsca otaczające jakiś obiekt. Margines może nieco oczyścić okolicę obiektu od zewnętrznej strony jego granicy. Margines jest przeźroczysty więc jest odpowiedni dla każdego rodzaju strony a dzięki temu, że można określić inną jego wartość dla każdej strony obiektu jest bardzo wszechstronny.

Jak używać marginesów w CSS;

Oto wartości używane do określania marginesów:

    • auto- Używając auto pozwalasz przeglądarce na określenie odstępu.
    • length- Określa długość marginesu. Może być zdefiniowana przy użyciu pikseli albo jakiejś innej miary. Domyślna wartość to 0px.
    • %- Użycie ego oznacza zdefiniowanie marginesu w oparciu o długość elementu.
    • inherit- To oznacza, że margines powinien odziedziczyć wartość marginesu.

 

Ale jak wspomnieliśmy można określić inną wartość marginesu dla każdej strony niezależnie. Oto jak tego dokonać:

margin-top:100px;
margin-bottom:100px;
margin-right:60px;
margin-left:60px;

Taki kod można jeszcze skrócić do wartości:

margin:100px 45px; 

Skracanie cztery do jednego:

Jeśli każdy bok elementu ma inny margines można to zapisać w jednej linii kodu – nie trzeba w czterech:

 

margin:35px 50px 75px 100px;

Górny margines jest ustawiony na 35px

Prawy margines jest ustawiony na 50px

Dolny margines jest ustawiony na 75px

Lewy margines jest ustawiony na 100px

margin:45px 50px 75px;

Górny margines jest ustawiony na 45px

Prawy margines jest ustawiony na 50px

Dolny margines jest ustawiony na 75px

margin:25px 50px;

Górny i dolny margines jest ustawiony na 25px

Lewy i prawy margines jest ustawiony na 50px

margin:35px;

Wszystkie cztery marginesy ustawione są na 35px