Style trong HTML

  • Nguyễn Lê Điệp
  • 18-12-2016
  • 190
  • 0
  • 1
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.

    Thiết lập phong cách cho trang web hoặc riêng một phần tử trong HTML. Chúng ta có thể sử dụng các thuộc tính style trong HTML.

    Thuộc tính style trong HTML

    Để thiết lập style cho một phần tử trong HTML ta có cú pháp sau
    <tênthẻ style="thuộctính:giátrị;">

    Màu nền trong HTML

    Ở ví dụ bên dưới chúng ta sẽ đặt màu nền violet với thuộc tính background cho toàn bộ trang với thẻ <body>
    <body style="background:violet;">
    <pre>
        Đêm không trăng mây mờ sương lạnh giá
    
        Không có em tim anh hóa thành băng
    
        Ước gì nhìn sang có em bên cạnh
    
        Để sưởi ấm băng đá kia thành sông.
    </pre>
    </body>
    Xem ví dụ

    Màu chữ trong HTML

    Có thể thêm màu của chữ trong HTML bằng thuộc tính color. Ở ví dụ bên dưới chúng ta có tất cả 4 màu cho 4 câu thơ của 4 thẻ <pre> khác nhau.
    <pre style="color:red">
        Đêm không trăng mây mờ sương lạnh giá
    </pre>
    <pre style="color:blue">
        Không có em tim anh hóa thành băng
    </pre>
    <pre style="color:violet">
        Ước gì nhìn sang có em bên cạnh
    </pre>
    <pre style="color:yellow">
        Để sưởi ấm băng đá kia thành sông.
    </pre>
    Xem ví dụ

    Phông chữ trong HTML

    Các bạn có thể chỉnh phông chữ trong HTML theo ý thích của mình. Ở ví dụ dưới chúng ta có 4 phông chữ cho bốn câu thơ trong 4 thẻ <pre> với thuộc tính font-family.
    <pre style="font-family:verdana">
    	Đêm không trăng mây mờ sương lạnh giá
    </pre>
    <pre style="font-family:courier">
    	Không có em tim anh hóa thành băng
    </pre>
    <pre style="font-family:tahoma">
    	Ước gì nhìn sang có em bên cạnh
    </pre>
    <pre style="font-family:arial">
    	Để sưởi ấm băng đá kia thành sông.
    </pre>
    Xem ví dụ

    Cỡ chữ trong HTML

    Chúng ta có thể chỉnh cỡ chữ trong HTML theo từng thẻ khác nhau bằng thuộc tính font-size. Với 4 câu thơ bên dưới ta có 4 cỡ chữ từ nhỏ tới lớn của 4 thẻ <pre> khác nhau.
    <pre style="font-size:25px">
    	Đêm không trăng mây mờ sương lạnh giá
    </pre>
    <pre style="font-size:20px">
    	Không có em tim anh hóa thành băng
    </pre>
    <pre style="font-size:15px">
    	Ước gì nhìn sang có em bên cạnh
    </pre>
    <pre style="font-size:10px">
    	Để sưởi ấm băng đá kia thành sông.
    </pre>
    Xem ví dụ

    Canh chỉnh lề trong HTML

    Với thuộc tính text-align chúng ta có thể canh lề cho một phần tử nào đó trong HTML. Có thể canh trái, canh giữa, canh phải và canh đều hai bên.
    <pre style="text-align:left">
    	Đêm không trăng mây mờ sương lạnh giá
    </pre>
    <pre style="text-align:center">
    	Không có em tim anh hóa thành băng
    </pre>
    <pre style="text-align:right">
    	Ước gì nhìn sang có em bên cạnh
    </pre>
    <pre style="text-align:justify">
    	Để sưởi ấm băng đá kia thành sông.
    </pre>
    Xem ví dụ

    Lời kết

    Qua bài học này chúng ta có thể sử dụng các thuộc tính trong HTML với
    • background cho màu nền
    • color cho màu văn bản, màu chữ
    • font-family kiểu chữ cho văn bản
    • font-size cỡ chữ của văn bản
    • text-align canh chỉnh văn bản
    Chúc các bạn học tốt!cheeky
    Từ khóa:

    Style trong HTML

    Style trong HTML

    Style trong HTML

    Style trong HTML
    Style trong HTML
    1 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    464
    - Hôm qua:
    904
    - Tuần này:
    4.926
    - Tuần trước:
    6.504
    - Tháng này:
    19.083
    - Tháng trước:
    24.702
    - Năm này:
    136.474
    - Năm trước:
    17.373
    - Tổng cộng:
    153.847