CSS Cơ bản - Nguyễn Xuân Bình Minh

CSS (Cascading Style Sheets) là mã bạn sử dụng để tạo kiểu cho trang web của mình. CSS Cơ bản sẽ đưa bạn qua những gì bạn cần để bắt đầu. Chúng tôi sẽ trả lời các câu hỏi như: Làm cách nào để tạo văn bản màu đen hoặc đỏ? Làm cách nào để hiển thị nội dung của tôi ở một nơi như vậy trên màn hình? Làm cách nào để trang trí trang web của tôi với hình nền và màu sắc?

CSS thật sự là gì?

Giống như HTML, CSS không thực sự là một ngôn ngữ lập trình. Nó không phải là một ngôn ngữ đánh dấu – đó là một ngôn ngữ định kiểu. Điều này có nghĩa là nó cho phép bạn áp dụng kiểu có chọn lọc cho các phần tử trong tài liệu HTML. Ví dụ: để chọn tất cả các phần tử đoạn trên trang HTML và chuyển văn bản trong đó màu đỏ, bạn sẽ viết CSS này:

p {
  color: red;
}

Chúng ta hãy kiểm tra nó: dán ba dòng CSS này vào một tập tin trong chương trình hiệu chỉnh văn bản của bạn, sau đó lưu tập tin với tên là style.css trong thư mục styles của bạn.

Nhưng chúng ta vẫn cần nhúng CSS vào tài liệu HTML của bạn. Nếu không, các định dạng CSS sẽ không ảnh hưởng đến các trình duyệt của bạn hiển thị tài liệu HTML. (Nếu bạn không tiếp tục theo dõi dự án của chúng tôi, hãy đọc Dealing with files và HTML basics để tìm thấy những điều bạn cần làm trước tiên.)

Mở tập tin index.html và dán dòng bên dưới vào đâu đó trên đầu tập tin (nghĩa là, giữa thẻ <head> và </head>):
```
<link href="styles/style.css" rel="stylesheet" type="text/css">
```
Lưu tập tin index.html và tải nó vào trong trình duyệt của bạn. Bạn sẽ thấy như thế này:

Nếu đoạn văn bản là màu đỏ, xin chúc mừng. Bạn vừa viết thành công đoạn CSS đầu tiên của mình

Cơ cấu bộ quy tắc CSS

Hãy xem CSS ở trên chi tiết hơn một chút:

Toàn bộ cấu trúc được gọi là một bộ quy tắc (nhưng thường gọi là “quy tắc” cho ngắn gọn). Cũng lưu ý tên của từng phần riêng:

Bộ chọn (Selector): Tên phần tử HTML bắt đầu của bộ quy tắc. Nó chọn (các) phần tử được tạo kiểu (trong trường hợp này là phần tử p). Để tạo kiểu cho một phần tử khác, chỉ cần thay đổi bộ chọn.
Tuyên bố (Declaration): Một quy tắc duy nhất như: color: red; xác định thuộc tính của phần tử nào bạn muốn tạo kiểu.
Thuộc tính (Properties): Những cách mà bạn có thể tạo kiểu cho một phần tử HTML. (Trong trường hợp này, color là một thuộc tính của phần tử <p>.) Trong CSS, bạn chọn thuộc tính nào bạn muốn tác động trong quy tắc của mình.
Giá trị thuộc tính: Ở bên phải của thuộc tính sau dấu hai chấm(:), chúng ta có giá trị thuộc tính, mà chọn một trong số nhiều lần xuất hiện có thể cho một thuộc tính cụ thể (color có rất nhiều giá trị ngoài red).

Lưu ý các phần quan trọng khác của cú pháp:

Mỗi bộ quy tắc (ngoài bộ chọn) phải được bao bọc bởi các dấu ngoặc nhọn ({}).
Trong mỗi khai báo, bạn phải sử dụng dấu hai chấm (:) để tách thuộc tính khỏi các giá trị của nó.
Trong mỗi bộ quy tắc, bạn phải sử dụng dấu chấm phẩy (;) để phân biệt cho mỗi bộ quy tắc khai báo kế tiếp.

Vì vậy, để thay đổi nhiều giá trị thuộc tính cùng lúc, bạn chỉ cần viết chúng bằng dấu chấm phẩy, như sau:

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

Chọn nhiều phần tử

Bạn cũng có thể chọn nhiều kiểu phần tử và áp dụng một quy tắc duy nhất được đặt cho tất cả các yếu tố đó. Bao gồm nhiều bộ chọn được phân biệt bởi dấu phẩy (,). Ví dụ:

p, li, h1 {
  color: red;
}

Các loại bộ chọn khác nhau

Có nhiều loại bộ chọn khác nhau. Ở trên chúng tôi chỉ xem xét các bộ chọn phần tử, chọn tất cả các phần tử của một kiểu đã cho trong các tài liệu HTML. Nhưng chúng tôi có thể thực hiện nhiều lựa chọn cụ thể hơn. Dưới đây là một số loại bộ chọn phổ biến:

Tên bộ chọn	Nó chọn gì	Ví dụ
Bộ chọn phần tử (đôi khi được gọi là thẻ hoặc loại bộ chọn)	Tất cả (các) thành phần HTML của loại được chỉ định.	`p` Chọn `<p>`
Bộ chọn ID	Phần tử trên trang có ID được chỉ định. (Trên một trang HTML nhất định, bạn chỉ được phép một phần tử cho mỗi ID, và tất nhiên là mỗi ID cho mỗi phần tử).	`#my-id` Chọn `<p id="my-id">` or `<a id="my-id">`
Bộ chọn Class	(Các) Thành phần trên trang có lớp (class) được chỉ định (lớp có thể xuất hiện nhiều lần trên một trang).	`.my-class` Chọn `<p class="my-class">` và `<a class="my-class">`
Bộ chọn thuộc tính	(Các) thành phần trên trang có thuộc tính được chọn.	`img[src]` Chọn `<img src="myimage.png">` nhưng không phải `<img>`
Bộ chọn Pseudo-class	(Các) thành phần được chỉ định, nhưng chỉ khi ở trạng thái được chỉ định, ví dụ: rê chuột	`a:hover` Chọn `<a>`, nhưng chỉ khi con trỏ chuột đang di chuột qua liên kết.

Có nhiều bộ chọn khác để khám phá và bạn có thể tìm thấy danh sách chi tiết hơn trong hướng dẫn Hướng dẫn bộ chọn của chúng tôi.

Phông chữ và văn bản

Bây giờ chúng ta khám phá một số khái niệm cơ bản về CSS, hãy bắt đầu thêm một quy tắc và thông tin khác vào tệp style.css của chúng ta để làm cho ví dụ trông đẹp hơn. Hãy bắt đầu bằng cách nhập phông chữ và văn bản của chúng ta để trông đẹp hơn một chút.

Trước hết, quay lại và tìm nguồn từ Phông chữ Google mà bạn đã được lưu trữ ở đâu đó an toàn. Thềm phần tử <link> vào đâu đó bên trong trên đầu index.html (một lần nữa, ở bất kỳ đâu giữa các thẻ <head> và </head>). nó sẽ giống như thế này:
```
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
```
Kế tiếp, xóa quy tắc hiện tại bạn có trong tệp style.css. Nó là một thử nghiệm tốt, nhưng văn bản màu đỏ trông không thực sự tốt.
Thêm các dòng sau vào vị trí của nó, thay thế dòng trình giữ chổ hiện tại bằng dòng font-family mà bạn nhận được từ Phông chữ Google. (font-family có nghĩa là (các) phông chữ bạn muốn sử dụng cho văn bản của mình.) Quy tắc này trước tiên đặt phông chữ cơ sở chung và kích thước phông chữ cho toàn bộ trang (vì <html> là phần tử gốc của toàn bộ trang và tất cả phần tử bên trong nó thừa hưởng cùng một font-size và font-family):
```
html {
  font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high  */
  font-family: 'Open Sans', sans-serif; /* this should be the rest of the output you got from Google fonts */
}
```
Lưu ý: Mọi thứ trong tài liệu CSS ở giửa /* và */ là một nhận xét CSS (Css comment), trình duyệt bỏ qua khi nó hiển thị mã. Đây là nơi để bạn viết những ghi chú hữu ích về những gì bạn đang làm.
Bây giờ, chúng tôi sẽ đặt kích thước phông chữ cho các phần tử chứa văn bản bên trong nội dung HTML (<h1>, <li>, và <p>). Chúng tôi sẽ tập trung vào văn bản của tiêu đề và một số thiết lập về chiều cao dòng và khoản cách chữ của nội dung phần thân để làm cho nó dễ đọc hơn một chút:
```
h1 {
  font-size: 60px;
  text-align: center;
}
p, li {
  font-size: 16px;    
  line-height: 2;
  letter-spacing: 1px;
}
```

