By GokiSoft.com| 10:58 22/05/2020|

Tài Liệu HTML

HTML Styles - Các phong cách trong HTML - CSS

CSS là viết tắt của Casading Style Sheets(Các dải phong cách xếp tầng).

CSS tiết kiệm rất nhiều công việc. Nó có thể điều khiển bố cục của nhiều trang web cùng một lúc.

CSS = Styles and Colors

Manipulate Text

Colors, Boxes

Tạo kiểu HTML bằng CSS

CSS mô tả cách mà các thành phần HTML được hiển thị trên màn hình, giấy, hoặc các phương tiện truyền thông khác.

CSS có thể được thêm vào thành phần HTML bằng 3 cách:

Trên dòng - Bằng cách sử dụng thuộc tính phong cách trong thành phần HTML
Nội bộ - Bằng cách sử dụng một thành phần <style> trong phần <head>
Bên ngoài - Bằng cách sử dụng một file CSS bên ngoài

Các phổ biến nhất để thêm CSS, là giữ các phong cách trong các file CSS tách rời.

Tuy nhiên, tại đây chúng ta sẽ tạo kiểu dùng trên dòng và nội bộ, bởi vì nó tường minh, và dễ dàng hơn cho bạn tự thử.

Ghi chú: Bạn có thể học nhiều hơn nữa về CSS trong hướng dẫn về CSS.

Inline CSS

Một CSS trên dòng thường được dùng để áp dụng một phong cách duy nhất cho một phần tử HTML duy nhất.

Một CSS trên dòng dùng thuộc tính phong cách của một thành phần HTML.

Đây là ví dụ đặt màu chữ của thành phần <h1> thành màu xanh:

ví dụ

<h1 style="color:blue;">This is a Blue Heading</h1>

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a Blue Heading</h1>

</body>
</html>

Internal CSS

Một CSS nội bộ được dùng dể định nghĩa một phong cách cho một trang HTML duy nhất.

Một CSS nội được định nghĩa trong phần <head> của một trang HTML, bên trong một thành phần <style>:

ví dụ

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External CSS

Một dải phong cách bên ngoài được dùng để định nghĩa cho rất nhiều trang HTML.

Với một dải phong cách bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web, bằng cách thay đổi một file!.

Để sử dụng một dải phong cách bên ngoài, thêm một liên kết đến nó trong phần <head> của trang HTML:

ví dụ

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Một dải phong cách bên ngoài có thể được viết với bất kì trình soạn thảo văn bản nào. File phải không chứa bất kì code HTML nào, và phải được lưu với một đuôi .css.

"styles.css" sẽ được trông thấy như này:

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

CSS Fonts

Thuộc tính color của CSS định nghĩa màu chữ được dùng.

Thuộc tính font-family của CSS định nghĩa phông chữ được dùng.

Thuộc tính font-size của CSS định nghĩa kích thước chữ được dùng.

ví dụ

<!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>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

<!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>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS Border

Thuộc tính border trong CSS định nghĩa một viền xung quanh một thành phần HTML:

ví dụ

p {
  border: 1px solid powderblue;
}

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

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

CSS Padding

Thuộc tính padding của CSS định nghĩa một phần đệm(khoảng không) giữa văn bản và viền:

ví dụ

p {
  border: 1px solid powderblue;
  padding: 30px;
}

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

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

CSS Margin

Thuộc tính margin trong CSS định nghĩa một phần lề (khoảng không) bên ngoài viền:

ví dụ

p {
  border: 1px solid powderblue;
  margin: 50px;
}

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

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>

Thuộc tính id

Để xác định một phong cách cụ thể cho một thành phần đặc biệt, thêm một thuộc tính id vào thành phần:

<p id="p01">I am different</p>

Sau đó định nghĩa một phong cách cho thành phần đó với một id cụ thể:

ví dụ

#p01 {
  color: blue;
}

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

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>

</body>
</html>

Ghi chú: id của một thành phần nên là duy nhất trong một trang, vì bộ chọn id được dùng để chọn một thành phần duy nhất.

Thuộc tính class

Để định nghĩa một phong cách cho các loại thành phần đặc biệt, thêm một thuộc tính class vào các thành phần:

<p class="error">I am different</p>

Sau đó định nghĩa phong cách cho các thành phần với class cụ thể:

ví dụ

p.error {
  color: red;
}

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

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class="error">I am different.</p>
<p>This is a paragraph.</p>
<p class="error">I am different too.</p>

</body>
</html>

Các tham chiếu External(External References)

Các dải phong cách có thể được tham chiếu với một URL đầy đủ hoặc một đường dẫn liên quan đến trang web hiện tại.

Ví dụ này sử dụng một URL đầy đủ để liên kết một dải phong cách:

ví dụ

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Ví dụ này liên kết đến một dải phong cách được đặt trong thư mục html trên web site hiện tại:

ví dụ

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

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Ví dụ này liên kết đến một dải phong cách được đặt cùng thư mục với trang web hiện tại:

ví dụ

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

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Bạn có thể đọc thêm về các đường dẫn file trong chương HTML File Paths.

Tóm tắt chương

Dùng thuộc tính HTML style để tạo kiểu trên dòng
Dùng thành phần HTML <style> để định nghĩa CSS nội bộ
Dùng thành phần HTML <link> để tham chiếu đên file CSS bên ngoài
Dùng thành phần HTML <head> để chứa thành phần <style> và <link>
Dùng thuộc tính CSS color cho màu chữ
Dùng thuộc tính CSS font-family cho font chữ
Dùng thuộc tính CSS font-size cho kích cỡ chữ
Dùng thuộc tính CSS border cho viền chữ
Dùng thuộc tính CSS padding cho các khoảng không bên trong viền
Dùng thuộc tính CSS margin cho các khoảng không bên ngoài viền

HTML Styles - Các phong cách trong HTML - CSS

CSS = Styles and Colors

Tạo kiểu HTML bằng CSS

Inline CSS

ví dụ

Internal CSS

ví dụ

External CSS

ví dụ

CSS Fonts

ví dụ

CSS Border

ví dụ

CSS Padding

ví dụ

CSS Margin

ví dụ

Thuộc tính id

ví dụ

Thuộc tính class

ví dụ

Các tham chiếu External(External References)

ví dụ

ví dụ

ví dụ

Tóm tắt chương

Tags:

Phản hồi từ học viên

5

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó