1 / 31

Web Dizaina Pamati

#02.01 CSS. Web Dizaina Pamati. CSS ( C ascading S tyle S heets). CSS tehnoloģija ļauj, izmantojot standarta HTML valodu, gūst pilnu kontroli par HTML elementu attēlojumu, tā skaitā : Elementu izmēri Elementu pozīcija Elementu stils un krāsa Elementu izlīdzināšana U.c.

betsy
Download Presentation

Web Dizaina Pamati

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. #02.01 CSS Web DizainaPamati

  2. CSS(Cascading Style Sheets) • CSS tehnoloģija ļauj, izmantojot standarta HTML valodu, gūst pilnu kontroli par HTML elementu attēlojumu, tā skaitā: • Elementu izmēri • Elementu pozīcija • Elementu stils un krāsa • Elementu izlīdzināšana • U.c.

  3. Standarta HTML birku noformējuma maiņa • <i>Some text in italic</i>Some text in italic • <i style="text-decoration:underline;font-style:normal;">Some text in italic</i>Some text in italic

  4. CSS pielietojums WEB-inženierijā • Visas timekļa lapas sadalīt pēc tipa(teksta lapa, navigācijas lapa, komunikācijas lapa, u.t.t) • Katrai lapas tipam tika izstrādāta loģiskā struktūra • Katrai lapas tēmai tika izstrādāts savs CSS fails.

  5. CSS pielietošanas veidi • Stila iepriekšdefinēšana atzīmēšanaselementā (inline) • Stila definēšana dokumenta virsrakstā (STYLE) • Stila faila iekļaušana no atsevišķa faila (LINK) • Stila importēšana

  6. Stila iepriekšdefinēšana atzīmēšanaselementā • <h1 style="font-weight:normal;font-style:italic;font-size:10pt;">Pirmā līmeņa virsraksts</h1> • <hr style="width:100px;">

  7. Stila definēšana dokumenta virsrakstā (STYLE) • STYLE elements ļauj definēt attēlošana stilu: • Standarta HTML elementiem • Klasēm (selektors “class”) • HTML-objektiem (selektors “id”)

  8. CSS definēšana standarta HTML elementiem (STYLE) • <head><style>p {color:darkred;text-align:justify;font-size:8pt;} </style></head><body>...<p>Some text example for demonstating CSS definitions in STYLE tag. </p>...</body>

  9. Stila faila iekļaušana no atsevišķa faila (LINK) • <link type="text/css" rel="stylesheet" href="http://somesite.com/my_css.css">

  10. Stilu faila importēšana • <style>@import:url(http://somesite.com/style.css)a {color:cyan;text-decoration:underline;}</style>

  11. Sintakse • selector[, selector[, ...]]{attribute:value;[atribute:value;...]} • selector selector [selector ...] {attribute:value;[atribute:value;...]} • Selektors: • Atzīmēšanas elementa (birkas) nosaukums • Klase • Atzīmēšanas elementa ID

  12. Sintakse (turp.) • Attribute: elementa īpašiba (color, width, …) • Value: atribūta vērtība (10, 10px, #FF0000, …)

  13. Selektors – klases nosaukums • <style>.some {color:white;background-color:darkred;}</style>...<p class=some>Some text</p>...<p>This <a class=some>link</a> has format of class “some” </p>

  14. Selektors – birkas nosaukums • i, em {color:#003366,font-style:normal}a i {font-style:normal;font-weight:bold;text-decoration:line-through} • <i>Italic</i> and this is <em>italic</em> • <a name=empty><i>link</i></a>

  15. Selektors – elementa ID • a.mainlink {color:darkred;text-decoration:underline;font-style:italic;}#blue {color:#003366}...<a class=mainlink>base hyperlink</a><a class=mainlink id=blue>modified hyperlink</a>

  16. Bloka un rindas elementi • Bloks: <div>, rindkopa, tabula,… • Rinda: <span>, teikums, vārds,…

  17. Bloka īpašības • Height • Width • Border • Margin • Padding • Float • Clear

  18. Atkāpes (margin) • margin-left: L • margin-right: R • margin-top: T • margin-bottom: B • margin • margin: TBLR • margin: TB LR • margin: T LR B • margin: T B L R

  19. Iekšējas atstarpes (padding) • padding-left: L • padding -right: R • padding -top: T • padding -bottom: B • padding • padding : TBLR • padding : TB LR • padding : T LR B • padding : T B L R

  20. Līnijas, Rāmji (border) • border-top-width: width • border-bottom-width: width • border-left-width: width • border-right-width: width • border-width: width • border-color: color • border-style: • none, dotted, dashed, solid, double, groove, ridge, inset, outset

  21. Līnijas, Rāmji (border) • border-top: width color style • border-bottom: width color style • border-left: width color style • border-right: width color style • border: width color style

  22. Līnijas, Rāmji (border) • border: border-width || border-style || color

  23. Līnijas, Rāmji (border) • border-bottom: border-width || border-style || color • border-bottom-width: <value> • border-bottom-style: <stils> • border-bottom-width: thin | medium | thick | <value> • u.t.t.

  24. Līnijas, Rāmji (border) • border-collapse: collapse | separate

  25. Teksta bloka apliece (float, clear) • Float: left/right/both • Clear: right/left/none/both

  26. Teksta krāsa • color: #color

  27. Fona krāsa (background) • background: background-attachment || background-color || background-image || background-position || background-repeat • background-attachment: fixed | scroll • background-color: krāsa • background-image: url(ceļš) | none

  28. Fona krāsa (background) • background-position: [проценты | значение] | [left | center | right] || [top | center | bottom] • background-repeat: no-repeat | repeat | repeat-x | repeat-y

  29. Fonts (font) • font: font-style || font-variant || font-weight || font-size || line-height || font-family

  30. Fonts (font) • font-family: fonta nosaukums [, fonta nosaukums[, ...]] • font-size: abs_size | rel_size | value | percents • font-style: normal | italic | oblique

  31. Fonts (font) • font-variant: normal | small-caps • font-weight: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900.

More Related