1 / 29

Cascading Style Sheets Continued

Cascading Style Sheets Continued. Different kinds of selectors in a style sheet Simple - Pseudo-Class Contextual - Pseudo-Element Class Image Styles in CSS The Box Model in CSS Positioning in CSS Positioning - Clipping Overflow - Stacking.

sidney
Download Presentation

Cascading Style Sheets Continued

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. Cascading Style Sheets Continued • Different kinds of selectors in a style sheet • Simple - Pseudo-Class • Contextual - Pseudo-Element • Class • Image Styles in CSS • The Box Model in CSS • Positioning in CSS • Positioning - Clipping • Overflow - Stacking

  2. Selectors: Ways to Specify Which Elements to Apply a Style • Element selectors are a comma-separated list of elements: h1, h2, h3 {font-family: sans-serif} • ID selectors choose elements with the specified id: <p id=“summary”> To summarize,… </p> #summary {text-align:center} • Attribute selectors select an element based on the element’s attributes. For example, a [href] {color: blue} means only make anchors with the href attribute blue. • Contextual selectors apply a style based on the context in which an element is used. For example, to make only bolded list items blue, use li b {color:blue}

  3. Elements in a Document Are Arranged Hierarchically On a Web page, elements are nested within other elements, forming a hierarchical tree structure:

  4. Contextual Selectors

  5. Example Using Contextual Selectors: Styles in a List

  6. Using Classes as a Selector • Classes let you mark a group of elements with a common identifier. It is specified using the attribute class. • A class can be referenced in a style sheet using the dot notation.

  7. Using Pseudo-Classes in a Selector A pseudo-class is a classification of an element based on its current status, position, or use in the documentselector:pseudo-class {styles}

  8. Creating Rollover Effects with Pseudo-Class Selectors

  9. Using Pseudo-Elements in a Selector Pseudo-elements are abstracted from what we know of an element’s content, use, or position in the document:selector:pseudo-element {styles}

  10. Image Styles: Choosing an Image Format • GIF (Graphics Interchange Format) is the most commonly used image format on the Web. • GIF files are limited to displaying 256 colors – Often used for graphics requiring fewer colors, such as clip art images, line art, logos, and icons. • Images that require more color depth, such as photographs, can appear grainy when saved as GIF files. JPEG format is better for photographs. • GIF files can have a transparent color. • GIF files can be animated but require more space.

  11. Choosing an Image Format (continued) • A new file format called PNG (Portable Network Graphics) has been created • PNG files use a free and open file format and can display more colors than GIFs • PNGs can be used for animated graphics • PNGs do allow transparent colors, but not all browsers support this feature

  12. Specifying the Size of the Image • Width and height are two image attributes (not styles) expressed in pixels. Example: <imgsrc = “car.gif” width = “50” height = “100” /> • Adding the width and height attributes will speed up the display of the image.

  13. Inserting a Background Image • The syntax for inserting a background image is the style background-image: url(url) • URL is the location and filename of the graphic file you want to use for the background of the Web page • For example, to use an image named “bricks.gif” as a background image, you would use the tag: <body style = “background-image: url(bricks.gif)”>

  14. Some Background Image Styles background-repeat: type (repeat repeat-x repeat-y no-repeat) background-position: horizontal vertical (2 values) background-attachment: fixed or scroll background: color image repeat attachment position

  15. Fixed versus Fluid Layouts

  16. Floating and Clearing Elements • The syntax for the float style is: float: position where position is none, left, orright. • To display an element clear of a floating element, use the style clear: positionwhere positionis none, left, right orboth.

  17. The Box Model in CSS • In the box model each element behaves as if it is composed of four sections: • Margin • Border • Padding • Content

  18. Margins Styles in the Box Model • Margins are controlled with the following four styles: • margin-top: length • margin-right: length • margin-bottom: length • margin-left: length • Margin values can also be negative- this creates an overlay effect by forcing the browser to render one element on top of another • You can also combine the four margin styles into a single style: • margin: top right bottom left

  19. Padding Styles in the Box Model • Styles to set padding around an element are similar to styles to set margins: • padding-top: value • padding-right: value • padding-bottom: value • padding-left: value • Alternatively, you can just set padding: • padding: top right bottom left

  20. Border Styles in the Box Model • Styles to set the border around an element use styles like: • border-width: value • border-type: type • border-color: color • Alternatively, you can just set border: width type color • You can also set the style of the individual edges (top, bottom, left, right) of the border. For example: style = “border-top-color: green; border-bottom-color: red; border-left-color: blue; border-right-color: yellow”

  21. Result of Applying Border Styles

  22. The Display Style in the Box Model • The style displayallows an element to be either inline or block. a {display:block; color:white} Note that display has many other permitted values (e.g., none, which prevents the element from being shown). See the text for details.

  23. Positioning Objects with CSS CSS-P (CSS-Positioning) became part of the specification for CSS2, and positioning styles were some of the first CSS2 styles to be adopted by browsers.position:type; top:value; right:value; bottom:value; left:value; The types of positioning include absolute, relative, fixed and inherited.

  24. Positioning Objects with CSS Absolute positioning enables you to place an element at specific coordinates either on a page or within a containing elementposition: absolute; left: 100px; top: 50px Relative positioning is used to move an element relative to its default position on the pageposition: relative; left: 100px; top: 50px Fixed positioning fixes an element at a specific spot in the document window while the rest of the page scrolls by. Set the value of the position style to fixed Assign the inherit position style to an element so that it inherits the position value of its parent element

  25. Example of Positioning: Create 3 Notes Using <Div>

  26. Position the 3 Notes on a Page

  27. Handling Overflow If you want to force an element into a specified height and width, you have to define how the browser should handle a situation where content overflows the space allotted to the object. Use the overflow style:overflow: type

  28. Clipping Content The clip style allows you to define a rectangular region through which the element’s content can be viewed:clip: rect(top, right, bottom, left)

  29. Stacking Elements: The Z-index Style • Positioning introduces the possibility that elements may partially or fully overlap one another. Specify stacking order with the style: • z-index: value z-index: 1 z-index: 3 z-index: 2

More Related