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

Lý Thuyết

01. Giới thiệu về lập trình web - HTML/CSS BT01. Hướng dẫn tạo ra 1 trang web đơn giản nhất - HTML/CSS 02. Hướng dẫn debug/test/develop trên trình duyệt web -HTML/CSS 03. Formatting Text using Tags - html tags 04. Creating Hyperlinks and Anchors (phần 1) - html tags 05. Creating Hyperlinks and Anchors (phần 2) - html tags 06. Introduction to CSS3 (phần 1) - HTML/CSS 07. Introduction event in html/css/javascript - HTML/CSS 08. Bài hoc Formatting Using Style Sheets - HTML/CSS 09. Cách dùng thẻ img và map để hiển thị hình ảnh html - HTML/CSS 10. Cách dùng thẻ div để bố cục trang web (html/css/javascript) 11. Học lập trình html/css/javascript - (function) 12. Học lập trình html/css/javascript - session 15 - part 2(object) 13. Học lập trình html/css/javascript - session 15 - part 3(function + object) 14. Học lập trình html/css/javascript - session 15 - part 4(string) BT02. Bài tập array + javascript - HTML/CSS BT03. Thực hành javascript + onChange + onClick - HTML/CSS BT04.Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS 15. HTML/CSS/Javascript là gì và cách tạo 1 trang web đơn giản nhất. - HTML/CSS 16. HTML/CSS/JS - Tìm hiểu về Path trong HTML/CSS/JS 17. Lập trình HTML/CSS/JS 18. Tìm hiểu table trong HTML/CSS - HTML/CSS 19. Tìm hiểu tag videos, audio trong HTML/CSS/JS 20. Thiết kế form trong HTML/CSS/JS 21. Học lập trình html/css/js qua ví dụ phần 2 - HTML/CSS

Bài Tập

Bài tập - Tạo website giới thiệu thông tin cá nhân - profile page - Lập trình HTML/CSS/JS Bài tập - Thiết kế web truyện tranh - Lập trình HTML/CSS/JS Bài tập - kiểm tra 60 phút - thiết kế website sau - Lập trình HTML/CSS/JS Bài tập - kiểm tra 60 phút - thiết kế blog tin tin học - Lập trình HTML/CSS/JS Bài Tập - Thiết Kế Blog Dạy Học Excel Online - Lập Trình HTML/CSS/JS Bài tập - Thiết kế website bán đồng hồ - Lập trình HTML/CSS/JS Bài thi - Ôn tập HTML/CSS/JS - 60 phút - Web quản lý tin tức

Examination & Test

Bài Thi Lý Thuyết HTML/CSS/JS - 2

Tài Liệu Học

Giới thiệu về HTML5 Trình biên tập HTML Những thuộc tính cơ bản của HTML Các phần tử trong HTML Các thuộc tính trong HTML Thẻ tiêu đề trong HTML HTML Paragraphs - Các đoạn văn bản HTML HTML Styles - Các phong cách của HTML HTML Text Formatting - Định dạng văn bản trong HTML HTML Quotation and Citation Elements - Trích dẫn và các thành phần trích dẫn trong HTML HTML Comments - Các chú thích trong HTML HTML Colors - Màu trong HTML HTML RGB and RGBA Colors - Các màu RGB và RGBA trong HTML HTML HEX Colors - Các màu HEX trong HTML HTML HSL and HSLA Colors - Các màu HSL và HSLA trong HTML HTML Styles - Các phong cách trong HTML - CSS HTML Links - Các liên kết trong HTML HTML Links - Different Colors | Các liên kết trong HTML - Màu sắc khác nhau HTML Links - Create Bookmarks | Các liên kết trong HTML - Tạo các dấu trang HTML Images - Hình ảnh trong HTML HTML Image Maps - Bản đồ hình ảnh trong HTML HTML Background Images - Hình nền trong HTML HTML Picture Element - Các thành phần hình ảnh trong HTML HTML Tables - Bảng trong HTML HTML Lists - Các loại danh sách trong HTML HTML Unordered Lists - Danh sách không theo thứ tự trong HTML HTML Ordered Lists - Danh sách có thứ tự trong HTML HTML Other Lists - Các loại danh sách khác trong HTML HTML Block and Inline Elements - Các thành phần khối và trong hàng HTML HTML The class Attribute - Thuộc tính Class trong HTML HTML The id Attribute - Thuộc tính id trong HTML HTML Iframes HTML JavaScript HTML File Paths - Đường dẫn tệp HTML HTML - The Head Element | Thành phần Head trong HTML HTML Layout Elements and Techniques - Các thành phần bố cục và kĩ thuật trong HTML HTML Responsive Web Design - Thiết kế web phản hồi trong HTML HTML Computer Code Elements - Các thành phần thuộc mã máy tính trong HTML HTML Semantic Elements - Các thành phần có ngữ nghĩa trong HTML HTML Style Guide and Coding Conventions - Hướng dẫn về phong cách và quy ước code trong HTML HTML Entities - Các thực thể trong HTML HTML Symbols - Các biểu tượng trong HTML Using Emojis in HTML - Sử dụng biểu tượng cảm xúc trong HTML HTML Encoding (Character Sets) - Mã hóa HTML (Các bộ ký tự) HTML Uniform Resource Locators - Bộ định vị tài nguyên đồng nhất trong HTML HTML Versus XHTML - HTML đấu với XHTML HTML Forms - Các biểu mẫu trong HTML HTML Form Elements - Các thành phần biểu mẫu trong HTML HTML Input Types - Các kiểu input trong HTML HTML Input Attributes - Các thuộc tính input trong HTML HTML Input form* Attributes - Các thuộc tính form của thành phần input trong HTML




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

by GokiSoft.Com - 10:58 22/05/2020 2,022 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

Phân Loại Bài Viết

Đã sao chép!!!