05-css 2

CSS properties for padding
property description
padding padding on all 4 sides
padding-bottom padding on bottom side only
padding-left padding on left side only
padding-right padding on right side only
padding-top padding on top side only
Complete list of padding properties
http://www.w3schools.com/css/css_reference.asp#padding
CS380
Padding example 1
2
p { padding: 20px; border: 3px solid black; }

h2 { padding: 0px; background-color: yellow; }
CSS
This is a first paragraph.
This is a second paragraph.
This is a heading
output
CS380
Padding example 2
3
p {
padding-left: 200px; padding-top: 30px;
background-color: fuchsia;
} CSS
This is a first paragraph

paragraph.
This is a second paragraph
output
 each side's padding can be set individually

 notice that padding shares the background color of the
element
CSS properties for margins
4
margin margin on all 4 sides
margin-bottom margin on bottom side only
margin-left margin on left side only
margin-right margin on right side only
margin-top margin on top side only
Complete list of margin properties
http://www.w3schools.com/css/css_reference.asp#margin
CS380
Margin example 1
5
p {
margin: 50px;
} CSS

output
 notice that margins are always transparent

CS380
Margin example 2
6
p {
margin-left: 8em;
} CSS

output
 each side's margin can be set individually

CS380
CSS properties for dimensions
7
p { width: 350px; background-color: yellow; }

h2 { width: 50%; background-color: aqua; }
CSS
This paragraph uses the first style above
An h2 heading
output
how wide or tall to make this element
width, height
(block elements only)
max-width, max-height, max/min size of this element in given
min-width, min-height dimension
1
The CSS Box Model
Padding - Margin
8
 Every element composed

of:
 content
a border around the

element
 padding between the
content and the border
 a margin between the
border and other content
CS380
The CSS Box Model (cont.)
9
padding-top: 10px;
 width = content width + padding-bottom: 10px;
L/R padding + L/R padding-right: 10px;
padding-top: 10px;
border + L/R margin padding: 10px;
padding 10px 10px 10px 10px;
 height = content height padding 10px 10px;
+ T/B padding + T/B padding: auto;
border + T/B margin
 IE6 doesn't do this
right
margin-top: -10px
margin: auto
CS380
div{
width: 300px;
height: 100px;
background: skyblue;
border: 2px solid red;}
div{
width: 300px;
height: 100px;
border: 2px solid red;
padding: 20px;}
div{
width: 300px;
height: 100px;
border: 2px solid red;
padding: 20px;
margin: 20px;}
<body>
10 <div> WEB PROGRAMMING </div> </body>
CS380
Padding: 0 , Margin 0
All element in the body
div{
width: 200px;
height: 200px;
background: yellowgreen;
border: 2px solid black;}
*{
padding: 0;
margin: 0;}
11 CS380
2 Background
<style type="text/css">
div{
width: 400px;
height: 800px;
border: 1px solid green;
background-color: skyblue;
background-image:url ("eid2.jpeg") ;
background-size:150px 150px;
background-repeat: no-repeat;
background-position: left top / 10px 10px;
background-attachment: fixed;}
</style>
<body>
12 <div></div> </body> CS380
3
Links
<a href="www.google.com.eg">Google</a><br>
<a href="www.Youtupe.com.eg">Youtupe</a><br>
<a href="www.Yahoo.com.eg">Yahoo</a><br>
<a href="www.Gmail.com.eg">Gmail</a>
a{
text-decoration: none;
color: red;
cursor: auto;}
13 CS380
CSS ID selectors
14
class description
:active an activated or selected element
an element that has the keyboard
:focus
focus
:hover an element that has the mouse over it
:link a link that has not been visited
:visited a link that has already been visited
the first letter of text inside an
:first-letter
element
:first-line the first line of text inside an element
an element that is the first one to
:first-child
appear inside another
CS380
a:hover{
color: green;
font-size: 30px;}
p:first-line {
color: red;
font-size: 30px;}
p:first-letter {
color: red;
font-size: 30px;}
15 CS380
a:focus
{
color: red;
font-size: 30px;}
<body>
Name: <input class="a"
type="text" name="xx">
</body>
.a:focus{
color: red;
Name: <input class="a" type="text" name="">
<br>
background: yellow;} Male:<input class="b" type="checkbox"
.b:checked{ name="">
Female:<input class="b" type="checkbox"
opacity: 0;}
name="">
16
a:active
{
color: green;
font-size: 30px;}
a:visited
{
color: black;
font-size: 30px;}
17 CS380
Add Content
<p>And the web just isn't the same without

