[HTML/HTML5] Phần 13: Phong cách CSS trong HTML

79 lượt xem

Trong bài này, bạn sẽ tìm hiểu về CSS và các cách sử dụng CSS trong HTML. Để tìm hiểu chi tiết hơn về CSS, mời bạn xem series bài viết chuyên về CSS sẽ được viết trong thời gian sắp tới.

Phong cách HTML với CSS
CSS được viết từ cụm từ Cascading Style Sheets, nghĩa là tập tin định kiểu theo tầng, mô tả các các phần tử HTML được hiển thị trên giao diện. CSS giúp tiết kiệm thời gian thiết kế giao diện Web và kiểm soát bố cục của tất cả trang web chỉ 1 lần duy nhất.

CSS có thể thêm vào các phần tử HTML theo 3 cách:

  • Nội dòng (inline): dùng thuộc tính style trong các phần tử HTML
  • Bên trong HTML (Internal): sử dụng phần tử <style> bên trong phần <head> của trang web
  • Bên ngoài HTML (External): sử dụng 1 tập tin CSS độc lập và nhúng tập tin này vào trang web.

Các phổ biến nhất để thêm CSS vào HTML là lưu các phong cách ở các tập tin độc lập. Tuy nhiên, chúng ta có thể dùng phong cách nội dung hoặc bên trong HTML, bởi vì 2 cách này dễ trình bày và chỉnh sửa tiện hơn.

CSS nội dòng
CSS nội dòng được dùng để áp dụng 1 phong cách duy nhất vào phần tử HTML đơn. CSS nội dòng được viết trong thuộc tính style. Sau đây là ví dụ thêm vào blue vào phần tử h1.

<h1 style="color:blue;">Đề mục này có chữ màu xanh dương (blue) --- dammio.com.</h1>

CSS bên trong HTML
CSS bên trong HTML được dùng để định nghĩa 1 phong cách cho 1 trang HTML. CSS bên trong được định nghĩa ở phần head, trong phần tử style. Trong ví dụ sau, màu nền trang web có màu vàng (background-color: yellow;), màu đề mục h1 là màu xanh dương blue và màu đoạn văn bản p là màu đỏ (red).

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: yellow;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>Đây là đề mục --- dammio.com.</h1>
<p>Đây là đoạn văn bản.</p>

</body>
</html>

CSS bên ngoài HTML
CSS bên ngoài HTML được dùng để định nghĩa phong cách cho nhiều trang HTML. Với cách này, bạn có thể thay đổi toàn bộ giao diện website chỉ trong 1 tập tin duy nhất. Nội dung css sẽ được lưu vào các tập tin *.css và nhúng vào tập tin HTML ở phần head. Ví dụ sau nhúng tập tin dammio.css vào trang web có tên là index.html như sau.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="dammio.css">
</head>
<body>

<h1>Đây là đề mục --- dammio.com.</h1>
<p>Đây là đoạn văn bản.</p>

</body>
</html>

Nội dung tập tin dammio.css có thể được biên tập bởi bất kỳ trình soạn thảo nào (NotePad, NotePad++, WordPad, …). Đây là nội dung tập tin dammio.css.

body {
    background-color: yellow;
}
h1 {
    color: blue;
}
p {
    color: red;
}

Lưu ý là bạn phải đặt tập tin dammio.css và index.html cùng 1 thư mục, nếu có thay đổi về địa chỉ thư mục của tập tin dammio.css, bạn phải điều chỉnh đường dẫn (tương đối) trong tập tin HTML.

Font chữ CSS
Thuộc tính color định nghĩa màu văn bản. Thuộc tính font-family định nghĩa kiểu chữ văn bản. Thuộc tính font-size định nghĩa kích thước văn bản.

Các font chữ phổ biến là Arial, Tahoma, Verdana, Courier và Times New Roman. Kích thước chữ có giá trị đa dạng, thường là 10pt, 9pt, 9.5pt, 120%, …

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: tahoma;
    font-size: 300%;
}
p  {
    color: red;
    font-family: arial;
    font-size: 160%;
}
</style>
</head>
<body>

<h1>Đây là đề mục --- dammio.com.</h1>
<p>Đây là đoạn văn bản.</p>

</body>
</html>

Khung viền CSS (border)
Thuộc tính border định nghĩa khung viền xung quanh 1 phần tử HTML.

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border: 1px solid red;
}
</style>
</head>
<body>

<p>Đây là đoạn văn bản có viền liền mạch, màu đỏ và độ rộng viền là 1px. --- dammio.com</p>

</body>
</html>

CSS Padding
Thuộc tính padding định nghĩa 1 khoảng trống giữa văn bản và khung viền. Ví dụ văn bản sau có khoảng cách đến viền theo bốn hướng (top, bottom, left, right) là 30px.

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border: 1px solid red;
    padding: 30px;
}
</style>
</head>
<body>

<p>Đây là đoạn văn bản --- dammio.com.</p>
<p>Đây là đoạn văn bản --- dammio.com.</p>

</body>
</html>

CSS Margin
Tương tự như thuộc tính padding, thuộc tính margin định nghĩa khoảng cách bên ngoài viền với các phần tử HTML khác. Trong ví dụ sau, khoảng cách từ viền của thẻ p với phần tử h1 và các phần tử khác là 50px.

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border: 1px solid powderblue;
    margin: 50px;
}
</style>
</head>
<body>

<h1>Đề mục h1</h1>
<p>Đây là đoạn văn bản --- dammio.com.</p>
<p>Đây là đoạn văn bản --- dammio.com.</p>
<p>Đây là đoạn văn bản --- dammio.com.</p>

</body>
</html>

Thuộc tính id
Thuộc tính id dùng để định nghĩa 1 phong cách duy nhất cho 1 phần tử nào đó bằng cách thêm thuộc tính id vào phần tử muốn thêm.

<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
    color: blue;
}
</style>
</head>
<body>

<p id="p01">Đoạn văn bản có màu xanh dương, được định nghĩa phong cách với thuộc tính id = p01.</p>

</body>
</html>

Sau đó bạn định nghĩa phong cách cho phần tử với id tên là p01. Bạn phải dùng # trước tên id cần định nghĩa trong CSS. Thuộc tính id phải là duy nhất trong trang HTML, tức chỉ dùng 1 lần 1 tên trong trang HTML mà không trùng nhau.

Thuộc tính class
Trái với id, thuộc tính class dùng để định nghĩa phong cách cho 1 nhóm các phần tử. Trong ví dụ sau, các đoạn văn bản đều có màu chữ là màu đỏ vì được định nghĩa dùng phong cách trong lớp dammio. Phong cách định nghĩa CSS định nghĩa cho class đều có dấu chấm (.) trước tên lớp, ví dụ .dammio.

<!DOCTYPE html>
<html>
<head>
<style>
.dammio {
    color: red;
}
</style>
</head>
<body>

<p class="dammio">Đoạn văn bản số 1</p>
<p class="dammio">Đoạn văn bản số 2</p>
<p class="dammio">Đoạn văn bản số 3</p>
<p class="dammio">Đoạn văn bản số 4</p>

</body>
</html>

Bài tập 1. Cho phong cách p như sau:

p {
    border: 2px solid purple;
    margin: 50px;
    padding: 15px;
}

Hãy cho biết khoảng cách từ văn bản đến các phần tử HTML khác. Bạn có thể trả lời bằng cách comment phía dưới nhé.

Kết luận: Bài viết đã trình bày cho các bạn các kiến thức cơ bản về CSS, để sử dụng thuần thục CSS, bạn nên tự luyện tập thiết kế các trang web, bắt chước theo các trang web đơn giản trên để nâng cao tay nghề.

Bình luận Facebook

Để lại bình luận

2 Comments on "[HTML/HTML5] Phần 13: Phong cách CSS trong HTML"

Thông báo khi có
avatar
1000
Sắp xếp theo:   mới nhất | cũ nhất | nhiều bình chọn nhất
trackback

[…] Đăng ngày 4 Tháng Tám, 20178 Tháng Tám, 2017 bởi dammio 17 lượt xem (adsbygoogle = window.adsbygoogle || []).push({}); << Bài trước Trang mục lục Bài tiếp theo >> […]

trackback

[…] 2017 bởi dammio 2 lượt xem (adsbygoogle = window.adsbygoogle || []).push({}); << Bài trước Trang mục lục Bài tiếp theo […]

wpDiscuz