1 / 24

Internet publi shing CSS – part 2

Internet publi shing CSS – part 2. Petr Zámostný room : A-72a phone : 4222 e-mail: petr.zamostny @ vscht.cz. Cascading Style Sheets. HTML document formatting separated from the main content Possible ways of its implementation Style specification for each element in ‘style’ attribute

wesley-stout
Download Presentation

Internet publi shing CSS – part 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Internet publishingCSS – part 2 Petr Zámostnýroom: A-72aphone: 4222e-mail: petr.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. Styledefinition in HTML head • Good for single HTML file <head> <style type="text/css"> <!– this line is HTML comment (hides style from ancient browsers ... Style definition ... --> </style> </head>

  4. Stylesheet in external file • Single stylesheet can be shared by many documents <head> ... <link href=“stylesheet_file_name.css" type="text/css" rel="StyleSheet"> ... </head>

  5. Style definition for any element • style attribute • Violates the CSS philosophy of separating the formatting from information ... <p style=“style definition">This paragraph will be formatted according the rules in the style attribute.</p> ...

  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 <em> that are directly or indirectly contained in a <h1> element • <h1>Typografie<em>na</em>internetu</h1> • <h1><span>typografie<em>na</em>internetu</span></h1> • <h2>Typografie<em>na</em>internetu</h2>

  12. Descendant selectors • Selector may specify multiple relationships and may contain universal selector • Example: • div * p {color: blue;} • This selector affects<p> elements that are grand-children and further descendants of a <div> 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 <h1>Typografie<em>na</em>internetu</h1> • <h1><span>typografie<em>na</em>internetu</span></h1> • <h2>Typografie<em>na</em>internetu</h2>

  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ř. <p class="modry">modry text</p> • 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ř. <p class="modry inverzni">modry text</p> • 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ř. <p id="1odstavec">modry text</p> • 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). • <percentage> • 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'. • <length> • 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

More Related