you. Let's get you back online!</p>
p{
background: yellow;
font-size: 20px; }
p:after{
content: " GOOD";}
p{
background: yellow;
font-size: 20px; }
p:before{
content: "GOOD ";}
18
<p>And the web just isn't the same without
you.</p>
p{
height: 50px;
width: 500px;
padding: 30px;
position: relative;
}
p:before{ p:before{
content: ""; content: "";
height: 100%; height: 15px;
width: 15px; width: 100%; bottom: 0;
background: green; background: green;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0;} left: 0;} right: 0;
19
4
Inline- Block
div{
background: yellow;
border: 1px solid black;
margin: 5px;
width: 300px;
height: 50px;
Padding: 10px}
span{
background: yellow;
width: 300px;
height: 50px; padding: 30px;
padding: 0 30px;
padding: 10px // only left and right
margin: 5px; } // only left and right
20 CS380
5 The display property
21
h2 { display: inline; background-color: yellow; }

CSS
output
sets the type of CSS box model
display
an element is displayed with
 values: none, inline, block, run-in, compact,
...
 use sparingly, because it can radically alter the page layout
CS380
The display property (cont.)
22
p.secret {
visibility: hidden;
} CSS
output
 hidden elements will still take up space onscreen, but will not
be shown
 to make it not take up any space, set display to none instead
 can be used to show/hide dynamic HTML content on the page
in response to events
CS380
The display property
23
<ul id="topmenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul> HTML
#topmenu li {
display: inline;
border: 2px solid gray;
margin-right: 1em;
} CSS
output
 lists and other block elements can be displayed inline

 flow left-to-right on same line
 width is determined by content
Display
Inline, block , Inline-block
div{
background: yellow;
margin: 5px;
width: 300px;
height: 50px;
Padding: 10px;
display: inline;}
span{
background: green;
margin: 5px;
width: 300px;
height: 50px; padding: 30px;
padding: 10px; padding: 0 30px;
display: block;}
24 CS380
div{
background: yellow;
margin: 5px;
width: 200px;
height: 50px;
Padding: 10px;
display: inline-block;}
span{
background: green;
margin: 5px;
width: 200px;
height: 50px;
padding: 10px;
25 CS380
6 Display - Visibility
.d1{ none, hidden
background: yellow;
height: 30px;}
.d2{
background: red;
height: 30px;}
.d3{
Hidden and not fount in its place
background: green;
height: 30px;
display: none;
26 visibility: hidden;} Hidden but its place found
7 The overflow property (cont.)
27
specifies what to do if an
element's content is too large;
overflow
can be auto, visible, hidden, or
scroll
CS380
Overflow
<div>
<h3>First One</h3>
<h3>Second Two</h3>
<h3>Third Three</h3>
</div>
div{
width: 200px;
height: 200px;
overflow: hidden;
overflow: scroll;
overflow: auto;}
28
List
8
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ol>
Order to unordered
ol{
list-style-type: square ;
list-style-type: none;
list-style-position: inside;
list-style-image: url("xx1.jpg")}
list-style: square inside url("xx1.jpg")
li{
}
29
9 CSS properties for borders
30
h2 { border: 5px solid red; }

CSS
This is a heading.
output
thickness/style/size of border on all 4
border
sides
 Thickness: px, pt, em, or thin, medium, thick

 Style: none, hidden, dotted, dashed, double,
groove, inset, outset, ridge, solid
 Color: red, green, blue,
More border properties
31
specific properties of border on
border-color, border-width, border-style
all 4 sides
border-bottom, border-left, all properties of border on a
border-right, border-top particular side
border-bottom-color, border-bottom-style,
border-bottom-width, border-left-color,
border-left-style, border-left-width,
properties of border on a
particular side
border-right-color, border-right-style,
border-right-width, border-top-color,
border-top-style, border-top-width
Complete list of border properties
http://www.w3schools.com/css/css_reference.asp#border
10
Why do we need page sections?
Sections of a page <div>
32
 Style individual elements, groups of elements,

sections of text or of the page
 Create complex page layouts
CS380
11 Float
.a{
border: 1px solid black; <body>
width: 300px; <div class="a">First</div>
height: 100px; <div class="b">Second</div>
background: skyblue; </body>
padding: 10px;
margin: 10px;
float: right;
}
.b{
width: 300px;
height: 100px;
background: green;
padding: 10px;
margin: 10px;
}
.a{
Float - clear
width: 300px;
height: 100px;
padding: 10px;
margin: 10px; <div class="a">First</div>
float: right; <div class="b">Second</div>
<div class="c"><img src="xxx.jpg"
} width="130px" height="130px"></div>
.b{
width: 300px;
height: 100px;
background: green;
padding: 10px;
margin: 10px;
float: left;
}
34
<div class="a">First</div>
<div class="b">Second</div>
<p class="x"></p>
<div class="c"><img src="xxx.jpg"
width="130px" height="130px"></div>
.x{ .c{
clear: both; clear: both;
35 } }
11 Float
<div class="all">
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
</div>
.all div{
float: left;
width: 20%;}
.all div{
float: left;
width: 20%;
background: yellow;
margin: 2px;}
36
.all{
background: green;}
.all div{
float: left;
width: 20%; ‫بيخرج عناصرة خارج اطار العمل‬
background: yellow;
margin: 2px;}
.all{
background: green;}
.all div{}
<div class="all">
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
</div>
<p>WELCOME</p> height: 50px;
37
.all{
background: green;}
.x{
clear: both;}
<body>
.all div{
<div class="all">
float: left;
<div>First</div>
width: 20%;
<div>Second</div>
background: yellow;
<div>Third</div>
margin: 2px;}
<div>Fourth</div>
</style>
<p class="x" ></p>
</div>
<p>WELCOME</p>
38
</body>
12 The position property (examples)
39
div#ad {
position: fixed;
right: 10%;
top: 45%;
} CSS
property value description

