Advanced CSS Advanced CSS

Luong Tran Hy Hien, FIT of HCMUP, VietNam

Các ký hiệu thường dùng Các ký hiệu thường dùng

• *: Áp dụng cho tất cả

• #: Áp dụng cho đối tượng có ID • .name: Áp dụng cho đối tượng có class • X Y: áp dụng cho đối tượng Y nằm trong

đối tượng X

• X > Y: chỉ rõ con trực tiếp

* { margin: 0; padding: 0; }

CSS Element Boxes

Parent’s background covers margin Border

Margin

Element Content Padding

Padding

Element’s background covers padding

Box Formatting Model Box Formatting Model

margin (transparent)

border

padding (transparent)

content

element width

box width

(cid:1) Provides a means to control the spatial layout of

elements; the basis for position-oriented properties

Common CSS Layout Properties Common CSS Layout Properties

margin

padding

width

h e i g h t

border

• Width • Height • Float • Clear • Border • Padding • Margin

Width & Height Width & Height

Width and height define the width and height of an element.

div id=“box”

#box {height=“auto”} #box {width=“50px”}

#box {width=“50em”}

*Width and height can be specified in pixels, ems, percentages or set to auto

#box {width=“100%”}

#box {width=“auto”}

Float: (left, right) Float: (left, right) Float property makes elements float to the right or left of the screen, positioned where they are in the HTML. Floating allows word wrapping.

div id=“box” Here is some text which wraps around the box floated to the left.

#box {float:left; margin-right: 10px;}

Floats Floats

• a floated element shifts out of the normal

•

q { clear: right; }

document left-to-right layout flow if there is text beside a float, the text will wrap around the floated element .right_img { float: right; width: 200px; } “…” to escape the wrapping behavior, use the “clear” property, which prevents overlap of floating elements

• clear property possible values:

left, right, both, none (default)

Clear: (left, right, both) Clear: (left, right, both) When elements are floated, they wrap around each other to form a “caravan.” The clear property detaches an element from the “caravan” and allows it to start on a new line.

div id=“box1” div id=“box2”

div id=“box3”

#box3 { background-color: white; border: 1px solid #000; clear: both;}

Border (top, right, bottom, left) Border (top, right, bottom, left)

#box { border: red dotted 1px;}

You can define the entire border or only the top, bottom, left, or right. You can also define the border using one declaration. The code could be any of the following:

#box { border-color: red; border-style: dotted; border-width: 2px; }

#box { border-top: red dotted 1px; border-bottom: red dotted 1px; border-left: red dotted 1px; border-right: red dotted 1px; }

div id=“box”

Padding (top, right, bottom, left) Padding (top, right, bottom, left)

Padding is the space between the text/content and the border. You can use padding for all around the element or specify each side of the rectangle separately.

The code could be any of the following:

padding: 10px;

padding

Padding: 10px 10px;

div id=“box”

padding: 10px 10px 10px 10px;

padding-left: 10px;

padding-right: 10px;

padding-bottom: 10px;

padding-top: 10px;

Margin (top, right, bottom, left) Margin (top, right, bottom, left) Margin is the space outside the text/content and the border. You can use margin for all around the element or specify each side of the rectangle separately.

The code could be any of the following:

margin

margin: 10px; or

margin: 10px 10px; or

div id=“box”

margin: 10px 10px 10px 10px; or

margin-left: 10px;

margin-right: 10px;

margin-bottom: 10px;

margin-top: 10px;

Typical Web Page (Browser) Typical Web Page (Browser)

Container

header

main

footer

#container

#banner

#nav

#content

#footer

home

HTML

href="contact.htm">contact

My Resume

Resume text

body {

font-size: 1em; }

#container {

width: 920px; }

#banner {

width: 920px; height: 120px; }

#nav {

float: left; width: 200px; }

CSS

#content {

width: 720px; }

#footer {

font-size: .8em; }

HTML5/CSS3 HTML5/CSS3 Introduction CSS3 Introduction CSS3

CSS3 FYI CSS3 FYI

• CSS3 is still under development • Modules: A new approach to standardization • Each browser still implementing slightly different

syntax for certain properties: – moz – ; //Firefox – webkit – ; //Chrome, Safari (webkit) – o – ; //Opera –ms – ; //IE

Create Rounded Corners Create Rounded Corners

x = horizontal radius [ | <%> ] y = vertical radius [ | <%> ]

border-top-right-radius: x y;

border-top-left radius: x y;

border-bottom-left-radius: x y;

border-bottom-right-radius: 0;

border -*-*-radius: [x] [y]?

CSS3 Shadows CSS3 Shadows

box-shadow: x y b color

Examples: -webkit-box-shadow: -3px 3px 3px #999999; -moz-box-shadow: -3px 3px 3px #999999; text-shadow: -4px 4px 3px #999999;

Text Shadow Text Shadow

• Can be added outside the graphic • No IE support • Format:

text-shadow: x y b color

• x = horizontal offset (cid:1) x < 0: left of the text (cid:1) x > 0: right of the text

• y = vertical offset

(cid:1) y < 0: above the text (cid:1) y > 0: below the text

CSS3 Backgrounds CSS3 Backgrounds

• Format: background-size: length | percentage

| cover | contain; • Sample Markup:

background-size: 400px 500px; //width, height background-size:30% 40%; //width, height background-size:100%; //Omitting first value sets

//the second to auto

background-size:cover; background-size:contain;

Multiple background images Multiple background images

background: , , , ; OR

background-image: , , , ; background-repeat: , , ,; background-position: , , ,; /* plus any background attachment and/or box properties as needed */

#example {

width: 500px; height: 250px; background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg); background-repeat: no-repeat; background-position: left top, right bottom, left top; }

Multi-Column Layout Multi-Column Layout

#multi-column { /* For Mozilla: */

-moz-column-width: 13em; -moz-column-gap: 1em;

/* For WebKit: */

-webkit-column-width: 13em; -webkit-column-gap: 1em;

}

Multi-Column Layout Multi-Column Layout

#multi-column {

-moz-column-count: 3; -moz-column-gap: 1em; -moz-column-rule: 1px solid black; -webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-rule: 1px solid black;

}