VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

HTML Tuts

HTML là gì? Các thẻ HTML Định dạng trong HTML Tiêu đề trong HTML Đoạn văn trong HTML Liên kết trong HTML Ảnh trong HTML Table trong HTML Danh sách trong HTML Danh sách có thứ tự Danh sách không có thứ tự Danh sách mô tả Form trong HTML Thuộc tính Style Comment trong HTML Bảng màu trong HTML Thuộc tính chung trong HTML

Các thẻ HTML

Thẻ HTML Marquee Thẻ HTML Textarea HTML DOCTYPE Thẻ HTML Title Thẻ HTML meta Thẻ HTML Div Thẻ HTML Pre Thẻ HTML Code Thẻ HTML Label Thẻ HTML Input Thẻ HTML Button Thẻ HTML HR Thẻ HTML BR Thẻ HTML Script Thẻ HTML NoScript Thẻ HTML b Thẻ HTML Quotes

Bài học HTML

Text Link trong HTML Image Link trong HTML Email Link trong HTML Frame trong HTML Iframe trong HTML Block trong HTML Thiết lập màu nền (background) trong HTML Màu trong HTML Font trong HTML Thẻ embed - Đa phương tiện trong HTML Tạo chữ chạy (Marquee) trong HTML Style Sheet trong HTML Sử dụng Javascript trong HTML Layout trong HTML Tổng hợp thuộc tính trong HTML Sự kiện (Event) trong HTML Các Font tham khảo trong HTML Mã hóa ASCII trong HTML Bảng ASCII trong HTML Các thực thể HTML Mã hóa URL trong HTML Mã hóa các ngôn ngữ chuẩn ISO trong HTML Mã hóa ký tự trong HTML

Câu hỏi phỏng vấn

Phỏng vấn HTML
1 / 3
❮ ❯

Style Sheet trong HTML


Tạo chữ chạy (Marquee) trong HTML
Sử dụng Javascript trong HTML

CSS mô tả cách mà tài liệu được hiển thị trên màn hình. W3C đã tích cực đẩy mạnh sự sử dụng của Style Sheet trên Web từ khi hiệp hội được thành lập năm 1994.

CSS cung cấp các cách dễ dàng và hiệu quả để thiết lập các thuộc tính khác nhau cho các thẻ HTML. Sử dụng CSS, bạn có thể cài đặt các thuộc tính cho một phần tử HTML đã cho. Mỗi thuộc tính có một tên và một giá trị, ngăn cách nhau bởi dấu hai chấm (:). Mỗi thuộc tính ngăn cách bởi dấu chấm phảy (;).

Bạn có thể tham khảo các bài Học CSS cơ bản và nâng cao.


Nội dung chính

  • Ví dụ Style Sheet trong HTML
  • Sử dụng External CSS trong HTML
    • Ví dụ sử dụng External CSS trong HTML
  • Sử dụng Internal CSS trong HTML
    • Ví dụ sử dụng Internal CSS trong HTML
  • Sử dụng Inline CSS trong HTML
    • Ví dụ sử dụng Inline CSS trong HTML

Ví dụ Style Sheet trong HTML

Đây là một ví dụ về cách sử dụng thẻ <font> và các thuộc tính liên kết để thiết lập màu và cỡ font.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ví dụ style HTML - CSS</title>
</head>
<body>
<p><font color="green" size="5">Ví dụ style HTML - CSS</p>
</body>
</html>

Chúng ta có thể viết lại ví dụ trên với sự giúp đỡ của Style Sheet như sau::


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ví dụ style HTML - CSS</title>
</head>
<body>
<p style="color:green;font-size:24px;">Ví dụ style HTML - CSS</p>
</body>
</html>

Kết quả

Ví dụ style HTML - CSS

Bạn có thể sử dụng CSS theo ba cách trong tài liệu HTML:

  • External CSS - Xác định các quy tắc của Style Sheet trong một file riêng rẽ và sau đó bao gồm file đó trong tài liệu HTML bằng cách sử dụng thẻ <link>.
  • Internal CSS - Xác định các quy tắc của khu vực Header của tài liệu HTML bằng cách sử dụng thẻ <style>.
  • Inline CSS - Xác định các quy tắc của Style Sheet một cách trực tiếp song song với các phần tử HTML bằng cách sử dụng thuộc tính style.

Theo từng ví dụ phù hợp, bạn có thể quan sát 3 trường hợp trên như dưới đây.


Sử dụng External CSS trong HTML

Nếu bạn muốn sử dụng chung một Style Sheet nào đó cho các trang khác nhau thì bạn nên tạo một file với đuôi là .css và sau đó bao trong HTML bằng cách sử dụng thẻ <link>.

Ví dụ sử dụng External CSS trong HTML

