Lập Trình CSS

Bắt đầu với CSS3

Posted on by ComdyVN

Bắt đầu với CSS3

Trong hướng dẫn này, bạn sẽ học cách thêm thông tin định dạng và style vào các trang web dễ dàng bằng cách sử dụng CSS3. Tuy nhiên, trước khi chúng ta bắt đầu, hãy đảm bảo rằng bạn có một số kiến ​​thức làm việc về HTML.

Nếu bạn mới bắt đầu trong thế giới phát triển web, hãy bắt đầu học HTML từ đây »

Không yêu cầu thêm bất cứ điều gì, hãy bắt đầu học Cascading Style Sheets (CSS) nào.

Thêm CSS vào tài liệu HTML

CSS có thể được đính kèm dưới dạng một tài liệu riêng biệt hoặc được nhúng vào chính tài liệu HTML. Có ba phương pháp thêm CSS vào trong tài liệu HTML:

  • Kiểu nội tuyến – Sử dụng thuộc tính style trong thẻ bắt đầu (thẻ mở) của phần tử HTML.
  • Kiểu nhúng – Sử dụng thẻ <style> trong phần đầu của tài liệu HTML.
  • File CSS bên ngoài – Sử dụng thẻ <link> trỏ đến file CSS bên ngoài.

Trong hướng dẫn này, chúng tôi sẽ trình bày cả ba phương pháp này để chèn CSS vào tài liệu HTML.

Lưu ý: Kiểu nội tuyến có mức độ ưu tiên cao nhất và file CSS bên ngoài có mức độ ưu tiên thấp nhất. Điều đó có nghĩa là nếu bạn chỉ định style cho một phần tử trong cả kiểu nhúng và file CSS bên ngoài, thì các style xung đột trong kiểu nhúng sẽ ghi đè lên file CSS bên ngoài.

Kiểu nội tuyến

Kiểu nội tuyến (inline style) được sử dụng để áp dụng các style duy nhất cho một phần tử bằng cách đặt các quy tắc CSS trực tiếp vào thẻ bắt đầu. Nó có thể được gắn vào một phần tử bằng cách sử dụng thuộc tính style.

Thuộc tính style bao gồm một loạt các cặp thuộc tính và giá trị CSS. Mỗi cặp "property: value" được phân tách bằng dấu chấm phẩy (;), giống như cách bạn viết style CSS vào kiểu nhúng hoặc file CSS bên ngoài. Nhưng nó cần phải nằm trong một dòng tức là không có ngắt dòng sau dấu chấm phẩy, như được trình bày ở dưới đây:

<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>

Sử dụng các kiểu nội tuyến thường được coi là một cách thực hành không tốt. Vì các style CSS được nhúng trực tiếp vào bên trong thẻ HTML, nó làm cho bản trình bày bị trộn lẫn với nội dung của tài liệu; điều này làm cho mã khó duy trì và phủ nhận mục đích sử dụng CSS.

Lưu ý: Không thể tái sử dụng style CSS khi sử dụng kiểu nội suy. Do đó, bạn nên tránh sử dụng kiểu nội suy trong mã của mình. Sử dụng file CSS bên ngoài là cách thực hành tốt để thêm các kiểu vào tài liệu HTML.

Kiểu nhúng

Kiểu nhúng (embedded style) chỉ ảnh hưởng đến tài liệu mà chúng được nhúng vào.

Kiểu nhúng được xác định trong thẻ <head> của tài liệu HTML bằng cách sử dụng thẻ <style>. Bạn có thể định nghĩa số lượng bất kỳ các thẻ <style> trong tài liệu HTML nhưng chúng phải xuất hiện giữa thẻ <head> và </head>. Hãy xem một ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My HTML Document</title>
    <style>
        body { background-color: YellowGreen; }
        p { color: #fff; }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Mẹo: Thuộc tính type của thẻ <style> và <link> (ví dụ type="text/css") định nghĩa ngôn ngữ của style sheet. Thuộc tính này hoàn toàn là thông tin. Bạn có thể bỏ qua điều này vì CSS là ngôn ngữ định kiểu chuẩn và mặc định trong HTML5.

File CSS bên ngoài

File CSS bên ngoài là thực hành tốt nhất khi style CSS được áp dụng cho nhiều trang của trang web.

File CSS bên ngoài định nghĩa các style trong một tài liệu riêng biệt mà bạn có thể liên kết nó với bất kỳ tài liệu HTML nào trên trang web của mình. File CSS bên ngoài là linh hoạt nhất vì bạn có thể thay đổi giao diện của toàn bộ trang web chỉ bằng cách thay đổi một file CSS.

Bạn có thể đính kèm các file CSS bên ngoài theo hai cách – sử dụng thẻ <link> và câu lệnh @import.

Liên kết file CSS bên ngoài

Trước khi liên kết, chúng ta cần tạo một file CSS trước. Hãy mở trình soạn thảo mã yêu thích của bạn và tạo một file mới. Bây giờ, hãy nhập mã CSS sau vào bên trong file này và lưu nó thành “style.css”.

body {
    background: lightyellow;
    font: 18px Arial, sans-serif;
}
h1 {
    color: orange;
}

File CSS bên ngoài có thể được liên kết với tài liệu HTML bằng thẻ <link>. Thẻ <link> được đặt bên trong thẻ <head>, như bạn có thể thấy trong ví dụ sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My HTML Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Mẹo: Trong cả ba phương pháp, sử dụng file CSS bên ngoài là phương pháp tốt nhất để xác định và áp dụng style cho tài liệu HTML. Như bạn có thể thấy rõ ràng với file CSS bên ngoài, các file HTML bị ảnh hưởng yêu cầu các thay đổi tối thiểu trong mã.

Import file CSS bên ngoài

Câu lệnh @import là một cách khác để tải một file CSS bên ngoài. Câu lệnh @import hướng dẫn trình duyệt tải một file CSS bên ngoài và sử dụng style của nó.

Bạn có thể sử dụng nó theo hai cách. Đơn giản nhất là trong tiêu đề của tài liệu của bạn. Lưu ý rằng, các quy tắc CSS khác vẫn có thể được bao gồm trong thẻ <style>. Đây là một ví dụ:

<style>
    @import url("css/style.css");
    p {
        color: blue;
        font-size: 16px;
    }
</style>

Tương tự, bạn có thể sử dụng câu lệnh @import để import file CSS vào trong một file CSS khác.

@import url("css/layout.css");
@import url("css/color.css");
body {
    color: blue;
    font-size: 14px;
}

Lưu ý: Tất cả các câu lệnh @import phải đặt ở đầu file CSS. Bản thân bất kỳ style nào được định nghĩa trong file kiểu sẽ ghi đè các style trong file được imort. Tuy nhiên, bạn không nên sử dụng câu lệnh import một file CSS trong một file CSS khác do vấn đề về hiệu suất.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *