Browsed by
Author: admin

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

Odnośniki

Odnośniki

Większość przeglądarek pokazuje linki w kolorze niebieskim z podkreśleniem i zmianą koloru linków odwiedzonych, chyba że powiesz im, że mają to zrobić inaczej.Oto właściwości często używane z linkami:
color: zmienia kolor odnośników
background-color: kolor tła za tekstem odnośnika
text-decoration: dekoracja, czyli na przykład podkreślenie odnośnika

Choć możesz po prostu tworzyć reguły, które odnoszą się do elementu <a> Aby ustawić właściwości takie jak kolor i text-decoration, istnieją również cztery pseudo-klasy, które mogą dać większą kontrolę nad prezentacją linków:
Link, visited, hover, active

Korzystanie z tych pseudo-klas pozwala na zmianę właściwości odnośników, gdy użytkownik znajdzie się nad nimi (co zmienia je na nieco inny kolor, może doda podkreślenie), a także właściwości połączenia, które zostały odwiedzone (na przykład zmiana na nieco inny kolor – który pomaga użytkownikom wiedzieć, gdzie już byli).

body {background-color:#ffffff;} a{
font-family: arial, verdana, sans-serif;
font-size:12px;
font-weight:bold;}
a:link {
color:#0000ff;
text-decoration:none;}
a:visited {
color:#333399;
text-decoration:none;}
a:link:hover {
background-color:#e9e9e9;
text-decoration:underline;}
a:active {
color:#0033ff;
text-decoration:underline;}

Właściwości tekstu

Właściwości tekstu

Większość czcionek ma różne odmiany, takie jak pogrubienie i kursywa. Kiedy pisarze tworzą nową czcionkę, nie jest niczym niezwykłym dla nich indywidualnie spreparowanie oddzielnej, grubszej wersji każdego znaku dla grubszej odmiany.

Pomimo całej tej dokładnej pracy, przeglądarki mają tendencję do korzystania z algorytmu, który normalną wersję czcionki po prostu pogrubia. Ponieważ przeglądarki wykorzystują algorytm, to znaczy, że można również tworzyć węższą wersję czcionek. To do tego służy właściwość font-weight.

Możliwe wartości dla font-weight to:

normal bold bolder lighter 100 200 300 400 500 600 700 800 900

Poniższy przykład używa kilku różnych wartości:

p.one {font-weight:normal;}
p.two {font-weight:bold;}
p.three {font-weight:normal;}
p.three span {font-weight:bolder;}
p.four {font-weight:bold;}
p.four span {font-weight:lighter;}
p.five {font-weight:100;}
p.six {font-weight:200;}