hoangtu_star_black89
New Member
Download miễn phí Ebook Simple CSS Standard Edition
Mục Lục
Nội dung Trang
Lời mở đầu . 6
Bài 1: Giới thiệu . 8
1.1. CSS là gì? . 8
1.2. Tại sao CSS? . 8
1.3. Học CSS cần những gì? . 9
Bài 2: Một số quy ước về cách viết CSS . 10
2.1. Cú pháp CSS . 10
2.2. Đơn vị CSS . 13
2.3. Vị trí đặt CSS . 14
2.4. Sự ưu tiên . 18
Bài 3: Màu chữ và màu nền . 21
3.1. Thuộc tính background-color . 21
3.2. Thuộc tính background-image . 21
3.3. Thuộc tính background-repeat . 22
3.4. Thuộc tính background-attachment . 23
3.5. Thuộc tính background-position . 23
Bài 4: Font chữ . 26
4.1. Thuộc tính font-family . 26
4.2. Thuộc tính font-style . 27
4.3. Thuộc tính font-variant . 27
4.4. Thuộc tính font-weight . 28
4.5. Thuộc tính font-size . 28
Bài 5: Text . 30
5.1. Thuộc tính color . 30
5.2. Thuộc tính text-indent . 30
5.3. Thuộc tính text-align . 31
5.4. Thuộc tính letter-spacing . 31
5.5. Thuộc tính text-decoration . 32
5.6. Thuộc tính text-transform . 32
Bài 6: Pseudo-classes for Links . 33
Bài 7: Class & id . 36
7.1. Nhóm phần tử với class. 36
7.2. Nhận dạng phần tử với id . 38
Bài 8: Span & div . 40
8.1. Nhóm phần tử với . 40
8.2. Nhóm phần tử với
. 40
Bài 9: Box Model . 43
Bài 10: Margin & padding . 45
10.1. Thuộc tính margin . 45
10.2. Thuộc tính padding . 47
Bài 11: Border . 48
11.1. Thuộc tính border-width . 48
11.2. Thuộc tính border-color . 48
11.3. Thuộc tính border-style . 48
Bài 12: Height & width . 50
12.1. Thuộc tính width . 50
12.2. Thuộc tính max-width . 50
12.3. Thuộc tính min-width . 50
12.4. Thuộc tính height . 50
12.5. Thuộc tính max-height . 51
12.6. Thuộc tính min-height . 51
Bài 13: Float & clear . 52
13.1. Thuộc tính float . 52
13.2. Thuộc tính clear . 53
Bài 14: Position . 54
14.1. Absolute position . 55
14.2. Relative position . 56
Bài 15: Layers . 57
Bài 16: Web standard . 59
Phụ lục . 60
Để tải bản Đầy Đủ của tài liệu, xin Trả lời bài viết này, Mods sẽ gửi Link download cho bạn sớm nhất qua hòm tin nhắn.
Ai cần download tài liệu gì mà không tìm thấy ở đây, thì đăng yêu cầu down tại đây nhé:
Nhận download tài liệu miễn phí
Thật ra nếu nhìn kỹ chúng ta cũng nhận ra đây chỉ là một phương cách thay
thế cách thứ nhất bằng cách rút tất cả các thuộc tính CSS vào trong thẻ style (để
tiện cho công tác bảo trì, sửa chữa ấy mà).
Trang 15
Simple CSS Standard Edition WallPearl
Cũng ví dụ làm trang web có màu nền trắng, đoạn văn bản chữ xanh lá, chúng ta sẽ
thể hiện như sau:
Ví dụ
body { background-color:#FFF }
p { color:#00FF00 }
^_^ Welcome To WallPearl’s Blog ^_^
Lưu ý: Thẻ style nên đặt trong thẻ head.
Đối với những trình duyệt cũ, không thể nhận ra thẻ . Theo mặc định, thì
khi một trình duyệt không nhận ra một thẻ thì nó sẽ hiện ra phần nội dung chứa
trong thẻ. Như ở ví dụ trên, nếu trình duyệt không hỗ trợ thẻ style thì 2 dòng CSS:
body {background-color:#FFF } p { color:#00FF00 } sẽ hiện ra trên trình duyệt.
Để tránh tình trạng này, bạn nên đưa vào thêm dấu ở sau khối
code CSS. Như ví dụ trên sẽ viết lại là:
Trang 16
Simple CSS Standard Edition WallPearl
+ Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài)
Tương tự như cách 2 nhưng thay vì đặt tất cả các mã CSS trong thẻ style
chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở rộng .css) bên ngoài và
liên kết nó vào trang web bằng thuộc tính href trong thẻ link.
Đây là cách làm được khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay
bảo trì một website lớn sử dụng cùng một kiểu mẫu. Các ví dụ trong sách này cũng
được trình bày theo kiểu này.
Nào bây giờ chúng ta hãy mở Notepad lên và thử thực hiện theo ví dụ sau:
Đầu tiên chúng ta sẽ tạo ra một file vidu.html có nội dung như sau:
External
CSS File
Web Pages
Chỉ cần thay đổi nội
dung 1 file CSS, tất cả
các trang web sẽ được
cập nhật ngay lập tức
Trang 17
Simple CSS Standard Edition WallPearl
Ví dụ
^_^ Welcome To WallPearl’s Blog ^_^
Sau đó hãy tạo một file style.css với nội dung:
body {
background-color:#FFF
}
p {
color:#00FF00
}
Hãy đặt 2 file này vào cùng một thư mục, mở file vidu.html trong trình duyệt của
bạn và xem thành quả.
Lưu ý:
Để lưu 1 file với 1 đuôi khác .txt trong Notepad chúng ta chọn Save as type
là All Files. Có thể chọn Encoding là UTF-8, nếu bạn chú thích CSS bằng tiếng
Việt.
Trong CSS chúng ta còn có thể sử dụng thuộc tính @import để nhập một file
CSS vào CSS hiện hành. Cú pháp: @import url(link)
Trang 18
Simple CSS Standard Edition WallPearl
2.4. Sự ưu tiên:
Trước khi thực thi CSS cho một trang web. Trình duyệt sẽ đọc toàn bộ CSS
mà trang web có thể được áp dụng, bao gồm: CSS mặc định của trình duyệt, file
CSS bên ngoài liên kết vào trang web, CSS nhúng trong thẻ và các CSS
nội tuyến. Sau đó, trình duyệt sẽ tổng hợp toàn bộ CSS này vào một CSS ảo, và
nếu có các thuộc tính CSS giống nhau thì thuộc tính CSS nào nằm sau sẽ được ưu
tiên sử dụng (cái này cũng giống như chương trình “Ai Là Triệu Phú” trên truyền
hình vậy, chỉ câu trả lời sau cùng mới được chấp nhận (smile)). Theo nguyên tắc
đó trình duyệt của bạn sẽ ưu tiên cho các CSS nội tuyến > CSS bên trong > CSS
bên ngoài > CSS mặc định của trình duyệt.
Ví dụ:
Trong một trang web có liên kết tới file style.css có nội dung như sau:
p {
color:#333;
text-align:left;
width:500px
}
trong thẻ giữa thẻ cũng có một đoạn CSS liên quan:
p {
background-color:#FF00FF;
text-align:right;
width:100%;
height:150px
}
trong phần nội dung trang web đó cũng có sử dụng CSS nội tuyến:
Khi thực thi CSS trình duyệt sẽ đọc hết tất cả các nguồn chứa style rồi sẽ tổng hợp
lại vào một CSS ảo và nếu có sự trùng lắp các thuộc tính CSS thì nó sẽ lấy thuộc
Trang 19
Simple CSS Standard Edition WallPearl
tính CSS có mức ưu tiên cao hơn. Như ví dụ trên chúng ta sẽ thấy CSS cuối cùng
mà phần tử p nhận được là:
p {
background-color:#FF00FF;
width:100%;
height:200px;
text-align:center;
border:1px solid #FF0000;
color:#000
}
Vậy có cách nào để thay đổi độ ưu tiên cho một thuộc tính nào đó? Thật ra thì
trong CSS đã có sẵn một thuộc tính giúp chúng ta thực hiện điều này, đó chính là
thuộc tính !important. Chỉ cần bạn đặt thuộc tính này sau một thuộc tính nào đó
theo cú pháp selector { property:value !important } thì trình duyệt sẽ hiểu đây là
một thuộc tính được ưu tiên. Bây giờ, chúng ta cùng xét lại ví dụ trên nhưng có đặt
thêm một số thuộc tính !important vào xem kết quả như thế nào nhé.
p {
width:500px;
text-align:left !important;
color:#333 !important
}
p {
background-color:#FF00FF;
width:100%;
height:150px !important;
text-align:right;
}
Trang 20
Simple CSS Standard Edition WallPearl
Phần CSS sẽ tác động lên thuộc tính p là:
p {
background-color:#FF0000;
width:100%;
height:150px !important;
text-align:left !important;
border:1px solid #FF0000;
color:#333 !important
}
Lưu ý: Cùng một thuộc tính cho một selector thì nếu cả hai thuộc tính đều
đặt !important thì cái sau được lấy.
Trang 21
Simple CSS Standard Edition WallPearl
Bài 3: Background
Trong bài học này chúng ta sẽ được học về cách định màu nền/ảnh nền cho một
trang web cũng như các kỹ thuật định vị, điều chỉnh ảnh nền.
3.1. Màu nền (thuộc tính background-color):
Thuộc tính background-color giúp định màu nền cho một thành phần trên
trang web. Các giá trị mã màu của background-color cũng giống như color nhưng
có thêm giá trị transparent để tạo nền trong suốt.
Ví dụ sau đây sẽ chỉ cho chúng ta biết cách sử dụng thuộc tính background-color
để định màu nền cho cả trang web, các thành phần h1, h2 lần lượt là xanh lơ, đỏ
và cam.
body {
background-color:cyan
}
h1 {
background-color:red
}
h2 {
background-color
range
}
3.2. Ảnh nền (thuộc tính background-image):
Việc sử dụng ảnh nền giúp trang web trông sinh động và bắt mắt hơn. Để
chèn ảnh nền vào một thành phần trên trang web chúng ta sử dụng thuộc tính
background-image.
Trang 22
Simple CSS Standard Edition WallPearl
Bây giờ chúng ta sẽ cùng làm một ví dụ minh họa
để xem thuộc tính background-image sẽ hoạt động
ra sao. Đầu tiên hãy tìm một tấm ảnh mà bạn thích,
ở đây Pearl sẽ lấy tấm ảnh logo của blog Pearl
Sau đó, chúng ta sẽ viết CSS để đặt logo này làm
ảnh nền trang web như sau:
body {
background-image:url(logo.png)
}
h1 {
background-color:red
}
h2 {
background-colorrange
}
p {
background-color: FDC689
}
Như các bạn đã thấy chúng ta sẽ phải chỉ định đường dẫn của ảnh trong cặp ngoặc
đơn sau url. Do ảnh đặt trong cùng thư mục với file style3.css nên chúng ta chỉ cần
ghi abc.jpg. Nhưng nếu chúng ta tạo thêm một thư mục img trong thư mục thì
chúng ta sẽ phải ghi là background-image:url(img/abc.jpg). Đôi khi nếu không
chắc lắm bạn có thể dùng đường dẫn tuyệt đối cho ảnh.
3.3. Lặp lại ảnh nền (thuộc tính background-repeat):
Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một đối tượng
lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn
thừa. Thuộc tính background-repeat cung cấp cho chúng ta các điều khiển giúp
kiểm soát trình t...
Bài 9: Box Model . 43
Bài 10: Margin & padding . 45
10.1. Thuộc tính margin . 45
10.2. Thuộc tính padding . 47
Bài 11: Border . 48
11.1. Thuộc tính border-width . 48
11.2. Thuộc tính border-color . 48
11.3. Thuộc tính border-style . 48
Bài 12: Height & width . 50
12.1. Thuộc tính width . 50
12.2. Thuộc tính max-width . 50
12.3. Thuộc tính min-width . 50
12.4. Thuộc tính height . 50
12.5. Thuộc tính max-height . 51
12.6. Thuộc tính min-height . 51
Bài 13: Float & clear . 52
13.1. Thuộc tính float . 52
13.2. Thuộc tính clear . 53
Bài 14: Position . 54
14.1. Absolute position . 55
14.2. Relative position . 56
Bài 15: Layers . 57
Bài 16: Web standard . 59
Phụ lục . 60
Để tải bản Đầy Đủ của tài liệu, xin Trả lời bài viết này, Mods sẽ gửi Link download cho bạn sớm nhất qua hòm tin nhắn.
Ai cần download tài liệu gì mà không tìm thấy ở đây, thì đăng yêu cầu down tại đây nhé:
Nhận download tài liệu miễn phí
Tóm tắt nội dung tài liệu:
yle)Thật ra nếu nhìn kỹ chúng ta cũng nhận ra đây chỉ là một phương cách thay
thế cách thứ nhất bằng cách rút tất cả các thuộc tính CSS vào trong thẻ style (để
tiện cho công tác bảo trì, sửa chữa ấy mà).
Trang 15
Simple CSS Standard Edition WallPearl
Cũng ví dụ làm trang web có màu nền trắng, đoạn văn bản chữ xanh lá, chúng ta sẽ
thể hiện như sau:
Ví dụ
body { background-color:#FFF }
p { color:#00FF00 }
^_^ Welcome To WallPearl’s Blog ^_^
Lưu ý: Thẻ style nên đặt trong thẻ head.
Đối với những trình duyệt cũ, không thể nhận ra thẻ . Theo mặc định, thì
khi một trình duyệt không nhận ra một thẻ thì nó sẽ hiện ra phần nội dung chứa
trong thẻ. Như ở ví dụ trên, nếu trình duyệt không hỗ trợ thẻ style thì 2 dòng CSS:
body {background-color:#FFF } p { color:#00FF00 } sẽ hiện ra trên trình duyệt.
Để tránh tình trạng này, bạn nên đưa vào thêm dấu ở sau khối
code CSS. Như ví dụ trên sẽ viết lại là:
Trang 16
Simple CSS Standard Edition WallPearl
+ Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài)
Tương tự như cách 2 nhưng thay vì đặt tất cả các mã CSS trong thẻ style
chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở rộng .css) bên ngoài và
liên kết nó vào trang web bằng thuộc tính href trong thẻ link.
Đây là cách làm được khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay
bảo trì một website lớn sử dụng cùng một kiểu mẫu. Các ví dụ trong sách này cũng
được trình bày theo kiểu này.
Nào bây giờ chúng ta hãy mở Notepad lên và thử thực hiện theo ví dụ sau:
Đầu tiên chúng ta sẽ tạo ra một file vidu.html có nội dung như sau:
External
CSS File
Web Pages
Chỉ cần thay đổi nội
dung 1 file CSS, tất cả
các trang web sẽ được
cập nhật ngay lập tức
Trang 17
Simple CSS Standard Edition WallPearl
Ví dụ
^_^ Welcome To WallPearl’s Blog ^_^
Sau đó hãy tạo một file style.css với nội dung:
body {
background-color:#FFF
}
p {
color:#00FF00
}
Hãy đặt 2 file này vào cùng một thư mục, mở file vidu.html trong trình duyệt của
bạn và xem thành quả.
Lưu ý:
Để lưu 1 file với 1 đuôi khác .txt trong Notepad chúng ta chọn Save as type
là All Files. Có thể chọn Encoding là UTF-8, nếu bạn chú thích CSS bằng tiếng
Việt.
Trong CSS chúng ta còn có thể sử dụng thuộc tính @import để nhập một file
CSS vào CSS hiện hành. Cú pháp: @import url(link)
Trang 18
Simple CSS Standard Edition WallPearl
2.4. Sự ưu tiên:
Trước khi thực thi CSS cho một trang web. Trình duyệt sẽ đọc toàn bộ CSS
mà trang web có thể được áp dụng, bao gồm: CSS mặc định của trình duyệt, file
CSS bên ngoài liên kết vào trang web, CSS nhúng trong thẻ và các CSS
nội tuyến. Sau đó, trình duyệt sẽ tổng hợp toàn bộ CSS này vào một CSS ảo, và
nếu có các thuộc tính CSS giống nhau thì thuộc tính CSS nào nằm sau sẽ được ưu
tiên sử dụng (cái này cũng giống như chương trình “Ai Là Triệu Phú” trên truyền
hình vậy, chỉ câu trả lời sau cùng mới được chấp nhận (smile)). Theo nguyên tắc
đó trình duyệt của bạn sẽ ưu tiên cho các CSS nội tuyến > CSS bên trong > CSS
bên ngoài > CSS mặc định của trình duyệt.
Ví dụ:
Trong một trang web có liên kết tới file style.css có nội dung như sau:
p {
color:#333;
text-align:left;
width:500px
}
trong thẻ giữa thẻ cũng có một đoạn CSS liên quan:
p {
background-color:#FF00FF;
text-align:right;
width:100%;
height:150px
}
trong phần nội dung trang web đó cũng có sử dụng CSS nội tuyến:
Khi thực thi CSS trình duyệt sẽ đọc hết tất cả các nguồn chứa style rồi sẽ tổng hợp
lại vào một CSS ảo và nếu có sự trùng lắp các thuộc tính CSS thì nó sẽ lấy thuộc
Trang 19
Simple CSS Standard Edition WallPearl
tính CSS có mức ưu tiên cao hơn. Như ví dụ trên chúng ta sẽ thấy CSS cuối cùng
mà phần tử p nhận được là:
p {
background-color:#FF00FF;
width:100%;
height:200px;
text-align:center;
border:1px solid #FF0000;
color:#000
}
Vậy có cách nào để thay đổi độ ưu tiên cho một thuộc tính nào đó? Thật ra thì
trong CSS đã có sẵn một thuộc tính giúp chúng ta thực hiện điều này, đó chính là
thuộc tính !important. Chỉ cần bạn đặt thuộc tính này sau một thuộc tính nào đó
theo cú pháp selector { property:value !important } thì trình duyệt sẽ hiểu đây là
một thuộc tính được ưu tiên. Bây giờ, chúng ta cùng xét lại ví dụ trên nhưng có đặt
thêm một số thuộc tính !important vào xem kết quả như thế nào nhé.
p {
width:500px;
text-align:left !important;
color:#333 !important
}
p {
background-color:#FF00FF;
width:100%;
height:150px !important;
text-align:right;
}
Trang 20
Simple CSS Standard Edition WallPearl
Phần CSS sẽ tác động lên thuộc tính p là:
p {
background-color:#FF0000;
width:100%;
height:150px !important;
text-align:left !important;
border:1px solid #FF0000;
color:#333 !important
}
Lưu ý: Cùng một thuộc tính cho một selector thì nếu cả hai thuộc tính đều
đặt !important thì cái sau được lấy.
Trang 21
Simple CSS Standard Edition WallPearl
Bài 3: Background
Trong bài học này chúng ta sẽ được học về cách định màu nền/ảnh nền cho một
trang web cũng như các kỹ thuật định vị, điều chỉnh ảnh nền.
3.1. Màu nền (thuộc tính background-color):
Thuộc tính background-color giúp định màu nền cho một thành phần trên
trang web. Các giá trị mã màu của background-color cũng giống như color nhưng
có thêm giá trị transparent để tạo nền trong suốt.
Ví dụ sau đây sẽ chỉ cho chúng ta biết cách sử dụng thuộc tính background-color
để định màu nền cho cả trang web, các thành phần h1, h2 lần lượt là xanh lơ, đỏ
và cam.
body {
background-color:cyan
}
h1 {
background-color:red
}
h2 {
background-color
range }
3.2. Ảnh nền (thuộc tính background-image):
Việc sử dụng ảnh nền giúp trang web trông sinh động và bắt mắt hơn. Để
chèn ảnh nền vào một thành phần trên trang web chúng ta sử dụng thuộc tính
background-image.
Trang 22
Simple CSS Standard Edition WallPearl
Bây giờ chúng ta sẽ cùng làm một ví dụ minh họa
để xem thuộc tính background-image sẽ hoạt động
ra sao. Đầu tiên hãy tìm một tấm ảnh mà bạn thích,
ở đây Pearl sẽ lấy tấm ảnh logo của blog Pearl
Sau đó, chúng ta sẽ viết CSS để đặt logo này làm
ảnh nền trang web như sau:
body {
background-image:url(logo.png)
}
h1 {
background-color:red
}
h2 {
background-color
range }
p {
background-color: FDC689
}
Như các bạn đã thấy chúng ta sẽ phải chỉ định đường dẫn của ảnh trong cặp ngoặc
đơn sau url. Do ảnh đặt trong cùng thư mục với file style3.css nên chúng ta chỉ cần
ghi abc.jpg. Nhưng nếu chúng ta tạo thêm một thư mục img trong thư mục thì
chúng ta sẽ phải ghi là background-image:url(img/abc.jpg). Đôi khi nếu không
chắc lắm bạn có thể dùng đường dẫn tuyệt đối cho ảnh.
3.3. Lặp lại ảnh nền (thuộc tính background-repeat):
Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một đối tượng
lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn
thừa. Thuộc tính background-repeat cung cấp cho chúng ta các điều khiển giúp
kiểm soát trình t...