1 / 27

Images

Images. Controlling size of images in CSS Aligning images in CSS Adding background images. Images. Controlling the size and alignment of your images using CSS keeps rules that affect the presentation of your page in the CSS and out of the HTML markup. Image size in css.

jadzia
Download Presentation

Images

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Images Controlling size of images in CSS Aligning images in CSS Adding background images

  2. Images • Controlling the size and alignment of your images using CSS keeps rules that affect the presentation of your page in the CSS and out of the HTML markup.

  3. Image size in css • control the size of an image using the width and height properties in CSS • chapter-16/image-sizes.html • Whenever you use consistently sized images across a site, you can use CSS to control the dimensions of the images, instead of putting the dimensions in the HTML.

  4. Image alignment with CSS • using the float property to align images. • The float property is added to the class that was created to represent the size of the image • New classes are created with names such as align-left or align-right to align the images to the left or right of the page. • These class names are used in addition to classes that indicate the size of the image • chapter-16/aligning-images.html

  5. Image centering with CSS • On the containing element, you can use the text-align property with a value of center. • On the image itself, you can use the use the margin property and set the values of the left and right margins to auto. • chapter-16/centering-images.html

  6. Background images • background-image • chapter-16/background-image-body.html • chapter-16/background-image-element.html

  7. Repeating Images • background-repeat • chapter-16/background-repeat.html • background-attachment • chapter-16/background-attachment.html

  8. Background position • background-position • chapter-16/background-position.html • chapter-16/background-position-percentage.html

  9. shorthand • Background • chapter-16/background-shorthand.html

  10. Image rollovers and sprites • chapter-16/image-rollovers-and-sprites.html

  11. Css3 gradients • background-image • chapter-16/gradient.html

  12. Contrast ofbackground images • High Contrast • LowContrast • Screen

  13. Summary images • You can specify the dimensions of images using CSS. • Images can be aligned both horizontally and vertically using CSS. • You can use a background image behind the box created by any element on a page • Background images can appear just once or be repeated across the background of the box • You can create image rollover effects by moving the background position of an image • To reduce the number of images your browser has to load, you can create image sprites

  14. HTML5 Layout • HTML5 layout elements • How old browsers understand new elements • Styling HTML5 layout elements with CSS

  15. Traditional HTML Layouts • used <div> elements to group together related elements on the page

  16. New Html 5 Layout Elements

  17. Headers and footers • <header> • <footer> • chapter-17/example.html

  18. Navigation • <nav> • chapter-17/example.html

  19. Articles • <article> • The <article> element acts as a container for any section of a page that could stand alone and potentially be syndicated • chapter-17/example.html

  20. Aside • <aside> • The <aside> element has two purposes, depending on whether it is inside an <article> element or not. • chapter-17/example.html

  21. Sections • <section> • The <section> element groups related content together, and typically each section would have its own heading. • chapter-17/example.html

  22. Heading Groups • <hgroup> • The purpose of the <hgroup> element is to group together a set of one or more <h1> through <h6> elements so that they are treated as one single heading. • chapter-17/example.html

  23. Figures • <figure> <figcaption> • can be used to contain any content that is referenced from the main flow of an article (not just images). • chapter-17/example.html

  24. Sectioning Elements • <div> • Where there is no suitable element to group a set of elements, the <div> element will still be used. • chapter-17/example.html

  25. Linking AroundBlock-LevelElements • HTML5 allows you to place an <a> element around a block level element that contains child elements. This allows you to turn an entire block intoa link. • chapter-17/example.html

  26. HelpingOlderBrowsersUnderstand HTML5 • Older browsers that do not know the new HTML5 elements will automatically treat them as inline elements. Therefore, to help older browsers, you should include the line of CSS on the left which states which new elements should be rendered as block-level elements. • chapter-17/example.html

  27. SummaryHTML5 LAYOU T • The new HTML5 elements Indicate the purpose of different parts of a web page and help to describe its structure. • The new elements provide clearer code (compared with using multiple <div> elements). • Older browsers that do not understand HTML5 elements need to be told which elements are block-level elements. • To make HTML5 elements work in Internet Explorer 8 (and older versions of IE), extra JavaScript is needed, which is available free from Google.

More Related