Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Projektowanie warstwy klienckiej aplikacji internetowych Kaskadowe.

Prezentacja na temat: "Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Projektowanie warstwy klienckiej aplikacji internetowych Kaskadowe."— Zapis prezentacji:

1 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Projektowanie warstwy klienckiej aplikacji internetowych Kaskadowe arkusze styli Prezentacja jest współfinansowana przez Unię Europejską w ramach Europejskiego Funduszu Społecznego w projekcie pt. Innowacyjna dydaktyka bez ograniczeń - zintegrowany rozwój Politechniki Łódzkiej - zarządzanie Uczelnią, nowoczesna oferta edukacyjna i wzmacniania zdolności do zatrudniania osób niepełnosprawnych Prezentacja dystrybuowana jest bezpłatnie Projektowanie warstwy klienckiej aplikacji internetowych Kaskadowe arkusze styli Prezentacja jest współfinansowana przez Unię Europejską w ramach Europejskiego Funduszu Społecznego w projekcie pt. Innowacyjna dydaktyka bez ograniczeń - zintegrowany rozwój Politechniki Łódzkiej - zarządzanie Uczelnią, nowoczesna oferta edukacyjna i wzmacniania zdolności do zatrudniania osób niepełnosprawnych Prezentacja dystrybuowana jest bezpłatnie Politechnika Łódzka, ul. Żeromskiego 116, 90-924 Łódź, tel. (042) 631 28 83 www.kapitalludzki.p.lodz.pl

2 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS CSS syntax Basic CSS syntax: selector { property:value } E.g.: P {font-family: Arial} H1 {font-size: 20pt} hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")}

3 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS CSS syntax (2) To separate properties and their values from other properties, you use semicolon: Red font 20pt, bolded, on the green background To define the same style for many elements, separate them using comma: H1, H2, H3 {font-family:Helvetica; color:yellow}

4 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Inserting styles Inline style Some text Internal style <!-- body {margin-left: 2cm; margin-right: 2cm} P {font-size: 14pt; font-family: Arial, Helvetica; font-weight: normal} -->

5 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Inserting styles(2) External style sheet: It is possible (and quite usual) to use multiple style sheets on the same page.

6 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Document tree html head body titlepformimg input selecttextarea Document tree Child Descendant Parent Ascendant

7 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Descendant selector ul ul li {color:green} Second list will be green. H1 H2 B {color: blue}

8 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Child and sibling selectors Child selector P>U {color: green} Nested will be green Sibling selector H1 + P{margin-left: +30 mm) If and has common parent ….

9 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Attributes selectors General syntax: element [atrribute relation value] {style definition } e.g.: P [align=right] {color: blue} Simple attribute selector: H3 [title] {color: #000000 } [title] {color: #000000 }

10 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Attributes selectors(2) Attribute selector with defined value General syntax: element [attribute="value"] { style definition } OR: [attribute="value"] { style definition } OR: [attribute~="value"] {style definition } To match the criteria, the value can be only a substring of the real value.

11 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Classes.class1 {font-family:Arial} Example usage: Some text in Arial Different styles for the same tag: P {font-family: Arial; font-size: 12pt} P.notice {font-family: Arial; font-size: 12pt; font-weight: bold} P.exclamation {font-family: Verdana; font-size: 12pt; color: red} P.adds {font-family: Arial; font-size: 8pt}

12 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Question What is the difference between following:.menu li { properties } li.menu { properties } li,.menu { properties } li.menu { properties }

13 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS ID selector #[label ID] {style definition} e.g.: H1#title {color: red} Example usage: Some text

14 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Hyperlinks special selectors (pseudo classes) Hyperlink typeExample definition DefaultA:link {color:blue; background: red} VisitedA:visited {color:yellow} Hovered onto linkA:hover {background:yellow; color:red} ActiveA:active {background:blue; color:red}

15 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Paragraphs special selectors (pseudo elements) Selector first-line Ephasising first line of the paragraph: P:first-line {text-transform: uppercase} Selector first-letter Ephasising first letter of the paragraph: P:first-letter { font-size: 300%; color:blue }

16 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Inheritance CSS inheritance is based on the Parent-Child model: each Child element inherits all of his Parent element's styles. Attention: the child element will inherit all the parent element's properties only if these properties are inheritable. Inheritance does not work on all CSS properties (margin, padding and other block properties). Some text in Arial Some text in Courier Some text in Arial

17 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Cascading If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector: h3 { color: red; text-align: left;font-size: 8pt } And an internal style sheet has these properties for the h3 selector: h3 { text-align: right; font-size: 20pt} If the page with the internal style sheet also links to the external style sheet the properties for h3 will be: color: red; text-align: right; font-size: 20pt

18 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Fonts Font families, eg.: Some text Font styles, eg.: Some text Available keywords: italic, obligue.

19 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Fonts(2) Font size, eg.: a) Defined as keywords: Some text Available keywords: xx-small, x-small, small, medium, large, x-large, xx-large. Relative values: larger, smaller b) In metric units: Available units: cm, in, mm, pt c) In percents (relative):

