Internet publishing CSS – part 2 Petr Zámostný room: A-72a phone: 4222

Prezentace na téma: "Internet publishing CSS – part 2 Petr Zámostný room: A-72a phone: 4222"— Transkript prezentace:

1 Internet publishing CSS – part 2 Petr Zámostný room: A-72a phone: 4222 e-mail: petr.zamostny@vscht.czpetr.zamostny@vscht.cz

2 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

3 Style definition in HTML head  Good for single HTML file <!– this line is HTML comment (hides style from ancient browsers... Style definition... -->

4 Stylesheet in external file  Single stylesheet can be shared by many documents......

5 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....

6 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 }

7 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 }

8 Additional selectors  Universal selector * - affects all elements in the document Example:  * {color: blue;}  All elements will use blue font

9 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.

10 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.

11 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

12 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

13 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

14 „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

15 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

16 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; }

17 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;}

18 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; }

19 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ší

20 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

21 Výška a šířka elementu  height: délková míra  width: délková míra  Uplatní se pouze na blokové elementy

22 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;

23 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 10.6.1).  text-bottom Align the bottom of the box with the bottom of the parent's content area (see 10.6.1).  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.

24 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