Góc học tập
18/03/2021 09:02:06 PM

Style Sheet cơ bản

Styles chỉ định cách hiển thị của các đối tượng trong trang HTML, bạn có thể định nghĩa màu sắc, hoặc font mà thành phần này sửa dụng, Ví dụ như thẻ xuống dòng

bạn có thể tạo tạo thành phần này đậm hay được in nghiêng.

Một đối tượng định dạng kiểu dáng là một tài liệu nó định nghĩa nhóm các kiểu style.  Mỗi định dạng style có các thuộc tính rieng của nó. Những thuộc tính này có thể áp dụng cho nhiều thnàh phần khác nhau tên trang web. Ví dụ: bạn có thể định nghĩa một định dạng style để thiết lập phần tiêu đề, nó có các thuộc tính như, màu nền xanh, màu chữ đỏ, và font chữ kiểu Arial. 

Trước khi xây dựng style sheets, bạn hãy cố thay đổi các thành phần xuất hiện trên trang web của bạn, số lần yêu cầu sử dụng các thuộc tính của các thành phần này. Ví dụ bạn muốn tạo một trang có các tiêu đề của bài viết có màu đỏ và font chữ kiểu Arial, bạn có thể sẽ sử dụng định dạng style sau đây cho mỗi lần xuất hiện của tiêu đề.

            

                         Xin chào mọi người

            

Một đối tượng định dạng style cho phép bạn chỉ định kiểu định dạng này cho thẻ

trên một mà người ta gọi  là bộ tập hợp, như ví dụ dưới đây.

            h1 { font-family: Arial; color:red }

            h1: Tên bộ tập hợp, font-family: tên thuộc tính, Arial: giá trị thuộc tính.

Theo định nghĩa trên h1 là tập hợp được phát sinh bởi việc định nghĩa định dạng. Việc định nghĩa định dạng này được áp dụng cho tất cả thẻ

trên trang này.

Việc định nghĩa định dạng style này bao gồm tên thuộc tính được quy định bởi giá trị thuộc tính. Tên thuộc tính và giá trị của nó được tách biệt bằng dấu hai chấm (:). Rất nhiều thuộc tính và giá trị của nó theo từng cặp được phân biệt bởi dấu chấp phẩy (;). Bạn có thể áp dụng những định dạng để điều khiển giá trị của các đối tượng trên web bằng cách sử dụng css.

Inline Style Sheets (Định dạng kiểu dáng ngay trên đối tượng)

Định dạng inline là một kiểu định dạng áp dụng cho thuộc tính định dạng của một đối tượng. Ví dụ bạn có thể định nghĩa một định dạng style cho thẻ

có các thuộc tính font chữ kiểu Arial, kiễu chữ nghiêng.

<p style="font-family: arial; font-style: italic">

Bây giờ chúng ta xem xét một ví dụ khác:

<html>

<head>

    <title>Định dạng Inline Style Sheet title>

head>

<body>

    <p style="font-family: arial; font-style: italic">

        Định dạng style sheet được thêm vào thẻ P.<br>

        font-family:arial and font-style:italic

    p>

    <p>

        Và đây là thẻ P không được định dạng.

    p>

body>

html>

Sau khi chạy và xem kết quả ta thấy sự khác nhau giữa hai nội dung có và không có thiết lập thuộc tính định dạng.