Góc học tập
18/03/2021 08:54:30 PM

Các loại Style Sheet

Embedded Style Sheets (Định dạng kiểu dáng nhúng)

Ta thấy rằng nếu ta làm việc với một trang web có nhiều thông tin như các trang web về tin tức, giới thiệu sản phẩm…thì số lần lặp lại của các tiêu đề, nội dung là rất lớn. Nếu ta xây dựng các định dạng kiểu dáng theo kiểu Inline như trên thì rất tốn thời gian và khả năng thay đổi giao diện về sau là rất khó khăn. Có một cách xây dựng định dạng kiểu dáng khác đó là ta xây dựng các định dạng thêm vào các đối tượng có sẳn.

Chúng ta xem ví dụ sau đây:

<html>

<head>

    <title>Định dạng Embedded Style Sheettitle>

    <style type="text/css">

     H1 { font-style:italic;background:yellow;color:red }

    style>

head>

<body>

    <h1>

        Định dạng Inline Style Sheet

    h1>

    <p>

Định dạng inline style sheet, các thuộc tính được đặt bên trong thẻ

    p>

    <h1>

        Định dạng Embeded Style Sheet

    h1>

    <p>

        Embedded style sheet là một phần của trang HTML.

    p>

body>

html>

Ta thấy rằng việc xây dựng đối tượng H1 với các tham số kiểu dáng màu nền…được sử dụng lại trong toàn trang, vì vậy khi bạn muốn thay đổi giao diện bạn chỉ cần vào thay đổi thông tin của H1 trên cùng mà không cần quan tâm đến các đối tượng sử dụng nó.

External (Linked) Style Sheets (Định dạng kiểu dáng mở rộng)

Định dạng kiểu external được xây dựng và lưu trên một tệp tin riêng biệt, tệp tin đó có phần mỡ rộng là .css. Tệp tin này có thể chỉ có các thẻ  chứa các định dạng style được định nghĩa. Chú ý là không có thành phần HTML nào khác với cặp thẻ có thể được sử dụng trong tệp tin này.

Tệp tin này liên kết với trang web bằng cách sử dụng thẻ được định nghĩa giữa cặp thẻ … . Đoạn mã dưới đây biểu thị cách liên kết style sheet sử dụng thuộc tính link.

Ở phần phía trước của mã lệnh, REL=stylesheet  chỉ định trang này sẽ sử dụng một style sheet, HREF="style.css" chỉ định rằng trang web của ta sẽ tham chiếu đến tệp tin style.css còn TYPE="text/css" xác nhận rằng nó tham chiếu đến file .css   nhằm xác định cụ thể đối tượng liên kết.

Chúng ta hãy xem xét đoạn trích ngắn dưới đây, tệp tin đầu tiên đó là tệp tin style.css, đó là tệp tin mỡ rộng chứa các định nghĩa style sheet. Tệp tin thứ hai là tệp tin MyStylePage.html đó là tệp tin HTML tệp tin này sử dụng các định nghĩa style được lưu trong tệp tin , style.css

Tệp tin: style.css (tệp tin lưu các định nghĩa style sheet)

Tệp tin: MyStylePage.html (định dạng được định nghĩa trong tệp tin style.css)

An External Style Sheet

Định dạng External Style Sheet

External Style Sheet là kiểu định dạng chủ được lưu trong một file biệt lập khác.

Một trang HTML có thể chứa cả hai định dạng kiểu dáng external và embedded có sự kết hợp với nhau. Trong nhiều trường hợp việc khai báo định dạng cho một đối tượng cụ thể nào đó bằng định dạng kiểu dáng embedded sẽ ghi đè lên định dạng external trên cùng trang.

» Các tin khác: