TÀI LIỆU ÔN THI WED201C – LẬP TRÌNH CSS
Được tổng hợp bởi team Minthep
CSS (Cascading Style Sheets) là ngôn ngữ định dạng được sử dụng để thiết kế giao diện và trang trí cho các trang web. Tuy nhiên, cần lưu ý rằng CSS không phải là một ngôn ngữ lập trình mà chỉ đóng vai trò định dạng và biểu diễn bố cục cho các thẻ HTML. CSS giúp quản lý và thay đổi giao diện trang web dễ dàng và linh hoạt.
Mỗi quy tắc CSS bao gồm selector (bộ chọn) và declaration block (khối khai báo), có cú pháp như sau:
selector {
property: value;
}
Có 3 cách chính để chèn CSS vào một trang HTML:
External CSS cho phép thay đổi giao diện của toàn bộ website bằng cách chỉnh sửa một file CSS duy nhất.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Nội dung của file mystyle.css:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Lưu ý:
Internal CSS áp dụng phong cách trực tiếp cho một trang HTML duy nhất thông qua thẻ <style>.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS được sử dụng để áp dụng phong cách cho một phần tử cụ thể bằng cách thêm thuộc tính style trực tiếp vào phần tử đó.
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Lưu ý: Inline CSS làm mất đi tính ưu việt của CSS vì trộn nội dung với định dạng, nên hạn chế sử dụng.
CSS cung cấp nhiều cách để định nghĩa màu sắc, trong đó phổ biến nhất là mã HEX và mã RGB.
Mã màu HEX gồm 6 ký tự, mỗi cặp ký tự đại diện cho mức độ màu Red (đỏ), Green (xanh lá), và Blue (xanh dương).Ví dụ:
Mã RGB xác định màu bằng cách kết hợp ba thành phần Red (đỏ), Green (xanh lá), Blue (xanh dương), mỗi thành phần có giá trị từ 0 đến 255.Ví dụ:
RGBA bổ sung thêm giá trị alpha để thiết lập độ trong suốt, ví dụ:
CSS cung cấp nhiều thuộc tính để kiểm soát nền cho các phần tử:
Ví dụ:
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}
Hoặc viết tắt: (Có cái nịt viết được)
body {
background: #ffffff url("img_tree.png") no-repeat fixed right top;
}
Border cho phép xác định kiểu, chiều rộng và màu sắc của viền.
Ví dụ:
p {
border-width: 5px;
border-style: solid;
border-color: red;
}
Viết tắt:
p {
border: 5px solid red;
}
Margin tạo khoảng trống bên ngoài phần tử, bao gồm:
Ví dụ:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Viết tắt:
p {
margin: 25px 50px 75px 100px;
}
Padding tạo khoảng trống bên trong phần tử, gồm:
Ví dụ:
p {
padding-top: 100px;
padding-bottom: 100px;
padding-right: 150px;
padding-left: 80px;
}
Viết tắt:
p {
padding: 25px 50px 75px 100px;
}
Ví dụ:
h1 {
text-align: center;
}
Các thuộc tính thường dùng:
Ví dụ:
h1 {
text-decoration-line: underline;
text-decoration-color: red;
}
Có 5 kiểu định vị phần tử trong CSS:
Phần tử được định vị theo luồng thông thường:
div.static {
position: static;
}
Phần tử được định vị dựa trên vị trí ban đầu:
div.relative {
position: relative;
left: 30px;
}
Phần tử cố định vị trí trên màn hình:
div.fixed {
position: fixed;
bottom: 0;
right: 0;
}
Phần tử định vị theo tổ tiên gần nhất có position khác static:
div.absolute {
position: absolute;
top: 80px;
}
Phần tử sticky chuyển đổi giữa relative và fixed tùy theo vị trí cuộn:
div.sticky {
position: sticky;
top: 0;
}
Pseudo-class được sử dụng để định dạng trạng thái đặc biệt của một phần tử.Ví dụ:
a:link {
color: red;
}
a:hover {
color: blue;
}
Có 3 cách hiển thị block trong CSS:
Có 3 đơn vị đo chính:
Tài liệu này đã tổng hợp toàn bộ kiến thức cơ bản về CSS, giúp bạn nắm vững cú pháp, cách chèn, định dạng và quản lý giao diện web hiệu quả. Chúc bạn ôn thi WED201c thành công!
Được tổng hợp bởi team Minthep
1. Giới thiệu về CSS
CSS (Cascading Style Sheets) là ngôn ngữ định dạng được sử dụng để thiết kế giao diện và trang trí cho các trang web. Tuy nhiên, cần lưu ý rằng CSS không phải là một ngôn ngữ lập trình mà chỉ đóng vai trò định dạng và biểu diễn bố cục cho các thẻ HTML. CSS giúp quản lý và thay đổi giao diện trang web dễ dàng và linh hoạt.
2. Cú pháp CSS
Mỗi quy tắc CSS bao gồm selector (bộ chọn) và declaration block (khối khai báo), có cú pháp như sau:
selector {
property: value;
}
- Selector: Chọn phần tử cần định dạng.
- Property: Thuộc tính định dạng (ví dụ: color, font-size).
- Value: Giá trị của thuộc tính (ví dụ: red, 16px).
3. Các cách chèn CSS
Có 3 cách chính để chèn CSS vào một trang HTML:
- External CSS: Chèn file CSS từ bên ngoài thông qua thẻ <link>.
- Internal CSS: Viết CSS trực tiếp bên trong thẻ <style> trong phần <head>.
- Inline CSS: Áp dụng CSS trực tiếp trên phần tử bằng thuộc tính style.
3.1. External CSS
External CSS cho phép thay đổi giao diện của toàn bộ website bằng cách chỉnh sửa một file CSS duy nhất.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Nội dung của file mystyle.css:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Lưu ý:
- Không thêm khoảng trắng giữa giá trị thuộc tính và đơn vị.
Ví dụ: - Sai: margin-left: 20 px;
- Đúng: margin-left: 20px;
3.2. Internal CSS
Internal CSS áp dụng phong cách trực tiếp cho một trang HTML duy nhất thông qua thẻ <style>.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3.3. Inline CSS
Inline CSS được sử dụng để áp dụng phong cách cho một phần tử cụ thể bằng cách thêm thuộc tính style trực tiếp vào phần tử đó.
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Lưu ý: Inline CSS làm mất đi tính ưu việt của CSS vì trộn nội dung với định dạng, nên hạn chế sử dụng.
4. Màu sắc trong CSS
CSS cung cấp nhiều cách để định nghĩa màu sắc, trong đó phổ biến nhất là mã HEX và mã RGB.
4.1. Mã màu HEX
Mã màu HEX gồm 6 ký tự, mỗi cặp ký tự đại diện cho mức độ màu Red (đỏ), Green (xanh lá), và Blue (xanh dương).Ví dụ:
- #FF0000 - Màu đỏ
- #00FF00 - Màu xanh lá
- #0000FF - Màu xanh dương
- #000000 - Màu đen
- #FFFFFF - Màu trắng
4.2. Mã màu RGB
Mã RGB xác định màu bằng cách kết hợp ba thành phần Red (đỏ), Green (xanh lá), Blue (xanh dương), mỗi thành phần có giá trị từ 0 đến 255.Ví dụ:
- rgb(255, 0, 0) - Màu đỏ
- rgb(0, 255, 0) - Màu xanh lá
- rgb(0, 0, 255) - Màu xanh dương
- rgb(0, 0, 0) - Màu đen
- rgb(255, 255, 255) - Màu trắng
RGBA bổ sung thêm giá trị alpha để thiết lập độ trong suốt, ví dụ:
- rgba(255, 0, 0, 0.5) - Màu đỏ với độ trong suốt 50%.
5. Background trong CSS
CSS cung cấp nhiều thuộc tính để kiểm soát nền cho các phần tử:
- background-color: Màu nền.
- background-image: Hình ảnh nền.
- background-repeat: Điều khiển lặp lại hình ảnh.
- background-attachment: Xác định cuộn hay cố định nền.
- background-position: Vị trí của ảnh nền.
Ví dụ:
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
}
Hoặc viết tắt: (Có cái nịt viết được)
body {
background: #ffffff url("img_tree.png") no-repeat fixed right top;
}
6. Border (Viền)
Border cho phép xác định kiểu, chiều rộng và màu sắc của viền.
- border-width: Chiều rộng viền.
- border-style: Loại viền.
- border-color: Màu viền.
Ví dụ:
p {
border-width: 5px;
border-style: solid;
border-color: red;
}
Viết tắt:
p {
border: 5px solid red;
}
7. Margin (Lề)
Margin tạo khoảng trống bên ngoài phần tử, bao gồm:
- margin-top
- margin-right
- margin-bottom
- margin-left
Ví dụ:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Viết tắt:
p {
margin: 25px 50px 75px 100px;
}
8. Padding (Khoảng cách nội dung)
Padding tạo khoảng trống bên trong phần tử, gồm:
- padding-top
- padding-right
- padding-bottom
- padding-left
Ví dụ:
p {
padding-top: 100px;
padding-bottom: 100px;
padding-right: 150px;
padding-left: 80px;
}
Viết tắt:
p {
padding: 25px 50px 75px 100px;
}
9. Định dạng văn bản (Text)
9.1. Text Alignment (Căn chỉnh văn bản)
- text-align: left: Căn trái.
- text-align: right: Căn phải.
- text-align: center: Căn giữa.
- text-align: justify: Căn đều.
Ví dụ:
h1 {
text-align: center;
}
9.2. Text Decoration (Trang trí văn bản)
Các thuộc tính thường dùng:
- text-decoration-line
- text-decoration-color
- text-decoration-style
- text-decoration-thickness
Ví dụ:
h1 {
text-decoration-line: underline;
text-decoration-color: red;
}
10. Position (Vị trí)
Có 5 kiểu định vị phần tử trong CSS:
- static (mặc định)
- relative
- fixed
- absolute
- sticky
10.1. Static
Phần tử được định vị theo luồng thông thường:
div.static {
position: static;
}
10.2. Relative
Phần tử được định vị dựa trên vị trí ban đầu:
div.relative {
position: relative;
left: 30px;
}
10.3. Fixed
Phần tử cố định vị trí trên màn hình:
div.fixed {
position: fixed;
bottom: 0;
right: 0;
}
10.4. Absolute
Phần tử định vị theo tổ tiên gần nhất có position khác static:
div.absolute {
position: absolute;
top: 80px;
}
10.5. Sticky
Phần tử sticky chuyển đổi giữa relative và fixed tùy theo vị trí cuộn:
div.sticky {
position: sticky;
top: 0;
}
11. Pseudo-Classes
Pseudo-class được sử dụng để định dạng trạng thái đặc biệt của một phần tử.Ví dụ:
a:link {
color: red;
}
a:hover {
color: blue;
}
12. Inline-Block và Display
Có 3 cách hiển thị block trong CSS:
- inline-block: Giống inline nhưng cho phép thiết lập chiều rộng và chiều cao.
- inline: Phần tử hiển thị trong cùng dòng với phần tử khác.
- block: Hiển thị thành một khối, chiếm toàn bộ chiều ngang.
13. Đơn vị đo trong CSS
Có 3 đơn vị đo chính:
- px: Đơn vị tuyệt đối, không thay đổi khi zoom.
- em: Đơn vị tương đối, phụ thuộc vào phần tử cha.
- rem: Đơn vị tương đối, phụ thuộc vào thẻ <html>.
Tài liệu này đã tổng hợp toàn bộ kiến thức cơ bản về CSS, giúp bạn nắm vững cú pháp, cách chèn, định dạng và quản lý giao diện web hiệu quả. Chúc bạn ôn thi WED201c thành công!