Nếu bạn có thể, hãy tưởng tượng một thời điểm trước khi phát minh ra Internet. Các trang web không tồn tại và sách, được in trên giấy và đóng bìa chặt chẽ, là nguồn thông tin chính của bạn. Phải mất rất nhiều nỗ lực—và đọc—để theo dõi chính xác mẩu thông tin mà bạn đang tìm kiếm

Ngày nay, bạn có thể mở trình duyệt web, chuyển đến công cụ tìm kiếm bạn chọn và tìm kiếm. Bất kỳ bit thông tin có thể tưởng tượng nằm trong tầm tay của bạn. Và rất có thể ai đó ở đâu đó đã xây dựng một trang web có lưu ý đến tìm kiếm chính xác của bạn

Trong cuốn sách này, tôi sẽ chỉ cho bạn cách xây dựng trang web của riêng mình bằng cách sử dụng hai ngôn ngữ máy tính phổ biến nhất—HTML và CSS

Trước khi bắt đầu hành trình tìm hiểu cách xây dựng trang web bằng HTML và CSS, điều quan trọng là phải hiểu sự khác biệt giữa hai ngôn ngữ, cú pháp của từng ngôn ngữ và một số thuật ngữ phổ biến.

HTML & CSS là gì?

HTML, Ngôn ngữ đánh dấu siêu văn bản, cung cấp cấu trúc và ý nghĩa của nội dung bằng cách xác định nội dung đó dưới dạng, ví dụ: tiêu đề, đoạn văn hoặc hình ảnh. CSS, hoặc Cascading Style Sheets, là một ngôn ngữ trình bày được tạo ra để tạo kiểu cho giao diện của nội dung—chẳng hạn như sử dụng phông chữ hoặc màu sắc

Hai ngôn ngữ—HTML và CSS—độc lập với nhau và nên duy trì như vậy. Không nên viết CSS bên trong tài liệu HTML và ngược lại. Theo quy định, HTML sẽ luôn thể hiện nội dung và CSS sẽ luôn thể hiện hình thức của nội dung đó

Với sự hiểu biết này về sự khác biệt giữa HTML và CSS, hãy đi sâu vào HTML chi tiết hơn

Hiểu thuật ngữ HTML phổ biến

Trong khi bắt đầu với HTML, bạn có thể sẽ gặp những thuật ngữ mới—và thường là lạ—. Theo thời gian, bạn sẽ ngày càng quen thuộc với tất cả chúng, nhưng ba thuật ngữ HTML phổ biến mà bạn nên bắt đầu là phần tử, thẻ và thuộc tính

yếu tố

Các phần tử là các chỉ định xác định cấu trúc và nội dung của các đối tượng trong một trang. Một số yếu tố được sử dụng thường xuyên hơn bao gồm nhiều cấp độ tiêu đề (được xác định là yếu tố

...

...

1
2
0); 
Các phần tử được xác định bằng cách sử dụng các dấu ngoặc nhọn nhỏ hơn và lớn hơn, 
1
2
6, xung quanh tên phần tử. Do đó, một phần tử sẽ trông giống như sau
1
2

thẻ
Việc sử dụng các dấu ngoặc nhọn nhỏ hơn và lớn hơn bao quanh một phần tử tạo ra cái được gọi là thẻ. Các thẻ thường xảy ra nhất trong các cặp thẻ mở và thẻ đóng
Thẻ mở đánh dấu sự bắt đầu của một phần tử. Nó bao gồm một dấu nhỏ hơn, theo sau là tên của một phần tử và sau đó kết thúc bằng dấu lớn hơn; 
Thẻ đóng đánh dấu sự kết thúc của một phần tử. Nó bao gồm một dấu nhỏ hơn, theo sau là dấu gạch chéo về phía trước và tên của phần tử, sau đó kết thúc bằng dấu lớn hơn; 
Nội dung nằm giữa thẻ mở và thẻ đóng là nội dung của phần tử đó. Ví dụ: một liên kết neo sẽ có thẻ mở là 
1
2
1 và thẻ đóng là 
 href="http://shayhowe.com/">Shay Howe
0. Những gì nằm giữa hai thẻ này sẽ là nội dung của liên kết neo
Vì vậy, các thẻ neo sẽ trông giống như thế này
1
2
...
Thuộc tính
Thuộc tính là các thuộc tính được sử dụng để cung cấp thông tin bổ sung về một phần tử. Các thuộc tính phổ biến nhất bao gồm thuộc tính 
 href="http://shayhowe.com/">Shay Howe
1, xác định một phần tử; 
Các thuộc tính được xác định trong thẻ mở, sau tên của một phần tử. Nói chung các thuộc tính bao gồm một tên và một giá trị. Định dạng cho các thuộc tính này bao gồm tên thuộc tính theo sau là dấu bằng và sau đó là giá trị thuộc tính được trích dẫn. Ví dụ: một phần tử 
1
2
1 bao gồm thuộc tính 
 href="http://shayhowe.com/">Shay Howe
4 sẽ giống như sau
1
2
 href="http://shayhowe.com/">Shay Howe
Bản trình diễn thuật ngữ HTML phổ biến
Xem Thuật ngữ HTML thông dụng dành cho bút của Shay Howe (@shayhowe) trên CodePen
Đoạn mã trước sẽ hiển thị văn bản “Shay Howe” trên trang web và sẽ đưa người dùng đến http. //shayhowe. com/ khi nhấp vào văn bản “Shay Howe”. Phần tử neo được khai báo với các thẻ mở 
1
2
1 và đóng 
 href="http://shayhowe.com/">Shay Howe
0 bao quanh văn bản, đồng thời thuộc tính và giá trị tham chiếu siêu liên kết được khai báo với 
 href="http://shayhowe.com/">Shay Howe
9 trong thẻ mở
Hình 1
Phác thảo cú pháp HTML bao gồm một phần tử, thuộc tính và thẻ
Bây giờ bạn đã biết các phần tử, thẻ và thuộc tính HTML là gì, hãy xem cách kết hợp trang web đầu tiên của chúng ta lại với nhau. Nếu có gì mới ở đây, đừng lo—chúng tôi sẽ giải mã nó khi chúng tôi tiếp tục
Thiết lập cấu trúc tài liệu HTML
Tài liệu HTML là tài liệu văn bản thuần túy được lưu với phần mở rộng tệp 
1
2
3
4
5
6
7
8
9
10
11
12
0 thay vì phần mở rộng tệp 
1
2
3
4
5
6
7
8
9
10
11
12
1. Để bắt đầu viết HTML, trước tiên bạn cần có một trình soạn thảo văn bản đơn giản mà bạn cảm thấy thoải mái khi sử dụng. Rất tiếc, điều này không bao gồm Microsoft Word hoặc Pages, vì đó là những trình soạn thảo văn bản phong phú. Hai trong số các trình soạn thảo văn bản đơn giản phổ biến hơn để viết HTML và CSS là Dreamweaver và Sublime Text. Các lựa chọn thay thế miễn phí cũng bao gồm Notepad++ cho Windows và TextWrangler cho Mac



Tất cả các tài liệu HTML đều có cấu trúc bắt buộc bao gồm phần khai báo và phần tử sau. 
1
2
3
4
5
6
7
8
9
10
11
12
2, 
1
2
3
4
5
6
7
8
9
10
11
12
3, 
1
2
3
4
5
6
7
8
9
10
11
12
4 và 
1
2
3
4
5
6
7
8
9
10
11
12
5
Khai báo loại tài liệu, hoặc 
1
2
3
4
5
6
7
8
9
10
11
12
2, thông báo cho trình duyệt web phiên bản HTML nào đang được sử dụng và được đặt ở phần đầu của tài liệu HTML. Bởi vì chúng tôi sẽ sử dụng phiên bản HTML mới nhất, khai báo loại tài liệu của chúng tôi chỉ đơn giản là 
1
2
3
4
5
6
7
8
9
10
11
12
2. Sau phần khai báo loại tài liệu, phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
3 biểu thị phần đầu của tài liệu
Bên trong phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
3, phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
4 xác định phần đầu của tài liệu, bao gồm bất kỳ siêu dữ liệu nào (thông tin đi kèm về trang). Nội dung bên trong phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
4 không được hiển thị trên trang web. Thay vào đó, nó có thể bao gồm tiêu đề tài liệu (được hiển thị trên thanh tiêu đề trong cửa sổ trình duyệt), liên kết đến bất kỳ tệp bên ngoài nào hoặc bất kỳ siêu dữ liệu có lợi nào khác
Tất cả nội dung hiển thị trong trang web sẽ nằm trong phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
5. Bảng phân tích cấu trúc tài liệu HTML điển hình trông như thế này
1
2
3
4
5
6
7
8
9
10
11
12

 lang="en">
  
     charset="utf-8">
    
  
  
    
Hello World
    
This is a web page.
  

Bản trình diễn cấu trúc tài liệu HTML
Xem Cấu trúc tài liệu Pen HTML của Shay Howe (@shayhowe) trên CodePen
Mã trước hiển thị tài liệu bắt đầu bằng khai báo loại tài liệu, 
1
2
3
4
5
6
7
8
9
10
11
12
2, theo sau trực tiếp là phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
3. Bên trong phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
3 có các phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
4 và 
1
2
3
4
5
6
7
8
9
10
11
12
5. Phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
4 bao gồm mã hóa ký tự của trang thông qua thẻ 

 lang="en">
  
     charset="utf-8">
    
  
  
    
Hello World
    
This is a web page.


9 và tiêu đề của tài liệu thông qua phần tử 
1
2
3
4
5
6
7
8
0. Phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
5 bao gồm một tiêu đề thông qua phần tử 
...
8 và một đoạn văn thông qua phần tử 
1
2
0. Bởi vì cả tiêu đề và đoạn văn được lồng trong phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
5 nên chúng hiển thị trên trang web
Khi một phần tử được đặt bên trong một phần tử khác, còn được gọi là phần tử lồng nhau, bạn nên thụt lề phần tử đó để giữ cho cấu trúc tài liệu được tổ chức tốt và dễ đọc. Trong đoạn mã trước, cả hai phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
4 và 
1
2
3
4
5
6
7
8
9
10
11
12
5 đều được lồng vào nhau—và thụt lề—bên trong phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
3. Mẫu thụt lề cho các phần tử tiếp tục khi các phần tử mới được thêm vào bên trong các phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
4 và 
1
2
3
4
5
6
7
8
9
10
11
12
5
Các yếu tố tự đóng
Trong ví dụ trước, phần tử 

 lang="en">
  
  
  
  

0 chỉ có một thẻ và không bao gồm thẻ đóng. Đừng sợ, đây là cố ý. Không phải tất cả các yếu tố bao gồm các thẻ mở và thẻ đóng. Một số phần tử chỉ nhận nội dung hoặc hành vi của chúng từ các thuộc tính trong một thẻ duy nhất. Phần tử 

 lang="en">
  
  
  
  

0 là một trong những phần tử này. Nội dung của phần tử 

 lang="en">
  
  
  
  

0 trước đó được gán với việc sử dụng thuộc tính và giá trị bộ ký tự. Các yếu tố tự đóng phổ biến khác bao gồm

 lang="en">
  
  
  
  

3

 lang="en">
  
  
  
  

4

 lang="en">
  
  
  
  

5

 lang="en">
  
  
  
  

6

 lang="en">
  
  
  
  

7

 lang="en">
  
  
  
  

8

 lang="en">
  
  
  
  

0

00

01

02
Cấu trúc được phác thảo ở đây, sử dụng loại tài liệu 
1
2
3
4
5
6
7
8
9
10
11
12
2 và các phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
3, 
1
2
3
4
5
6
7
8
9
10
11
12
4 và 
1
2
3
4
5
6
7
8
9
10
11
12
5, khá phổ biến. Chúng tôi muốn giữ cấu trúc tài liệu này tiện dụng vì chúng tôi sẽ sử dụng nó thường xuyên khi chúng tôi tạo tài liệu HTML mới
Xác thực mã
Cho dù chúng tôi có cẩn thận đến đâu khi viết mã, chúng tôi chắc chắn sẽ mắc lỗi. Rất may, khi viết HTML và CSS, chúng tôi có trình xác thực để kiểm tra công việc của chúng tôi. W3C đã xây dựng cả trình xác thực HTML và CSS sẽ quét mã để tìm lỗi. Việc xác thực mã của chúng tôi không chỉ giúp mã hiển thị chính xác trên tất cả các trình duyệt mà còn giúp hướng dẫn chúng tôi các phương pháp hay nhất để viết mã
Trong thực tế
Là nhà thiết kế web và nhà phát triển giao diện người dùng, chúng tôi có vinh dự được tham dự một số hội nghị tuyệt vời dành riêng cho nghề của chúng tôi. Chúng ta sẽ tạo nên hội nghị của riêng mình, Styles Conference và xây dựng một trang web cho nó trong suốt các bài học sau. chúng ta đi đây
Hãy mở trình soạn thảo văn bản của chúng ta, tạo một tệp mới có tên là 

07 và lưu nó vào một vị trí mà chúng ta sẽ không quên. Tôi sẽ tạo một thư mục trên Màn hình của mình có tên là “styles-conference” và lưu tệp này vào đó; 
Trong chỉ mục. html, hãy thêm cấu trúc tài liệu, bao gồm loại tài liệu 
1
2
3
4
5
6
7
8
9
10
11
12
2 và các phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
3, 
1
2
3
4
5
6
7
8
9
10
11
12
4 và 
1
2
3
4
5
6
7
8
9
10
11
12
5
1
2
3
4
5
6
7
8

 lang="en">
  
  
  
  

Bên trong phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
4, hãy thêm các phần tử 

 lang="en">
  
  
  
  

0 và 
1
2
3
4
5
6
7
8
0. Phần tử 

 lang="en">
  
  
  
  

0 phải bao gồm thuộc tính và giá trị bộ ký tự phù hợp, trong khi phần tử 
1
2
3
4
5
6
7
8
0 phải chứa tiêu đề của trang—giả sử “Hội nghị Phong cách. ”

0

1
Bên trong phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
5, hãy thêm các phần tử 
...
8 và 
1
2
0. Phần tử 
...
8 phải bao gồm tiêu đề mà chúng tôi muốn đưa vào—hãy sử dụng lại “Hội nghị phong cách”—và phần tử 
1
2
0 nên bao gồm một đoạn văn đơn giản để giới thiệu hội nghị của chúng ta

0_______10_______3
Bây giờ là lúc để xem chúng tôi đã làm như thế nào. Hãy đi tìm chỉ mục của chúng tôi. html (của tôi nằm trong thư mục “styles-conference” trên Desktop của tôi). Nhấp đúp vào tệp này hoặc kéo tệp vào trình duyệt web sẽ mở tệp để chúng tôi xem xét
Hình 1
Những bước đầu tiên của chúng tôi để xây dựng trang web Styles Conference
Hãy chuyển hướng một chút, tránh xa HTML và xem qua CSS. Hãy nhớ rằng, HTML sẽ xác định nội dung và cấu trúc của các trang web của chúng tôi, trong khi CSS sẽ xác định phong cách trực quan và hình thức của các trang web của chúng tôi
Hiểu các thuật ngữ CSS phổ biến
Ngoài các thuật ngữ HTML, có một số thuật ngữ CSS phổ biến mà bạn sẽ muốn làm quen với. Các thuật ngữ này bao gồm bộ chọn, thuộc tính và giá trị. Cũng giống như thuật ngữ HTML, bạn càng làm việc với CSS nhiều thì các thuật ngữ này sẽ càng trở thành bản chất thứ hai.
Bộ chọn
Khi các phần tử được thêm vào trang web, chúng có thể được tạo kiểu bằng CSS. Bộ chọn chỉ định chính xác phần tử hoặc phần tử nào trong HTML của chúng tôi để nhắm mục tiêu và áp dụng các kiểu (chẳng hạn như màu sắc, kích thước và vị trí) cho. Bộ chọn có thể bao gồm sự kết hợp của các vòng loại khác nhau để chọn các phần tử duy nhất, tất cả tùy thuộc vào mức độ cụ thể mà chúng tôi muốn trở thành. Ví dụ: chúng tôi có thể muốn chọn mọi đoạn trên một trang hoặc chúng tôi có thể chỉ muốn chọn một đoạn cụ thể trên một trang



Bộ chọn thường nhắm mục tiêu một giá trị thuộc tính, chẳng hạn như giá trị 
 href="http://shayhowe.com/">Shay Howe
1 hoặc 
 href="http://shayhowe.com/">Shay Howe
2 hoặc nhắm mục tiêu loại phần tử, chẳng hạn như 
...
8 hoặc 
1
2
0
Trong CSS, các bộ chọn được theo sau bởi dấu ngoặc nhọn, 

26, bao gồm các kiểu được áp dụng cho thành phần được chọn. Bộ chọn ở đây đang nhắm mục tiêu tất cả các phần tử 
1
2
0
1
2

5
Của cải
Khi một phần tử được chọn, một thuộc tính sẽ xác định các kiểu sẽ được áp dụng cho phần tử đó. Tên thuộc tính nằm sau bộ chọn, trong dấu ngoặc nhọn, 

26 và ngay trước dấu hai chấm, 

29. Có rất nhiều thuộc tính chúng ta có thể sử dụng, chẳng hạn như 

30, 

31, 

32, 

33 và 

34, và các thuộc tính mới thường được thêm vào. Trong đoạn mã sau, chúng tôi đang xác định các thuộc tính 

31 và 

32 sẽ được áp dụng cho tất cả các phần tử 
1
2
0

