Cascading Style Sheets CSS Cascading Style Sheets
Rodzaje stylów wierszowe wewnętrzne zewnetrzne
Dziedziczenie Element stojący niżej w hierarchii przyjmuje cechy elementu znajdującego się wyżej, chyba że jawnie zostaną zdefiniowane nowe reguły. np. jeśli akapit znajduje się w warstwie, to przejmuje styl przypisany warstwie.
Kaskadowość wyjaśnia sposób działania stylów, w przypadku gdy wiele reguł odnosi się do tych samych elementów. Najpierw nakładane są style bardziej ogólne, a dopiero potem bardziej szczegółowe. Ostateczny styl elementu to ten nałożony najpóźniej, czyli znajdujący się najniżej w kaskadzie.
Kolejność nakładania style z zewnętrznych plików, style ze znaczników <style>, style wierszowe sektory ogólne sektory elementu, sektory klas i pseudoklas, sektory identyfikatorów. omówić sytuację <p style="color:red; color:yellow; "> Tekst</p>
Styl wierszowy <znacznik style="definicja stylu"> treść znacznika</znacznik> style="definicja1; definicja2; ...definicja N„ np. <p style="font-size:18pt; color:red; "> Czcionka o rozmiarze 18 pt drukarskich i kolorze czerwonym </p>
Styl wewnętrzny deklaruje styl dla wszystkich objętych nim elementów. Umieszcza się go w nagłówku strony. <head> <style type="text/css"> element1{ definicja stylu} element2{ definicja stylu} </style>
Styl zewnętrzny Styl zdefiniowany w osobnym (zewnętrznym) pliku. W sekcji nagłówkowej umieszczony jest wówczas link wskazujący ten plik. <link rel="stylesheet" type="text/css" href="nazwa_pliku.css">
Budowa stylu Styl składa się z reguł. Pojedyncza reguła składa się z selektora wraz z zestawem definicji (par cecha : wartość). Każda definicja powinna zakończyć się znakiem średnika. Selektor pojedynczego elementu – wybiera dany element strony definiowany przez określony znacznik, np. div{color:green; font-size:20}
Selektor ogólny – używamy, gdy chcemy zmienić pewną cechę dotyczącą każdego elementu danej witryny np. <head> <style type="text/css"> *{color:blue; font-size:20} </style>
Selektor klasy – pozwala zdefiniować zestaw reguł (klasę), które można potem przypisywać dowolnym elementom strony np. element.nazwa_klasy{definicje} jeśli dana klasa ma obowiązywać dla dowolnych elementów należy użyć selektora ogólnego .nazwa_klasy{definicje}
Użycie klasy dla zmodyfikowania właściwości elementu <znacznik class=„nazwa klasy” pozostałe atrybuty> treść znacznika </znacznik> definicja klasy <style type="text/css"> .duzezielone{font-size:20pk;color:green;} </style> użycie <div class="duzezielone"> treść</div>
#identyfikator {definicje} Selektor identyfikatora umożliwia przypisanie stylu elementowi witryny o zadanym identyfikatorze (posiadającemu atrybut id) #identyfikator {definicje} np. <style type="text/css"> # specakapit{color:red;} </style> użycie <p id="specakapit"> treść</p> jak nie podamy nazwy protokołu przy wpisywaniu adresu zasobu w przeglądarce internetowej przeglądarka przyjmie domyślnie, że jest to http
Selektor pseudoklasy oznaczają elementy o określonym stanie bądź właściwości element:pseudo_klasa{definicje} Lista pseudoklas: :active element w stanie aktywnym :first-child będący pierwszym elem. podrzędnym :focus element, który ma focus :hover nad którym znajduje się kursor myszy :lang element, który ma atrybut lang specyficznej wartości :link nieodwiedzony odnośnik :visited odwiedzony odnośnik
Selektor wieloelementowy tą samą regułę nadajemy wielu elementom witryny element1, element2, ..., elementN {definicje} np. <style type="text/css"> h1,h2,h3{color:green} </style>
Czcionki Rozmiar czcionki font-size:wartośćjm; jm – np. 1cm, 8mm,12pt, 20px standard – 12pt jm=2em oznacza dwukrotne powiększenie bieżącej czcionki; =0,6 zmniejszenie czcionki do 6/10 bieżącej czcionki nazwane czcionki tak jak w znaczniku <font>, np. small, large, ...
Czcionki Rodziny czcionek font-family:nazwa1, nazwa2,...; nazwa – nazwa czcionki lub rodziny czcionek np. font-family:"Times New Roman"; font-family:„Arial"; font-family:"sans-serif "; font-family:"fantasy";
Czcionki Style i warianty czcionek font-style:wartość Grubość czcionek np. font-style:"italic"; font-variant:"small-caps"; Grubość czcionek stosuje się wartości bezwzględne opisowe (normal, bold) i numeryczne (100, 200, ..., 900) oraz względne (bolder, lighter) czcionka zwykła to 400, bold to 700 np. <p style=font-weight:500;</p>
Cecha font określenie w jednym miejscu wszystkich cech czcionki font: font-style font-variant font-weight font-size / line-height font family; przykład: style="font: italic bold 10pt Times,serif; "
Wyrównanie tekstu w poziomie Formatowanie tekstu Wyrównanie tekstu w poziomie style="text-align:right"; :left; :center; :justify; Właściwość text-align wyrównuje nie tylko tekst, ale również nietekstowe elementy witryny
Wyrównanie tekstu w pionie style="vertical- align:baseline;" :baseline; - wyrównanie do linii bazowej :bottom; - dolna linia elementu wyrównana jest do najniższej linii wiersza :middle; - wyrównanie do linii środkowej :sub; - indeks dolny :super; - indeks górny : top; - górna linia elementu wyrównana do najwyższej linii wiersza
Bezpośrednie określanie przesunięcia w pionie style="vertical-align:20px;" style="vertical-align:2em; " przesunięcie w górę o dwie wysokości czcionki elementu nadrzędnego style="vertical-align:-2em; " przesunięcie w dół o dwie wysokości czcionki elementu nadrzędnego
Pionowe odstępy w tekście line – height odstępy między wierszami przykład line – height:2; odstęp równy dwukrotnej wielkości czcionki line – height:85%; odstęp 75% wielkości czcionki
Odstępy miedzy słowami i znakami word-spacing – dodatkowy odstęp między słowami letter-spacing – dodatkowy odstęp między literami przykład word-spacing:1cm - standardowy odstęp między wyrazami zostanie zwiększony o 1cm letter-spacing:2px - standardowy odstęp między literami zostanie zwiększony o 2piksele;-2px zmniejszony o 2 piksele
Wcięcia text-indent przyjmuje dwa rodzaje wartości: określone jednostką miary; określony procentowo w stosunku do elementu nadrzędnego przykład text-indent:1cm standardowe wcięcie o 1 cm w prawo; :-1cm w lewo
Wyróżnienia text-decoration blink – tekst migający line-through – tekst przekreślony overline – podkreślenie nad tekstem underline – tekst podkreślony przykład text-decoration:blink line-trough uwaga! blink nie rozpoznawany przez Internet Explorera
Transformacja wielkości liter text-transform – kontrola wielkości liter capitalize – zamiana pierwszej litery każdego słowa na wielką lowercase – zmiana wszystkich liter na małe; uppercase – zamiana wszystkich liter na wielkie
Obsługa białych znaków white-space nowrap – sekwencje białych znaków będą zastępowane przez pojedynczą spacje; wiersze przełamywane tylko przez <br/>; pre – sekwencje białych znaków będą wyświetlane w całości; wiersze przełamywane tylko w miejscach wystąpienia znaków końca wiersza; pre-line – sekwencje białych znaków będą zastępowane przez pojedynczą spacje; wiersze przełamywane w razie potrzeby oraz w miejscach wystąpienia znaków końca wiersza; pre-wrap – sekwencje białych znaków będą wyświetlane w całości; wiersze przełamywane w razie potrzeby oraz w miejscach wystąpienia znaków końca wiersza;
Kierunek tekstu direction – określa kierunek tekstu ltr - od lewej do prawej; rtl – od prawej do lewej
Style list Wyróżniki listy nienumerowanej list-style-type:square; :disc; :circle; list-style-image:url("odnośnik_do_obrazu");
Kolory color:określenie koloru background-color: określenie koloru tła ActiveBorder – kolor obramowania aktywnego okna; ActiveCaption – kolor tła paska tytułu; AppWorkspace – kolor tła okna z wieloma dokumentami; Background – kolor tła pulpitu; ButtonFace – kolor pierwszoplanowy elementu wyświetlanego jako trójwymiarowy;
ButtonHighlight – kolor podświetlonego (wskazanego) elementu wyświetlonego jako trójwymiarowy. ButtonShadow – kolor cienia elementu wyświetlanego jako trójwymiarowy; ButtonText – kolor tekstu na przycisku; CaptionText – kolor tekstu podpisu; GreyText – kolor tekstu nieaktywnych opcji; Highlight – kolor wyróżnionych elementów w kontrolkach; HighlightText – kolor tekstu wyróżnionych elementów w kontrolkach; InactiveBorder – kolor obramowania nieaktywnego okna;
InactiveCaption – kolor paska tytułu nieaktywnego okna; InactiveCaptionText – kolor tekstu na pasku tytułu nieaktywnego okna; InfoBackground – kolor tła podpowiedzi; InfoText – kolor tekstu podpowiedzi; Menu – kolor tła menu; MenuText – kolor tekstu menu; Scrollbar – kolor głównej części paska przewijania; ThreeDDarkShadow – ciemniejszy cień elementów wyświetlanych jako trójwymiarowe; ThreeDface – główny kolor elementów wyświetlanych jako trójwymiarowe;
ThreeDHighlight – kolor podświetlenia elementów wyświetlanych jako trójwymiarowe; ThreeDLightShadow – jasny cień elementów wyświetlanych jako trójwymiarowe; ThreeDShadow – kolor cienia elementów wyświetlanych jako trójwymiarowe; Window – kolor tła okna; WindowFrame – kolor obramowania okna; WindowText – kolor tekstu w oknie;
Obrazy jako tło background-image: url('odnośnik do obrazu') powtarzanie tła obrazu repeat – obraz powtarzany w poziomie i pionie (wartość domyślna); repeat-x – obraz powtarzany w poziomie; repeat-y – obraz powtarzany w pionie; no-repeat – obraz niepowtarzalny
Zakotwiczenie obrazów tła background-attachment :scroll – tło przewijane razem ze stroną (wartość domyślna) :fixed - tło zakotwiczone (nieprzewijalne); przykład <style type="text/css"> body{background-image:url('tlo.jpg'); background-attachment:fixed} </style>
Pozycja obrazu tła background-position :top left –góra w pionie; lewo w poziomie :top center - góra w pionie; środek w poziomie :top right - góra w pionie; prawo w poziomie :center left - środek w pionie; lewo w poziomie :center center - środek w pionie; środek w poziomie :center right - środek w pionie; prawo w poziomie
background-position (c.d.) :bottom left –dół w pionie; lewo w poziomie :bottom center - dół w pionie; środek w poziomie :bottom right - dół w pionie; prawo w poziomie :xposjm yposjm lewy góry róg 0% 0%; prawy dolny 100% 100% przykład :20px 5cm – obraz umiejscowiony 20 pikseli od lewego krańca oraz 5 cm od górnego krańca akapitu
Marginesy, obrysy i obramowania Marginesy dzielą się na: zewnętrzne – określają odległość od innych elementów witryny; wewnętrzny - definiuje odległość miedzy krawędzią danego elementu a jego treścią
Marginesy zewnętrzne margin-top – margines górny; margin-bottom – margines dolny; margin-left – margines lewy; margin-right – margines prawy Przykład: margin-right:12px; margin-left:20px; margin:10px 15px 20px 15px top right bottom left margin:10px 20 px top i bottom po10px, left i right po 20px
Marginesy wewnętrzne padding-top – wypełnienie górne; padding-bottom – wypełnienie dolne; padding-left – wypełnienie lewe; padding-right – wypełnienie prawe. Przykład: padding -right:12px; margin-left:20px; padding:10px 15px 20px 15px top right bottom left padding:10px 20 px top i bottom po10px, left i right po 20px
Pełne obramowania (ramki) border-style – styl ramki; border-width – grubość ramki; border-color – kolor ramki. Każda z tych właściwości ma np. rodzaje definicji: właściwość:góra prawo dół lewo; właściwość:góra prawo dół; właściwość:góradół prawolewo; właściwość:wartość; Grubość ramki oprócz podania wartości z jednostką miary może być podane wartości: thin, medium, thick
Styl ramki hidden – brak ramki (ramka ukryta); dotted – ramka kropkowana; dashed – ramka kropkowana; solid – ramka pełna; double – ramka z podwójną linią; groove – ramka 3D stymulująca rowek; ridge – ramka 3D stymulująca wypukłą krawędź; inset – ramka 3D stymulująca wgłębienie; outset – ramka 3D stymulująca wypukłość.
Skrócona definicja obramowania border: grubość styl kolor przykład border: 1px solid black border: 0.2cm dotted obramowanie cząstkowe border-top-color border-top-width border-top-style
Obrys outline: kolor styl szerokość_obrysu obrys to zewnętrzna obwódka ramki. outline-color - kolor obrysu outline-style – styl obrysu outline-width – szerokość obrysu
Tabele Obramowania, wypełnienia i tła dodajemy do stylu Table, Td, Tr tak jak w ramkach. dodatkowo: border-collapse:collapse; - fragmenty ramek sąsiadujących komórek zostaną połączone caption-side: bottom; - podpis pod tabelą; :top; - nad tabelą.
Style tworzące układ strony <style type="text/css"> #naglowek{width:100%;float:left;} #lewypanel{width:15%;float:left;} #srodkowypanel{width:55%;float:left;} #prawypanel{width:25%; float:right;} #stopka{width:100%;float:left;} #panelesrodkowe{min-height:300px; padding:10px;} </style>