Tài liệu tự học CSS nhanh

– The !important Declaration– The execution order of the... – The !important Declaration– The execution order of the... – The !important Declaration– The execution order of the... Defini

Cascading Style Sheet

• Can be written in html or css file

• Consists of a list of rule sets

• A Rule set consists of:

Introduction

-CSS added in HEAD section - EXTERNAL

• Html file

• Css file

ID selector

• Definition:

– Apply CSS rule to only one ID.

– An ID selector can appear many times in CSS file – An ID selector can appear one time in html tag.

– The !important Declaration

– The execution order of the

Figure 1: Example of inheritance

– The !important Declaration

– The execution order of the

Grouping Selectors

• Example:

– The !important Declaration

– The execution order of the

Defining CSS rules to child selectors

Defining CSS rules to child selectors

• Example:

Figure 3: Define CSS rules for child

– The !important Declaration

– The execution order of the

The !important Declaration

The !important Declaration

• Example:

Figure 4: Example of !important declaration

– The !important Declaration

– The execution order of the

The execution order of the CSS rules

• Inline > internal > external

• !importance declaration has top priority

• More detail has higher priority

• Later has higher priority

– The !important Declaration

– The execution order of the

Adding Comments within Stylesheets

property:value;

}

• Accepts a comma-separated list

• Enclose font that contains spaces with “xy z”

• Insert generic font at the end of list

• Five generic font-family values:

– serif

– sans-serif

– cursive

– monospace

Font Embedding

• Used to include a font other than general

• Embed new font with @font-face

• To use this CSS rule, set two properties:

– font-family

– src

• Controls size of text

• Can be defined in:

• Example:

Figure 5: Example of font-size

• Controls thickness of font

• Can take on different values:

• Example:

• Example:

Figure 7: Example of font-variant

• Example:

Multiple values for font property

• Set many font properties in one definition

• Use font property

• Syntax:

selector {

font: font-style_val

font-variant_val font-weight_val font-size_val font-family_val;

Multiple values for font property

• Example:

Figure 9: Using font style

• Example:

• Example:

Figure 11: Example of word-spacing

• Example:

• Example:

Figure 13: Example of text-transform

• Example:

• Example:

Figure 15: Example of vertical-align

• Example:

• Example:

Figure 17: Example of text-decoration

• Example:

• Example:

• Example:

• Is applied throughout content area of element

• Is drawn behind background-image

• Example:

Figure 21: Example of background-color

• Example:

• Example:

Figure 23: Example of background-repeat

• Example:

• Example:

Figure 25: Example of background-position

Multiple values for background property

• Add many background properties in one definition

• Syntax:

selector {

background: bg_color

bg_image bg_repet bg_attach bg_position;

}

Multiple values for background property

• Example:

• Is a box that wraps around HTML elements

width and height

• Defines width and

height of the content

width and height

• Example:

Figure 28: Example of width and height

• Example:

• Sets space between element

border and content area

• Example:

Figure 30: Example of padding

• Example:

Min and max dimensions

• Places restrictions on element’s size

Example

CSS Border

• For student!

CSS outline

• For student!

• Positioning

• CSS Float and Clear

• Pseudo-classes

• Reference

• Example:

Figure 37: Example of using display

• Example:

– Define the visible portion of an element

• Positioning

• CSS Float and Clear

• Pseudo-classes

• Reference

Define the visible portion of an element

• Use visible surface

Define the visible portion of an element

• Example:

Figure 39: Visible portion of an element

• CSS Float and Clear

• Pseudo-classes

• Reference

• Default value

• Not uniquely positioned

• Are not affected by:

• CSS Float and Clear

• Pseudo-classes

• Reference

Figure 40: Relative positioning

relative

– absolute

– fixed – z-index

• CSS Float and Clear

• Pseudo-classes

• Reference

• An absolute position element

– Is positioned relative to the first parent element

that has a position other than static, or <html> if

no such element exists, and its display is not

affected by other elements.

– Absolute positioning takes the element out of the normal document flow, and can overlap other

elements.

• Syntax:

Figure 41: Absolute positioning

• Based on the viewport window

• Can overlap other element

• Not move even if the window is scrolled

– z-index

• CSS Float and Clear

• Pseudo-classes

• Reference

Figure 42: Using z-index positioning

CSS Float and Clear

• For students!

• For students!

• http://coursesweb.net/

• http://www.w3schools.com/