Elementy styli css

Spis treści:

1. Czym są style?
2. Jak stosować style?
3. Formatowanie tekstu za pomocą styli
4. Pozycjonowanie elementów na stronie za pomocą styli

1. Czym są style?

Kaskadowe arkusze styli (CSS) to technika ułatwiająca i przyśpieszająca proces formatowania stron www. Wyróżniamy dwa podejścia:
- wewnętrzne arkusze styli, umieszczane w nagłówku dokumentu, w sekcji <head> i otoczone znacznikiem otwierającym i zamykającym <style> .
- zewnętrzne arkusze styli umieszczane w odrębnym pliku z rozszerzeniem .css. Dwa przykłady zastosowania styli do tej samej strony znajdują się tutaj: Przykład1 i Przykład2

Można stosować tzw. grupowanie styli, co jest widoczne w kodzie źródłowym tej strony przy znaczniku <h1> .

2. Jak stosować style?

Przykład 1: Klasy

Tworzenie klas ułatwia przypisywanie atrybutów do określonej części strony. Ten tekst stanowi 1 klasę.

Klasę stylu tworzy się, podając nazwę znacznika (p), kropkę i nazwę klasy. Ten tekst stanowi 2 klasę.

Przykład 2: Indywidualne style

Styl indywidualny to styl stosowany do konkretnego typu znacznika na stronie www. Zamiast kropki wstawiamy #. Przykład znajduje się u dołu strony - copyright.

Przykład 3: Style lokalne

Należy jeszcze dodać, że zamiast wewnętrznego stylu z nagłówka, można umieścić kod stylu bezpośrednio w instrukcji znacznika np. <p> ale wtedy używamy nie nawiasu klamrowego {} do zamknięcia stylu ale cudzysłowu "". Ta metoda przypisania stylu do znacznika przesłania wewnętrzny arkusz styli, co widać na przykładzie tego akapitu.

Przykład 4: Style łączy

Opis znajduje się w komentarzu nagłówka. Można to wypróbować najeżdżając kursorem na link.

Przykład 5: Znaczniki stylów niestandardowych

Stosuje się dwa znaczniki:
<div> - do tworzenia znaczników blokowych
<span> - do tworzenia znaczników wewnątrzwierszowych

Poniżej zaprezentowany będzie przykład.

1.Jaka komenda jest używana w routerach Cisco do sprawdzenia czy na interfejsie znajduje się ACL?"
2.Jaki jest numer portu protokołu UDP?
3.Jaki jest numer portu protokołu TCP?

3. Formatowanie tekstu za pomocą styli

Style czcionek

Właściwości stylu czcionek:

font
font-style - normal, italic
font-weight - normal, light, bold, bolder, 100, 200, 300, 400 (normal), 500, 600, 700 (bold), 800, 900
font-size - w punktach (pt), calach (in), centymetrach (cm) lub pikselach (px); w edytorze 12 oznacza 12 pt
font-family - np. Arial, Helvetica, 'Times New Roman'
font-variant - normal, small-caps

Grupowe właściwości stylu czcionek, tak jak w poniższym pierwszym przykładzie należy ustawiać w następującej kolejności: font-style, font-variant, font-weight, font-size i font-family.

Przykłady:

To jest 12-punktowa czcionka Courier z atrybutami kursywy, pogrubienia i kapitalików.

This is italic text.

This is bold text.

This is small-caps text.

This is 12 point text.

This is 0.75 inch text.

This is 20 pixel text.

This is Courier text.

This is Helvetica text.

This is Arial text.

This is Courier text that will display as Arial if the Courier font isn't available.

Style kolorów i tła

Właściwości stylu czcionek:
color
background-color - aqua, fuchsia, lime, olive, silver, black, gray, maroon, purple, teal, blue, green, navy, red, white, yellow (to są kolory standardowe)
background-image - ustawia obraz tła dla tekstu
background-repeat - tryb wyświetlania obrazu tła (repeat, repeat-x, repeat-y, no-repeat)
background

Przykłady:

This is red text.

This is yellow text with a gray background.

This is black text with a lattice image background.

This is black text with a repeating lattice image background.

This is maroon text with a repeating brick image background.

Odstępy w tekście

Właściwości:
letter-spacing - reguluje odstępy między znakami
text-indent - ustawia wcięcie dla pierwszego wiersza tekstu w akapicie

Lepiej nie stosować wielkości w px, zamiast niej należy używać in, cm, mm, pt ponieważ są to wartości bezwzględne i nie zależą od rozdzielczości ekranu użytkownika.

Przykłady:

Litery są ściśnięte.

The letters in this sentence are separated normally.

The letters in this sentence are separated 4 pixels apart.

The letters in this sentence are separated 0.25 cm apart.

This paragraph has a normal text indent.

This paragraph has a text indent of 0.5 inches.

Style wyrównania

Właściwości styli wyrównania:
tekst-align - left, right, center
margin-top - warto podawać w %
margin-right margin-bottom margin-left margin - tej właściwości można używać na 3 sposoby:
- 1 wartość: do wszystkich marginesów
- 2 wartości: pierwsza do górnego i dolnego marginesu a druga do prawego i lewego
- 4 wartości: górny, prawy, dolny, lewy

Przykłady:

Ten akapit jest wyrównany do lewej.

Ten akapit jest wyrównany do prawej.

Ten akapit jest wycentrowany.

Ten akapit ma lewy margines rzędu 25 pikseli a prawy 25%.

Ten akapit ma górny margines rzędu 40 pikseli.

Ten akapit ma marginesy rzędu 10% z wszystkich stron.

Inne style

Właściwości styli wyrównania:
tekst-decoration - ustawia podświetlenie tekstu (underline, overline, line-through)
text-transform - ustawia wielkość liter (none, lowercase, uppercase, capitalize - każda pierwsza litera wyrazu będzie dużą literą)
cursor - ustawia ikonę wskaźnika myszy, jaka będzie wyświetlana w chwili gdy wskaźnik myszy najedzie na akapit (default, text, hand, crosshair, wait, help, move, n-resize, ne-resize, e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize

Przykłady:

This text is underlined.

This text is overlined.

This text is struck out.

This text is completely normal.

This text is in all lowercase.

This text is in all uppercase.

This text is all capitalized.

This text changes the mouse pointer to an hourglasswhen you drag the mouse over it.

4. Pozycjonowanie elementów na stronie za pomocą styli

Właściwości stylu związane z pozycjonowaniem względnym i bezwzględnym:
position - relative, absolute
top - określa odsunięcie elementu od górnej krawędzi
right
bottom
left

Nakładanie się na siebie elementów

Wprowadza się wirtualną oś Z, którą reprezentuje parametr z-index.

Przykłady:

Zmienianie wyglądu elementów

Właściwości:
width - ustawia szerokość elementu
height - ustawia wysokość elementu
display - ukrywa lub wyświetla element (none, block, inline, list-item)
border-width - ustawia szerokość obramowania elementu (thin, medium, thick)
border-style - ustawia styl obramowania elementu (none, solid, double, dashed, dotted, groove, ridge, inset, outset)
border-color - ustawia kolor obramowania elementu
border - ustawia wszystkie aspekty obramowania elementu w jednej właściwości

Przykład1: zmiana rozmiaru

Przykład2: ukrywanie elementu

Przykład3: obramowania

Mamilaria (Mammillaria Haw.) – rodzaj sukulentów z rodziny kaktusowatych (Cactaceae). Czasem bywa stosowana polska nazwa wymion. Gatunki z tego rodzaju występują w większości w Meksyku, część z nich w południowo-zachodnich Stanach Zjednoczonych, na Karaibach, w Kolumbii, Wenezueli, Gwatemali i Hondurasie.

Sterowanie miejscem na stronie

Właściwości:
margin - ustawia marginesy elementu; można też ustawiać pojedyńcze marginesy boków (margin-left, margin-right, margin-top, margin-bottom)
padding - ustawia wypełnienie elementu
vertical-align - wyrównuje element w pionie z innymi elementami (top, middle, bottom, text-top, baseline, text-bottom, sub, super

Przykład1: margines wewnętrzny

Przykład2: wyrównanie

Kierowanie przepływem tekstu

Właściwości:
float - określa jak tekst otacza elementy;
clear - zatrzymuje otaczanie elementu tekstem (none, left, right, both)
overflow - steruje nadmiarem tekstu, gdy element jest za mały, aby zmieścić tekst (visible, hidden, scroll)

Przykład1: otaczanie elementu tekstem

Darmowy hosting zapewnia PRV.PL