static default position
offset from its normal
relative
static position
position a fixed position within its
absolute
containing element
a fixed position within
fixed
the browser window
top, bottom, left, right positions of box's corners
 Relative
<body>
<div class="f">First</div>
<div class="s"> Second </div>
</body>
.f{
width: 200px;
height: 40px;
background: yellow;
position: relative;
top: 200px;}
.s{
width: 200px;
height: 40px;
background: green;} Relative: moved from the original point (its place)
40
.f{
width: 200px;
height: 40px;
background: yellow;
position: relative;
top: 200px;
left: 200px;}
.s{
width: 200px;
height: 40px;
background: green;}
41 CS380
.f{
width: 200px;
 Absolute
height: 40px;
background: yellow;
position: absolute;
top: 0px;
left: 0px;}
.s{
width: 200px;
height: 40px;
background: green;}
.f{
width: 200px;
height: 40px;
background: yellow;
position: absolute;
Absolute: moved from the browser (its father)
top: 100px;
left: 100px;}
42
.f{
width: 200px;
height: 40px;
background: yellow;
position: absolute;
top: 100px;
right: 0;}
43
<div class="all"> Moved based on div all
</div>
.s{
width: 50px;
height: 20px;
background: yellow;
position: absolute;
top: 0;
right: 0;}
.all{ .s{
width: 400px; width: 50px;
height: 200px; height: 20px;
background: yellow;
position: absolute;
position: relative;}
bottom: 0;
right: 50px;}
44
 Fixed
<div>
<h4>WEB PROGRAMMING</h4>
</div>
div{
width: 200px;
height: 20px;
background: yellow;
position: fixed;
right: 10%;
top: 45%;}
45
 Fixed
