1. HTML
  2. HTML Căn bản
  3. HTML CSS Style

html CSS Style

Định nghĩa HTML CSS

Cascading Style Sheets (CSS) được sử dụng để định dạng bố cục của một trang web.

Với CSS, chúng ta có thể kiểm soát màu sắc, phông chữ, kích thước của văn bản, khoảng cách giữa các phần tử, cách các phần tử được trình bày và bố cục, hình ảnh nền hoặc màu nền sẽ được sử dụng, hiển thị nội dung trên các màn hình khác nhau cho các thiết bị và kích thước màn hình khác nhau, và nhiều hơn nữa!

Từ Cascading có nghĩa là một kiểu được áp dụng cho phần tử cha và cũng sẽ áp dụng cho tất cả các phần tử con trong phần tử cha. Vì vậy, nếu bạn đặt màu của nội dung thành "xanh lam", tất cả các tiêu đề, đoạn văn và các thành phần văn bản khác trong nội dung cũng sẽ có cùng màu (trừ khi bạn chỉ định một màu khác)!

Sử dụng CSS

CSS có thể được thêm vào tài liệu HTML bằng 3 cách.

  • Inline - Sử dụng thuộc tính style bên trong các phần tử HTML
  • Internal - Sử dụng phần tử HTML <style> bên trong cặp thẻ <head></head>
  • External - Sử dụng phần tử HTML <link> để liên kết đến một tệp CSS bên ngoài

Cách phổ biến nhất để thêm CSS là chúng ta code các style trong các tệp CSS bên ngoài. Tuy nhiên, trong bài đọc này, chúng ta sẽ sử dụng các kiểu inline và internal để cho dể theo dõi kết quả các bài ví dụ

CSS Inline

CSS inline thường được sử dụng để áp dụng một thuộc tính style cho một phần tử HTML.

Ví dụ

<h1 style="color:green;">Heading 1 có màu xanh</h1>
<p style="color:red;">Đoạn văn bản có màu đỏ.</p>

Xem kết quả

CSS Internal

CSS internal thường được sử dụng để xác định style cho một trang HTML.

CSS internal phải được định nghĩa bằng phần tử HTML <style> và được đặt bên trong cặp thẻ <head></head> của trang HTML.

Ví dụ

<style>
body {background-color: powderblue;}
h1   {color: green;}
p    {color: red;}
</style>

Xem kết quả

CSS External

File định dạng CSS bên ngoài thường được sử dụng nhiều nhất để xác định style định dạng cho nhiều trang HTML trong một trang web.

Để sử dụng file CSS liên kết từ bên ngoài, chúng ta sử dụng thẻ <link> để liên kết tới trang định dạng CSS vào trong cặp thẻ <head></head> của mỗi trang HTML cần định dạng CSS.

Ví dụ

<head>
  <link rel="stylesheet" href="styles.css">
</head>

<h1>Dòng tiêu đề heading 1</h1>
<p>Dòng văn bản paragraph.</p>

Xem kết quả

File định dạng CSS bên ngoài có thể được viết bằng bất kỳ trình soạn thảo văn bản nào. File không được chứa bất kỳ mã HTML nào và phải được lưu bằng phần mở rộng .css.

File CSS trong ví dụ trên được lưu với tên là "styles.css", thư mục chứa file được đặt cùng cấp với file HTML, code như sau:

body {
  background-color: powderblue;
}
h1 {
  color: green;
}
p {
  color: red;
}

Các Website lớn với lượng mã nguồn khổng lồ thường sử sụng file CSS liên kết từ bên ngoài, điều này giúp ích cho bạn rất nhiều trong việc sửa đổi, bảo trì code

CSS Color, Font, Size

Chúng ta sẽ tìm hiểu thêm về một số thuộc tính CSS thường sử dụng nhiều.

Thuộc tính CSS color xác định màu văn bản sẽ được hiển thị.

Thuộc tính CSS font-family xác định phông chữ sẽ được hiển thị.

Thuộc tính CSS font-size xác định kích thước văn bản sẽ được hiển thị.

Ví dụ

<style>
h1 {
  color: green;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>

Xem kết quả

CSS Border

Thuộc tính CSS border dùng để xác định một đường viền xung quanh một phần tử HTML. Và gần như tất cả các phần tử HTML đều có thể áp dụng thuộc tính CSS này.

Ví dụ

<style>
p {
  border: 2px solid powderblue;
}
</style>

Xem kết quả

CSS Padding

Thuộc tính CSS padding xác định một khoảng đệm (khoảng trắng) giữa văn bản và đường viền.

Ví dụ

<style>
p {
  border: 2px solid powderblue;
  padding: 30px;
}
</style>

Xem kết quả

CSS Margin

Thuộc tính CSS margin xác định một bản lề (khoảng trắng) bên ngoài đường viền.

Ví dụ

<style>
p {
  border: 2px solid powderblue;
  margin: 50px;
}
</style>

Xem kết quả

Tóm tắt bài đọc

  • Sử dụng thuộc tính style để tạo định dạng hiển thị kiểu inline
  • Sử dụng phần tử HTML <style> để xác định định dạng CSS internal
  • Sử dụng phần tử HTML <link> để tham chiếu đến tệp CSS bên ngoài external
  • Sử dụng phần tử HTML <head> để chứa các phần tử <style> và <link>
  • Sử dụng thuộc tính CSS color cho màu của văn bản
  • Sử dụng thuộc tính CSS font-family cho phông chữ của văn bản
  • Sử dụng thuộc tính CSS font-size cho các kích thước của văn bản
  • Sử dụng thuộc tính CSS border cho đường viền
  • Sử dụng thuộc tính CSS padding cho khoảng trống bên trong đường viền
  • Sử dụng thuộc tính CSS margin cho không gian bên ngoài đường viền

  1. HTML
  2. HTML Căn bản
  3. HTML CSS Style


BÀI VIẾT LIÊN QUAN

<b>
<a>

BÀI VIẾT CHỦ ĐỀ KHÁC