Giả sử chúng ta xác định một tệp Style Sheet là style.css mà có các quy tắc sau:


.red{
   color: red;
}
.thick{
   font-size:20px;
}
.green{
   color:green;
}

Tại đây chúng ta xác định 3 quy tắc CSS mà sẽ được áp dụng cho 3 lớp khác nhau được xác định cho các thẻ HTML. Tôi đề nghị bạn không nên lo lắng về cách những quy tắc này được xác định bởi vì bạn sẽ học về chúng trong khi học về CSS ở một chương riêng. Bây giờ chúng ta sử dụng tệp CSS ngoại vi ở trên trong tài liệu HTML:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sử dụng External CSS trong HTML</title>
<link rel="stylesheet" type="text/css" href="/html/style.css">
</head>
<body>
<p class="red">Đây là văn bản màu đỏ</p>
<p class="thick">Đây là văn bản dày</p>
<p class="green">Đây là văn bản màu xanh lá</p>
<p class="thick green">Đây là văn bản dày và xanh lá</p>
</body>
</html>

Đoạn code trên sẽ tạo ra kết quả sau:

Đây là văn bản màu đỏ

Đây là văn bản dày

Đây là văn bản màu xanh lá

Đây là văn bản dày và xanh lá


Sử dụng Internal CSS trong HTML

Nếu bạn muốn áp dụng các quy tắc Style Sheet chỉ cho một tài liệu riêng lẻ, thì khi đó bạn có thể bao gồm những quy tắc này trong khu vực Header của tài liệu HTML bằng cách sử dụng thẻ <style>.

Những quy tắc được xác định trong style sheet bên trong (Internal CSS) có quyền ưu tiên cao hơn những quy tắc được xác định trong tệp CSS bên ngoài (External CSS).

Ví dụ sử dụng Internal CSS trong HTML

Chúng ta viết lại ví dụ trên một lần nữa, nhưng lần này chúng ta sẽ viết các quy tắc Style Sheet trong cùng một tài liệu HTML bằng cách sử dụng thẻ <style>:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sử dụng Internal CSS trong HTML</title>
<style type="text/css">
.red{
   color: red;
}
.thick{
   font-size:20px;
}
.green{
   color:green;
}
</style>
</head>
<body>
<p class="red">Đây là văn bản màu đỏ</p>
<p class="thick">Đây là văn bản dày</p>
<p class="green">Đây là văn bản màu xanh lá</p>
<p class="thick green">Đây là văn bản dày và xanh lá</p>
</body>
</html>

Kết quả:

Đây là văn bản màu đỏ

Đây là văn bản dày

Đây là văn bản màu xanh lá

Đây là văn bản dày và xanh lá


Sử dụng Inline CSS trong HTML

Bạn có thể áp dụng các quy tắc style sheet một cách trực tiếp tới bất kỳ một phần tử HTML nào bằng cách sử dụng thuộc tính style của thẻ đó. Điều này sẽ được làm chỉ khi bạn quan tâm tới một thay đổi riêng của bất kỳ một phần tử HTML nào.

Các quy tắc xác định nội tuyến (Inline CSS) có quyền ưu tiên cao hơn các quy tắc xác định bởi một tệp CSS bên ngoài (External CSS) cũng như các quy tắc xác định trong phần tử <style> (Internal CSS).

Ví dụ sử dụng Inline CSS trong HTML

Chúng ta viết lại ví dụ trên một lần nữa, nhưng lần này chúng ta sẽ viết các quy tắc style sheet song song với các phần tử HTML bằng cách sử dụng thuộc tính style trong các phần tử đó.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sử dụng Inline CSS trong HTML</title>
</head>
<body>
<p style="color:red;">Đây là văn bản màu đỏ</p>
<p style="font-size:20px;">Đây là văn bản dày</p>
<p style="color:green;">Đây là văn bản màu xanh lá</p>
<p style="color:green;font-size:20px;">Đây là văn bản dày và xanh lá</p>
</body>
</html>

Kết quả:

Đây là văn bản màu đỏ

Đây là văn bản dày

Đây là văn bản màu xanh lá

Đây là văn bản dày và xanh lá


Tạo chữ chạy (Marquee) trong HTML
Sử dụng Javascript trong HTML

Recent Updates

Liên kết css với htmlMã hóa ký tự trong HTMLMã hóa các ngôn ngữ chuẩn ISO trong HTMLMã hóa URL trong HTMLCác thực thể HTMLBảng ASCII trong HTMLMã hóa ASCII trong HTMLCác Font tham khảo trong HTMLSự kiện (Event) trong HTMLTổng hợp thuộc tính trong HTMLLayout trong HTMLSử dụng Javascript trong HTMLSắp Tết 2026 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2026?

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml