css4 - CSS4 BingLi 1 CSSFonts GenericFamily: FontFamily:aspecificfontfamily 2 Genericfamily FontFamily Description Serif TimesNewRoman Geogia Sansserif

css4 - CSS4 BingLi 1 CSSFonts GenericFamily:...

This preview shows page 1 out of 17 pages.

Unformatted text preview: CSS 4 Bing Li 1 CSS Fonts Two types of font family names: Generic Family : a group of font families Font Family : a specific font family 2 Generic family Font Family Description Serif Times New Roman Serif fonts have small lines at the end on some characters Geogia Sans­serif Arial These fonts do not have the lines at the ends of characters Verdana Monospace Courier New All monospace characters have the same width Lucida console 3 font‐family hold several font names as a "fallback" start from the font you want, end with a generic font more than words font names should be in quotation marks font names are separated by comma p { font‐family: "Times New Roman", Times, serif; } 4 font‐style normal italic oblique : similar to italic initial inherit 5 font‐size medium , xx‐small , x‐small , small , large , x‐large , xx‐largs smaller , larger : compared with parent elements length % : compared with parent elements initial inherit 6 font‐weight normal , bold , bolder , lighter 100 , 200 , 300 , 400 (normal), 500 , 600 , 700 (bold), 800 , 900 initial inherit 7 font‐variant normal small‐caps : all lowercase ­> uppercase but small initial inherit 8 Links a a:link : unvisited link a:visited : visted link a:hover : when mouse over it a:active : the moment it is clicked 9 e.g. color background‐color text‐decoration a:link, a:visited { background‐color: #f44336; color: white; padding: 14px 25px; text‐align: center; text‐decoration: none; display: inline‐block; } a:hover, a:active { background‐color: red; } 10 Lists list‐style‐type disc circle square more examples 11 list‐style‐image none url list‐style‐image: url('eeyore.jpg') initial inherit 12 list‐style‐position inside outside initial inherit 13 14 list‐style short hand ul { list‐style: square inside url('eeyore.jpg'); } 15 list color ol { background: #ff9999; padding: 20px; } ul { background: #3399ff; padding: 20px; } ol li { background: #ffe5e5; padding: 5px; margin‐left: 35px; } ul li { background: #cce5ff; margin: 5px; } 16 17 ...
View Full Document

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture