Bài 13: Định kiểu HTML với CSS

Định kiểu HTML với CSS

 hinh

Định kiểu HTML với CSS

CSS là tên viết tắt của Cascading Style Sheets

Định kiểu có thể được thêm vào các phần tử HTML theo 3 cách:

  • Inline( trong một dòng) – sử dụng một thuộc tính style trong các phần tử HTML
  • Internal(bên trong) – sử dụng một phần tử <style> trong phần head của trang HTML
  • External(bên ngoài) – sử dụng một hoặc nhiều tệp CSS bên ngoài

Cách phổ biến nhất để thêm một định kiểu là giữ các định kiểu nằm ở các tệp CSS tách riêng rẽ. Nhưng trong bài viết này chúng tôi sử dụng định kiểu bên trong (Internal), bởi vì nó có thể dễ dàng demo và dễ dàng hơn để bạn có thể tự mình thử làm.

lamp Bạn có thể tìm hiểu nhiều hơn về CSS trong các bài học về CSS của chúng tôi.

Định kiểu trong một dòng

Định kiểu trong một dòng được dùng để áp dụng định kiểu duy nhất với một phần HTML.

Định kiểu trong một dòng sử dụng thuộc tính style .

Dưới đây là ví dụ thay đổi màu sắc văn bản của<h1>phần tử này sẽ chuyển chữ sang màu xanh:

Ví dụ 1

<h1 style=“color:blue;”>Đây là một tiêu đề màu xanh</h1>

Xem demo ví dụ 1

Định kiểu bên trong

Định kiểu bên trong sử dụng để xác định kiểu cho một trang của HTML.

Định kiểu bên trong được định nghĩa trong thẻ <head> của trang HTML với phần tử <style>:

Ví dụ 2

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1   {color:blue;}
p    {color:green;}
</style>
</head>
<body><h1>Đây là một tiêu đề</h1>
<p>Đây là một đoạn văn.</p></body>
</html>

Xem demo ví dụ 2

Định kiểu bên ngoài

Định kiểu bên ngoài được sử dụng để định kiểu cho nhiều trang.

Với định kiểu bên ngoài, bạn có thể thay đổi diện mạo của toàn bộ trang web bằng cách thay đổi trong một tệp CSS!

Để sử dụng một định kiểu bên ngoài, thêm một liên kết đến nó đặt trong thẻ  <head> của trang HTML:

Ví dụ 3

<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” href=“styles.css”>
</head>
<
body><h1>Đây là một tiêu đề</h1>
<p>Đây là một đoạn văn.</p></body>
</html>

Xem demo ví dụ 3

Định kiểu 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. Tệp này không nên chứa thẻ HTML. Tệp định kiểu này phải được lưu với đuôi là .css 

Dưới đây nội dung được lưu trong “styles.css” :

body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}

CSS Fonts

Thuộc tính color của CSS xác định màu sắc của văn bản được sử dụng  cho các phần tử HTML.

Thuộc tính font-family của CSS xác định các font chữ được sử dụng  cho các phần tử HTML.

Thuộc tính font-size của CSS xác định kích thước chữ được sử dụng cho các phần tử HTML.

Ví dụ 4

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p  {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body><h1>Đây là một tiêu đề</h1>
<p>Đây là một đoạn văn.</p></body>
</html>

Xem demo ví dụ 4

Mô hình khung với CSS

Mỗi phần tử HTML có một khung bao quanh nó thậm chí bạn không thể nhìn thấy.

Thuộc tính border của CSS được định nghĩa đường biên xung quanh phần tử HTML:

Ví dụ 5

p {
border: 1px solid black;
}

Xem demo ví dụ 5

Thuộc tính padding của CSS xác định một phần đệm (khoảng trống) phía trong đường biên:

Ví dụ 6

p {
border: 1px solid black;
padding: 10px;
}

Xem demo ví dụ 6

Các thuộc tính  margin của CSS xác định không gian bên ngoài đường biên:

Ví dụ 7

p {
border: 1px solid black;
padding: 10px;
margin: 30px;
}

Xem demo ví dụ 7

lamp Ví dụ trên CSS sử dụng px để xác định kích thước bằng pixel.

Thuộc tính id

Tất cả các ví dụ trên đều sử dụng CSS để định kiểu cho toàn bộ các phần tử HTML trên trang, ví dụ ở trên định dạng này dùng cho thẻ p.

Để định kiểu cho một phần tử đặc biệt, trước hết thêm một thuộc tính id cho phần tử:

<p id=“p01”>I am different</p>

rồi định nghĩa một định dạng khác cho phần tử có id tương ứng ở trên:

Ví dụ 8

p#p01 {
color: blue;
}

Xem demo ví dụ 8

Thuộc tính class

Để định kiểu cho một dạng đặc biệt (class) của các phần tử, thêm một thuộc tính class cho phần tử:

<p class=“error”>I am different</p>

Bây giờ bạn có thể định nghĩa một định dạng khác cho các phần tử sử dụng class này:

Ví dụ 9

p.error {
color: red;
}

Xem demo ví dụ 9

lamp Sử dụng id để định kiểu cho một phần tử. Sử dụng class giải quyết  một nhóm các phần tử.

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

  • Sử dụng thuộc tính style của HTML để định dạng kiểu trên một dòng
  • Sử dụng phần tử  <style> của HTML để định nghĩa một CSS bên trong
  • Sử dụng phần tử  <link> của HTML để  tham chiếu đến một tệp CSS từ bên ngoài
  • Sử dụng phần tử  <head> của HTML để  chứa các phần tử  <style> và <link> 
  • Sử dụng thuộc tính color của CSS để xác định màu săc của văn bản
  • Sử dụng thuộc tính font-family của CSS để xác định font chữ của văn bản
  • Sử dụng thuộc tính font-size của CSS để xác định kích thước chữ
  • Sử dụng thuộc tính border của CSS hiển thị đường biên xung quanh phần tử
  • Sử dụng thuộc tính padding của CSS định nghĩa vùng đệm phía trong đường biên
  • Sử dụng thuộc tính margin của CSS định nghĩa không gian bên ngoài đường biên

Các thẻ định dạng trong HTML

Thẻ Mô tả
<style> Định nghĩa thông tin định kiểu cho một tài liệu HTML
<link> Định nghĩa một liên kết giữa một tài liệu với một tài nguyên bên ngoài

 

Các thẻ:

Có thể bạn sẽ thích…

Trả lời

EnglishVietnamese