1. 03 CSS (Cascading StyleSheet) Р.Жавхлан МОНГОЛ УЛСЫН ИХ СУРГУУЛЬ Мэдээллийн технологийн сургууль Интернэт технологийн үндэс 2015 Намар

2. Агуулга CSS гэж юу болох Загвар ба вэб агуулгыг салгах CSS хэрэглэх дүрэм  Сонгуур, шинж, утга CSS загварыг HTML баримтад холбох CSS загвар  Бичвэрийн шинж  Дэвсгэр өнгө ба зураг  Холбоос ба хуурмаг элемент Вэб байршлын загвар 2

3. CSS гэж юу вэ? A style sheet гэдэг нь browser-т элемент буюу tag-ыг яаж дүрслэхийг заах заавар юм. CSS – Cascading Style Sheet fonts, spacing, colors зэрэг аттрибутуудыг үндсэн TAG/section headers, body text, links/-уудаас салгаж кодчилох давуу талтай юм. 3

4. CSS ба асуулт Яах гэж? Юу вэ? Юунд хэрэгтэй вэ? Баримтын агуулга харагдах загварыг тодорхойлох Агуулгыг хаана дэлгэцлэхийг заах Агуулга болон загварыг тусад нь салгахад Загвар тодорхойлогч хэл - Style sheet language Баримтын загварыг тодорхойлсон дүрэмтэй салангид файл Физик дүрслэл, жич: фонтын шинж, хүрээ, хязгаар Вэб баримтуудын дунд нэгдсэн загвар тодорхойлоход Алдаагүй, зөв загвартай вэб бүтээхэд

5. CSS давуу тал Hierarchy  inheritance:  Агуулж байгаа элементэд (parent) дизайн оруулахад тухайн элементийн дотор байх элементэд (children) хамт өөрчлөлт ордог.  CSS –ын дүрэм нь мод бүтцээр ажилладаг 5

6. Hierarchy  inheritance 6

7. 7

8. Syntax Rules хоёр хэсэгтэй: selector ба declaration Selector нь browser-т аль элементийг өөрчлөх шаардлагатай тодорхойлдог. Хэд хэдэн ялгаатай selecter-үүд байдаг. Declaration нь тухайн selector-ын шинж чанар /properties/ нь ямар байхыг тодорхойлдог. 8

9. HTML агуулга 9

10. Жишээ H1 {color: blue;} H2 {color: red;} P {font-size: 1.4em;} 10

11. HTML агуулга 11

12. Дасгал Цогцолборын бичвэрийг ногоон өнгөтэй, үсгийн 11 цэгийн хэмжээтэй болгох 12

13. Дасгал - шийдэл One solution: P {font-size: 11px;} P {color: green;} Also (better): P { font-size: 1.4px; color: green; } 13

14. Жишээ Some examples: BODY {background-color: white; color: black; font-size: 15px;} H1 {background-color: blue; font-size: 30px;} P {background-color: yellow;} STRONG {background-color: red;} EM {background-color: red; color: yellow;} If the value has two or more words: P {font-family: "Times New Roman", serif} 14

15. Тайлбар ашиглах Comments (1 or more lines): /* … */ Example: /* Paragraph */ P { text-align: center; /* Center */ color: black; /* Black */ font-family: Arial; /* Font face */ } 15

16. CSS хувилбарууд Different versions:  CSS1: CSS level 1. 1996. http://www.w3.org/TR/REC-CSS1  CSS2: CSS level 2. 1998. http://www.w3.org/TR/REC-CSS2  CSS2 revision 1. 2003.  CSS3: CSS level 3. More information: o W3C: http://www.w3.org/ o W3 Schools: http://www.w3schools.com/ 16

17. Selectors Element Selectors – (refer to HTML tags) H1 {color: purple;} H1, H2, P {color: purple;}  Contextual – (refer to HTML, but in context) LI STRONG {color: purple;}

18. Selectors [2] Class Selectors Element style class H1.warning {color: red;} Global style class.warning {color:blue;} In HTML code: Аюултай! Болгоомжил… To use, supply the name of the style class in the CLASS attribute of the HTML element

19. Selectors [3] ID Selectors An ID is like a class but can be applied only once in a documents #foo { color: red; } red text 19

20. Pseudo-Elements pseudo-elements are used to address sub-parts of elements  can specify appearance of link in various states :visited :active :hover  can specify format of first line in page or paragraph :first-line  can specify format of first letter in page or paragraph :first-letter Danger : changing the look of familiar elements is confusing Careful : current browsers do not support all CSS2 features 20 Title for Page a {color : red; text-decoration : none; font-size : larger} a:visited {color : black} a:active {color : orange} a:hover {color : blue} p:first-letter {font-size : large; color : white; background-color : darkblue} Welcome to my Web page. I am so happy you are here. Be sure to visit CNN for late-breaking news. view page

21. Summary Element: select every instance of the specified type of HTML element Class: class name preceded by "."  Element class  Global class ID: identifier name precede by "#" Pseudo-classes: name of the pseudo- class 21

22. CSS загварын биелэх дүрэм 1. Rules marked "important" have the highest priority (rarely used) H1 { color: black !important; font-family: sans-serif; } H1 { color: red; } 2. Document author rules have precedence over reader rules o Stylesheet rules override browser preferences 22 Highest priority

23. CSS загварын биелэх дүрэм [2] 3. More specific rules have precedence over less specific rules #foo { … } /* ID selector highest priority */ P.big H1 { … } // Class higher over element P STRONG { … } // Two tags higher than single tag STRONG { … } 4. In case of tie, the last rule has high priority 23

24. HTML баримтад CSS холбох Three ways of making a style sheet affect the appearance of an HTML document:  External (linking):  Internal (embedded): p {text-indent: 10pt}  Inline: indented paragraph 24

25. HTML баримтад CSS холбох [2] External  Many pages can be linked to a single style sheet  Making changes to this style sheet can then change the appearance of all the web pages linked to it Internal (Document)  When the style sheet is used for only one web page Inline  When the style is used for only one HTML element 25

26. Linking CSS file uses LINK element The most popular method is the external style sheet: <link rel="stylesheet" href="style.css" type="text/css" /> href:  Tells the browser where to locate the style sheet, with either a relative or absolute URL rel:  Tells the browser what to expect o Stylesheet o alternate stylesheet 26

27. LINK element usage If you define different alternative style sheets, you have to assign a title to each style sheet 27

28. LINK element usage [2] <link rel="stylesheet" href="style1.css" media="screen" type="text/css"> <link rel="alternate stylesheet" href="style2.css" media="screen" type="text/css" title="Alternative2"> 28

29. LINK element usage [3] 29 media : Tells the browser the type of device the style sheet is for:  screen: Computer display  print: Printer  projection: Projector  aural: Speechsyntetizer – aural: Speech syntetizer  braille: Braille line  tty: Console (text) display  tv: Television  all: All devices (default value)

30. Text properties font-weight  Relative weight (boldness) of font  normal | lighter | bold | bolder | 100 | 200 | … | 900 H1 { font-weight : 200 } H1 { font-weight : bolder } font-style  Font face type within a family  normal | italic | oblique P { font-style: normal } TH { font-style: italic } 30

31. Text properties [2] font-family specifies a list of one or more fonts using the family name of each  The font names are separated by commas  A browser then uses the first font in the list that is installed on its system  At the end of that list you should always put one of five generic font names: o serif (e.g. Times) o sans-serif (e.g. Helvetica) o cursive (e.g. Zapf-Chancery) o fantasy (e.g. Western) o monospace (e.g. Courier) If you want to use a font with more than a single word name make sure you put it between quote marks, like this: "Times New Roman" 31 H1 { font-family: Arial } H1 { font-family: Times New Roman, serif }

32. Text properties [3] font-size  Either relative or absolute size of font  pt, pc, in, cm, mm | em, ex, px, % | xx-large | x-large | large | medium | small | x-small | xx-small | smaller | larger STRONG { font-size: 150% } P { font-size: 14pt } P { font-size: xx-large } 32

33. Size units % : percentage in : inches cm : centimeters mm : millimeters em : equal to the current size of text ex : equal to letter “x” height pt : point (1 pt = 1/72 inches) pc : pica (1 pc = 12 points) px : pixels 33

34. Size units [2] Keywords:  xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger Absolute:  in, cm, mm, pt, pc, px Relative:  %, em, ex 34

35. Best unit: em If you set the font-size using em units, they will always remain relative to the main text on the page, whatever that might be For example, if you set to 2em, it will be twice as big as the rest of text on the page. BODY { font-size: 11px; } H1 { font-size: 2em; } 35

