Tài liệu tự học CSS nhanh
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.24 MB, 154 trang )
Cascading Style Sheet
1
Content
•
•
•
•
•
•
•
Writing CSS code
Creating style sheet
Configuring Fonts
Configuring Text
Backgrounds
CSS Box Model
CSS Border
•
•
•
•
•
•
CSS Outline
Display and Visibility
Positioning
CSS Float and Clear
Pseudo-classes
Reference
2
Content
• Writing CSS code
– Introduction
– CSS Selectors
•
•
•
•
•
•
Creating style sheet
Configuring Fonts
Configuring Text
Backgrounds
CSS Box Model
CSS Border
•
•
•
•
•
•
CSS Outline
Display and Visibility
Positioning
CSS Float and Clear
Pseudo-classes
Reference
3
Introduction
• Can be written in .html or .css file
• Consists of a list of rule sets
• A Rule set consists of:
– A selector
– Style properties and their values
• Inline CSS
• CSS added in HEAD section
4
Introduction - Inline CSS
• Definition:
– Style sheets are added inside HTML element.
• Syntax:
<div style="property:value;">Content</div>
5
Introduction CSS added in HEAD section - INTERNAL
• Definition:
– Style sheets are added in <style> tag.
• Syntax:
<html>
<head>
<title>Title</title>
<style type="text/css">
selector {
property:value;
another_property:value;
}
</style>
</head>
<body> ... Page cotent ...
</body>
</html>
6
Introduction CSS added in HEAD section - EXTERNAL
• Html file
• Css file
7
Content
• Writing CSS code
– Introduction
– CSS Selectors
•
•
•
•
•
•
Creating style sheet
Configuring Fonts
Configuring Text
Backgrounds
CSS Box Model
CSS Border
•
•
•
•
•
•
CSS Outline
Display and Visibility
Positioning
CSS Float and Clear
Pseudo-classes
Reference
8
CSS Selectors
•
•
•
•
•
Universal selector
Type selector
class selector
ID selector
Attribute selector
9
Universal selector
• Definition:
– Is represented with an “*”
– Is applied to all elements
• Syntax:
* { font-family: Calibri, Arial, sans-serif; }
10
CSS Selectors
•
•
•
•
•
Universal selector
Type selector
class selector
ID selector
Attribute selector
11
Type selector
• Definition:
– Select an element by its type
• Syntax:
h1 {
font-size: 18px;
}
p{
color: blue;
}
12
CSS Selectors
•
•
•
•
•
Universal selector
Type selector
class selector
ID selector
Attribute selector
13
class selector
• Definition:
– Matches elements with the specified class name.
– Used to apply same CSS rule on different tags.
– class selector is preceded by a “.”.
• Syntax:
<div class="clas1"> Content </div> (in body)
.clas1 {
color: green;
}
14
CSS Selectors
•
•
•
•
•
Universal selector
Type selector
class selector
ID selector
Attribute selector
15
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.
– Id selector is preceded by a “#”.
• Syntax:
#id1{
font-size: 15px;
}
16
CSS Selectors
•
•
•
•
•
Universal selector
Type selector
class selector
ID selector
Attribute selector
17
Content
• Writing CSS code
• Creating style sheet
– Inheritance
– Grouping Selectors
– Defining CSS rules to child
selectors
– The !important Declaration
– The execution order of the
CSS rules
– Adding Comments within
Style sheets
•
•
•
•
•
•
•
•
•
Backgrounds
CSS Box Model
CSS Border
CSS Outline
Display and Visibility
Positioning
CSS Float and Clear
Pseudo-classes
Reference
• Configuring Fonts
• Configuring Text
18
Inheritance
• Define:
– Is ability of inheritance rules from parent element
– Is used when child element was not explicitly
declared rules.
• Example:
19
Inheritance
Figure 1: Example of inheritance
20
Content
• Writing CSS code
• Creating style sheet
– Inheritance
– Grouping Selectors
– Defining CSS rules to child
selectors
– The !important Declaration
– The execution order of the
CSS rules
– Adding Comments within
Style sheets
•
•
•
•
•
•
•
•
•
Backgrounds
CSS Box Model
CSS Border
CSS Outline
Display and Visibility
Positioning
CSS Float and Clear
Pseudo-classes
Reference
• Configuring Fonts
• Configuring Text
21
Grouping Selectors
• Definition:
– Is used to apply same CSS rules to many selectors
– Different selectors are separated by “,”
• Syntax:
selector1, selector2, ... {
property:value;
property:value;
...
}
22
Grouping Selectors
• Example:
Figure 2: Example of grouping selectors
23
Content
• Writing CSS code
• Creating style sheet
– Inheritance
– Grouping Selectors
– Defining CSS rules to child
selectors
– The !important Declaration
– The execution order of the
CSS rules
– Adding Comments within
Style sheets
•
•
•
•
•
•
•
•
•
Backgrounds
CSS Box Model
CSS Border
CSS Outline
Display and Visibility
Positioning
CSS Float and Clear
Pseudo-classes
Reference
• Configuring Fonts
• Configuring Text
24
Defining CSS rules to child selectors
• Usage:
– Is used to apply new CSS rules for child.
• Syntax:
parent child {
property:value;
property:value;
...
}
25