<div class="all">HHHHHH ……… H</div>
.s{
width: 50px;
height: 20px;
background: yellow;
position: fixed;
bottom: 0;
right: 50px;}
.all{
width: 400px;
height: 200px;
border: 2px solid green;}
46
.s{
width: 50px;
height: 20px;
background: yellow;
position: fixed;
bottom: 50px;
right: 50px;}
.all{
width: 400px;
height: 200px;
text-align: justify;
padding: 10px;
overflow: auto;}
47
.s{
width: 50px;
height: 20px;
background: yellow;
position: fixed;
top: 50px;
right: 50px;}
.all{
width: 400px;
height: 1200px;
position: relative;}
.s{width: 50px;
height: 20px;
background: yellow;
position: fixed;
top: 150px;
right: 250px;}
.all{width: 400px;
height: 1200px;
border: 2px solid green;}
48
 Static
div{
width: 200px;
height: 20px;
background: yellow;
position: static;
left: 200px;
Ignored
bottom: 200px;
49
.s{
width: 100px;  Sticky
height: 20px;
background: yellow;
position: sticky;
top: 0/ 50px}
.r{
width: 100px;
height: 20px;
background: green;}
<body>
------------------------
------------------------
<div class="r">First</div>
<div class="s">Second</div>
-----------------------
----------------------- </body>
50
Absolute positioning
51
#sidebar {
position: absolute;
left: 400px;
top: 50px;
} CSS
 removed from normal flow

 positioned relative to the block
element containing them
 actual position determined by
top, bottom, left, right
 should often specify a width
property as well
CS380
Relative positioning
52
#area2 { position: relative; }

CSS
 absolute-positioned elements are

normally positioned at an offset
from the corner of the overall web
page
 to make the absolute element to
position itself relative to some other
element's corner, wrap the absolute
element in an element whose position
is relative
CS380
Fixed positioning
53
#area2 { position: relative; }

CSS
 removed from normal flow

 positioned relative to the browser
window even when the user scrolls
the window, element will remain in
the same place
CS380
13 Alignment vs. float vs. position
54
1. If possible, lay out an element by aligning its

content
 horizontal alignment: text-align
 set this on a block element; it aligns the content within it
(not the block element itself)
 vertical alignment: vertical-align
 set this on an inline element, and it aligns it vertically within
its containing element
2. If alignment won't work, try floating the element
3. If floating won't work, try positioning the element
 absolute/fixed positioning are a last resort and
should not be overused
Details about inline boxes
55
 Size properties (width, height, min-width,

etc.) are ignored for inline boxes
 margin-top and margin-bottom are ignored,
 but margin-left and margin-right are not
ignored
CS380
Details about inline boxes
56
 the containing block box's text-align property

controls horizontal position of inline boxes within it
 text-align does not align block boxes within the page
 each inline box's vertical-align property
aligns it vertically within its block box
CS380
13
Media Query
.a{
<center>
.a{width: 200px;
<div class="a">First</div>
height: 30px;
<div class="a">Second</div>
background: blue;
</center>
margin: 2px;}
@media screen and (max-width: 400px){

.a{display: block;
width: 100%;}
body{
background: skyblue;}}
57 </style>
@media screen and (min-width:401px)and(max-
width:600px){
body{
background: green;}}
@media screen and (min-width:601px)and(max-

width:800px){
body{
background: yellow;}}
58 CS380

05-css 2

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

05-css 2

Caricato da

Copyright:

Formati disponibili

CSS properties for padding

p { padding: 20px; border: 3px solid black; }

This is a first paragraph.

This is a second paragraph.

This is a first paragraph

This is a second paragraph

 each side's padding can be set individually

This is a first paragraph

This is a second paragraph

 notice that margins are always transparent

This is a first paragraph

This is a second paragraph

 each side's margin can be set individually

p { width: 350px; background-color: yellow; }

This paragraph uses the first style above

 Every element composed

a border around the

<p>And the web just isn't the same without

h2 { display: inline; background-color: yellow; }

 lists and other block elements can be displayed inline

h2 { border: 5px solid red; }

 Thickness: px, pt, em, or thin, medium, thick

 Style individual elements, groups of elements,

property value description

 removed from normal flow

#area2 { position: relative; }

 absolute-positioned elements are

#area2 { position: relative; }

 removed from normal flow

1. If possible, lay out an element by aligning its

 Size properties (width, height, min-width,

 the containing block box's text-align property

@media screen and (max-width: 400px){

@media screen and (min-width:601px)and(max-

Potrebbero piacerti anche