0_______10_______7
giá trị
Cho đến nay, chúng tôi đã chọn một phần tử bằng bộ chọn và xác định kiểu chúng tôi muốn áp dụng với một thuộc tính. Bây giờ chúng ta có thể xác định hành vi của thuộc tính đó với một giá trị. Các giá trị có thể được xác định là văn bản nằm giữa dấu hai chấm, 

29 và dấu chấm phẩy, 

39. Ở đây chúng tôi đang chọn tất cả các phần tử 
1
2
0 và đặt giá trị của thuộc tính 

31 là 

42 và giá trị của thuộc tính 

32 là 

44 pixel

0_______10_______9
Để xem lại, trong CSS, bộ quy tắc của chúng tôi bắt đầu bằng bộ chọn, ngay sau đó là dấu ngoặc nhọn. Trong các dấu ngoặc nhọn này là các khai báo bao gồm các cặp thuộc tính và giá trị. Mỗi khai báo bắt đầu bằng một thuộc tính, theo sau là dấu hai chấm, giá trị thuộc tính và cuối cùng là dấu chấm phẩy
Đó là một thực tế phổ biến để thụt lề các cặp thuộc tính và giá trị trong dấu ngoặc nhọn. Như với HTML, những thụt đầu dòng này giúp giữ cho mã của chúng tôi được tổ chức và dễ đọc
Hình 1
Phác thảo cú pháp CSS bao gồm bộ chọn, thuộc tính và giá trị
Biết một vài thuật ngữ phổ biến và cú pháp chung của CSS là một khởi đầu tuyệt vời, nhưng chúng ta có một vài mục nữa cần tìm hiểu trước khi đi quá sâu. Cụ thể, chúng ta cần xem xét kỹ hơn cách bộ chọn hoạt động trong CSS
Làm việc với Selector
Bộ chọn, như đã đề cập trước đó, cho biết phần tử HTML nào đang được tạo kiểu. Điều quan trọng là phải hiểu đầy đủ cách sử dụng bộ chọn và cách chúng có thể được tận dụng. Bước đầu tiên là làm quen với các loại bộ chọn khác nhau. Chúng tôi sẽ bắt đầu với các bộ chọn phổ biến nhất. bộ chọn loại, lớp và ID
Bộ chọn loại
Loại bộ chọn nhắm mục tiêu các phần tử theo loại phần tử của chúng. Ví dụ: nếu chúng tôi muốn nhắm mục tiêu tất cả các phần tử phân chia, 
1
2
2, chúng tôi sẽ sử dụng bộ chọn loại là 

46. Đoạn mã sau hiển thị bộ chọn loại cho các phần tử phân chia cũng như HTML tương ứng mà nó chọn
CSS
1
2
1
2
1               HTML
1
2
2
1
2
3
Bộ chọn lớp
Bộ chọn lớp cho phép chúng ta chọn một phần tử dựa trên giá trị thuộc tính 
 href="http://shayhowe.com/">Shay Howe
2 của phần tử đó. Bộ chọn lớp cụ thể hơn một chút so với bộ chọn loại, vì chúng chọn một nhóm phần tử cụ thể thay vì tất cả các phần tử của một loại
Bộ chọn lớp cho phép chúng ta áp dụng cùng một kiểu cho các phần tử khác nhau cùng một lúc bằng cách sử dụng cùng một giá trị thuộc tính 
 href="http://shayhowe.com/">Shay Howe
2 trên nhiều phần tử
Trong CSS, các lớp được biểu thị bằng dấu chấm trước, 

49, theo sau là giá trị thuộc tính 
 href="http://shayhowe.com/">Shay Howe
2. Ở đây, bộ chọn lớp sẽ chọn bất kỳ phần tử nào chứa giá trị thuộc tính 
 href="http://shayhowe.com/">Shay Howe
2 của 

52, bao gồm cả phần tử chia và đoạn
CSS
1
2
1
2
5               HTML
1
2
2
1
2
7
Bộ chọn ID
Bộ chọn ID thậm chí còn chính xác hơn bộ chọn lớp vì chúng chỉ nhắm mục tiêu một phần tử duy nhất tại một thời điểm. Giống như bộ chọn lớp sử dụng giá trị thuộc tính 
 href="http://shayhowe.com/">Shay Howe
2 của phần tử làm bộ chọn, bộ chọn ID sử dụng giá trị thuộc tính 
 href="http://shayhowe.com/">Shay Howe
1 của phần tử làm bộ chọn
Bất kể chúng xuất hiện trên loại phần tử nào, chỉ có thể sử dụng giá trị thuộc tính 
 href="http://shayhowe.com/">Shay Howe
1 một lần trên mỗi trang. Nếu được sử dụng, chúng nên được dành riêng cho các yếu tố quan trọng
Trong CSS, bộ chọn ID được biểu thị bằng dấu thăng ở đầu, 

56, theo sau là giá trị thuộc tính 
 href="http://shayhowe.com/">Shay Howe
1. Ở đây, bộ chọn ID sẽ chỉ chọn phần tử chứa giá trị thuộc tính 
 href="http://shayhowe.com/">Shay Howe
1 của 

59
CSS
1
2
1
2
9               HTML
1
2
...
1
Bộ chọn bổ sung
Bộ chọn cực kỳ mạnh mẽ và bộ chọn được nêu ở đây là bộ chọn phổ biến nhất mà chúng tôi sẽ gặp. Những bộ chọn này cũng chỉ là khởi đầu. Nhiều bộ chọn nâng cao hơn tồn tại và có sẵn. Khi bạn cảm thấy thoải mái với những bộ chọn này, đừng ngại xem xét một số bộ chọn nâng cao hơn
Được rồi, mọi thứ đang bắt đầu đến với nhau. Chúng tôi thêm các phần tử vào một trang bên trong HTML của mình và sau đó chúng tôi có thể chọn các phần tử đó và áp dụng các kiểu cho chúng bằng CSS. Bây giờ, hãy kết nối các dấu chấm giữa HTML và CSS của chúng ta và làm cho hai ngôn ngữ này hoạt động cùng nhau
CSS tham chiếu
Để CSS nói chuyện với HTML của chúng tôi, chúng tôi cần tham chiếu tệp CSS của chúng tôi trong HTML của chúng tôi. Cách tốt nhất để tham chiếu CSS của chúng ta là bao gồm tất cả các kiểu của chúng ta trong một biểu định kiểu bên ngoài duy nhất, được tham chiếu từ bên trong phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
4 của tài liệu HTML của chúng ta. Sử dụng một biểu định kiểu bên ngoài duy nhất cho phép chúng tôi sử dụng các kiểu giống nhau trên toàn bộ trang web và nhanh chóng thực hiện các thay đổi trên toàn trang
Các tùy chọn khác để thêm CSS
Các tùy chọn khác để tham chiếu CSS bao gồm sử dụng các kiểu nội bộ và nội tuyến. Bạn có thể bắt gặp các tùy chọn này trong tự nhiên, nhưng chúng thường không được tán thành vì chúng làm cho việc cập nhật các trang web trở nên cồng kềnh và khó sử dụng
Để tạo biểu định kiểu CSS bên ngoài của chúng tôi, chúng tôi sẽ muốn sử dụng lại trình soạn thảo văn bản của mình để tạo một tệp văn bản thuần túy mới có phần mở rộng tệp 

61. Tệp CSS của chúng tôi phải được lưu trong cùng một thư mục hoặc thư mục con, nơi đặt tệp HTML của chúng tôi
Trong phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
4 của tài liệu HTML, phần tử 

 lang="en">
  
  
  
  

8 được sử dụng để xác định mối quan hệ giữa tệp HTML và tệp CSS. Vì chúng tôi đang liên kết với CSS, nên chúng tôi sử dụng thuộc tính 

64 với giá trị là 

65 để chỉ định mối quan hệ của chúng. Hơn nữa, thuộc tính 
 href="http://shayhowe.com/">Shay Howe
4 (hoặc tham chiếu siêu liên kết) được sử dụng để xác định vị trí hoặc đường dẫn của tệp CSS



Xem xét ví dụ sau về phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
4 của tài liệu HTML tham chiếu đến một biểu định kiểu bên ngoài
...
2
...
3
Để CSS hiển thị chính xác, đường dẫn của giá trị thuộc tính 
 href="http://shayhowe.com/">Shay Howe
4 phải tương quan trực tiếp với nơi tệp CSS của chúng ta được lưu. Trong ví dụ trước, tệp 

69 được lưu trữ trong cùng một vị trí với tệp HTML, còn được gọi là thư mục gốc
Nếu tệp CSS của chúng tôi nằm trong thư mục con hoặc thư mục con, thì giá trị thuộc tính 
 href="http://shayhowe.com/">Shay Howe
4 cần phải tương quan với đường dẫn này cho phù hợp. Ví dụ: nếu tệp 

69 của chúng tôi được lưu trữ trong thư mục con có tên là 

72, thì giá trị thuộc tính 
 href="http://shayhowe.com/">Shay Howe
4 sẽ là 

74, sử dụng dấu gạch chéo về phía trước để biểu thị việc di chuyển vào thư mục con
Tại thời điểm này, các trang của chúng tôi bắt đầu trở nên sống động, chậm rãi nhưng chắc chắn. Chúng tôi chưa đi sâu vào CSS quá nhiều, nhưng bạn có thể nhận thấy rằng một số thành phần có kiểu mặc định mà chúng tôi chưa khai báo trong CSS của mình. Đó là trình duyệt áp đặt các kiểu CSS ưa thích của riêng nó cho các phần tử đó. May mắn thay, chúng ta có thể ghi đè lên các kiểu này khá dễ dàng, đó là điều chúng ta sẽ làm tiếp theo bằng cách sử dụng CSS reset
Sử dụng Đặt lại CSS
Mỗi trình duyệt web có các kiểu mặc định riêng cho các thành phần khác nhau. Cách Google Chrome hiển thị tiêu đề, đoạn văn, danh sách, v.v. có thể khác với cách Internet Explorer thực hiện. Để đảm bảo khả năng tương thích giữa nhiều trình duyệt, đặt lại CSS đã được sử dụng rộng rãi
Đặt lại CSS lấy mọi thành phần HTML phổ biến với kiểu được xác định trước và cung cấp một kiểu thống nhất cho tất cả các trình duyệt. Các thiết lập lại này thường liên quan đến việc xóa mọi kích thước, lề, phần đệm hoặc kiểu bổ sung và giảm bớt các giá trị này. Bởi vì CSS xếp tầng từ trên xuống dưới—sẽ sớm nói thêm về điều đó—thiết lập lại của chúng tôi cần phải ở trên cùng của biểu định kiểu của chúng tôi. Làm như vậy đảm bảo rằng các kiểu đó được đọc trước và tất cả các trình duyệt web khác nhau đang hoạt động trên một đường cơ sở chung
Có một loạt các thiết lập lại khác nhau có sẵn để sử dụng, tất cả đều có sở trường riêng. Một trong những cách đặt lại phổ biến nhất là cách đặt lại của Eric Meyer, đã được điều chỉnh để bao gồm các kiểu cho các phần tử HTML5 mới
Nếu bạn cảm thấy mạo hiểm hơn một chút, thì cũng có Bình thường hóa. css, được tạo bởi Nicolas Gallagher. bình thường hóa. css không tập trung vào việc sử dụng thiết lập lại cứng cho tất cả các phần tử phổ biến mà thay vào đó đặt các kiểu chung cho các phần tử này. Nó đòi hỏi sự hiểu biết sâu sắc hơn về CSS, cũng như nhận thức về những gì bạn muốn phong cách của mình trở thành
Khả năng tương thích và kiểm tra trình duyệt chéo
Như đã đề cập trước đây, các trình duyệt khác nhau hiển thị các phần tử theo những cách khác nhau. Điều quan trọng là phải nhận ra giá trị trong khả năng tương thích và thử nghiệm giữa các trình duyệt. Các trang web không cần giống hệt nhau trong mọi trình duyệt, nhưng chúng phải gần nhau. Những trình duyệt nào bạn muốn hỗ trợ và ở mức độ nào là quyết định mà bạn cần đưa ra dựa trên những gì tốt nhất cho trang web của mình
Nói chung, có một số điều cần chú ý khi viết CSS. Tin tốt là mọi thứ đều có thể xảy ra và với một chút kiên nhẫn, chúng ta sẽ tìm ra tất cả
Trong thực tế
Quay lại nơi chúng tôi đã dừng lại lần cuối trên trang web hội nghị của mình, hãy xem liệu chúng tôi có thể thêm một chút CSS không
Bên trong thư mục “styles-conference” của chúng ta, hãy tạo một thư mục mới có tên “assets. ” Chúng tôi sẽ lưu trữ tất cả nội dung cho trang web của mình, chẳng hạn như biểu định kiểu, hình ảnh, video, v.v. trong thư mục này. Đối với biểu định kiểu của chúng ta, hãy tiếp tục và thêm một thư mục khác có tên là “bảng định kiểu” bên trong thư mục “nội dung”
Sử dụng trình soạn thảo văn bản của chúng ta, hãy tạo một tệp mới có tên là 

69 và lưu nó trong thư mục “bảng định kiểu” mà chúng ta vừa tạo
Nhìn vào tệp 

07 của chúng tôi trong trình duyệt web, chúng tôi có thể thấy rằng các phần tử 
...
8 và 
1
2
0 đều có các kiểu CSS mặc định. Cụ thể, mỗi cái có một cỡ chữ và khoảng cách xung quanh chúng. Sử dụng thiết lập lại của Eric Meyer, chúng tôi có thể giảm bớt các kiểu này, cho phép mỗi kiểu được tạo kiểu từ cùng một cơ sở. Để thực hiện việc này, hãy truy cập trang web của Eric, sao chép thiết lập lại của anh ấy và dán vào đầu tệp 

69 của chúng tôi
...
4_______0_______5
Khi tệp 

69 của chúng tôi bắt đầu hình thành, hãy kết nối nó với tệp 

07 của chúng tôi. Mở tệp 

07 trong trình soạn thảo văn bản của chúng ta, hãy thêm phần tử 

 lang="en">
  
  
  
  

8 vào phần tử 
1
2
3
4
5
6
7
8
9
10
11
12
4 của chúng ta, ngay sau phần tử 
1
2
3
4
5
6
7
8
0
Bởi vì chúng ta sẽ tham chiếu đến một biểu định kiểu trong phần tử 

 lang="en">
  
  
  
  

8, hãy thêm thuộc tính quan hệ, 

64, với giá trị là 

65
Chúng tôi cũng muốn bao gồm một tham chiếu siêu liên kết, sử dụng thuộc tính 
 href="http://shayhowe.com/">Shay Howe
4, vào tệp 

69 của chúng tôi. Hãy nhớ rằng, tệp 

69 của chúng tôi được lưu trong thư mục “bảng định kiểu”, nằm trong thư mục “nội dung”. Do đó, giá trị thuộc tính 
 href="http://shayhowe.com/">Shay Howe
4, là đường dẫn đến tệp 

69 của chúng ta, cần phải là 

94
...
6_______0_______7
Đã đến lúc kiểm tra công việc của chúng tôi và xem liệu HTML và CSS của chúng tôi có phù hợp với nhau không. Bây giờ, mở tệp 

07 của chúng tôi (hoặc làm mới trang nếu nó đã được mở) trong trình duyệt web sẽ hiển thị kết quả hơi khác so với trước đây
Hình 1
Trang web Hội nghị Phong cách của chúng tôi với thiết lập lại CSS
Demo và mã nguồn
Bên dưới, bạn có thể xem trang web Styles Conference ở trạng thái hiện tại, cũng như tải xuống mã nguồn cho trang web ở trạng thái hiện tại
Xem Trang web Styles Conference  hoặc Tải xuống Mã nguồn  (Tệp zip)
Bản tóm tắt
Càng xa càng tốt. Chúng tôi đã thực hiện một số bước quan trọng trong bài học này
Nghĩ mà xem, bây giờ bạn đã biết những kiến ​​thức cơ bản về HTML và CSS. Khi chúng tôi tiếp tục và bạn dành nhiều thời gian hơn để viết HTML và CSS, bạn sẽ cảm thấy thoải mái hơn nhiều với hai ngôn ngữ này
 

			
CSS và HTML hoạt động như thế nào trong việc tạo web?
			
HTML cung cấp các công cụ thô cần thiết để cấu trúc nội dung trên trang web.  Mặt khác, CSS giúp tạo kiểu cho nội dung này để người dùng có thể nhìn thấy nội dung đó theo cách mà nó dự định được xem . Các ngôn ngữ này được giữ riêng biệt để đảm bảo các trang web được xây dựng chính xác trước khi chúng được định dạng lại. 
		
			
Làm cách nào để tạo một trang web bằng HTML và CSS?
			
Lập kế hoạch bố trí của bạn. Bước đầu tiên của bất kỳ trang web nào là luôn biết bạn muốn gì trên đó và (mơ hồ) bạn muốn nó trông như thế nào.  .  
 
Thiết lập 'mã soạn sẵn'.  .  
 
Tạo các phần tử trong bố cục của bạn.  .  
 
Điền nội dung HTML.  .  
 
Thêm một số CSS bố cục cơ bản.  .  
 
Thêm phong cách cụ thể hơn.  .  
 
Thêm màu sắc và hình nền.  .  
 
Kỉ niệm
 
		
			
CSS được sử dụng như thế nào trong việc tạo các trang Web?
			
CSS (Cascading Style Sheets) được sử dụng để tạo kiểu và bố cục trang web — ví dụ:  để thay đổi phông chữ, màu sắc, kích thước và khoảng cách của nội dung, hãy chia nội dung đó thành . .
		
			
HTML và CSS có đủ để tạo một trang web không?
			
HTML, CSS và JavaScript là những ngôn ngữ cơ bản bạn cần biết để tạo trang web .