Cascading Style Sheets CSS CSS pozwala przypisać poszczególnym elementom na stronie (HTML/XML) takie właściwości jak rodzaj, grubość, rozmiar czcionki, kolor tła, odległości między elementami, ich obramowania, itp. Bd Budowa reguły ł CSS składa się z nazwy i wartości ś Selektor {właściwość1: wartość; właściwość1: wartość;} Selektor nazwa elementu HTML/XML lub własna H1 {font-size: 20px; color:red;} red; TD {text-align: right; background-color: red; } *{background background-color: color: green;}.moja_klasa {text-align: left; background-color: red; }
Cascading Style Sheets CSS
Cascading Style Sheets CSS
Cascading Style Sheets CSS Budowa reguły CSS TD {text-align: left; background-color: red; } Pojedyncze znaczniki H1, H2, H3 {font-size: 20px; color: red; } Takie same style dla kilku znaczników H1 B {font-size: 40px; color:red;} red; Jeżeli w znaczniku <H1> umieszczony jest znacznik <B>
Umieszczanie Plik zewnętrzny w znaczniku <HEAD> - może być dołączony do kilku stron HTML/XML <link href="plik.css" " type="text/css" " rel="stylesheet"/> l "/ rel="stylesheet" informuje, że nastąpi połączenie z arkuszem stylu href określamy źródło (plik) type= text/css określenie typu pliku Wewnątrz pliku HTML dla całej strony w znaczniku <HEAD> umieścić <STYLE> <style type= text/css > H1 { font-size: 20px; color: red; } TD { font-size: 20px; background-color: red; } </style> Wewnątrz znacznika HTML (dowolnego) dotyczą tylko tego znacznika <H1 style= font-size: 20px; color: red; >
Jednostki CSS Jednostki CSS: Długość; URL; Kolor; Słowo kluczowe;
Jednostki CSS - długość Miary długości: Jednostki bezwzględne: Cal in; Centymetr cm; milimetr mm; Punkt pt; Pica pc; Np.:margin-top: 0.5cm; font-size: 12pt;
Jednostki CSS - długość Jednostki względne: em szerokość literki m w bieżącej czcionce; ex szerokość literki x w bieżącej czcionce; px rozmiar piksela Np.:border-right-width: 2em; Procentowe podawanie miary: Procentowa zmiana w zależności od wielkości określonej najczęściej przez rodzica <table style= width: 95%;
Jednostki CSS adresy url Adresów URL można używać z właściwościami: background-image; list-style-image; list-style; tl Np.: raport {background-image: url( tlo.gif )}
Jednostki CSS - kolory Właściwości określające kolory: color; background-color; border-color; Definiowanie kolorów: Nazwy (aqua, red, black,...) Podanie koloru w kodzie RGB (3 dwucyfrowe liczby w kodzie 16 ) Za pomocą 3 liczb od 0 do 255 lub w procentach od 0 do 100% (24-bitowy model koloru) Np.: link {color: red; background-color: #FF0000; border-color: rgb (255,0,0)}
Jednostki CSS słowa kluczowe Wartości podawane z użyciem słów kluczowych: Stosowane różne w zależności od opisywanej właściwości, np.: naglowek {font-weight: bold} naglowek {font-variant: small-caps} underline, overline, italic, verdana
Właściwość DISPLAY Właściwość display: block osobny blok (wiersz); inline w jednej lini; list-item elementy blokowe ze znacznikiem pozycji listy przed blokiem; none niewidoczny na ekranie;
DISPLAY list-itemitem Elementy listy: List-style-type; Disc, circle, square, decimal, lower-roman... List-style-image; url (heart.gif) List-style-position; Outside, inside id
White-space Właściwość white-space: Normal dowolna ilość spacji traktowana jest jak jedna; Pre wszystkie spacje są ważne; Nowrap spacje są kompresowane a rozpoznawane są końce wierszy;
Font-family Font-family: Serif times; Sans-serif verdana; Monospace courier; Cursive zurich, czcionka odręczna; ę Fantasy critter Przeglądarka czcionki (nazwy) zastąpi Przeglądarka czcionki (nazwy) zastąpi czcionkami zainstalowanymi w systemie;
Font: -style, -variant, -weight Font-style: Normal; Italic - pochylone; Font-variant: Normal; Small-caps capitaliki; Font-weight: Normal; Bold; Bolder; Lighter 100, 200,..., 900
Font-size: Font-size Wartość bezwzględna; Xx-small, x-small, small; Medium; Large, x-large, xx-large; Smaller, larger;
Właściwości tła: Właściwości tła Background-color; Background-image; Background-repeat: Repeat, repeat-x, repeat-y, no-repeat; Background-attachment: attachment: Scroll, fixed; Background-position: Top, center, bottom, left, center, right;
Właściwości tekstu Właściwości tekstu: Word-spacing; Letter-spacing; Text-decoration: None, underline, overline, line-through Text-transform: t Uppercase; lowercase; capitalize; Text-align: Left, right, center, justify; Text-indent: określa wcięcie pierwszego wiersza; Line-height: odstęp między liniami;
Właściwości obramowania Właściwości obramowania: Wielkość marginesów: Margin-top, Margin-bottom, Margin-left, Margin-right; Styl obramowania Border-style: dotted, dashed, solid, double, groove, ridge, inset, outset; Szerokość obramowania: B d idth Border-width; Kolor obramowania: Border-color
Pseudoklasy Dotyczą jednego znacznika ale jego różnych zachowań A:active Aktywny link (1 na stronie) A:link Link zwykły A:visited Link odwiedzony A:hover Gdy kursor myszki znajdzie się nad linkiem
Pseudoklasy P:first-line {font-weight: bold} Pogrubienie i 1liniiii P:first-letter {font-weight: bold} Pogrubienie 1 znaku
Edytory y CSS Balthisar Cascade Freeware http://www.balthisar.com StyleSheet Maker Trial http://www.coffeecup.com/stylesheet-maker / t h t TopStyle Pro Trial http://www.newsgator.com/individuals/topstyle