Bạn có thể điều chỉnh các giá trị px thành bất kỳ thứ gì bạn thích để thiết kế của bạn như mong muốn, nhưng nói chung thiết kế của bạn sẽ trông như sau:

Hộp, hộp, đó là tất cả về hộp

Một điều bạn sẽ nhận thấy về việc viết CSS là rất nhiều trong số đó là về các hộp(khối) – thiết lập kích thước, màu sắc, vị trí, v.v. Hầu hết các phần tử HTML trên trang của bạn có thể coi là các hộp nằm trên đỉnh của nhau.

Không ngạc nhiên, bố cục CSS chủ yếu dựa vào mô hình hộp. Mỗi khối chiếm khoảng trống trên trang của bạn có các thuộc tính như:

padding (vùng đệm), không gian xung quanh nội dung (ví dụ: xung quanh đoạn văn bản)
border (đường viền), đường liền nằm ngay bên ngoài phần đệm
margin (lề), khoản cách xung quanh bên ngoài của phần tử

Trong phần này, chúng tôi cũng sử dụng:

width (của một phần tử)
background-color, màu sắc đằng sau nội dung và vùng đệm của phần tử
color, màu sắc của nội phần tử (thường là văn bản)
text-shadow: đặt một bóng đổ trên văn bản bên trong một phần tử.
display: đặt chế độ hiển thị của một phần tử (đừng lo lắng về điều này)

Vì vậy, chúng ta hãy bắt đầu và thêm một số CSS nữa vào trang của chúng ta! Tiếp tục thêm các quy tắc mới này vào cuối trang và đừng ngại thử nghiệm với việc thay đổi các giá trị để xem các quy tắc này diễn ra như thế nào.

Thay đổi màu của trang

html {
  background-color: #00539F;
}

Quy tắc này đặt màu nền cho toàn bộ trang. Thay đổi mã màu ở trên thành bất kỳ màu nào bạn đã chọn khi lập kế hoạch trang web của mình.

Phân loại phần thân

