TH03109 - Phát triển ứng dụng Web - v1.0

7-Chèn CSS vào website

Last updated 2 years ago

7-Chèn CSS vào website

Giới thiệu CSS

CSS (Cascading Style Sheet) là ngôn ngữ quy định cách trình bày các tài liệu như HTML, XHTML, XML,... Cụ thể, trong khóa học này là HTML.

Hoặc nói một cách đơn giản thì CSS là công cụ "trang điểm" cho website của chúng ta đẹp hơn, sinh động hơn.

Vai trò

Hỗ trợ, bổ sung và hoàn thiện giao diện HTML. Đặc biệt hỗ trợ các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau giúp cho giao diện website đẹp hơn và mang lại trải nghiệm người dùng tốt hơn.
Tạo các khuôn mẫu giúp tiết kiệm thời gian và chi phí viết mã

Cú pháp CSS

Selector (Bộ chọn): Chỉ định phần tử HTML muốn tác động
Declaration (Khối khai báo): Khối khai báo chứa một hoặc nhiều khai báo được phân tách bằng dấu chấm phẩy.
Mỗi khai báo bao gồm một tên thuộc tính CSS và một giá trị, được phân tách bằng dấu hai chấm.
Nhiều khai báo CSS được phân tách bằng dấu chấm phẩy và các khối khai báo được bao quanh bởi dấu ngoặc nhọn.

Ví dụ

p {  
  color: red;  
  text-align: center;  
}

Giải thích:

p là bộ chọn trong CSS
color là thuộc tính thay đổi màu, red là giá trị
text-align là thuộc tính căn lề văn bản, center là giá trị

Cách chèn CSS vào website

Có 3 cách để triển khai CSS

Inline CSS
Internal CSS
External CSS

Inline CSS

Inline CSS là kiểu khai báo nội tuyến trong một phần tử HTML và nó áp dụng duy nhất đối với phần tử này.

Để sử dụng kiểu khai báo nội tuyến này, bạn chỉ cần thêm thuộc tính style vào phần tử HTML muốn tác động. Thuộc tính style này có thể chứa bất kỳ thuộc thuộc tính CSS nào.

Ví dụ:

<h1 style="color:blue;text-align:center;">Học CSS thật dễ</h1>

Internal CSS

Internal CSS là kiểu khai báo nội bộ. Có nghĩa nó nằm trong 1 trang HTML và có tác dụng duy nhất tác động lên các phần tử HTML của trang đó

Để khai báo kiểu này, bạn phải khai báo các thuộc tính CSS trong cặp thẻ <style> và cặp thẻ <style> này được đặt vào phần <head>

Ví dụ:

<!DOCTYPE html>  
<html>  
<head>  
  <style>  
    body {  
      background-color: linen;  
    }  
    
    h1 {  
      color: orange;  
      margin-left: 40px;  
    }  
  </style>  
</head>  
<body>  
  <h1>Internal CSS</h1>  
</body>  
</html>

External CSS

External CSS là kiểu khai báo bên ngoài, toàn bộ thuộc tính CSS tác động lên các phần tử HTML sẽ được viết chung vào 1 file có đuôi là .cssVà liên kết với file HTML thông qua thẻ <link> được đặt trong phần <head> của trang HTML.

Ví dụ:

<!DOCTYPE html>  
<html>  
<head>  
  <style>  
    body {  
      background-color: linen;  
    }  
    
    h1 {  
      color: orange;  
      margin-left: 40px;  
    }  
  </style>  
</head>  
<body>  
  <h1>Internal CSS</h1>  
</body>  
</html>

h1{  
  color: red;  
}

Chế độ ưu tiên trong CSS

Thứ tự ưu tiên trong CSS được sắp xếp từ cao đến thấp như sau:

Inline CSS (Độ ưu tiên cao nhất)
External and internal CSS (Hai kiểu này có độ ưu tiên như nhau và ưu tiên thay đổi cuối cùng)
Browser default (Độ ưu tiên thấp nhất)

Ngoài ra, bạn có thể ghi đè lại chế độ ưu tiên bằng cách sử dụng thêm !important vào sau giá trị CSS cần xác định ưu tiên.

Ví dụ:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>CSS</title>  
    <style type="text/css">  
        h1{  
            color: red !important;  
        }  
    </style>  
</head>  
<body>  
    <h1 style="color: blue">CSS phần 1</h1>  
