[CSS] – Bài 1 – Giới thiệu tổng quan về css ~ Monkey Tips

[CSS] – Bài 1 – Giới thiệu tổng quan về css

Giống như HTML, CSS là ngôn ngữ cơ bản để thiết kế website. Để hiểu được CSS là gì và cách sử dụng CSS như thế nào thì chúng ta sẽ cùng tìm hiểu các khái niệm dưới đây.

CSS là gì?

CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ như HTML).
Hiểu đơn giản rằng, HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta đổi màu sắc trang, đổi màu chữ, thay đổi cấu trúc…

Cú pháp của CSS

Gồm các phần: selector (bộ chọn), property (thuộc tính), value (giá trị).



bộ chọn {
 thuộc tính : giá trị;
 thuộc tính: giá trị;
 .....
}

Cách sử dụng và độ ưu tiên CSS

Chèn CSS trực tiếp vào trong thẻ HTML

Trong file html chúng ta có đoạn sau:


<body>

<h2 style="color: red;">Demo CSS</h2>

</body>

Trong đó:

Cách viết này không có selector (bộ chọn) vì đã sử dụng style trực tiếp trong thẻ html.

color là property (thuộc tính).

red là value (giá trị).

Thuộc tính và giá trị được ngăn cách bởi dấu “:” .

=> Kết quả chạy đoạn html trên thì sẽ hiển thị màu chữ Demo CSS là màu đỏ.

Chèn CSS vào cặp thẻ <style></style>

Ta có file html với nội dung:


<<!DOCTYPE html>

<html>

<head>

<title>Demo CSS</title>

<style type="text/css">

h2{

color: red;

}

</style>

</head>

<body>

<h2>Demo CSS</h2>

</body>

</html>

Thẻ <style></style> này vị trí để như trong đoạn trên hoặc để bất kì vị trí nào trong thẻ body đều chạy được nhưng vị trí trong thẻ head mới đúng chuẩn w3c. Trong đó:

h2 là selector (bộ chọn).
color là property (thuộc tính).
red là value (giá trị).
Thuộc tính và giá trị được ngăn cách bởi dấu “:” và được bao quanh dấu ngoặc nhọn “{}”.

Tạo file riêng để viết CSS


<<!DOCTYPE html>

<html>

<head>

<title>Demo CSS</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<h2>Demo CSS</h2>

</body>

</html>

Ta thêm vào một đoạn: <link rel=”stylesheet” type=”text/css” href=”đường dẫn đến file css”> ở trong thẻ head,
file css của chúng ta có tên là style.css và nằm cùng vị trí với file html, vì vậy đoạn css import là: <link rel=”stylesheet” type=”text/css” href=”style.css”>

Nội dung file style.css là:



@charset "utf-8";
/* CSS Document*/
h2{
  color:red;
}

Trong đó:

h2 là selector (bộ chọn).
color là property (thuộc tính).
red là value (giá trị).
Thuộc tính và giá trị được ngăn cách bởi dấu “:” và được bao quanh dấu ngoặc nhọn “{}”.

Thứ tự ưu tiên trong CSS

Trong ứng dụng thực tế nhất định sẽ có lúc chúng ta sẽ sử dụng cả 3 cách trên vì vậy thứ tự ưu tiên của chúng sẽ là điều cần thiết: Cách viết CSS trực tiếp trong thẻ HTML sẽ có ưu tiên nhất. Tiếp theo nếu trong file html chúng ta sử dụng 2 cách <link rel=”stylesheet” type=”text/css” href=”đường dẫn đến file css”> và cặp thẻ <style></style> thì ở dưới sẽ được ưu tiên



<<!DOCTYPE html>

<html>

<head>

<title>Demo CSS</title>

<link rel="stylesheet" type="text/css" href="style.css">

<style type="text/css">

h2{

color: blue;

}

p{

color: blue;

}

</style>

</head>

<body>

<h2>Demo CSS</h2>

<p style="color:red;">Demo css truc tiep</p>

</body>

</html>

Với đoạn trên:

File style.css định dạng h2 có màu đỏ, nhưng trong file html cặp thẻ <style></style> lại định dạng h2 là màu xanh và nó nằm dưới nên chữ Demo CSS sẽ có màu xanh.
Chữ Demo css truc tiep sẽ có màu đỏ mặc dù cặp thẻ <style></style> đã định dạng là màu xanh.

Trong 3 cách viết trên mình khuyên là nên tận dụng tối đa để sử dụng cách tạo riêng file css vì nó sẽ tách riêng HTML và CSS ra chúng ta sẽ dễ quản lý và cũng tốt cho SEO.

Created by MonKey Tips

Monkey Tips

Không ngừng học hỏi và chia sẻ kinh nghiệm về thủ thuật Blogger, Template, Internet và SEO.

Monkey Tips