Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie CSS Text Backgrounds Styling
Ähnlich wie CSS Text Backgrounds Styling (20)
Mehr von apnwebdev
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
CSS Text Backgrounds Styling
- 1. CSS for Text and Backgrounds Colin Gourlay & Kevin Vanderbeken
- 2. Today: Web Typography Styling Text Styling Backgrounds Styling Links
- 6. Poor control over kerning
- 9. serif / sans-serif / etc.
- 10. how many pixels in a centimeter?
- 11. styling text
- 12. Know the text related elements? The good: <br /> <h1></h1> .. <h6></h6> <p></p> <a></a> <sub></sub> <sup></sup> <tt>Teletype text</tt> <u></u> <li></li> <ol></ol> <blockquote></blockquote> <code></code> <kbd></kbd> <samp></samp> ...And more more more!... The ugly: <i>Italic text</i> <b>Bold text</b> <big>Big text</big> <small>Small text</small> The bad: <applet></applet> <basefont /> <center></center> <dir></dir> <font></font> <embed /> <noembed></noembed> <layer></layer> <menu></menu> <s></s> <strike></strike> <xmp></xmp> <u></u> <shadow></shadow>
- 13. We write our CSS styling rules: By attaching a base rule we can override elsewhere to the body, we reduce work, and utilise inheritance. body { color: #000000; font-family: Helvetica, Arial, sans-serif; font-size: 12px; } p { color: #333; } h1, h2, h3 { color: #1B87A4; }; Now for more detail on styling...
- 14. font, colour & size
- 15. Font, “color” & size: For text related elements there are properties we can use to control the basics – font, colour and size... p { font-family: “Helvetica Neue”, Arial, sans-serif; color: #000000; /*Lets get a little silly...*/ font-size: 1.875em; /*Desired size in px (30px) / Default inherit size(16px)=1.875em */ font-size: 1en; /*Half of an em!*/ font-size: 150%; /*easy to understand relative unit*/ font-size: 12pt; /*yaddayadda*/ font-size: 0.8cm; /*Works! But doesn’t get used for screen - unpredictable!*/ font-size: 18px; /*Quite defined but less scaling*/ /*etc etc*/ }
- 20. Georgia, serif
- 23. "Lucida Sans Unicode", "Lucida Grande", sans-serif
- 24. "Palatino Linotype", "Book Antiqua", Palatino, serif
- 29. Symbol,
- 30. Webdings,
- 34. Emphasis and transformation: ... p { font-weight: bold;/*normal,900,300,etc*/ text-decoration: underline; /*overline,line-through,blink*/ font-style: italic; /*normal,oblique*/ text-transform: capitalize; /*uppercase,lowercase*/ }
- 36. Alignment and justification: ... div { text-align: left;/*center,right,justified*/ }
- 38. <ahref="brochure.pdf"class="pdf"> Download Brochure </a> Download Brochure
- 39. image & colour
- 40. css/style.css a.pdf { background-color: #FFF; background-image: url(../images/pdf-icon.jpg); } index.html css/ - style.css images/ - pdf-icon.jpg url() / none
- 41. image tiling
- 42. a.pdf { background-color: #FFF; background-image: url(../images/pdf-icon.jpg); } Download Brochure
- 43. a.pdf { background-color: #FFF; background-image: url(../images/pdf-icon.jpg); background-repeat: no-repeat; } repeat / repeat-x / repeat-y / no-repeat
- 44. position
- 45. a.pdf { background-color: #FFF; background-image: url(../images/pdf-icon.jpg); background-repeat: no-repeat; } Download Brochure
- 46. a.pdf { background-color: #FFF; background-image: url(../images/pdf-icon.jpg); background-repeat: no-repeat; background-position: right center; }
- 48. a.pdf { background-color: #FFF; background-image: url(../images/pdf-icon.jpg); background-repeat: no-repeat; background-position: right center; padding-right: 20px; }
- 50. styling links
- 51. what should a link look like?
- 52. Download Brochure The class of .pdf seen before, relied on the following kind of rule: a { color: #0070C0; font-size: 19px; font-family: Arial; }
- 53. But what about interaction?Visited links, hovering links....
- 54. the :hover pseudo-selector a {} /*Base element*/ a:link { } /*fresh new happy link on the page*/ a:visited { } /*links we clicked already in our history*/ a:hover { } /*We’ve got our mouse over it!*/ a:active { } /*Clicked this & waiting on next page to appear*/
- 55. a { color: #0070C0; font-size: 19px; font-family: Arial; text-decoration: underline; } a:link { color: #0070C0; } a:visited { color: #659D32; } a:hover { color: #FF0000; text-decoration: none; } a:active { color: #333333; }
- 56. next week...
- 57. CSS workshop
Hinweis der Redaktion
- On the Web, designers have much less control over presentation than they do in other media. This is most obvious when it comes to document canvas properties such as size, resolution, and contrast. There are also severe limitations on the quality of Web typography.
- Limitations of web typography include:A reduced selection of fontsNo hyphenation, making full justification look ugly when a column of text gets narrowPoor control over kerning (ie, the spacing between the letters)A lack of control over how the work is viewed—designers must account for a wide variety of screen sizes, resolutions and environmentsOther subjects that deserve an introduction are contrast, legibility, and readability, so we'll go through these now...
- As you already learned earlier on in the course, one of the most important changes that comes with CSS was the ability to separate presentation, or the way things look, from semantics, or what things mean. The CSS background image is among the most important tools you have at your disposal, because it lets you apply decorative images to particular parts of your HTML without adding any extra weight to your HTML. Previously, authors (that’s you!) were forced to fill their code with img tags.CSS and in particular the background property keep your HTML free from presentational clutter. Redesigns and other transitions, in the life of sites built with modern methods, can then be completed much more smoothly. You’ll be able to update your entire site by changing only the style sheet, rather than recoding every HTML page. Depending on the size of your site, this can be a substantial saving.In this section we’ll show the basics of how CSS background images work, including applying a background image via CSS, adjusting its placement as well as tiling it vertically or horizontally.
- Set the background-image by showing the browser where to find the image, using the URL. For example; url(alert.png). Note that the path is prefaced with they keyword url and wrapped in parenthesis. This syntax is important to the browser understanding that you mean to indicate a location.Valid values include a URL, none, or inherit.There are several ways to indicate background-color, including RGB values and keywords. Most people use hexadecimal notation, a pound/hash symbol (#) followed by six characters. The first pair indicates the red levels, and the second and third indicate the green and blue levels respectively—#RRGGBB.Many colour picker tools will help you find the hexadecimal notation of a given colour. Pure red, for example would be #FF0000.
- Images can be tiled vertically, horizontally, or both, to fill the entire width or height of an HTML element. Use background-repeat to instruct the browser to repeat a background image.Valid values include repeat, repeat-x, repeat-y, and no-repeat.
- Images can be displayed anywhere within the borders of the HTML element on which they are applied. Use background-position to precisely place your images for visual effect and layering.There are many useful ways to indicate background position, keywords and numeric values. Keywords (such as top and bottom) are very useful and easy to read. Pixel values are very precise, but don’t adapt to changing heights and widths.
- When percentages and pixels are used, the starting point is always the top left corner of the HTML element, although the way image positioning works with pixels and percentages is rather different. Pixels always move the image a set number of pixels towards the bottom and right of the containing box (or towards the top and left if they are negative values), regardless of the size of the image and the containing box. Percentages on the other hand move the image a percentage of the difference between the containing box size, and the image size. If the image and the containing box are the same size, percentages won’t move the image at all.
- Valid values include length (generally in pixels), percentage (of the width of the element), and the keywords top, right, bottom, left, and center. Note that center can be used to indicate both vertical and horizontal center. Note also that you can mix percentages and pixels in rules, but not keywords and pixels or keywords and percentages.