Lab#6 font css html
•Download as PPTX, PDF•
2 likes•1,628 views
Font css html by web design technology
More Related Content
Similar to Lab#6 font css html
Similar to Lab#6 font css html (20)
More from Yaowaluck Promdee
More from Yaowaluck Promdee (20)
Recently uploaded
Recently uploaded (20)
Lab#6 font css html
- 1. Font 322432 Web Design Technology By Yaowaluck Promdee, Sumonta Kasemvilas CSS & HTML 322432-1/2014
- 2. Index • Unit Style Sheet • CSS - Fonts • Example • Assignment 322432-1/2014
- 3. Unit Style Sheet Relative Length • em – font size of element • ex- height of element’s font • percent- consists of a number immediately followed by percent sign ‘%’ 322432-1/2014
- 4. Unit Style Sheet (Cont.) Absolute Length • in (inches; 1in=2.54cm =72pt =6pc) Ex. 2in, 1.5in • cm (centimeters; 1cm=10mm) Ex. 2cm, 1.11cm • mm (millimeters) Ex. 50mm, 0.8mm • pt (points; 1pt=1/72in, 10pt = 12px) Ex.12pt, 20pt • pc (picas; 1pc=12pt) Ex. 1pc, 2pc • pixel (px) : pixel 1px is equal to 1/96th of 1in 322432-1/2014
- 5. 322432-1/2014 Example h1 { line-height: 1.2em } h1 { font-size: 1.2em } h1 { margin: 0.5in } /* inches */ h2 { line-height: 3cm } /* centimeters */ h3 { word-spacing: 4mm } /* millimeters */ h4 { font-size: 12pt } /* points */ h4 { font-size: 1pc } /* picas */ p { font-size: 12px } /* px */
- 7. CSS-Font Property Description Values font-family Specifies the font family 322432-1/2014 for text Ex. Arial, Helvetica, sans-serif font-size Specifies the font size of text xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, 18px, 70%, 150%
- 8. CSS-Font Property Description Values font-style The font-style property is mostly used to specify italic text. 322432-1/2014 normal italic oblique font-variant In a small-caps font, all lowercase letters are converted to uppercase letters. normal Small-Caps font-weight The font-weight property sets how thick or thin characters in text should be displayed. normal bold bolder lighter 100 200
- 9. Example1 322432-1/2014 p { font-family:Arial; font-size:16pt; color:green } p.ex { font:15px sans-serif red; /*not specified */ }
- 10. Example2 322432-1/2014 How you code? <p style="font-weight:bold">Love me Love my dog</p> <p style="font: normal small-caps bold 16px sans-serif, Arial; color:#FF0033">Love me Love my dog</p>
- 11. Difference Between Serif and Sans-serif Fonts 322432-1/2014
- 12. Text Property Description Values color The color property is used to set the color of the text 322432-1/2014 - a HEX value - like "#ff0000" - an RGB value - like "rgb(255,0,0)" - a color name - like "red" direction The direction property specifies the text direction/writing direction direction: ltr|rtl|initial|inherit; line-height The line-height property specifies the line height. line-height: normal|number|length|initial| inherit; letter-spacing The letter-spacing property increases or decreases the space between characters in a text. letter-spacing: normal|length|initial|inherit; text-align The text-align property specifies the horizontal alignment of text in an element. text-align: left|right|center|justify|initial|i nherit; http://www.w3schools.com/
- 13. Text Property Description Values text-decoration The text-decoration property specifies the decoration added to text. 322432-1/2014 text-decoration: none|underline| overline| line-through|initial|inherit; text-indent The text-indent property specifies the indentation of the first line in a text-block. text-indent: length |initial |inherit; text-transform The text-transform property controls the capitalization of text None | capitalize | uppercase | lowercase | initial | inherit white-space The white-space property specifies how white-space inside an element is handled. Normal | nowrap | pre | pre-line | pre-wrap | initial | inherit word-spacing The word-spacing property increases or decreases the white space between words. word-spacing: normal | length | initial | inherit http://www.w3schools.com/
- 14. Example <html> <head> <style type="text/css"> .p1 { color:#FF0033; line-height:18pt; letter-spacing:0.05cm; text-decoration:overline; text-indent:0.5in; text-transform:capitalize; white-space:normal; word-spacing:0.5em; } </style> </head> <body> <p class="p1">good moring teacher, how are you today?</p> </body> </html>
- 16. Example
- 17. Assignment#6 Fonts Create a Web page to present “CSS-Font design” from information provided using CSS font and text “CSS-Font design” รูปแบบการส่งงาน Grade will be based on your CSS technique and look and feel of the Web page. **กรณีมีรูปภาพหรือกราฟิกอื่นให้ใส่มาใน folder งานด้วย โดยไม่ต้อง zip ไม่งัน้รูปภาพหรือกราฟฟิกจะ ไม่แสดง**
Editor's Notes
- h1 { line-height: 1.2em } means that the line height of h1 elements will be 20% greater than the font size of h1 element. On the other hand: h1 { font-size: 1.2em } means that the font size of h1 elements will be 20% greater than the computed font size inherited by h1 elements.
- This property has three values: normal - The text is shown normally italic - The text is shown in italics oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
- Normal - A normal line height. This is default Number - A number that will be multiplied with the current font size to set the line height Length - A fixed line height in px, pt, cm, etc. % - A line height in percent of the current font size Initial - Sets this property to its default value. Inherit - Inherits this property from its parent element.
- จากเนื้อหาที่ให้มา ให้นักศึกษา นำเนื้อหาไปจัดวางออกแบบโดยใช้ CSS Font text ในการจัดรูปแบบการนำเสนอ เนื้อหาที่ยกมาให้