</body>  
</html>

Tóm tắt nội dung bài học

Qua buổi học chúng ta đã được tìm hiểu một số nội dung sau:

Hiểu CSS làm gì ?
Cách chèn CSS vào website.
Độ ưu tiên của các cách chèn CSS vào website.

PreviousBài tập NextBài tập

Last updated 2 years ago

Giới thiệu CSS

CSS (Cascading Style Sheet) là ngôn ngữ quy định cách trình bày các tài liệu như HTML, XHTML, XML,... Cụ thể, trong khóa học này là HTML.

Hoặc nói một cách đơn giản thì CSS là công cụ "trang điểm" cho website của chúng ta đẹp hơn, sinh động hơn.

Vai trò

Hỗ trợ, bổ sung và hoàn thiện giao diện HTML. Đặc biệt hỗ trợ các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau giúp cho giao diện website đẹp hơn và mang lại trải nghiệm người dùng tốt hơn.
Tạo các khuôn mẫu giúp tiết kiệm thời gian và chi phí viết mã

Cú pháp CSS

Selector (Bộ chọn): Chỉ định phần tử HTML muốn tác động
Declaration (Khối khai báo): Khối khai báo chứa một hoặc nhiều khai báo được phân tách bằng dấu chấm phẩy.
Mỗi khai báo bao gồm một tên thuộc tính CSS và một giá trị, được phân tách bằng dấu hai chấm.
Nhiều khai báo CSS được phân tách bằng dấu chấm phẩy và các khối khai báo được bao quanh bởi dấu ngoặc nhọn.

Ví dụ

p {  
  color: red;  
  text-align: center;  
}

Giải thích:

p là bộ chọn trong CSS
color là thuộc tính thay đổi màu, red là giá trị
text-align là thuộc tính căn lề văn bản, center là giá trị

Cách chèn CSS vào website

Có 3 cách để triển khai CSS

Inline CSS
Internal CSS
External CSS

Inline CSS

Inline CSS là kiểu khai báo nội tuyến trong một phần tử HTML và nó áp dụng duy nhất đối với phần tử này.

Ví dụ:

<h1 style="color:blue;text-align:center;">Học CSS thật dễ</h1>

Internal CSS

Internal CSS là kiểu khai báo nội bộ. Có nghĩa nó nằm trong 1 trang HTML và có tác dụng duy nhất tác động lên các phần tử HTML của trang đó

Để khai báo kiểu này, bạn phải khai báo các thuộc tính CSS trong cặp thẻ <style> và cặp thẻ <style> này được đặt vào phần <head>

Ví dụ:

<!DOCTYPE html>  
<html>  
<head>  
  <style>  
    body {  
      background-color: linen;  
    }  
    
    h1 {  
      color: orange;  
      margin-left: 40px;  
    }  
  </style>  
</head>  
<body>  
  <h1>Internal CSS</h1>  
</body>  
</html>

External CSS

Ví dụ:

<!DOCTYPE html>  
<html>  
<head>  
  <style>  
    body {  
      background-color: linen;  
    }  
    
    h1 {  
      color: orange;  
      margin-left: 40px;  
    }  
  </style>  
</head>  
<body>  
  <h1>Internal CSS</h1>  
</body>  
</html>

h1{  
  color: red;  
}

Chế độ ưu tiên trong CSS

Thứ tự ưu tiên trong CSS được sắp xếp từ cao đến thấp như sau:

Inline CSS (Độ ưu tiên cao nhất)
External and internal CSS (Hai kiểu này có độ ưu tiên như nhau và ưu tiên thay đổi cuối cùng)
Browser default (Độ ưu tiên thấp nhất)

Ngoài ra, bạn có thể ghi đè lại chế độ ưu tiên bằng cách sử dụng thêm !important vào sau giá trị CSS cần xác định ưu tiên.

Ví dụ:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>CSS</title>  
    <style type="text/css">  
        h1{  
            color: red !important;  
        }  
    </style>  
</head>  
<body>  
    <h1 style="color: blue">CSS phần 1</h1>  
</body>  
</html>

Tóm tắt nội dung bài học

Qua buổi học chúng ta đã được tìm hiểu một số nội dung sau:

Hiểu CSS làm gì ?
Cách chèn CSS vào website.
Độ ưu tiên của các cách chèn CSS vào website.