20 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Fonts(3) Font weight, eg.: Some text Defines boldness. Available keywords: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

21 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Fonts(4) Putting many attributes into one definition Eg. Small caps, bold, 14pt font size, 18 pt space between lines, Times. Attributes ordering: font-style->font-variant->font-weight->font-size->line-height- >font-family

22 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Text Letter spacing, eg.: Some text. Text decoration, eg.: Hyperlink not underlined. Available keywords: underline,overline,line-through.

23 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Text(2) Text transformation, np: There are four possible transformations: none, capitalize (first letter of each word will be big), uppercase (all letters will be big), lowercase (all letters will be small). Eg.: This is some text. In the browser we could see: This Is Some Text. What for???

24 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Text(3) Text align, np: Right aligned line. Available keywords: left, right, center, justify

25 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Text(4) Text indent, eg.: In this paragraph first line will be indented by 10% according to the page width. In this paragraph first line will be indented by 10% according to the page width. In the browser we could see : In this paragraph first line will be indented by 10% according to the page width.

26 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Colors and backgrounds Text color, eg.: Green title Red text Background color, eg.: Paragraph on blue background

27 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Image as a background Backround can be defined as an image: Title on image background Background repeat (when background is smaller than object): Title on image background Available keywords: repeat-x (horizontally repeated), repeat-y (vertically repeated), repeat (horizontally and vertically repeated), no- repeat (not repeated). Is it any reason to repeat background?

28 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Image as a background(2) Background attachment Background can be attached in two ways: It can be motionless according to the page (default) It can be motionless according to the screen (fixed) Eg.: body {background: url(image.gif); background-attachment: fixed}

29 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Image as a background (3) Background position Useful, when image is smaller that real background: background-position: keyword Available keywords: top, bottom, center, left, right Or their proper (logical) combination: background-position: top right. It is possible also to use measerments units or percentages (counted from the left top corner of the area): background-position: 2cm 3cm background-position: 30% 50%

30 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Scrollbars (IE 5.5 and higher, Opera 7 and higher) Attribute nameDescription Scrollbar-Base-Color? Scrollbar-Face-Color? Scrollbar-Arrow-Color? Scrollbar-Highlight-Color? Scrollbar-Shadow-Color? Scrollbar-Dark-Shadow- Color ? Scrollbar-3dLight-Color? e.g. http://www.iconico.com/CSSScrollbar/

31 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Margins It is possible to define following margins: margin-top, margin-bottom, margin- left, margin-right e.g.: Some text 2 cm margin from each side 2 cm margin from top and down and 3 cm margin from left and right Different margins from different sides It is possible to define inside margins (called padding) – by analogy to margin: padding-top, padding-bottom, padding-left, padding-right

32 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Borders border-x-width (x : top, bottom, left, right) border-color: #ffffff border-style: none, dotted, dashed, solid, double, groove, ridge, inset, outset.

33 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Lists List style list-style-type: Available keywords: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none eg.: First type Second type Image instead of bullet, eg.:

34 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Width and height a) width: Some text b) height: "> Some text.

35 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Absolute positioning Eg: Image placed in left top corner of the page:

36 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Relative positioning Relative positioning moves an element RELATIVE to its original position: Some text

37 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Cursors Eg: <img src= "image.gif" border="0" style="cursor:help" alt= " Description"> Available keywords: crosshair pointer wait text default auto x-resize – (x: n,w,e,s or logical combination, eg: ne)

38 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego CSS Printing web pages Two possibilities of breaking pages: page-break-before: always page-break-after: always Eg.: Chapter 7

39 Projekt współfinansowany przez Unię Europejską w ramach Europejskiego Funduszu Społecznego Projektowanie warstwy klienckiej aplikacji internetowych Kaskadowe arkusze styli Prezentacja jest współfinansowana przez Unię Europejską w ramach Europejskiego Funduszu Społecznego w projekcie pt. Innowacyjna dydaktyka bez ograniczeń - zintegrowany rozwój Politechniki Łódzkiej - zarządzanie Uczelnią, nowoczesna oferta edukacyjna i wzmacniania zdolności do zatrudniania osób niepełnosprawnych Prezentacja dystrybuowana jest bezpłatnie Projektowanie warstwy klienckiej aplikacji internetowych Kaskadowe arkusze styli Prezentacja jest współfinansowana przez Unię Europejską w ramach Europejskiego Funduszu Społecznego w projekcie pt. Innowacyjna dydaktyka bez ograniczeń - zintegrowany rozwój Politechniki Łódzkiej - zarządzanie Uczelnią, nowoczesna oferta edukacyjna i wzmacniania zdolności do zatrudniania osób niepełnosprawnych Prezentacja dystrybuowana jest bezpłatnie Politechnika Łódzka, ul. Żeromskiego 116, 90-924 Łódź, tel. (042) 631 28 83 www.kapitalludzki.p.lodz.pl