body {
  width: 600px;
  margin: 0 auto;
  background-color: #FF9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

Bây giờ cho phần tử <body>. Có một vài tuyên bố ở đây, vì vậy chúng ta hãy xem xét từng cái một:

width: 600px; — phần thân luôn có chiều rộng 600 pixel.
margin: 0 auto; — Khi bạn đặt hai giá trị trên một thuộc tính như margin or padding, giá trị đầu tiên ảnh hưởng đến phần trên và phần dưới của phần tử (trong trường hợp này là 0), giá trị thứ hai là bên trái và bên phải (ở đây, auto là một giá trị đặc biệt phân không gian ngang đều nhau giữa trái và phải). Bạn cũng có thể sử dụng một, ba hoặc bốn giá trị, như tài liệu ghi ở đây.
background-color: #FF9500; — như trước, điều này đặt màu nền của phần tử. Chúng tôi đã sử dụng một loại màu cam đậm cho phần thân như trái ngược với màu xanh đậm của phần tử <html>, nhưng hãy tiếp tục và thử nghiệm.
padding: 0 20px 20px 20px; — chúng tôi có bốn giá trị trên phần đệm, để tạo một chút không gian xung quanh nội dung của chúng tôi. Lần này, chúng tôi đang thiết lập không (0px) cho vùng đệm phía trên của thân, và 20px bên trái, phía dưới, và bên phải. Các giá trị được đặt theo thứ tự trên (top), phải (right), dưới (bottom), trái (left).
border: 5px solid black; — điều này chỉ đơn giản thiết lập một đường viền màu đen, rộng 5 điểm ảnh (px) trên tất cả các cạnh của body.

Định vị và tạo kiểu cho tiêu đề trang chính của chúng tôi

h1 {
  margin: 0;
  padding: 20px 0;    
  color: #00539F;
  text-shadow: 3px 3px 1px black;
}

Bạn có thể thấy một khoản trống khủng khiếp ở phần trên cùng của phần thân. Điều đó xảy ra vì các trình duyệt áp dụng một số kiểu mặc định cho phần tử <h1> (trong số những phần tử khác), ngay cả khi bạn chưa áp dụng bất kỳ CSS nào! Điều đó nghe có vẻ giống như một ý tưởng tồi, nhưng chúng tôi thậm chí muốn một trang web không có sẵn kiểu để có khả năng đọc cơ bản. Để loại bỏ khoảng trống, chúng tôi sẽ loại bỏ kiểu mặc định bằng cách đặt margin: 0;.

Tiếp theo, chúng tôi đã đặt phần đệm trên cùng và dưới cùng tiêu đề là 20 điểm ảnh (px) và làm cho văn bản tiêu đề có cùng màu với màu nền HTML.

Một thuộc tính khá thú vị mà chúng tôi đã sử dụng ở đây là đổ bóng văn bản (text-shadow), áp dụng đổ bóng cho nội dung văn văn bản của phần tử. Bốn giá trị của nó như sau:

Giá trị điểm ảnh đầu tiên thiết lập độ lệch ngang của bóng từ văn bản — khoảng cách bao xa: một giá trị âm nên di chuyển nó sang bên trái.
Giá trị điểm ảnh thứ hai thiết lập độ lệch dọc của bóng từ văn bản — khoảng cách nó di chuyển xuống dưới, trong ví dụ này; một giá trị âm nên di chuyển nó lên.
Giá trị điểm ảnh thứ ba đặt bán kính mờ của bóng — một giá trị lớn hơn sẽ có nghĩa là một bóng mờ hơn.
Giá trị thứ tư thiết lập màu cơ bản cho bóng đổ.

Một lần nữa, hãy thử nghiệm với các giá trị khác nhau để xem những gì bạn có thể nghĩ ra!

Căn giữa hình ảnh

img {
  display: block;
  margin: 0 auto;
}

Cuối dùng, chúng tôi sẽ căn giữa hình ảnh để làm cho hình ảnh trông đẹp hơn. Chúng tôi có thể sử dụng margin: 0 auto khéo léo một lần nữa như chúng tôi đã làm trước đó cho body, nhưng chúng tôi cũng cần phải làm điều gì khác. Phần tử <body> là cấp khối, nghĩa là nó chiếm không gian trên trang và có thể có các giá trị căn lề và khoản cách khác được áp dụng cho nó. Hình ảnh, mặt khác, là các yếu tố nội tuyến, có nghĩa là chúng không thể. Vì vậy, để áp dụng căn lề cho hình ảnh, chúng tôi phải cung cấp cho hành vi cấp khối hình ảnh bằng cách sử dụng display: block;.

Lưu ý: Các hướng dẫn trên giả định rằng bạn đang sử dụng hình ảnh nhỏ hơn chiều rộng được đặt trên body (600 điểm ảnh – px). Nếu hình ảnh của bạn lớn hơn, nó sẽ tràn body và tràn ra phần còn lại của trang. Để khắc phục điều này, bạn có thể: 1) giảm chiều rộng của hình bằng cách sử dụng trình chỉnh sửa đồ họa hoặc 2) kích thước hình ảnh bằng cách sử dụng CSS đặt thuộc tính width trên phần tử <img> có giá trị nhỏ hơn, ví dụ: 400px;.

Lưu ý: đừng lo lắng nếu bạn chưa hiểu display: block; và sự khác biệt cấp khối / nội tuyến. Bạn sẽ nghiên cứu CSS sâu hơn. Bạn có thể tìm hiểu thêm về các giá trị hiển thị có sẳn khác nhau tại trang tham khảo hiển thị của chúng tôi.

Kết luận

Nếu bạn đã làm theo tất cả các hướng dẫn trong bài viết này, bạn sẽ kết thúc với một trang trông giống như thế này (bạn cũng có thể xem phiên bản của chúng tôi tại đây):