�ݺ�ߣ

1
Hands on
ADVANCED
CASCADING
STYLE SHEETS
(CSS)

2
ID & CLASS SELECTORS
• ID Selector:
 The id selector is used to specify a style for a single, unique element.
 The id selector uses the id attribute of the HTML element, and is defined
with a "#".
 The style rule below will be applied to the element with id="para1":
• Class Selector:
 The class selector is used to specify a style for a group of elements. Unlike
the id selector, the class selector is most often used on several elements.
 This allows you to set a particular style for many HTML elements with the
same class.
 The class selector uses the HTML class attribute, and is defined with a dot
"."
.center {text-align:center;}
It will be used as..
p.center {text-
align:center;}

3
• Example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

4
GROUPING SELECTORS
 In style sheets there are often elements with the same style. To avod
the code repeating, we can group them.
 Here is an example to change the size of an image using CSS.
CSS DIMENSIONS
img.normal
{ height:auto; }
img.big { height:40%; }
img.small { height:10%; }
<body>
<img class="normal" src=/slideshow/lecture-5-6-advance-css-pptx-for-web/275557020/"logocss.gif" width="95" height="84"
/><br />
<img class="big" src=/slideshow/lecture-5-6-advance-css-pptx-for-web/275557020/"logocss.gif" width="95" height="84"
/><br />
<img class="small" src=/slideshow/lecture-5-6-advance-css-pptx-for-web/275557020/"logocss.gif" width="95" height="84" />
</body>
CSS
code
using
classes

5
CSS DISPLAY AND VISIBILITY
 The display property specifies if/how an element is displayed. (none,
block)
Hiding an element can be done by setting the display property to "none"
 The visibility property specifies if an element should be visible or
hidden.
Hiding of an element can also be done by setting visibility property to
"hidden"
 Syntax:

6
CSS FLOAT
 With CSS float, an element can be pushed to the left or right, allowing
other elements to wrap around it.
 Float is very often used for images, but it is also useful when working
with layouts.
 Elements are floated horizontally, this means that an element can
only be floated left or right, not up or down.
 If an image is floated to the right, a following text flows around it, to
the left
 Here is example code to float multiple images on a web page.
<style
type="text/css">
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
<body>
<h3>Image Gallery</h3>
<img class="thumbnail" src=/slideshow/lecture-5-6-advance-css-pptx-for-web/275557020/"klematis_small.jpg" width="107"
height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107"
height="80">
height="90">
height="90">
<img class="thumbnail" src=/slideshow/lecture-5-6-advance-css-pptx-for-web/275557020/"klematis_small.jpg" width="107"
height="90">

7
POSITIONING ELEMENTS
 The CSS positioning properties allow you to position an element.
 It can also place an element behind another, and specify what should
happen when an element's content is too big.
 Elements can be positioned using the top, bottom, left, and right
properties.
 However, these properties will not work unless the position property is
set first.
They also work differently depending on the positioning method.
 There are four different positioning methods.
 Static Positioning:
HTML elements are positioned static by default.
A static positioned element is always positioned according to the normal flow of
the page.
Static positioned elements are not affected by the top, bottom, left, and right
properties.
 Fixed Positioning
An element with fixed position is positioned relative to the browser window.
It will not move even if the window is scrolled.
Fixed positioned elements can overlap other elements.

8
 Relative Positioning
A relative positioned element is positioned relative to its normal position.
The content of relatively positioned elements can be moved and overlap
other elements,
but the reserved space for the element is still preserved in the normal flow.
Relatively positioned elements are often used as container blocks for
absolutely positioned elements.
 Absolute Positioning
An absolute position element is positioned relative to the first parent
element that has a position other than static. If no such element is found, the
containing block is <html>:
Absolutely positioned elements are removed from the normal flow. The
document and other elements behave like the absolutely positioned element
does not exist.

Asma Sajid ; College of Computer Science & Information Studies, GCUF 9
All CSS Positioning Properties

10
ADDING EFFECTS TO IMAGES (1)
• Transparent Image Effect
 The CSS3 property for transparency is opacity.
 We can set value for opacity.
 The opacity property can take a value from 0.0 - 1.0. A lower value
makes the element more transparent.
IE9, Firefox, Chrome, Opera, and Safari use the property opacity for
transparency.
 IE8 and earlier use filter:alpha(opacity=x).
The x can take a value from 0 - 100. A lower value makes the element more
transparent.

11
ADDING EFFECTS TO IMAGES (2)
• Hover Image Effect
 The first CSS block will be similar to the code in transparency example.
 In addition, we need to added what should happen when a user hover
over one of the images.
 In this case we want the image to NOT be transparent when the user
hover over it.
 The CSS for this is: opacity=1. And IE8 and earlier:
filter:alpha(opacity=100).
When the mouse pointer moves away from the image, the image will be
transparent again.
• Syntax:

12
CREATING IMAGE SPRITES
• Image Sprites
 An image sprite is a collection of images put into a single image.
 A web page with many images can take a long time to load and generates multiple
server requests.
 Using image sprites will reduce the number of server requests and save bandwidth.
 Instead of using three separate images, we use single image. (a.jpg)
 following example the CSS specifies which part of the “a.jpg" image to show:
 SYNTAX:
 <img class="home" src=/slideshow/lecture-5-6-advance-css-pptx-for-web/275557020/"img_trans.gif" /> - Only defines a small transparent image because the
src attribute cannot be empty. The displayed image will be the background image we specify in
CSS.
 width:46px;height:44px; - Defines the portion of the image we want to use
 background:url(/slideshow/lecture-5-6-advance-css-pptx-for-web/275557020/img_navsprites.gif) 0 0; - Defines the background image and its position (left
0px, top 0px)

13
EXAMPLE- STRIPES
• Navigation List
 We will use an HTML list, because it can be a link and also supports a
background image.
 Explanation;
#navlist{position:relative;} - position is set to relative to allow absolute positioning
inside it
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin and
padding is set to 0, list-style is removed, and all list items are absolute positioned.
#navlist li, #navlist a{height:44px;display:block;} - the height of all the images are
44px

14
• Positioning
 Now start to position and style for each specific part:
#home{left:0px;width:46px;} - Positioned all the way to the left, and
the width of the image is 46px
#home{background:url(/slideshow/lecture-5-6-advance-css-pptx-for-web/275557020/img_navsprites.gif) 0 0;} - Defines the
background image and its position (left 0px, top 0px)
#prev{left:63px;width:43px;} - Positioned 63px to the right (#home
width 46px + some extra space between items), and the width is
43px.
#prev{background:url('/slideshow/lecture-5-6-advance-css-pptx-for-web/275557020/img_navsprites.gif') -47px 0;} - Defines the
background image 47px to the right (#home width 46px + 1px line
divider)
#next{left:129px;width:43px;}- Positioned 129px to the right (start
of #prev is 63px + #prev width 43px + extra space), and the width is
43px.
#next{background:url('/slideshow/lecture-5-6-advance-css-pptx-for-web/275557020/img_navsprites.gif') no-repeat -91px 0;} -
Defines the background image 91px to the right (#home width 46px
+ 1px line divider + #prev width 43px + 1px line divider )

15
• Adding Hover Effect.. ?
 We only add three lines of code to add the hover effect:
Explanation
 Since the list item contains a link, we can use the :hover pseudo-class
 #home a:hover{background: transparent
url(img_navsprites_hover.gif) 0 -45px;}
For all three hover images we specify the same background position, only
45px further down

�ݺ�ߣ

Lecture 5 & 6 Advance CSS.pptx for web

Recommended

More Related Content

Similar to Lecture 5 & 6 Advance CSS.pptx for web (20)

More from ZahraWaheed9 (15)

Recently uploaded (20)

Lecture 5 & 6 Advance CSS.pptx for web