36. Text properties [4] text-decoration  Describes text additions or "decorations" that are added to the text of an element  none | underline | overline | line-through | blink P { text-decoration: underline } vertical-align  Determines how elements are positioned vertically  top | bottom | baseline | middle | sub | super | text- top text-bottom | % text-align  Determines how paragraphs are positioned horizontally  left | right | center | justify 36

37. Text properties [5] text-indent  Specifies the indentation of the first line of the paragraph  +/- pt, pc, in, cm, mm | +/- em, ex, px, % P { text-indent: -25px } /* Hanging indent */ line-height  Specifies the distance between two consecutive baselines in a paragraph  normal | number | pt, pc, in, cm, mm | em, ex, px, %.double { line-height: 200% }.triple { line-height: 3 } /* 3x the font size */ DIV { line-height: 1.5em } 37

38. Text properties [6] text-transform: controls the letters in an element  none | capitalize | uppercase | lowercase capitalize: each word in a text starts with a capital letter letter-spacing: controls the spacing between characters word-spacing: controls the spacing between words 38

39. Color and Background color  Color of the text or foreground color  colorname | #RRGGBB | #RGB | rgb(rrr,ggg,bbb) | rgb(rr%,gg%,bb%) P { color: blue; } H1 { color: #26A5BF; } H3 { color: rgb(255, 0, 0); } rgb(rr%,gg%,bb%)  rgb(100%,80%,75%) #rgb = #rrggbb  #F5C = #FF55CC background-color  Determines background color of the HTML element  value range - same as color property 39

40. Background Properties background-image  Specifies an image to use as the background of region  none | url(image_url) DIV { background-image: url(dot.gif); } background-repeat  Specifies how to tile the image in the region  repeat | repeat-x | repeat-y | norepeat BODY { background-image: url(dot.gif); background-repeat: repeat-x; } background  Combines properties in a single entry P { background: url(wallpaper.jpg) repeat-x; } 40

41. Background property example Чулуун хана.banner { background: url(wall.jpg) repeat-x; font-size: 40pt; font-family: Verdana, Arial, Helvetica, sans-serif; color:#FFCC66; text-align:center; } ЧУЛУУН ХАНА 41 wall.jpg

42. Background property example [2] 42

43. Properties of bounding box CSS assume that all elements result in one or more rectangular regions (bounding box) Styles can specify the margins, border, and padding of the bounding box P { margin: 0.25in; border: 0.25in solid black; padding: 0.25in ; } 43

44. bounding box example CSS жишээ P { margin: 0.25in; border: 0.25in solid black; padding: 0.25in ; } КМТТ дараах хичээлийг заадаг: Програмчлалын үндэс, Объект хандлагат програмчлал, Вэб програмчлал ба Өгөгдлийн сангийн үндэс. 44

45. Images and Floating Elements width, height  Specify a fixed size for an element (usually an image)  auto | pt, pc, in, cm, mm | em, ex, px IMG.bullet { width: 50px; height: 50px } float  This property lets elements float into the left or right margins where the text  none | left | right 45

46. Drop caps CSS жишээ SPAN { float: left; font-size: 76pt; } К МТТ дараах хичээлийг заадаг: Програмчлалын үндэс, Объект хандлагат програмчлал, Вэб програмчлал ба … 46

47. CSS page layout CSS жишээ body { font-family:tahoma; font-size:0.8em; } #container { width: 800px ; margin-left: auto ; margin-right: auto; } #content { margin-left:200px; height:300px; padding: 4px ; border: 1px solid gray; } #navbar { float: left; width: 198px; height:308px; border: 1px solid gray; } 47 #footer { clear: both ; border: 1px solid gray; } #header { text-align: center ; height:100px; border: 1px solid gray; } Top Header Navigation Content here Bottom Footer

48. CSS page layout [2] 48

49. CSS menu CSS жишээ #nav-menu ul { list-style: none; padding: 0; margin: 0; } #nav-menu li { float: left; margin: 0 0.15em; } #nav-menu li a { background: url(background.gif) #fff bottom left repeat-x; height: 2em; line-height: 2em; 49 float: left; width: 9em; display: block; border: 0.1em solid #dcdce9; color: #0d2474; text-decoration: none; text-align: center; } Services About us Contact us

50. CSS menu [2] 50