Tiếng Việt

Hướng dẫn CSS

Hướng dẫn CSS3

CSS Nâng cao

Tham chiếu CSS

CSS T响应

Hướng dẫn nhanh CSS

Chào mừng các bạn đang học lập trình web! Hôm nay, chúng ta sẽ khám phá thế giới đầy màu sắc của CSS. Hãy chuẩn bị, vì chúng ta sắp bắt đầu một hành trình sẽ thay đổi永远的 bạn nhìn nhận về các trang web!

CSS - Quick Guide

CSS là gì?

CSS, hay Tập tin Kiểu dáng Tự động, giống như nhà thiết kế thời trang của thế giới web. Nếu HTML là xương sống của một trang web, thì CSS là da, quần áo và makeup. Đó là thứ làm cho các trang web trông đẹp và độc đáo.

Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. HTML sẽ là gạch và vữa, trong khi CSS sẽ là sơn, giấy dán tường và nội thất. Đó là thứ biến một cấu trúc đơn giản thành một ngôi nhà.

Hãy bắt đầu với một ví dụ đơn giản:

body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

Mảnh CSS nhỏ này告诉 trình duyệt sơn toàn bộ trang một màu xám nhạt (#f0f0f0) và sử dụng Arial làm phông chữ mặc định. Nếu Arial không có sẵn, nó sẽ sử dụng bất kỳ phông chữ sans-serif nào.

Cú pháp CSS

Cú pháp CSS giống như một công thức nấu ăn. Nó có hai phần chính: bộ chọn và khối khai báo.

selector {
property: value;
}

Bộ chọn chỉ đến phần tử HTML mà bạn muốn định dạng. Khối khai báo chứa một hoặc nhiều khai báo cách nhau bằng dấu chấm phẩy. Mỗi khai báo bao gồm tên thuộc tính CSS và giá trị, cách nhau bằng dấu hai chấm.

Hãy xem một ví dụ phức tạp hơn:

h1 {
color: blue;
font-size: 24px;
text-align: center;
}

Ở đây, chúng ta đang nhắm đến tất cả các phần tử <h1>. Chúng ta đang làm cho văn bản có màu xanh, đặt kích thước của nó là 24 pixel và căn giữa trên trang.

Cách bao gồm CSS

Có ba cách để bao gồm CSS trong HTML của bạn:

  1. CSS nội tuyến
  2. CSS nội bộ
  3. CSS ngoại bộ

CSS nội tuyến

CSS nội tuyến được áp dụng trực tiếp vào một phần tử HTML bằng cách sử dụng thuộc tính style. Nó giống như đưa ra lời khuyên thời trang cho một người.

<p style="color: red; font-size: 16px;">Đây là một đoạn văn màu đỏ.</p>

CSS nội bộ

CSS nội bộ được đặt trong phần <head> của một trang HTML, bên trong thẻ <style>. Nó giống như thiết lập quy tắc trang phục cho mọi người tại một buổi tiệc.

<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
</style>
</head>

CSS ngoại bộ

CSS ngoại bộ được lưu trữ trong một tệp riêng biệt với phần mở rộng .css. Nó được liên kết với tệp HTML bằng cách sử dụng thẻ <link>. Điều này giống như tạo một tạp chí thời trang mà mọi người có thể tham khảo.

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

Đơn vị đo lường CSS

CSS có nhiều đơn vị để biểu thị độ dài. Hãy xem xét các đơn vị phổ biến nhất:

Đơn vị Mô tả
px Pixels (1px = 1/96 của 1in)
% Phần trăm
em Tương đối với kích thước phông chữ của phần tử (2em có nghĩa là gấp đôi kích thước phông chữ hiện tại)
rem Tương đối với kích thước phông chữ của phần tử gốc
vw Tương đối với 1% của chiều rộng của viewport
vh Tương đối với 1% của chiều cao của viewport

Dưới đây là một ví dụ sử dụng các đơn vị khác nhau:

div {
width: 300px;
height: 50%;
font-size: 1.5em;
padding: 2rem;
margin-top: 10vh;
}

Màu sắc trong CSS

Màu sắc trong CSS có thể được xác định theo nhiều cách:

  1. Bằng tên: red, blue, green, v.v.
  2. Bằng giá trị RGB: rgb(255, 0, 0) cho màu đỏ
  3. Bằng mã Hex: #FF0000 cho màu đỏ

Hãy xem chúng trong hành động:

h1 {
color: blue;
}

p {
color: rgb(255, 0, 0);
}

div {
background-color: #00FF00;
}

Hình nền

Hình nền có thể làm cho trang web của bạn nổi bật. Bạn có thể đặt màu nền, hình ảnh nền hoặc cả hai!

body {
background-color: #f0f0f0;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

Mảnh CSS này đặt nền màu xám nhạt, thêm một hình ảnh nền ở giữa trang, đảm bảo hình ảnh không lặp lại và làm cho nó che phủ toàn bộ viewport.

Fonts

Fonts rất quan trọng cho khả năng đọc và phong cách. Dưới đây là cách bạn có thể đặt fonts:

body {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 16px;
font-weight: normal;
font-style: italic;
}

Điều này đặt Helvetica làm phông chữ ưa thích, với Arial và bất kỳ phông chữ sans-serif nào làm备用. Nó cũng đặt kích thước phông chữ là 16 pixel, trọng lượng phông chữ là bình thường và phong cách phông chữ là in nghiêng.

Văn bản

Thuộc tính văn bản kiểm soát cách văn bản được hiển thị:

p {
color: #333;
text-align: justify;
text-decoration: underline;
text-transform: uppercase;
line-height: 1.5;
}

Mảnh CSS này làm cho văn bản có màu xám đậm, căn chỉnh văn bản, gạch chân văn bản, chuyển đổi văn bản thành chữ in hoa và đặt chiều cao dòng là 1.5 lần bình thường.

Sử dụng hình ảnh

Hình ảnh có thể được định dạng như bất kỳ phần tử nào khác:

img {
width: 100%;
max-width: 500px;
height: auto;
border-radius: 50%;
}

Điều này làm cho hình ảnh linh hoạt (100% chiều rộng đến 500px), giữ nguyên tỷ lệ khung hình và cho nó hình dạng tròn.

Liens

Liens có thể được định dạng khác nhau tùy thuộc vào trạng thái của chúng:

a {
color: blue;
text-decoration: none;
}

a:hover {
color: red;
text-decoration: underline;
}

a:visited {
color: purple;
}

Điều này thay đổi màu liên kết thành xanh, loại bỏ gạch chân, làm cho nó đỏ và gạch chân khi di chuột, và làm cho liên kết đã truy cập có màu tím.

Nhớ rằng CSS là về sự sáng tạo và thử nghiệm. Đừng ngại thử nghiệm với các thuộc tính và giá trị khác nhau. Càng gyak luyện, bạn sẽ càng thành thạo hơn trong việc tạo ra các thiết kế web đẹp và linh hoạt. Chúc các bạn may mắn!

Credits: Image by storyset

Hướng Dẫn Trước:
CSS - Câu hỏi và câu trả lời
Hướng Dẫn Tiếp Theo:
CSS - Tham chiếu