Cascading Style Sheets Continued
29
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
description
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. - PowerPoint PPT Presentation
Transcript of 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
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}
Elements in a Document Are Arranged Hierarchically
• On a Web page, elements are nested within other elements, forming a hierarchical tree structure:
Contextual Selectors
Example Using Contextual Selectors: Styles in a List
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.
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 document selector:pseudo-class {styles}
Creating Rollover Effects with Pseudo-Class Selectors
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: <img src = “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 scrollbackground: color image repeat attachment position
Fixed versus Fluid Layouts
15
Floating and Clearing Elements• The syntax for the float style is: float: position where position is none, left, or right.• To display an element clear of a floating element, use the style
clear: position where position is none, left, right or both.
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
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
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
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”
Result of Applying Border Styles
22
The Display Style in the Box Model
• The style display allows 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.
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.
Positioning Objects with CSS• Absolute positioning enables you to place an element at
specific coordinates either on a page or within a containing element position: absolute; left: 100px; top: 50px
• Relative positioning is used to move an element relative to its default position on the page position: 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
Example of Positioning: Create 3 Notes Using <Div>
Position the 3 Notes on a Page
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
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)
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: 3
z-index: 1
z-index: 2
