Internet publishing CSS – part 2 Petr Zámostný room: A-72a phone:
Cascading Style Sheets HTML document formatting separated from the main content Possible ways of its implementation Style specification for each element in ‘style’ attribute Style definition in document head Linking external style sheet
Style definition in HTML head Good for single HTML file <!– this line is HTML comment (hides style from ancient browsers... Style definition... -->
Stylesheet in external file Single stylesheet can be shared by many documents......
Style definition for any element style attribute Violates the CSS philosophy of separating the formatting from information... This paragraph will be formatted according the rules in the style attribute....
CSS rule structure selector The simplest selector is type selector (the name of element, e.g. b, p, div …) property Name of adjustable property (> 90 in CSS 2.1) value value assigned to property property type specify which values are allowed selector { property1: value; property2: value;... propertyN: value }
Rules merging Rules with the same declarations can be merged into single rule h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } Is equivalent to: h1, h2, h3 { font-family: sans-serif }
Additional selectors Universal selector * - affects all elements in the document Example: * {color: blue;} All elements will use blue font
Elements relationships Parent An element A is called the parent of element B if B is directly contained by A. Child An element A is called the child of element B if and only if B is the parent of A.
Elements relationships Descendant An element A is called a descendant of an element B, if either (1) A is a child of B, or (2) A is the child of some element C that is a descendant of B.
Descendant selectors Selector affects only elements that are descendants of specified type of elements Relationship is expressed by space Example: h1 em {color: blue;} Selector affects elements that are directly or indirectly contained in a element Typografie na internetu typografie na internetu Typografie na internetu
Descendant selectors Selector may specify multiple relationships and may contain universal selector Example: div * p {color: blue;} This selector affects elements that are grand-children and further descendants of a element
Child selectors Selektor, který se vztahuje pouze na elementy, které jsou dětmi jiného elementu K vyjádření následnictví se používá „>” Např: H1>em {color: blue;} Selektor se týká těch elementů, které jsou obsaženy přímo v elementu h1 Typografie na internetu typografie na internetu Typografie na internetu
„Adjacent sibling“ selektory Selektor, který se vztahuje pouze na elementy, které jsou společnými dětmi nějakého elementu s jiným elementem a s tímto elementem sousedí K vyjádření následnictví se používá znak „+“ Např: p {text-indent: 2em;} h1+p {text-indent: 0em;} !!!Nefunguje v MSIE 6
Atributové selektory Selektor, který se vztahuje pouze na elementy, které mají přiřazenu hodnotu danému atributu K vyjádření vztahu se používá [atribut] nebo [atribut=hodnota] Např: h1[title] {color: red;} !!!Nefunguje v MSIE 6
Další selektory - třída Třída = podskupina elementů V HTML definována atributem class Např. modry text Definice v CSS pro třídu: (element).třída { vlastnost1: hodnota; vlastnost2: hodnota;... vlastnostN: hodnota }.modry { color: blue; }
Příslušnost k více třídám Jednotlivé třídy odděleny mezerami Např. modry text Definice v CSS pro třídu: p.modry {color: blue;} p.inverzni {background-color: blue;} Selektor pro element patřící do obou tříd p.modry.inverzni {background-color: blue; color: yellow;}
Další selektory – id elementu id = identifikátor jednoho konkrétního elementu na stránce V HTML definován atributem id Např. modry text Definice v CSS pro id: #id { vlastnost1: hodnota; vlastnost2: hodnota;... vlastnostN: hodnota } #1odstavec { color: blue; }
Pseudotřídy Odkazy a:link – dosud nenavštívený odkaz a:visited – navštívený odkaz a:active – link je aktivní (vybrán klávesou TAB) a:hover – na odkaz se ukazuje myší
Pseudoelementy :first-line Vztahuje se na první řádek nějakého elementu Např: p:first-line { font-variant: small-caps; } :first-letter Vztahuje se na první písmeno nějakého elementu
Výška a šířka elementu height: délková míra width: délková míra Uplatní se pouze na blokové elementy
Zarovnání Zarovnání textu v elementu text-align Zarovnání elementu na střed margin-left: auto; margin-right: auto; Zarovnání elementu doprava margin-left: auto; margin-right: 0px;
Vertikální zarovnání baseline Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom margin edge with the parent's baseline. middle Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent. sub Lower the baseline of the box to the proper position for subscripts of the parent's box. (This value has no effect on the font size of the element's text.) super Raise the baseline of the box to the proper position for superscripts of the parent's box. (This value has no effect on the font size of the element's text.) text-top Align the top of the box with the top of the parent's content area (see ). text-bottom Align the bottom of the box with the bottom of the parent's content area (see ). Raise (positive value) or lower (negative value) the box by this distance (a percentage of the 'line-height' value). The value '0%' means the same as 'baseline'. Raise (positive value) or lower (negative value) the box by this distance. The value '0cm' means the same as 'baseline'. top Align the top of the aligned subtree with the top of the line box. bottom Align the bottom of the aligned subtree with the bottom of the line box.
Tabulky U tabulek často využijete různé typy zarovnání Dva modely tvorby okrajů tabulky border-collapse: collapse | separate border-spacing (pro separate) Pro okraje elementů tabulky lze použít standardní vlastnosti border margin padding