IMG-LOGO
×

Tài Liệu Môn Học

Khoá học lập trình HTML/CSS

Nhập Môn HTML

[Video] Giới thiệu về lập trình web - HTML/CSS [Video] Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS [Video] Hướng dẫn debug/test/develop trên trình duyệt web -HTML/CSS

Tìm Hiểu Thẻ HTML5

[Video] Formatting Text using Tags - html tags [Video] Creating Hyperlinks and Anchors (phần 1) - html tags [Video] Creating Hyperlinks and Anchors (phần 2) - html tags [Video] Cách dùng thẻ img và map để hiển thị hình ảnh html - HTML/CSS [Video] Tìm hiểu về đường dẫn file (path file) trong HTML/CSS

CSS

[Video] Tìm hiểu thuộc tính trong thẻ html [Video] Giới thiệu CSS & Sử dụng các thuộc tính cơ bản [Video] Hướng dẫn tách biệt CSS và HTML [Video] Xử lý Event trong CSS (:hover, :active, :link, ...) - Lập trinh HTML/CSS

Table & CSS

[Video] Tìm hiểu table trong HTML/CSS - HTML/CSS

Form & CSS

[Video] Thiết kế form trong HTML/CSS/JS [Video] Tìm hiểu tag videos, audio trong HTML/CSS/JS [Video] Bài tập - Thiết kế form gửi email - Lập trình HTML/CSS/JS

Thiết Kế Layout

[Video] Tìm hiểu Frame qua ví dụ quản lý khách sạn HTML/CSS [Video] Hướng dẫn tạo layout bằng thẻ Div căn bản [Video] Hướng dẫn thiết kế layout bằng thẻ div nâng cao (Thiết kế giao diện web gokisoft)




Trang Chủ Học HTML5 - CSS3 HTML Styles - Các phong cách trong HTML - CSS

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

by GokiSoft.Com - 10:58 22/05/2020 2,238 Lượt Xem

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




Bình luận



Chia sẻ từ lớp học

Tài Liệu Tham Khảo

Đã sao chép!!!