search

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Ngày đăng: 22/11/2022
Trả lời: 0
Lượt xem: 193

// Sê -ri Hướng dẫn //

Show

Cách xây dựng một trang web với CSS

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Giới thiệu

Giới thiệu

Sê-ri hướng dẫn dựa trên dự án này sẽ giới thiệu cho bạn các bảng kiểu xếp tầng (CSS), một ngôn ngữ biểu định kiểu được sử dụng để kiểm soát việc trình bày các trang web, bằng cách xây dựng một trang web cá nhân bằng cách sử dụng trang web trình diễn của chúng tôi làm mô hình. Mặc dù trang web trình diễn của chúng tôi có tính năng Sammy the Shark, bạn có thể chuyển sang thông tin Sammy, nếu bạn muốn cá nhân hóa trang web của mình.

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Bên cạnh HTML và JavaScript, CSS là một trong những công nghệ cốt lõi của World Wide Web. Nếu bạn có một số hiểu biết về HTML và đang tìm cách phát triển các kỹ năng phát triển phía trước của bạn, việc học CSS là một bước tiếp theo tuyệt vời.

Nửa đầu của loạt hướng dẫn này sẽ giới thiệu CSS thông qua các bài tập thực hành và nửa sau của loạt hướng dẫn sẽ cung cấp các bước để tái tạo trang web trình diễn. Nếu bạn muốn bắt đầu xây dựng trang web trình diễn ngay lập tức, bạn có thể bắt đầu với hướng dẫn cách thiết lập dự án trang web CSS và HTML của bạn và tiến hành từ đó.

Vào cuối loạt CSS Tutorial này, bạn sẽ có các tệp sẵn sàng để triển khai một trang web lên đám mây, cũng như sự hiểu biết về cách tiếp tục sửa đổi thiết kế trang web với HTML và CSS. Bạn cũng sẽ có một nền tảng để học các kỹ năng phát triển web phía trước bổ sung (như JavaScript) và các khung (như Tailwind).

Điều kiện tiên quyết

  • Một trình soạn thảo mã như Visual Studio Code hoặc Atom. Sê -ri này sẽ sử dụng mã Visual Studio làm trình chỉnh sửa mã mặc định của chúng tôi nhưng bạn có thể sử dụng bất kỳ trình soạn thảo mã nào bạn muốn. Một số hướng dẫn có thể cần phải được sửa đổi một chút nếu bạn sử dụng một trình soạn thảo khác.

  • Một trình duyệt web như Firefox hoặc Chrome. Chuỗi hướng dẫn này sẽ sử dụng Firefox làm trình duyệt mặc định của chúng tôi nhưng bạn có thể sử dụng bất kỳ trình duyệt nào bạn thích. Một số hướng dẫn có thể cần phải được sửa đổi một chút nếu bạn sử dụng trình duyệt web khác.

  • Hai ảnh hồ sơ khác nhau, hình ảnh hoặc avatar để cá nhân hóa trang web của bạn (tùy chọn).

  • Làm quen với HTML. Nếu bạn không quen thuộc với HTML hoặc muốn bồi dưỡng, bạn có thể làm theo mười hướng dẫn đầu tiên của loạt bài của chúng tôi cách xây dựng một trang web với HTML trước khi bắt đầu loạt bài này.

Khi bạn đã sẵn sàng điều kiện tiên quyết của mình, bạn sẽ sẵn sàng bắt đầu dự án trang web CSS của mình trong các hướng dẫn phía trước.

Tóm tắt chế độ xem

xem chi tiết

// Hướng dẫn //

Giới thiệu

Sê-ri hướng dẫn dựa trên dự án này sẽ giới thiệu cho bạn các bảng kiểu xếp tầng (CSS), một ngôn ngữ biểu định kiểu được sử dụng để kiểm soát việc trình bày các trang web, bằng cách xây dựng một trang web cá nhân bằng cách sử dụng trang web trình diễn của chúng tôi làm mô hình. Mặc dù trang web trình diễn của chúng tôi có tính năng Sammy the Shark, bạn có thể chuyển sang thông tin Sammy, nếu bạn muốn cá nhân hóa trang web của mình.

Bên cạnh HTML và JavaScript, CSS là một trong những công nghệ cốt lõi của World Wide Web. Nếu bạn có một số hiểu biết về HTML và đang tìm cách phát triển các kỹ năng phát triển phía trước của bạn, việc học CSS là một bước tiếp theo tuyệt vời.

Nửa đầu của loạt hướng dẫn này sẽ giới thiệu CSS thông qua các bài tập thực hành và nửa sau của loạt hướng dẫn sẽ cung cấp các bước để tái tạo trang web trình diễn. Nếu bạn muốn bắt đầu xây dựng trang web trình diễn ngay lập tức, bạn có thể bắt đầu với hướng dẫn cách thiết lập dự án trang web CSS và HTML của bạn và tiến hành từ đó.

Vào cuối loạt CSS Tutorial này, bạn sẽ có các tệp sẵn sàng để triển khai một trang web lên đám mây, cũng như sự hiểu biết về cách tiếp tục sửa đổi thiết kế trang web với HTML và CSS. Bạn cũng sẽ có một nền tảng để học các kỹ năng phát triển web phía trước bổ sung (như JavaScript) và các khung (như Tailwind).

Điều kiện tiên quyết

Một trình soạn thảo mã như Visual Studio Code hoặc Atom. Sê -ri này sẽ sử dụng mã Visual Studio làm trình chỉnh sửa mã mặc định của chúng tôi nhưng bạn có thể sử dụng bất kỳ trình soạn thảo mã nào bạn muốn. Một số hướng dẫn có thể cần phải được sửa đổi một chút nếu bạn sử dụng một trình soạn thảo khác.

Một trình duyệt web như Firefox hoặc Chrome. Chuỗi hướng dẫn này sẽ sử dụng Firefox làm trình duyệt mặc định của chúng tôi nhưng bạn có thể sử dụng bất kỳ trình duyệt nào bạn thích. Một số hướng dẫn có thể cần phải được sửa đổi một chút nếu bạn sử dụng trình duyệt web khác.

Hai ảnh hồ sơ khác nhau, hình ảnh hoặc avatar để cá nhân hóa trang web của bạn (tùy chọn).

// Hướng dẫn //

Giới thiệu

Trong hướng dẫn này, bạn sẽ thiết lập các thư mục và tệp cần thiết để khám phá CSS và xây dựng một trang web. Sử dụng trình soạn thảo mã, bạn sẽ tạo thư mục dự án cho trang web của chúng tôi, thư mục và tệp cho mã CSS của chúng tôi, một tệp cho mã HTML của chúng tôi và thư mục cho hình ảnh. Sê-ri hướng dẫn này sử dụng Visual Studio Code, trình chỉnh sửa mã có sẵn miễn phí cho Mac, Windows hoặc Linux, nhưng bạn có thể sử dụng bất kỳ trình chỉnh sửa mã nào bạn thích. Lưu ý rằng một số hướng dẫn nhất định có thể cần phải được sửa đổi một chút nếu bạn sử dụng một trình soạn thảo khác.

Cách tạo các tệp và thư mục HTML và CSS

Sau khi mở trình chỉnh sửa văn bản ưa thích của bạn, hãy mở một thư mục dự án mới và đặt tên cho nó 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
3. Bạn sẽ sử dụng thư mục này để lưu trữ tất cả các tệp và thư mục bạn tạo trong quá trình của loạt hướng dẫn này.

Để tạo một thư mục dự án mới trong Code Visual Studio, điều hướng đến mục menu của tệp tệp trong menu trên cùng và chọn thư mục Thêm vào không gian làm việc. Trong cửa sổ mới, nhấp vào nút thư mục mới của Google và tạo một thư mục mới có tên là 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
3:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Tiếp theo, tạo một thư mục mới bên trong 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
3 và đặt tên cho nó 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
6. Bên trong thư mục này, hãy mở một tệp mới trong thư mục dự án của bạn và lưu nó dưới dạng ____ 87, Đây là tệp bạn sẽ sử dụng để lưu trữ các quy tắc kiểu CSS của chúng tôi. Nếu bạn đang sử dụng mã Visual Studio, bạn có thể tạo một thư mục mới bằng cách sử dụng ____ 88 (trên Windows) hoặc 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
9 (trên MAC) trên thư mục 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
3, chọn thư mục mới và tạo thư mục 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
6. Sau đó, bấm ________ 88 (trên Windows) hoặc 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
9 (trên MAC) trên thư mục 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
6 mới, chọn tệp mới và tạo tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 như được minh họa trong GIF dưới đây:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Lưu tệp và để nó mở.

Bạn cũng cần tạo một tệp để thêm nội dung HTML của chúng tôi, văn bản, hình ảnh và các phần tử HTML sẽ được hiển thị trong trình duyệt. Trong thư mục dự án 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
3, hãy mở một tệp mới bổ sung và lưu nó dưới dạng 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 giống như cách bạn đã tạo tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 ở trên. Đảm bảo lưu tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 này trong thư mục 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
3 và không trong thư mục 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
6.

Tiếp theo, bạn cần thêm một dòng mã trong tài liệu 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 hướng dẫn trình duyệt sử dụng tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 làm bảng kiểu của chúng tôi. Để thực hiện việc này, bạn sẽ sử dụng thẻ HTML 
h2 {
  color: blue;
}
04 và liên kết đến tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7. Thêm đoạn mã sau vào tài liệu HTML của bạn:

index.html

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

Đoạn mã này nói với trình duyệt diễn giải mã HTML theo bảng kiểu được đặt tại 

h2 {
  color: blue;
}
06 Hãy chắc chắn rằng bạn không xóa được dòng này trong khi thêm hoặc xóa nội dung vào tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn trong suốt chuỗi hướng dẫn này. Lưu tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn và giữ cho nó mở.

Cuối cùng, tạo một thư mục bổ sung bên trong 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
3 và đặt tên cho nó 
h2 {
  color: blue;
}
10 giống như cách bạn đã tạo thư mục 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
6 ở trên. Thư mục này sẽ là nơi bạn lưu bất kỳ hình ảnh nào bạn sử dụng trong loạt hướng dẫn này.

Bây giờ bạn nên có một thư mục dự án có tên 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
3 có chứa các thư mục và tệp cần thiết để khám phá CSS trong chuỗi hướng dẫn này:

  • Một thư mục có tên 
    <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
    6 chứa tệp 
    <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
    7
  • Một thư mục trống có tên 
    h2 {
  color: blue;
}
    10
  • Một tệp có tên 
    . . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
    7

Nếu bạn đang sử dụng mã Visual Studio, trình soạn thảo của bạn bây giờ sẽ hiển thị cây tệp sau và các tệp mở:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Lưu ý rằng các tên tệp bao gồm các tiện ích mở rộng (

h2 {
  color: blue;
}
17 và 
h2 {
  color: blue;
}
18) đề cập đến loại nội dung mà chúng chứa. Bạn sẽ thêm nội dung vào các tệp này trong các bài tập thực hành của chúng tôi trong các hướng dẫn theo sau.

Gỡ lỗi và khắc phục sự cố CSS và HTML

Độ chính xác rất quan trọng khi làm việc với HTML và CSS. Ngay cả một không gian bổ sung hoặc nhân vật bị nhầm lẫn cũng có thể giữ cho mã của bạn không hoạt động như mong đợi.

Nếu mã HTML hoặc CSS của bạn không hiển thị trong trình duyệt như dự định, hãy đảm bảo bạn đã viết mã chính xác như được viết trong hướng dẫn. Mặc dù chúng tôi khuyến khích bạn viết mã theo cách thủ công cho mục đích học tập, sao chép và dán đôi khi có thể hữu ích để đảm bảo rằng mã của bạn phù hợp với các ví dụ.

Lỗi HTML và CSS có thể được gây ra bởi một số điều. Kiểm tra các quy tắc đánh dấu và CSS của bạn để biết thêm hoặc thiếu các không gian, các thẻ bị thiếu hoặc sai chính tả, và dấu chấm câu bị thiếu hoặc không chính xác. Bạn cũng nên đảm bảo rằng bạn không vô tình sử dụng các dấu ngoặc kép của Curly Curly hay thông minh như 

h2 {
  color: blue;
}
19 và 
h2 {
  color: blue;
}
20 thường được sử dụng bởi các trình xử lý văn bản. Trích dẫn xoăn được thiết kế cho văn bản có thể đọc được của con người và sẽ gây ra lỗi trong mã của bạn vì chúng không được công nhận là dấu ngoặc kép của trình duyệt. Bằng cách nhập dấu ngoặc kép trực tiếp vào trình chỉnh sửa mã của bạn, bạn có thể đảm bảo rằng bạn đang sử dụng đúng loại.

Ngoài ra, mỗi lần bạn thay đổi mã, hãy đảm bảo lưu tệp của bạn trước khi tải lại nó trong trình duyệt để kiểm tra kết quả của bạn.

Một lưu ý nhanh về các tính năng hỗ trợ HTML tự động

Một số trình chỉnh sửa mã, ví dụ như Trình chỉnh sửa mã Visual Studio mà chúng tôi sử dụng trong loạt bài này cung cấp hỗ trợ tự động để viết mã HTML. Đối với Visual Studio Code, hỗ trợ đó bao gồm các đề xuất thông minh và hoàn thành tự động. Mặc dù hỗ trợ này thường hữu ích, nhưng hãy lưu ý rằng bạn có thể tạo thêm mã sẽ tạo ra lỗi nếu bạn không quen làm việc với các tính năng hỗ trợ này. Nếu bạn tìm thấy các tính năng này gây mất tập trung, bạn có thể tắt chúng trong các tùy chọn của Trình chỉnh sửa mã.

Sự kết luận

Bây giờ bạn đã sẵn sàng để tiến hành loạt hướng dẫn. Trong hướng dẫn tiếp theo, bạn sẽ bắt đầu khám phá cách các quy tắc CSS được sử dụng để kiểm soát kiểu và bố cục của nội dung HTML trên trang web.

// Hướng dẫn //

Giới thiệu

Trong hướng dẫn này, bạn sẽ học cách hiểu và tạo các quy tắc CSS (còn được gọi là quy tắc) để tạo kiểu và kiểm soát bố cục của nội dung HTML. Hướng dẫn sẽ bắt đầu với một quy tắc CSS ví dụ tạo ra các phần tử HTML màu xanh để nghiên cứu cách các quy tắc CSS hoạt động trong hành động trước khi giải thích từng thành phần của quy tắc CSS.

Điều kiện tiên quyết

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trong hướng dẫn trước đây để thiết lập dự án thực hành CSS và HTML của bạn.

Khám phá một ví dụ quy tắc CSS

Dưới đây là một ví dụ về quy tắc CSS. Viết quy tắc sau vào tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn:

styles.css

h2 {
  color: blue;
}

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn. Lưu ý rằng bạn đã thụt lề 
h2 {
  color: blue;
}
24 hai không gian ở bên phải. Thắng này là một thông lệ tốt nhất được khuyến nghị để viết các quy tắc kiểu CSS vì nó làm cho mã dễ dàng đọc hơn bởi các nhà phát triển.

Quy tắc bạn vừa thêm hướng dẫn trình duyệt để cung cấp cho bất kỳ nội dung văn bản HTML nào được gắn thẻ với phần tử HTML 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
1 màu xanh lam. .

Tiếp theo, thêm một phần nội dung HTML được gắn thẻ phần tử 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
1 vào tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 (ngay bên dưới dòng 
h2 {
  color: blue;
}
28 ở đầu tài liệu):

index.html

<h2>A Sample Titleh2>

Lưu tệp và tải tệp HTML trong trình duyệt của bạn để kiểm tra kết quả của bạn. .

Trong trình duyệt của bạn, bạn sẽ nhận được kết quả sau:

! [Kết quả trang web] (https://assets.digitalocean.com/articles/how-to-build-a-website-with-css/a-simple-t

Nếu bạn không có kết quả tương tự, hãy chắc chắn rằng bạn đã lưu cả tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 và tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn và không có lỗi nào trong mã của bạn.

Cách hiểu các thành phần của quy tắc CSS

Bây giờ, hãy xem xét quy tắc CSS ví dụ để hiểu từng thành phần khác nhau của nó. Nói chung, quy tắc CSS bao gồm một bộ chọn, khối khai báo, thuộc tính và giá trị. Sơ đồ dưới đây minh họa cách mỗi phần này được biểu diễn trong một quy tắc:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Bây giờ, hãy cùng nghiên cứu từng phần này và cách chúng liên quan đến quy tắc CSS ví dụ.

  • Bộ chọn chỉ ra loại nội dung nào được tạo kiểu theo quy tắc CSS. Bộ chọn được đặt ở đầu quy tắc CSS và bên ngoài giá đỡ xoăn mở. Trong ví dụ CSS, bộ chọn là phần tử 
    <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
    1 HTML, là bộ chọn thẻ. Chúng tôi sẽ tìm hiểu về các loại bộ chọn khác sau này trong loạt hướng dẫn.
  • Khối khai báo là một phần của quy tắc CSS tuyên bố quy tắc kiểu cho bộ chọn. Khối khai báo được đặt bên trong các dấu ngoặc xoăn. Trong ví dụ CSS, khối khai báo là 
    h2 {
  color: blue;
}
    32.
  • Tài sản đề cập đến thuộc tính của nội dung HTML mà quy tắc CSS sẽ sửa đổi, chẳng hạn như 
    h2 {
  color: blue;
}
    33 hoặc 
    h2 {
  color: blue;
}
    34. Trong ví dụ CSS, tài sản là 
    h2 {
  color: blue;
}
    35 Lưu ý rằng một dấu hai chấm được thêm vào sau tài sản.
  • Giá trị đề cập đến giá trị cụ thể được gán cho thuộc tính, chẳng hạn như 
    h2 {
  color: blue;
}
    36 hoặc 
    h2 {
  color: blue;
}
    37. Trong quy tắc CSS ví dụ, giá trị là 
    h2 {
  color: blue;
}
    38 Lưu ý rằng dấu chấm phẩy được thêm vào sau giá trị.

Khi bạn khai báo một quy tắc cho một bộ chọn, mọi phần nội dung trong tài liệu HTML của bạn được đánh dấu bằng bộ chọn đó sẽ được hiển thị theo quy tắc. Tuy nhiên, các trường hợp ngoại lệ sẽ xảy ra nếu quy tắc CSS mâu thuẫn được ưu tiên.

Sự kết luận

Bây giờ bạn đã sẵn sàng để tiến hành loạt hướng dẫn. Trong hướng dẫn tiếp theo, bạn sẽ bắt đầu khám phá cách các quy tắc CSS được sử dụng để kiểm soát kiểu và bố cục của nội dung HTML trên trang web.

// Hướng dẫn //

// Hướng dẫn //

Giới thiệu

Trong hướng dẫn này, bạn sẽ học cách khai báo các giá trị cho nhiều thuộc tính trong quy tắc CSS. Khai thác nhiều thuộc tính trong một quy tắc duy nhất cho phép bạn áp dụng nhiều hướng dẫn kiểu, ví dụ như kích thước, màu sắc và căn chỉnh của một phần tử cùng một lúc. Chúng tôi cũng sẽ khám phá việc tạo ra một loạt các quy tắc CSS cho phép chúng tôi áp dụng các phong cách khác nhau cho các phần nội dung khác nhau trong một tài liệu HTML.

Điều kiện tiên quyết

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Tạo quy tắc CSS với nhiều khai báo

Để thêm nhiều hơn một khai báo vào quy tắc CSS, hãy thử sửa đổi quy tắc 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
1 của bạn trong tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn (hoặc thêm toàn bộ đoạn mã nếu bạn đã theo dõi chuỗi hướng dẫn) để nó bao gồm các tuyên bố được tô sáng bổ sung:

h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}

Lưu tệp và tải lại tài liệu HTML của bạn trong trình duyệt của bạn. (Để biết hướng dẫn tải tệp HTML, vui lòng truy cập bước hướng dẫn của chúng tôi cách xem tệp HTML ngoại tuyến trong trình duyệt của bạn). Văn bản của bạn bây giờ nên được đặt ở trung tâm của trang, có kích thước 100 pixel và kết xuất với phông chữ 

h2 {
  color: blue;
}
41:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Trong phần tiếp theo, chúng tôi sẽ thêm nhiều quy tắc CSS hơn để mở rộng các khả năng kiểu dáng cho nội dung trang web.

Tạo nhiều quy tắc CSS để tạo nội dung HTML kiểu

Trong phần này, chúng tôi sẽ thêm một số văn bản khác vào tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 bằng phần tử HTML 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
2. Chúng tôi sẽ thử nghiệm sửa đổi các thuộc tính của mình bằng cách sử dụng quy tắc CSS mới chỉ áp dụng cho các thẻ 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
2.

Trong tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7, thêm một dòng chứa 
h2 {
  color: blue;
}
46 bên dưới dòng 
h2 {
  color: blue;
}
47 hiện tại mà bạn đã thêm vào cách hiểu và tạo hướng dẫn quy tắc CSS:

index.html

<h2>A sample titleh2>
<p>Some paragraph textp>

Lưu tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 và tải lại nó trong cửa sổ trình duyệt để kiểm tra cách hiển thị tệp. Trình duyệt của bạn sẽ hiển thị một tiêu đề màu xanh nói rằng một tiêu đề mẫu "và một đoạn văn không có kiểu dáng bên dưới nó nói rằng một số văn bản đoạn văn" như ví dụ sau:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Tiếp theo, hãy để thêm một quy tắc CSS để tạo kiểu cho phần tử 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
2. Quay lại tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn và thêm các quy tắc sau ở cuối tệp:

styles.css

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

Lưu tệp và tải lại nó trong cửa sổ Trình duyệt để kiểm tra cách hiển thị tệp. Văn bản 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
2 của bạn bây giờ sẽ có kiểu bạn đã khai báo theo quy tắc CSS mà bạn vừa tạo:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Bây giờ bạn có các quy tắc CSS cho các yếu tố 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
1 và 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
2, bất kỳ văn bản nào bạn đánh dấu với các thẻ này trong tài liệu HTML của bạn sẽ đảm nhận các quy tắc kiểu mà bạn đã khai báo cho các yếu tố này trong tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn.

Thực hành thêm

Nếu bạn muốn tiếp tục thử nghiệm các quy tắc CSS, hãy thử tạo các quy tắc CSS cho các yếu tố văn bản HTML khác nhau như 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
1, 
h2 {
  color: blue;
}
56 và ________ 157 và sử dụng chúng để sửa đổi văn bản trong tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn. Nếu bạn bị mắc kẹt, bạn có thể sao chép các quy tắc CSS trong ví dụ sau và thêm chúng vào tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn:

styles.css

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}

Lưu tệp của bạn và sau đó thêm nội dung HTML sau vào tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn:

index.html

<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>

Lưu tệp và tải 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 trong trình duyệt của bạn. Bạn sẽ nhận được kết quả sau:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Sự kết luận

Trong hướng dẫn này, bạn đã thử nghiệm chỉ định các giá trị cho nhiều thuộc tính bằng CSS. Bạn cũng đã tạo nhiều quy tắc CSS để tạo kiểu nội dung văn bản trong tài liệu HTML. Bạn sẽ mở rộng trên cả hai kỹ năng này khi bạn bắt đầu xây dựng trang web trình diễn sau này trong loạt hướng dẫn. Trong hướng dẫn tiếp theo, bạn sẽ bắt đầu khám phá cách tạo kiểu hình ảnh với CSS.

// Hướng dẫn //

Giới thiệu

Trong hướng dẫn này, bạn sẽ học cách tạo kiểu hình ảnh với CSS để thêm đường viền và thay đổi hình dạng và kích thước của hình ảnh. Sử dụng hình ảnh CSS để tạo kiểu cho phép bạn chỉ định thống nhất cách hình ảnh sẽ xuất hiện trên trang web của bạn chỉ với một vài quy tắc.

Điều kiện tiên quyết

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Tạo quy tắc CSS với nhiều khai báo

Để thêm nhiều hơn một khai báo vào quy tắc CSS, hãy thử sửa đổi quy tắc 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
1 của bạn trong tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn (hoặc thêm toàn bộ đoạn mã nếu bạn đã theo dõi chuỗi hướng dẫn) để nó bao gồm các tuyên bố được tô sáng bổ sung:

Lưu tệp và tải lại tài liệu HTML của bạn trong trình duyệt của bạn. (Để biết hướng dẫn tải tệp HTML, vui lòng truy cập bước hướng dẫn của chúng tôi cách xem tệp HTML ngoại tuyến trong trình duyệt của bạn). Văn bản của bạn bây giờ nên được đặt ở trung tâm của trang, có kích thước 100 pixel và kết xuất với phông chữ 

h2 {
  color: blue;
}
41:: To download the image of Sammy the Shark, visit this link and 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
9 (on Macs) or 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
8 (on Windows) on the image and select “Save Image As” and save it as 
h2 {
  color: blue;
}
66 to your 
h2 {
  color: blue;
}
10 folder.

Khi bạn đã chọn một hình ảnh, hãy lưu nó vào thư mục 

h2 {
  color: blue;
}
10 của bạn là 
h2 {
  color: blue;
}
66. Nếu bạn lưu nó dưới dạng tên tệp khác, bạn sẽ cần sửa đổi đường dẫn tệp hình ảnh ở bước bên dưới.

Tiếp theo, xóa tất cả nội dung trong tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn (ngoại trừ dòng mã đầu tiên: 
h2 {
  color: blue;
}
28) và thêm đoạn mã sau:

index.html

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">

Đoạn mã này sử dụng thẻ 

h2 {
  color: blue;
}
72 để chèn hình ảnh và cung cấp cho trình duyệt vị trí của tệp hình ảnh (
h2 {
  color: blue;
}
73). Đảm bảo đường dẫn tệp được tô sáng là chính xác nếu bạn đã thay đổi tên tệp của hình ảnh.

Lưu ý: Để sao chép đường dẫn tệp của hình ảnh của bạn bằng mã Visual Studio, di chuột qua biểu tượng của tệp hình ảnh trong bảng điều khiển bên trái, nhấp vào 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
9 (trên MACS) hoặc 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
8 (trên Windows) và chọn đường dẫn sao chép. Để biết minh họa của quy trình, vui lòng xem GIF dưới đây:: To copy the file path of your image using Visual Studio Code, hover over the icon of the image file in the left-hand panel, click 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
9 (on Macs) or 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
8 (on Windows), and select “Copy Path.” For an illustration of the process, please see the gif below:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Đảm bảo sao chép đường dẫn tệp tương đối hoặc dự án của hình ảnh thay vì đường dẫn tệp tuyệt đối hoặc đầy đủ của hình ảnh. Đường dẫn tương đối đề cập đến vị trí tệp so với thư mục làm việc hiện tại (trái ngược với đường dẫn tuyệt đối, đề cập đến vị trí tệp so với thư mục gốc.) Trong khi cả hai đường dẫn sẽ hoạt động trong trường hợp này, chỉ có đường dẫn tương đối sẽ hoạt động Nếu bạn quyết định xuất bản trang web trực tuyến. Vì mục tiêu cuối cùng là tạo một trang web có thể xuất bản, bạn sẽ bắt đầu sử dụng các đường dẫn tương đối ngay bây giờ khi thêm các phần tử 

h2 {
  color: blue;
}
72 vào tài liệu.

Bạn cũng đã thêm văn bản thay thế 

h2 {
  color: blue;
}
77 bằng cách sử dụng thuộc tính 
h2 {
  color: blue;
}
78. Khi tạo trang web, văn bản thay thế nên được thêm vào tất cả các hình ảnh để hỗ trợ khả năng truy cập trang web cho các cá nhân sử dụng đầu đọc màn hình. Để đọc thêm về việc sử dụng văn bản thay thế với HTML, vui lòng truy cập phần trên văn bản thay thế trong hướng dẫn của chúng tôi Cách thêm hình ảnh vào trang web của bạn bằng HTML.

Lưu tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn và tải lại nó trong trình duyệt của bạn. (Để biết hướng dẫn tải tệp HTML, vui lòng truy cập bước hướng dẫn của chúng tôi cách xem tệp HTML ngoại tuyến trong trình duyệt của bạn). Bạn sẽ nhận được một trang trống với hình ảnh của bạn được hiển thị:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Nếu hình ảnh của bạn không hiển thị, hãy kiểm tra mã của bạn để biết lỗi và xác nhận rằng bạn có đường dẫn tệp chính xác cho hình ảnh.

Thêm kiểu vào hình ảnh

Bây giờ 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 hiển thị hình ảnh của Sammy the Shark (hoặc hình ảnh bạn chọn), bạn sẽ thêm quy tắc CSS để tạo kiểu hình ảnh. Trong tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn, hãy xóa mọi thứ (nếu bạn đã theo dõi theo chuỗi hướng dẫn) và thêm các quy tắc sau ở dưới cùng của tài liệu:

styles.css

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn và tải lại tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn trong trình duyệt của bạn. Bây giờ bạn sẽ nhận được một hình ảnh với các thuộc tính kiểu mới:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Trong quy tắc CSS này, bạn đã chỉ định các giá trị cho ba thuộc tính khác nhau của phần tử HTML 

h2 {
  color: blue;
}
72. Hãy để tạm dừng để kiểm tra từng thuộc tính và giá trị khác nhau:

  • Thuộc tính 

    h2 {
  color: blue;
}
    85 cho phép bạn thêm đường viền vào hình ảnh của mình và chỉ định kích thước, kiểu dáng và màu sắc của đường viền. Lưu ý rằng bạn có thể thêm nhiều giá trị cho thuộc tính CSS này. Trong quy tắc này, bạn đã chỉ định biên giới 
    h2 {
  color: blue;
}
    86, 
    h2 {
  color: blue;
}
    87 với chiều rộng 
    h2 {
  color: blue;
}
    88.

  • Thuộc tính 

    h2 {
  color: blue;
}
    89 xác định bán kính của một phần tử, cho phép bạn làm tròn các cạnh của một phần tử. Trong quy tắc này, bạn đã chỉ định 8 pixel là kích thước của bán kính. Hãy thử thay đổi số này để xem nó ảnh hưởng đến màn hình của hình ảnh như thế nào.

  • Thuộc tính 

    h2 {
  color: blue;
}
    90 xác định chiều rộng của hình ảnh. Trong quy tắc này, bạn đã chỉ định chiều rộng là 200 pixel. Lưu ý rằng nếu bạn để lại chiều cao không xác định, chiều cao của hình ảnh sẽ tự động điều chỉnh để duy trì tỷ lệ ban đầu của hình ảnh. Hãy thử thay đổi cả chiều cao và chiều rộng cùng một lúc để kiểm tra điều gì xảy ra.

Khám phá cách áp dụng phong cách cho tất cả các hình ảnh

Lưu ý rằng nếu bạn thêm bất kỳ hình ảnh bổ sung nào vào tài liệu HTML của bạn, chúng cũng sẽ có cùng kiểu dáng. Để nghiên cứu cách thức hoạt động của nó, hãy thêm hình ảnh thứ hai vào tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn bằng phần tử HTML 
h2 {
  color: blue;
}
72. (Bạn có thể sao chép và dán phần tử đầu tiên nếu bạn không có hình ảnh thứ hai tiện dụng):

index.html

h2 {
  color: blue;
}
0

Đảm bảo thay đổi phần được tô sáng với đường dẫn tệp hình ảnh của bạn. Lưu tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn và tải nó trong trình duyệt. Trang web của bạn sẽ hiển thị hai hình ảnh được tạo kiểu với cùng một quy tắc CSS cho thẻ 
h2 {
  color: blue;
}
72:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Để tiếp tục khám phá các khả năng kiểu cho hình ảnh, hãy thử thay đổi các giá trị trong quy tắc CSS bạn vừa tạo trong tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7, lưu tệp và tải lại 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 để kiểm tra kết quả.

Sự kết luận

Trong hướng dẫn này, bạn đã khám phá cách tạo kiểu cho một hình ảnh kích thước đường viền, màu sắc, ngoại hình, chiều cao, chiều rộng và bán kính đường viền. Bạn sẽ trở lại kiểu hình ảnh khi bạn bắt đầu xây dựng trang web trình diễn trong nửa sau của loạt hướng dẫn này.

Bây giờ bạn đã quen thuộc với cách áp dụng một tập hợp các quy tắc kiểu cho tất cả các yếu tố 

h2 {
  color: blue;
}
72, bạn có thể tò mò làm thế nào để áp dụng các quy tắc phong cách khác nhau cho cá nhân hoặc các nhóm của các yếu tố 
h2 {
  color: blue;
}
72. Trong hướng dẫn tiếp theo, bạn sẽ tạo các lớp CSS, cho phép các nhà phát triển sắp xếp các phần tử HTML thành các lớp khác nhau cho kiểu dáng CSS khác nhau.

// Hướng dẫn //

Giới thiệu

Trong hướng dẫn này, bạn sẽ tạo bộ chọn lớp CSS, điều này sẽ cho phép bạn chỉ áp dụng các quy tắc CSS cho các phần tử HTML được gán lớp. Bộ chọn lớp CSS rất hữu ích khi bạn muốn áp dụng các quy tắc kiểu khác nhau cho các trường hợp khác nhau của cùng một phần tử HTML.

Điều kiện tiên quyết

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Cách các bộ chọn lớp CSS hoạt động

Bộ chọn lớp CSS cho phép bạn gán các quy tắc kiểu cho các thành phần HTML mà bạn chỉ định với lớp đó thay vì tất cả các trường hợp của một yếu tố nhất định. Không giống như các phần tử HTML (chẳng hạn như 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
2, 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
1 hoặc 
h2 {
  color: blue;
}
72), có tên được xác định trước, tên lớp được nhà phát triển chọn khi họ tạo lớp. Tên lớp luôn được đi trước bởi 
<h2>A Sample Titleh2>
02, có thể giúp bạn phân biệt giữa bộ chọn thẻ và bộ chọn lớp trong các tệp CSS.

Quy tắc CSS cho bộ chọn lớp được viết theo cách tương tự như một quy tắc cho bộ chọn thẻ, ngoại trừ 

<h2>A Sample Titleh2>
02 được chuẩn bị cho tên lớp:

h2 {
  color: blue;
}
1

Để sử dụng một lớp khi thêm nội dung HTML vào trang web của bạn, bạn phải chỉ định nó trong thẻ mở của phần tử HTML bằng thuộc tính lớp trong tài liệu HTML của bạn như vậy:

h2 {
  color: blue;
}
2

Tạo lớp CSS bằng cách sử dụng bộ chọn lớp

Hãy bắt đầu khám phá các lớp CSS trong thực tế. Xóa mọi thứ trong tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn và thêm đoạn mã sau để chỉ định quy tắc cho lớp 
<h2>A Sample Titleh2>
05:

styles.css

h2 {
  color: blue;
}
1

Sau khi thêm đoạn mã vào tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn, hãy lưu tệp.

Quay trở lại 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn và xóa tất cả mọi thứ trừ dòng mã đầu tiên 
h2 {
  color: blue;
}
28 liên kết với bảng kiểu CSS của bạn. Sau đó thêm đoạn mã mã HTML sau:

index.html

h2 {
  color: blue;
}
4

Lưu ý rằng tên lớp không được chuẩn bị ở đây với 

<h2>A Sample Titleh2>
02 vì nó được sử dụng làm bộ chọn cho quy tắc CSS. Toàn bộ tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn sẽ có các nội dung sau:

index.html

h2 {
  color: blue;
}
5

Trong đoạn mã này, bạn đã thêm văn bản bằng thẻ HTML 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
2. Nhưng bạn cũng đã chỉ định lớp 
<h2>A Sample Titleh2>
05 bằng cách thêm thuộc tính lớp được tô sáng 
<h2>A Sample Titleh2>
13 bên trong thẻ HTML mở.

Lưu tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn và tải nó trong trình duyệt. (Để biết hướng dẫn tải tệp HTML, vui lòng truy cập bước hướng dẫn của chúng tôi cách xem tệp HTML ngoại tuyến trong trình duyệt của bạn).

Bạn sẽ nhận được một trang web có văn bản màu đỏ:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Hãy để thêm một lớp CSS bổ sung để khám phá kiểu dáng khác nhau của nội dung văn bản 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
2 với các lớp khác nhau. Thêm đoạn mã sau đây vào tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn (sau quy tắc CSS của bạn cho các văn bản màu đỏ):

styles.css

h2 {
  color: blue;
}
6

Quy tắc CSS này tuyên bố rằng lớp 

<h2>A Sample Titleh2>
17 được gán giá trị 
<h2>A Sample Titleh2>
18 cho thuộc tính 
<h2>A Sample Titleh2>
19. Bất kỳ phần tử văn bản HTML nào được gán lớp này sẽ có nền màu vàng. Lưu ý rằng việc sử dụng từ 
<h2>A Sample Titleh2>
20in lớp 
<h2>A Sample Titleh2>
21 chỉ dành cho mục đích đọc của con người. Bạn không cần đưa từ 
<h2>A Sample Titleh2>
20 vào tên lớp của bạn cho các lớp được gán cho văn bản HTML.

Để áp dụng lớp CSS mới này, hãy quay lại tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn và thêm dòng mã sau vào phía dưới:

index.html

h2 {
  color: blue;
}
7

Trong đoạn mã này, bạn đã thêm một số nội dung văn bản với phần tử 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
2 và chỉ định lớp 
<h2>A Sample Titleh2>
17. Lưu tệp và tải lại nó trong trình duyệt của bạn. Bạn nên có một trang web với hai câu khác nhau, câu thứ nhất màu đỏ và câu thứ hai có nền màu vàng:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Lưu ý rằng bạn có thể thêm nhiều lớp vào thẻ HTML. Hãy thử thêm cả hai lớp vào một phần tử văn bản bằng cách thêm dòng sau vào tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn:

index.html

h2 {
  color: blue;
}
8

Lưu ý rằng các tên lớp chỉ được phân tách bởi một không gian. Lưu tệp và tải lại nó trong trình duyệt. Bạn sẽ nhận được một cái gì đó như thế này:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Dòng văn bản thứ ba của bạn bây giờ nên được tạo kiểu theo các giá trị thuộc tính được đặt trong lớp 

<h2>A Sample Titleh2>
05 và lớp 
<h2>A Sample Titleh2>
17 và có một phông chữ màu đỏ và nền màu vàng.

Thêm các lớp CSS vào hình ảnh

Các lớp CSS cũng có thể được áp dụng cho các phần tử HTML khác, chẳng hạn như hình ảnh. Để khám phá bằng cách sử dụng các lớp CSS cho hình ảnh, hãy xóa nội dung trong tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn và thêm đoạn mã sau:

styles.css

h2 {
  color: blue;
}
9

Ở đây bạn đã tạo các quy tắc CSS cho ba lớp khác nhau có thể được áp dụng cho thẻ HTML 

h2 {
  color: blue;
}
72. Trước khi bạn tiếp tục, hãy để nghiên cứu ngắn gọn những gì chúng tôi đã tuyên bố trong mỗi quy tắc:

  • Quy tắc CSS đầu tiên tuyên bố rằng lớp 
    <h2>A Sample Titleh2>
    31 nên có 
    <h2>A Sample Titleh2>
    32, 
    <h2>A Sample Titleh2>
    33 Border năm pixel rộng và kích thước 
    h2 {
  color: blue;
}
    89 ở mức 10%, cho các góc làm tròn phần tử.
  • Quy tắc CSS thứ hai tuyên bố rằng lớp 
    <h2>A Sample Titleh2>
    35 nên có 
    <h2>A Sample Titleh2>
    18, 
    h2 {
  color: blue;
}
    86 Border 25 pixel rộng và kích thước 
    h2 {
  color: blue;
}
    89 ở mức 50%, mang lại cho phần tử hình tròn.
  • Quy tắc CSS thứ ba tuyên bố rằng lớp 
    <h2>A Sample Titleh2>
    39 nên có 
    h2 {
  color: blue;
}
    87, 
    <h2>A Sample Titleh2>
    41 Border 15 pixel rộng. Bạn đã không đặt một Border-Radius, vì vậy biên giới sẽ phù hợp với hình dạng phần tử.

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7. Sau đó xóa tất cả mọi thứ khỏi tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn (ngoại trừ dòng mã đầu tiên: 
h2 {
  color: blue;
}
28) và thêm đoạn mã sau:

index.html

<h2>A Sample Titleh2>
0

Mỗi trong ba dòng mã HTML này thêm một hình ảnh vào tài liệu HTML và gán cho nó một trong ba lớp bạn vừa thêm vào tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7. Lưu ý rằng bạn đang tìm nguồn cung ứng hình ảnh từ một vị trí trực tuyến. Bạn cũng có thể sử dụng hình ảnh của riêng mình bằng cách chỉ định đường dẫn tệp theo hướng dẫn trong hướng dẫn của chúng tôi cách thêm hình ảnh vào trang web của bạn với HTML.

Lưu tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn và tải nó trong trình duyệt. Bạn sẽ nhận được một cái gì đó như thế này:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Trang web của bạn bây giờ sẽ hiển thị ba hình ảnh, mỗi hình ảnh được tạo kiểu với các thông số kỹ thuật khác nhau của lớp được chỉ định của chúng.

Để tiếp tục khám phá các lớp CSS, thử tạo các lớp mới với các quy tắc khác nhau và áp dụng chúng cho các loại nội dung HTML khác nhau. Lưu ý rằng các thuộc tính và giá trị được chỉ định trong các khối khai báo lớp sẽ chỉ hoạt động trên các yếu tố mà chúng được dự định. Ví dụ, khai báo 

<h2>A Sample Titleh2>
47 sẽ không thay đổi màu của đường viền hình ảnh. Tương tự như vậy, một tuyên bố 
<h2>A Sample Titleh2>
48 sẽ không thay đổi kích thước của phông chữ.

Sự kết luận

Bây giờ bạn đã khám phá cách tạo các lớp, gán cho chúng các giá trị thuộc tính cụ thể và áp dụng chúng vào nội dung văn bản và hình ảnh. Bạn sẽ quay lại sử dụng các lớp khi bạn bắt đầu xây dựng trang web trong nửa sau của loạt hướng dẫn này.

Trong hướng dẫn tiếp theo, bạn sẽ tạo các bộ chọn ID CSS, hoạt động tương tự như các bộ chọn lớp ngoại trừ một số tính năng độc đáo.

// Hướng dẫn //

Giới thiệu

Trong hướng dẫn này, bạn sẽ tạo các bộ chọn ID CSS và tìm hiểu cách thức và lý do sử dụng chúng khi xây dựng một trang web với CSS và HTML.

Bộ chọn ID CSS chức năng tương tự như các bộ chọn lớp CSS. Chúng cho phép bạn tạo các quy tắc CSS mà bạn có thể áp dụng cho các thành phần HTML có thuộc tính ID duy nhất. Giống như các lớp, tên ID được nhà phát triển chọn khi họ tạo quy tắc CSS bằng bộ chọn ID. Tuy nhiên, ID khác với các lớp ở chỗ bạn chỉ có thể sử dụng ID riêng lẻ một lần trong tài liệu HTML. Do đó, bạn sẽ chỉ xác định ID cho các mục xuất hiện trên một trang một lần như logo hàng đầu, tiêu đề trang web hoặc thanh điều hướng. Nói chung, ID CSS được sử dụng một cách tiết kiệm.

Điều kiện tiên quyết

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Tạo bộ chọn ID CSS

Khi tạo quy tắc cho ID, 

<h2>A Sample Titleh2>
49 được chuẩn bị cho tên ID ID:

<h2>A Sample Titleh2>
1

Quy tắc CSS này tạo ra một ID có tên là My My First-ID "và tuyên bố rằng bất kỳ phần tử văn bản HTML nào được gán ID này sẽ có màu xanh.

Bây giờ hãy khám phá cách IDS hoạt động trong thực tế. Đầu tiên, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Xóa mọi thứ trong tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn (nếu bạn đã theo dõi cùng với loạt bài này) và thêm quy tắc CSS ở trên cho##My-First-ID vào tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn và lưu tệp.

Tiếp theo, quay lại tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn và xóa mọi thứ (ngoại trừ dòng mã đầu tiên: 
h2 {
  color: blue;
}
28). Sau đó thêm đoạn mã sau:

index.html

<h2>A Sample Titleh2>
2

Lưu tệp và tải lại nó trong trình duyệt. .

Bạn sẽ nhận được một cái gì đó như thế này:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Trong bài tập này, bạn đã tạo ID CSS ID My First-ID trong tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn và sau đó áp dụng nó vào nội dung văn bản trong tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn bằng thuộc tính ID được tô sáng. Lưu ý rằng bạn có thể tạo và áp dụng ID cho bất kỳ loại nội dung HTML nào, chẳng hạn như hình ảnh và các phần tử 
<h2>A Sample Titleh2>
56.

Sự kết luận

Bạn đã khám phá cách tạo và sử dụng ID cho các yếu tố kiểu dáng chỉ xuất hiện một lần trên trang web của bạn. Trong hướng dẫn tiếp theo, bạn sẽ tìm hiểu về các lớp giả CSS, một loại lớp đặc biệt được kích hoạt bởi một số trạng thái nhất định có thể được kích hoạt bởi hành vi của người dùng.

// Hướng dẫn //

Giới thiệu

Trong hướng dẫn này, bạn sẽ tạo các lớp giả CSS và tìm hiểu cách thức và lý do sử dụng chúng. Bạn cũng sẽ thực hành bằng cách sử dụng lớp giả 

<h2>A Sample Titleh2>
57 cho phép chúng tôi thay đổi kiểu của một phần tử khi con trỏ của người dùng đang lơ lửng trên nó.

Các lớp giả là các lớp CSS chỉ được kích hoạt trong một số trạng thái nhất định. Ví dụ, có thể sử dụng lớp giả 

<h2>A Sample Titleh2>
57 để thay đổi sự xuất hiện của một phần tử hình ảnh hoặc văn bản khi con trỏ của người dùng di chuyển trên phần tử. Các pseudo-Class 
<h2>A Sample Titleh2>
59 thường được sử dụng để thay đổi màu của liên kết sau khi người dùng nhấp vào nó.

Các lớp giả được khai báo trong CSS bằng cách nối thêm một 

<h2>A Sample Titleh2>
60 và tên của lớp giả vào thẻ, lớp hoặc bộ chọn ID. Lớp giả này sau đó sẽ được tự động áp dụng cho bất kỳ nội dung HTML nào được gán thẻ, lớp hoặc ID của lớp giả. Bạn không cần thêm bất kỳ mã bổ sung nào vào phần tử HTML để tạo công việc pseudo-Class.

Điều kiện tiên quyết

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Tạo một lớp giả với CSS

Bây giờ, hãy thử một bài tập thực tế để khám phá cách thức hoạt động của lớp giả. Đầu tiên, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Xóa mọi thứ trong tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn (nếu bạn đã thêm nội dung từ các hướng dẫn trước đó) và thêm lớp giả dưới đây vào tài liệu của bạn:

styles.css

<h2>A Sample Titleh2>
3

Trong đoạn mã này, bạn đã thêm bộ chọn Pseudo-Class được tô sáng vào bộ chọn thẻ 

h2 {
  color: blue;
}
72. Lưu tệp và quay lại tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 và xóa mọi thứ (ngoại trừ dòng mã đầu tiên: 
h2 {
  color: blue;
}
28). Sau đó thêm đoạn mã HTML sau vào tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn:

index.html

<h2>A Sample Titleh2>
4

Lưu ý rằng bạn đang tìm nguồn cung ứng hình ảnh từ một vị trí trực tuyến để thuận tiện. Bạn cũng có thể sử dụng hình ảnh của riêng mình bằng cách chỉ định đường dẫn tệp theo hướng dẫn trong hướng dẫn của chúng tôi cách thêm hình ảnh vào trang web của bạn với HTML.

Lưu tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn và tải nó trong trình duyệt. (Để biết hướng dẫn tải tệp HTML, vui lòng truy cập bước hướng dẫn của chúng tôi cách xem tệp HTML ngoại tuyến trong trình duyệt của bạn).

Bạn sẽ nhận được một cái gì đó như thế này:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Trang web bây giờ sẽ hiển thị một hình ảnh của Sammy the Shark. Hãy thử di chuột con trỏ của bạn trên hình ảnh. Một đường viền màu đỏ rộng 10 pixel sẽ xuất hiện xung quanh hình ảnh khi con trỏ của bạn di chuyển qua hình ảnh. Trình duyệt của bạn tự động áp dụng lớp giả 

<h2>A Sample Titleh2>
57 khi con trỏ của bạn tương tác với phần tử 
<h2>A Sample Titleh2>
69 dựa trên quy tắc mà bạn đã thêm vào 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7.

Bạn cũng có thể sử dụng lớp giả 

<h2>A Sample Titleh2>
57 với các yếu tố văn bản. Nếu bạn muốn thử áp dụng 
<h2>A Sample Titleh2>
57 vào phần tử văn bản, hãy xóa mọi thứ trong tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn và thêm lớp giả bên dưới vào tài liệu:

styles.css

<h2>A Sample Titleh2>
5

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7. Quay trở lại tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7, xóa mọi thứ (ngoại trừ dòng mã đầu tiên: 
h2 {
  color: blue;
}
28) và thêm đoạn mã sau:

index.html

<h2>A Sample Titleh2>
6

Lưu tệp của bạn và tải nó trong trình duyệt để kiểm tra kết quả của bạn. Bạn sẽ nhận được một trang với văn bản Một số văn bản, thay đổi màu sắc và kích thước khi bạn di chuột trên con trỏ của mình trên đó:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Sự kết luận

Trong hướng dẫn này, bạn đã khám phá cách thức và lý do sử dụng lớp giả. Bạn cũng đã thử nghiệm áp dụng chúng vào các phần tử HTML dựa trên văn bản và hình ảnh. Bạn sẽ sử dụng các lớp giả để xây dựng chân trang của trang web trình diễn nếu bạn theo dõi nửa sau của loạt hướng dẫn này.

Trong hướng dẫn tiếp theo, bạn sẽ tìm hiểu về việc tạo và tạo kiểu cho phần tử HTML 

<h2>A Sample Titleh2>
56, có thể được sử dụng để cấu trúc bố cục của một trang web.

// Hướng dẫn //

Giới thiệu

Hướng dẫn này sẽ giới thiệu cho bạn việc tạo kiểu cho phần tử phân chia nội dung HTML hoặc phần tử 

<h2>A Sample Titleh2>
56 sử dụng CSS. Phần tử 
<h2>A Sample Titleh2>
56 có thể được sử dụng để cấu trúc bố cục của một trang và chia một trang web thành các thành phần riêng biệt để tạo kiểu riêng lẻ. Trong hướng dẫn này, bạn sẽ tạo và tạo các yếu tố 
<h2>A Sample Titleh2>
56, cũng như tìm hiểu cách thêm và tạo kiểu cho các yếu tố khác bên trong một thùng chứa 
<h2>A Sample Titleh2>
56. Những kỹ năng này sẽ chuẩn bị cho bạn sử dụng các yếu tố 
<h2>A Sample Titleh2>
56 làm công cụ bố trí sau này trong loạt bài khi bạn bắt đầu tái tạo trang web trình diễn.

Phần tử 

<h2>A Sample Titleh2>
56 được sử dụng bằng cách thêm các thẻ mở và đóng 
<h2>A Sample Titleh2>
84 vào tài liệu HTML. Bản thân, phần tử 
<h2>A Sample Titleh2>
56 thường có rất ít hiệu ứng trực quan trong việc trình bày trang web. Để chỉ định kích thước, màu sắc và các thuộc tính khác của phần tử 
<h2>A Sample Titleh2>
56, bạn có thể gán các quy tắc kiểu CNTT bằng CSS.

Điều kiện tiên quyết

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Khám phá yếu tố

A Sample Title

56 trong thực tế

Hãy cùng thử một bài tập thực hành để nghiên cứu cách thức hoạt động của phần tử 

<h2>A Sample Titleh2>
56. Xóa mọi thứ trong tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn (nếu bạn đã thêm nội dung từ các hướng dẫn trước đó). Tiếp theo, thêm quy tắc CSS sau đây cho bộ chọn thẻ 
<h2>A Sample Titleh2>
56:

styles.css

<h2>A Sample Titleh2>
7

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7. Tiếp theo, hãy quay lại tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn, xóa mọi thứ mà ở đó (ngoại trừ dòng mã đầu tiên: 
h2 {
  color: blue;
}
28) và thêm đoạn mã sau:

index.html

<h2>A Sample Titleh2>
8

Lưu ý rằng phần tử 

<h2>A Sample Titleh2>
56 có thẻ mở và đóng nhưng không yêu cầu bất kỳ nội dung nào. Lưu tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 và tải lại nó trong trình duyệt của bạn. (Để biết hướng dẫn tải tệp HTML, vui lòng truy cập bước hướng dẫn của chúng tôi cách xem tệp HTML ngoại tuyến trong trình duyệt của bạn).

Trang web của bạn sẽ hiển thị một hộp màu xanh lá cây rộng 100 pixel và cao 100 pixel theo quy định của quy tắc CSS:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Bây giờ bạn có một quy tắc kiểu dáng cho phần tử 

<h2>A Sample Titleh2>
56 của bạn, mọi yếu tố 
<h2>A Sample Titleh2>
56 bạn thêm vào trang của bạn sẽ được tạo kiểu theo cách chính xác. Tuy nhiên, khi tạo một trang web, không có khả năng bạn sẽ muốn tất cả các yếu tố HTML 
<h2>A Sample Titleh2>
56 của bạn được tạo kiểu theo cùng một cách. Vì lý do này, các nhà phát triển thường tạo ra các lớp mà họ có thể sử dụng để tạo ra các yếu tố 
<h2>A Sample Titleh2>
56 theo những cách khác nhau.

Để thực hành tạo các lớp cho các phần tử 

<h2>A Sample Titleh2>
56, hãy xóa quy tắc CSS bạn vừa tạo và thêm ba quy tắc CSS mới sau đây vào tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7:

<h2>A Sample Titleh2>
9

Trong đoạn mã này, bạn đã tạo các quy tắc kiểu dáng cho ba lớp khác nhau: 

h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
02, 
h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
03 và 
h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
04. Lưu ý rằng bạn đã thêm 
<h2>A Sample Titleh2>
02 trước khi chọn lớp theo yêu cầu khi khai báo các quy tắc CSS cho các lớp.

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 và quay lại tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn. Xóa phần tử 
<h2>A Sample Titleh2>
56 bạn vừa tạo và, thêm ba phần tử 
<h2>A Sample Titleh2>
56 vào tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn, áp dụng một lớp cho từng phần tử tương ứng với các bộ chọn lớp CSS mà bạn xác định trong 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7:

index.html

h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
0

Lưu ý rằng bạn đã thêm lớp làm thuộc tính vào thẻ 

<h2>A Sample Titleh2>
56 bằng cách thêm thuộc tính lớp và tên lớp vào mỗi thẻ mở 
<h2>A Sample Titleh2>
56. Lưu tệp và tải lại nó trong trình duyệt của bạn. Bạn sẽ nhận được một cái gì đó như thế này:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Trang web của bạn sẽ hiển thị ba yếu tố 

<h2>A Sample Titleh2>
56, mỗi phần tử được tạo kiểu với một màu và kích thước khác nhau theo các quy tắc kiểu CSS được chỉ định của chúng. Lưu ý rằng mỗi phần tử 
<h2>A Sample Titleh2>
56 bắt đầu trên dòng mới của riêng mình vì các phần tử 
<h2>A Sample Titleh2>
56 là các phần tử cấp khối và có hành vi mặc định này.

Thêm và tạo kiểu văn bản trong một thùng chứa

A Sample Title

56

Bạn có thể đặt văn bản bên trong một thùng chứa 

<h2>A Sample Titleh2>
56 bằng cách chèn văn bản vào giữa các thẻ mở và đóng 
<h2>A Sample Titleh2>
56. Hãy thử thêm văn bản bên trong từng phần tử 
<h2>A Sample Titleh2>
56 trong tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn:

index.html

h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
1

Lưu tệp và tải lại nó trong trình duyệt của bạn. Bây giờ bạn nên có văn bản được hiển thị trong mỗi thùng chứa 

<h2>A Sample Titleh2>
56 của bạn:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Bạn có thể thêm các phần tử HTML bổ sung vào văn bản của bạn bên trong các phần tử 

<h2>A Sample Titleh2>
56. Ví dụ: hãy thử thêm các thẻ tiêu đề HTML (
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
1 vào 
h2 {
  color: blue;
}
57) vào văn bản của bạn bên trong thẻ 
<h2>A Sample Titleh2>
56 trong tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn:

h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
2

Lưu tệp và tải lại nó trong trình duyệt của bạn. Văn bản bên trong các thùng chứa 

<h2>A Sample Titleh2>
56 hiện nên được tạo kiểu theo các thuộc tính mặc định của thẻ 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
1 đến 
h2 {
  color: blue;
}
57:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Lưu ý rằng các yếu tố 

<h2>A Sample Titleh2>
56 cũng đã điều chỉnh vị trí của chúng một chút. Tái định vị này được gây ra bởi các thuộc tính ký quỹ mặc định của các phần tử 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
1 thông qua 
h2 {
  color: blue;
}
57. Bạn sẽ tìm hiểu thêm về tỷ suất lợi nhuận trong hướng dẫn tiếp theo về mô hình hộp CSS, nhưng bây giờ sẽ tốt khi bỏ qua chúng

Để tạo văn bản bên trong các thùng chứa 

<h2>A Sample Titleh2>
56, bạn có thể chỉ định các giá trị thuộc tính văn bản trong các quy tắc cho các lớp 
<h2>A Sample Titleh2>
56 của bạn. Hãy thử thêm các thuộc tính và giá trị vào các quy tắc của bạn trong tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn như được tô sáng trong đoạn mã sau:

styles.css

h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
3

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn và tải lại tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 trong trình duyệt của bạn. Văn bản bên trong các thùng chứa 
<h2>A Sample Titleh2>
56 hiện nên được tạo kiểu theo các quy tắc CSS trong tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Sự kết luận

Trong hướng dẫn này, bạn đã khám phá cách tạo kiểu màu và kích thước của phần tử 

<h2>A Sample Titleh2>
56 và cách thêm và tạo kiểu văn bản bên trong phần tử 
<h2>A Sample Titleh2>
56. Bạn sẽ sử dụng phần tử 
<h2>A Sample Titleh2>
56 để kiểm soát bố cục của một trang khi bạn bắt đầu xây dựng trang web. Trong hướng dẫn tiếp theo, bạn sẽ tìm hiểu về mô hình hộp CSS và cách sử dụng nó để điều chỉnh kích thước của nội dung, phần đệm, đường viền và lề.

// Hướng dẫn //

Giới thiệu

Trong hướng dẫn này, bạn sẽ tìm hiểu về mô hình hộp CSS, một mô hình được sử dụng để chỉ nội dung, đệm, đường viền và lề của một phần tử HTML. Hiểu mô hình hộp CSS rất hữu ích để điều chỉnh kích thước của bất kỳ phần nào trong phần tử HTML này và hiểu được kích thước và vị trí của các yếu tố được xác định như thế nào. Hướng dẫn này sẽ bắt đầu bằng cách giải thích từng hộp của mô hình hộp CSS và sau đó chuyển sang một bài tập thực tế để điều chỉnh các giá trị của chúng bằng các quy tắc kiểu CSS.

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Điều kiện tiên quyết

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Mô hình hộp CSS

Một phần tử HTML có thể được hiểu là một loạt bốn hộp chồng chéo:

  • Hộp nội dung là hộp bên trong nơi đặt nội dung văn bản hoặc hình ảnh. Theo mặc định, kích thước của nó thường được đặt theo kích thước của nội dung mà nó chứa. Nó cũng là hộp duy nhất trong mô hình hộp có giá trị thường không phải là 0 theo mặc định (nếu nó chứa nội dung); Ngược lại, phần đệm, đường viền và lề của một phần tử mặc định về 0 đối với nhiều phần tử HTML (như 
    <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
    2, 
    <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
    1 và 
    h2 {
  color: blue;
}
    72) trừ khi bạn chỉ định khác. Khi bạn đặt giá trị cho chiều rộng và chiều cao của một phần tử, bạn thường thay đổi chiều rộng và chiều cao của hộp nội dung.
  • Hộp đệm là hộp chồng chéo thứ hai, bao gồm một không gian trong suốt bao quanh hộp nội dung. Theo mặc định, phần đệm của nhiều phần tử HTML được đặt thành 0. Tăng kích thước của phần đệm phần tử làm tăng khoảng cách giữa hộp nội dung và hộp viền.
  • Hộp viền là hộp chồng chéo thứ ba bao quanh hộp đệm. Theo mặc định, giá trị biên của hầu hết các phần tử HTML được đặt thành 0. Tăng kích thước của một phần tử biên giới làm tăng khoảng cách giữa hộp đệm và hộp lề. Lưu ý rằng màu sắc, độ dày và kiểu dáng của đường viền có thể được điều chỉnh.
  • Hộp lề là hộp chồng chéo thứ tư và cuối cùng bao gồm không gian trong suốt bên ngoài đường viền của một phần tử. Theo mặc định, giá trị ký quỹ của một số phần tử HTML được đặt thành 0, mặc dù một số phần tử đã chỉ định các giá trị lề là mặc định của chúng, chẳng hạn như các thẻ tiêu đề 
    <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
    1 đến 
    h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
    48. Biên độ của hai yếu tố khác nhau cũng được phép chồng chéo đôi khi trong một hành vi gọi là sự sụp đổ lề. Khi điều này xảy ra, kích thước ký quỹ mặc định với kích thước của bất kỳ phần tử nào là biên độ lớn nhất.

Bây giờ bạn đã quen thuộc với các thành phần của mô hình hộp CSS, bạn có thể thực hành tạo kiểu cho các hộp khác nhau này để khám phá cách chúng làm việc cùng nhau để bố trí và tạo kiểu cho một phần tử HTML. Bạn sẽ bắt đầu bằng cách tạo một phần tử 

<h2>A Sample Titleh2>
56 chứa nội dung văn bản và sau đó điều chỉnh các giá trị của từng hộp này để giúp chứng minh vị trí của chúng trong một phần tử.

Điều chỉnh kích thước nội dung của phần tử HTML với CSS

Đầu tiên, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Xóa mọi thứ trong tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn (nếu tệp chứa nội dung từ các hướng dẫn trước đó) và thêm quy tắc CSS sau vào tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn:

styles.css

h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
4

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7. Bạn vừa tạo một lớp bằng bộ chọn lớp 
h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
53. Bất kỳ phần tử 
<h2>A Sample Titleh2>
56 nào bạn gán lớp này sẽ có màu nền màu vàng.

Tiếp theo, xóa tất cả nội dung trong tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn (ngoại trừ dòng mã đầu tiên: 
h2 {
  color: blue;
}
28) và thêm đoạn mã sau:

index.html

h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
5

Lưu tệp và tải nó trong trình duyệt. Bạn sẽ nhận được kết quả sau:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Trang web của bạn sẽ hiển thị một hộp màu vàng chứa nội dung văn bản bạn đã thêm vào tệp HTML. Hiện tại, chỉ có hộp trong cùng, hộp nội dung có kích thước và giá trị; Các phần đệm, đường viền và lề đều được đặt thành 0. Cũng lưu ý rằng chiều rộng và chiều cao của hộp màu vàng được tự động xác định bởi kích thước của nội dung văn bản bên trong thùng chứa 

<h2>A Sample Titleh2>
56. Hãy thử thêm hoặc trừ nội dung văn bản để thử nghiệm cách kích thước của container 
<h2>A Sample Titleh2>
56 thay đổi tương ứng.

Lưu ý: Bạn có thể sử dụng các công cụ nhà phát triển web Firefox, để xem mô hình hộp của phần tử HTML và các giá trị được đặt cho mỗi hộp. Điều hướng đến mục menu Công cụ trong thanh menu trên cùng và chọn các công cụ chuyển đổi/chuyển đổi web của Web "từ menu thả xuống. Các công cụ phát triển sẽ xuất hiện ở dưới cùng của cửa sổ của bạn. Nhấp vào biểu tượng mũi tên ở bên trái Menu và sau đó nhấp vào phần tử mà bạn muốn kiểm tra. Mô hình hộp của phần tử đã chọn sẽ hiển thị ở phía dưới bên phải của ngăn cửa sổ Công cụ phát triển. Bạn có thể cần mở rộng cửa sổ để xem nó.: You can use Firefox’s Web Developer tools to view the box model of an HTML element and the values set for each box. Navigate to the Tools menu item in the top menu bar and select “Web Developer/Toggle Tools" from the dropdown menu. The Developer Tools should appear in the bottom of your window. Click the the arrow icon on the far left of the tool kit menu and then click on the element that you wish to inspect. The box model of the selected element will show up in the bottom right of the Developer Tools window pane. You may need to expand the window to view it.

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Tiếp theo, hãy để chỉ định độ rộng của container 

<h2>A Sample Titleh2>
56 để nghiên cứu cách thay đổi cách trình bày phần tử trong trình duyệt. Thêm dòng được tô sáng sau vào quy tắc CSS của bạn trong tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn để đặt 
h2 {
  color: blue;
}
90 đến 500 pixel:

styles.css

h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
6

Lưu tệp và tải nó trong trình duyệt của bạn. Container 

<h2>A Sample Titleh2>
56 của bạn hiện phải rộng 500 pixel, với chiều cao tự động điều chỉnh để cho phép nội dung văn bản phù hợp bên trong:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Lưu ý rằng bạn cũng có thể chỉ định chiều cao của phần tử 

<h2>A Sample Titleh2>
56 thay thế và cho phép chiều rộng tự động điều chỉnh. Hoặc bạn có thể chỉ định cả chiều cao và chiều rộng, nhưng lưu ý rằng nội dung sẽ tràn qua thùng chứa 
<h2>A Sample Titleh2>
56 nếu phần tử 
<h2>A Sample Titleh2>
56 quá nhỏ.

Cách điều chỉnh kích thước đệm của phần tử HTML với CSS

Tiếp theo, hãy để tăng kích thước đệm để nghiên cứu cách thay đổi màn hình của phần tử 

<h2>A Sample Titleh2>
56. Thêm dòng được tô sáng sau vào quy tắc CSS của bạn trong tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn để đặt 
h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
68 thành 25 pixel:

h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
7

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 và tải lại tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 trong trình duyệt của bạn. Kích thước của hộp màu vàng nên được mở rộng để cho phép 25 pixel không gian giữa nội dung văn bản và chu vi của hộp:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Bạn có thể thay đổi kích thước của phần đệm bằng cách điều chỉnh kích thước giá trị đệm. Bạn cũng có thể thay đổi kích thước đệm của các mặt cụ thể của phần tử bằng cách sử dụng các thuộc tính sau: 

h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
71, 
h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
72, 
h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
73, 
h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
74. Ví dụ: hãy thử thay thế khai báo 
h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
75 trong tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn bằng đoạn trích được tô sáng bên dưới:

h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
8

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 và tải tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 trong trình duyệt của bạn. Bạn sẽ nhận được một cái gì đó như thế này:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Biết cách chỉ định kích thước đệm cho các mặt riêng lẻ của một yếu tố có thể hữu ích khi sắp xếp nội dung trên trang web.

Điều chỉnh kích thước đường viền, màu sắc và kiểu của một phần tử HTML với CSS

Bây giờ, hãy thực hành cài đặt các giá trị cho đường viền của phần tử HTML. Thuộc tính biên giới cho phép bạn đặt kích thước, màu sắc và kiểu dáng (chẳng hạn như 

h2 {
  color: blue;
}
86, 
h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
80, 
<h2>A Sample Titleh2>
33, 
h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
82 và 
h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
83) của phần tử HTML. Ba giá trị này được đặt bằng cách gán chúng cho thuộc tính đường viền như vậy:

h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
9

Hãy thử thêm các tuyên bố được tô sáng sau đây để thêm một đường viền màu đen rắn rộng năm pixel:

styles.css

<h2>A sample titleh2>
<p>Some paragraph textp>
0

. Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 và tải lại 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 trong trình duyệt của bạn để kiểm tra các thay đổi. Hộp màu vàng của bạn bây giờ sẽ có một đường viền với các giá trị bạn đặt trong quy tắc CSS:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Bạn có thể thử thay đổi các giá trị để nghiên cứu cách chúng thay đổi màn hình của phần tử trong trình duyệt. Giống như với phần đệm, bạn cũng có thể chỉ định phía đường viền mà bạn muốn điều chỉnh với các thuộc tính 

h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
87, 
h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
88, 
h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
89, 
h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
90.

Điều chỉnh kích thước lề của phần tử HTML với CSS

Tiếp theo, hãy để thử điều chỉnh kích thước của lề của một phần tử với CSS. Trong bài tập này, chúng tôi sẽ cung cấp cho lề một giá trị rất lớn để dễ dàng thấy cách hiển thị kích thước ký quỹ trong trình duyệt. Thêm khai báo được tô sáng sau vào quy tắc của bạn trong tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn để đặt lề thành 100 pixel:

styles.css

<h2>A sample titleh2>
<p>Some paragraph textp>
1

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 và tải lại 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 trong trình duyệt của bạn để kiểm tra các thay đổi. Hộp màu vàng phải di chuyển 100 pixel xuống và 100 pixel sang phải để cho phép 100 pixel không gian lề giữa đường viền của nó và các cạnh của chế độ xem:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Lưu ý: Bạn có thể nhận thấy rằng hộp màu vàng ban đầu có một biên nhỏ của không gian trắng giữa phía trên và bên trái của nó và các cạnh của chế độ xem. Biên độ này được tạo tự động bởi một số trình duyệt để cho phép không gian giữa các cạnh của chế độ xem và nội dung trang web. Bạn có thể loại bỏ lề này bằng cách đặt tỷ lệ trên và bên trái về 0.: You may have noticed that the yellow box originally had a small margin of white space between its top and left side and the edges of the viewport. This margin is automatically created by some browsers to allow for space between the edges of the viewport and the website content. You can remove this margin by setting the top and left margin to zero.

Giống như phần đệm và đường viền, kích thước của các cạnh cụ thể của lề có thể được đặt bằng cách sử dụng 

h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
94, 
h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
95, 
h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
96 và 
h2 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}
97.

Trước khi tiếp tục, hãy thêm một container 

<h2>A Sample Titleh2>
56 khác vào trang để nghiên cứu mức độ nào ảnh hưởng đến vị trí của nội dung gần đó. Không cần xóa bất cứ điều gì, hãy thêm quy tắc CSS bổ sung vào tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn:

styles.css

<h2>A sample titleh2>
<p>Some paragraph textp>
2

Lưu tệp và quay lại tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn. Không cần xóa bất cứ điều gì, hãy thêm phần tử 
<h2>A Sample Titleh2>
56 sau vào tệp của bạn và gán nó là lớp 
<h2>A sample titleh2>
<p>Some paragraph textp>
02:

index.html

<h2>A sample titleh2>
<p>Some paragraph textp>
3

Lưu tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn và tải nó trong trình duyệt. Bạn sẽ nhận được một cái gì đó như thế này:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Trình duyệt bây giờ sẽ hiển thị một hộp màu xanh rộng 100 pixel và cao 1000 pixel. Hộp màu xanh này phải là 100 pixel bên dưới hộp màu vàng trên tài khoản của lề hộp màu vàng. Nói chung, các yếu tố xung quanh theo mặc định sẽ được đẩy ra khỏi một yếu tố trên tài khoản của biên độ của nó. Tuy nhiên, hãy lưu ý rằng lề của các yếu tố liền kề thường sẽ chồng chéo lên do sự sụp đổ lề. Kích thước của lề chồng chéo được xác định bởi kích thước của lề lớn nhất giữa hai yếu tố.

Sự kết luận

Trong hướng dẫn này, bạn đã tìm hiểu về mô hình hộp CSS và cách điều chỉnh kích thước của từng nội dung, đệm, đường viền và các thuộc tính lề. Hiểu hành vi của các thuộc tính này và cách đặt giá trị cho chúng là hữu ích khi tổ chức và tạo kiểu nội dung trên trang web. Kiến thức này sẽ hữu ích khi xây dựng trang web trình diễn trong các hướng dẫn còn lại. Trong hướng dẫn tiếp theo, bạn sẽ thiết lập một tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 để đóng vai trò là trang chủ của trang web.

// Hướng dẫn //

Giới thiệu

Trong hướng dẫn này, bạn sẽ thiết lập các thư mục và tệp cần thiết để xây dựng một trang web với HTML và CSS. Bạn cũng sẽ chuẩn bị một tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 để nó sẵn sàng nhận nội dung HTML trong các hướng dẫn phía trước.

Điều kiện tiên quyết

Nếu bạn đã theo dõi cùng với loạt hướng dẫn này, bạn có thể tiếp tục sử dụng thư mục dự án 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
3, tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7, thư mục 
h2 {
  color: blue;
}
10, thư mục 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
6 và tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 mà bạn đã tạo trước đó trong loạt phim. Nếu bạn chưa theo dõi loạt hướng dẫn này và cần hướng dẫn thiết lập các thư mục và tệp này, vui lòng xem hướng dẫn trước đó của chúng tôi trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Lưu ý: Nếu bạn quyết định tạo tên của riêng mình cho các thư mục hoặc tệp, hãy đảm bảo tránh không gian ký tự, ký tự đặc biệt (chẳng hạn như!, #, %Hoặc các chữ cái khác) và chữ in hoa, vì những điều này có thể gây ra vấn đề sau này. Cũng cần lưu ý rằng bạn sẽ cần sửa đổi các đường dẫn tệp của mình trong một số bước trong suốt phần còn lại của chuỗi hướng dẫn này để đảm bảo rằng chúng tương ứng với tên của các tệp của bạn.: If you decide to create your own names for the folders or files, make sure to avoid character spaces, special characters (such as !, #, %, or others), and capital letters, as these can cause problems later on. Be aware also that you will need to modify your file paths in some of the steps throughout the remainder of this tutorial series to ensure that they correspond with the names of your files.

Bạn nên có một thư mục dự án có tên 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
3 chứa các thư mục và tệp sau đây cần thiết để khám phá CSS trong chuỗi hướng dẫn này:

  • Một thư mục có tên 
    <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
    6 chứa tệp 
    <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
    7
  • Một thư mục trống có tên 
    h2 {
  color: blue;
}
    10
  • Một tệp có tên 
    . . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
    7

Trong bước đầu tiên của hướng dẫn này, bạn sẽ chuẩn bị tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 để nó sẵn sàng nhận nội dung trong các hướng dẫn phía trước.

Cách chuẩn bị tệp . . . img { border: 2px solid red; border-radius: 8px; width: 200px; } 7 của bạn cho nội dung HTML

Để chuẩn bị tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn để đóng vai trò là trang chủ của bạn, chúng tôi sẽ cần thêm một vài dòng HTML quan trọng. Các dòng HTML này sẽ đóng vai trò là hướng dẫn cho trình duyệt và sẽ không được hiển thị trên chính trang web. Đảm bảo rằng tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn trống (nếu bạn có nội dung từ các hướng dẫn trước đó) và thêm đoạn mã sau vào tài liệu:

index.html

<h2>A sample titleh2>
<p>Some paragraph textp>
4

Hãy chắc chắn để thay đổi tiêu đề trang web được tô sáng với tiêu đề lựa chọn của riêng bạn. Sau đó lưu tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7. Trước khi tiếp tục, hãy để xem xét ngắn gọn mã mà bạn vừa thêm vào để hiểu mục đích của nó:

  • Tuyên bố 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    21 cho biết trình duyệt loại HTML nào đang được sử dụng trong tài liệu này. Điều quan trọng là phải tuyên bố giá trị này vì có nhiều phiên bản của tiêu chuẩn HTML và các trình duyệt cần biết nên sử dụng cái nào. Trong tuyên bố này, 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    22 chỉ định tiêu chuẩn web hiện tại của HTML, đó là HTML5.
  • Các thẻ mở và đóng 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    23 cho trình duyệt biết rằng tất cả nội dung được chèn giữa hai thẻ này phải được hiểu là HTML. Bên trong thẻ này, bạn cũng đã thêm thuộc tính 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    24, chỉ định ngôn ngữ của trang web. Trong ví dụ này, ngôn ngữ được đặt thành tiếng Anh bằng thẻ ngôn ngữ 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    25. Để biết danh sách đầy đủ các thẻ ngôn ngữ, hãy truy cập sổ đăng ký phụ IANA.
  • Các thẻ mở và đóng 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    26 tạo một phần trong tài liệu HTML thường chứa thông tin về trang, thay vì chính nội dung trang. Trình duyệt không hiển thị thông tin trong phần 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    26.
  • Thẻ 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    28 chỉ định bộ ký tự của tài liệu phải là UTF-8, một định dạng Unicode hỗ trợ phần lớn các ký tự từ nhiều ngôn ngữ viết khác nhau.
  • Thẻ 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    29 cho trình duyệt biết tên của trang web. Tiêu đề này xuất hiện trên tab Trình duyệt và khi trang web được liệt kê trong kết quả tìm kiếm nhưng nó không hiển thị trên chính trang web. Hãy chắc chắn để thay thế Sam Sammy the Shark, bằng tên của bạn hoặc một tiêu đề bạn chọn nếu bạn muốn cá nhân hóa trang web.
  • h2 {
  color: blue;
}
    28 cho trình duyệt biết nơi tìm bảng kiểu có chứa các quy tắc kiểu. Nếu bạn làm theo các hướng dẫn trước đó trong loạt bài này, cách thiết lập dự án thực hành CSS và HTML của bạn, bảng kiểu của bạn sẽ được đặt tại đường dẫn tệp này.
  • Các thẻ mở và đóng 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    31 sẽ chứa nội dung chính của trang web. Bạn sẽ thêm nội dung HTML giữa các thẻ này trong các hướng dẫn phía trước.

Sự kết luận

Bây giờ bạn đã tạo tất cả các thư mục và tệp cần thiết để tạo một trang web với HTML và CSS. Bạn cũng nên có một tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 được chuẩn bị với nội dung HTML cần thiết để phục vụ như trang chủ trang web của bạn. Trong hướng dẫn tiếp theo, bạn sẽ khám phá cách xây dựng trang trình diễn và các bước bạn sẽ thực hiện để tạo lại nó.

// Hướng dẫn //

Giới thiệu

Trong hướng dẫn này, bạn sẽ khám phá cấu trúc của trang web trình diễn và kế hoạch tái tạo nó trong các hướng dẫn phía trước.

Tổng quan về trang web trình diễn

Trực quan, trang web có thể được chia thành bảy phần ngang:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Trong hình ảnh tổng quan trước đó, mỗi phần trong số bảy phần được dán nhãn phù hợp:

  • Phần tiêu đề của người Viking (ở trên cùng). Hướng dẫn cho phần này được trình bày chi tiết trong hướng dẫn của chúng tôi cách xây dựng phần tiêu đề của trang web của bạn với CSS (Phần 1)
  • Phần Giới thiệu về tôi (thứ hai từ đầu). Hướng dẫn cho phần này được trình bày chi tiết trong hướng dẫn của chúng tôi [Cách xây dựng phần Giới thiệu về trang web của bạn với CSS (Phần 2)] (https://www.digitalocean.com/community/tutorials/how-to-build-the- Giới thiệu về tôi
  • Phần dự án của người Viking (thứ ba từ đầu). Hướng dẫn cho phần này được trình bày chi tiết trong hướng dẫn của chúng tôi cách xây dựng bố cục lát gạch với CSS (Phần 3)
  • Phần kinh nghiệm của người Viking (thứ tư từ đầu). Hướng dẫn cho phần này được trình bày chi tiết trong hướng dẫn của chúng tôi [Cách thêm phần sơ yếu lý lịch hoặc lịch sử công việc vào trang web của bạn với CSS (Phần 4)]. -a-resume-or-work-history-section-to-your-website-with-css-section-4)
  • Phần giáo dục của người Viking và phần kỹ năng của người Viking (thứ năm từ đầu). Hướng dẫn cho phần này được trình bày chi tiết trong hướng dẫn của chúng tôi cách thêm lịch sử và kỹ năng giáo dục của bạn vào trang web của bạn với CSS (Phần 5)
  • Phần trích dẫn đặc trưng (thứ sáu từ đầu). Hướng dẫn cho phần này được trình bày chi tiết trong hướng dẫn của chúng tôi cách tạo một hộp trích dẫn nổi bật trên trang web của bạn với CSS (Phần 6)
  • Bông chân tĩnh, mà dính vào cuối trang. Hướng dẫn cho phần này được trình bày chi tiết trong hướng dẫn của chúng tôi cách tạo chân trang tĩnh với CSS (Phần 7)

Mỗi phần này được tạo với các thuộc tính CSS cho các phần tử HTML mà bạn đã khám phá trong nửa đầu của loạt hướng dẫn. Trong phần còn lại của loạt hướng dẫn này, bạn sẽ xây dựng lại từng phần này trong hướng dẫn riêng của họ. Nếu bạn mới bắt đầu tìm hiểu CSS, chúng tôi khuyên bạn nên sao chép các lựa chọn kiểu trong các hướng dẫn bao gồm kích thước, màu sắc và hình ảnh nền để giữ cho mọi thứ phù hợp với các ví dụ khi bạn làm việc qua từng hướng dẫn.

Vào cuối loạt hướng dẫn này, có những gợi ý để thử nghiệm phong cách và bố cục của trang web của bạn. Những đề xuất này sẽ trình bày cách cá nhân hóa nội dung và phối lại các hướng dẫn này để tạo ra các khả năng sắp xếp và phong cách mới cho trang web của bạn.

Sự kết luận

Bây giờ bạn đã tạo tất cả các thư mục và tệp cần thiết để tạo một trang web với HTML và CSS. Bạn cũng nên có một tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 được chuẩn bị với nội dung HTML cần thiết để phục vụ như trang chủ trang web của bạn. Trong hướng dẫn tiếp theo, bạn sẽ khám phá cách xây dựng trang trình diễn và các bước bạn sẽ thực hiện để tạo lại nó.

// Hướng dẫn //

Giới thiệu

Trong hướng dẫn này, bạn sẽ khám phá cấu trúc của trang web trình diễn và kế hoạch tái tạo nó trong các hướng dẫn phía trước.

Tổng quan về trang web trình diễn

Trực quan, trang web có thể được chia thành bảy phần ngang:

Bài tập này sẽ được sử dụng để tạo lại phong cách của trang web trình diễn nhưng bạn có thể áp dụng và sửa đổi các quy tắc tương tự được sử dụng ở đây cho các dự án trang web HTML/CSS khác.

Điều kiện tiên quyết

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Đối với hướng dẫn này, chúng tôi khuyên bạn nên sử dụng hình ảnh nền từ trang trình diễn mà bạn có thể tải xuống từ liên kết này. Bạn có thể sử dụng một hình ảnh khác làm nền của bạn, nhưng đảm bảo rằng hình ảnh đủ lớn để lấp đầy màn hình.

Lưu ý: Để tải xuống hình ảnh nền của trang trình diễn, hãy truy cập liên kết này và nhấp vào 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
9 (trên Macs) hoặc 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
8 (trên Windows) trên hình ảnh và chọn Lưu Lưu hình ảnh dưới dạng và lưu nó dưới dạng 
<h2>A sample titleh2>
<p>Some paragraph textp>
35 vào thư mục "hình ảnh của bạn.: To download the background image of the demonstration site, visit this link and click 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
9 (on Macs) or 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
8 (on Windows) on the image and select “Save Image As” and save it as 
<h2>A sample titleh2>
<p>Some paragraph textp>
35 to your "image’ folder.

Khi bạn đã chọn một hình ảnh, hãy đảm bảo rằng nó đã được lưu dưới dạng hình nền-hình ảnh.jpeg, trong thư mục 

h2 {
  color: blue;
}
10 của bạn. Bây giờ bạn đã sẵn sàng để tiến hành bước tiếp theo.

Thêm hình ảnh nền vào trang web của bạn với CSS

Để khai báo các quy tắc kiểu cho phần thân của trang web, bạn sẽ cần tạo quy tắc CSS cho bộ chọn thẻ 

<h2>A sample titleh2>
<p>Some paragraph textp>
37. Các quy tắc này sau đó sẽ được áp dụng cho tất cả các yếu tố được đặt bên trong các thẻ mở và đóng 
<h2>A sample titleh2>
<p>Some paragraph textp>
23 mà bạn đã thêm vào tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 trong hướng dẫn trước đó cách thiết lập dự án trang web CSS và HTML của bạn.

Để thêm hình ảnh nền vào trang web của bạn, hãy tạo quy tắc CSS bằng bộ chọn thẻ 

<h2>A sample titleh2>
<p>Some paragraph textp>
31. Xóa mọi thứ trong tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn (nếu bạn đã theo dõi cùng với loạt bài này) và thêm các quy tắc sau:

styles.css

<h2>A sample titleh2>
<p>Some paragraph textp>
5

Hãy lưu ý về đường dẫn tệp được tô sáng, cho biết trình duyệt nơi xác định vị trí hình ảnh nền. Nếu bạn đã thay đổi tên hoặc vị trí của hình ảnh thì bạn sẽ cần điều chỉnh đường dẫn tệp ở đây cho phù hợp.

Hãy để tạm dừng ngắn gọn để hiểu từng tuyên bố trong quy tắc này:

  • <h2>A sample titleh2>
<p>Some paragraph textp>
    42 là một nhận xét CSS, không được hiển thị bởi trình duyệt. Giống như nhận xét HTML, các bình luận CSS rất hữu ích cho việc giải thích và sắp xếp mã của bạn để tham khảo trong tương lai. Lưu ý rằng các bình luận CSS mở và đóng với thẻ 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    43 và 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    44 thay vì các thẻ 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    45 và 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    46 được sử dụng cho các nhận xét HTML.
  • Tuyên bố 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    47 đặt ra gia đình phông chữ (Helvetica) và gia đình phông chữ chung (sans-serif) cho tất cả các văn bản trên trang web. (Lưu ý rằng bạn có thể chỉ định các họ phông chữ khác nhau cho nội dung văn bản trên cùng một trang web bằng cách thêm các quy tắc CSS sau này). Gia đình phông chữ chung được đưa ra như một bản sao lưu trong trường hợp gia đình phông chữ đầu tiên có sẵn và trình duyệt cần chọn một phông chữ sao lưu. Bạn có thể khám phá các phông chữ khác bằng cách thay thế Helvetica, bằng các tên phông chữ khác, chẳng hạn như 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    48, 
    h2 {
  color: blue;
}
    41 hoặc 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    50.
  • Tuyên bố 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    51 cho trình duyệt thêm hình ảnh nền vào trang web bằng cách sử dụng tệp được tìm thấy với đường dẫn tệp được chỉ định. Lưu ý rằng bạn đã chuẩn bị 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    52 đến tên đường dẫn tệp để nói với trình duyệt định vị thư mục 
    h2 {
  color: blue;
}
    10 trong thư mục phía trên thư mục chứa tệp bạn đang làm việc (
    <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
    7).

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn và tải trang 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 trong trình duyệt của bạn. Để biết hướng dẫn tải tệp HTML, vui lòng truy cập bước hướng dẫn của chúng tôi cách xem tệp HTML ngoại tuyến trong trình duyệt của bạn.

Bạn sẽ nhận được một trang không có nội dung ngoại trừ hình ảnh nền:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Nếu bạn không nhận được hình ảnh, hãy kiểm tra để đảm bảo đường dẫn tệp của bạn là chính xác và không có lỗi nào trong tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 và tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn.

Thay đổi màu của văn bản siêu liên kết

Tiếp theo, chúng tôi sẽ thêm một quy tắc CSS thay đổi màu sắc của tất cả các văn bản siêu liên kết thành một màu phù hợp hơn với bảng màu trang web.

Ở dưới cùng của tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn, hãy thêm các quy tắc sau:

styles.css

<h2>A sample titleh2>
<p>Some paragraph textp>
6

Quy tắc này sẽ tạo kiểu cho bất kỳ văn bản nào được đánh dấu bằng thẻ 

<h2>A sample titleh2>
<p>Some paragraph textp>
60 với mã màu HTML 
<h2>A sample titleh2>
<p>Some paragraph textp>
61. Kiểu sẽ không rõ ràng cho đến khi bạn thêm các phần tử 
<h2>A sample titleh2>
<p>Some paragraph textp>
60 vào trang 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn (mà bạn sẽ làm trong hướng dẫn cuối cùng cách tạo chân trang tĩnh với HTML và CSS. Bạn có thể thay đổi màu kiểu bằng cách thay đổi mã màu HTML trong CSS này này qui định.

Sự kết luận

Bây giờ bạn nên có một trang web với một hình ảnh nền lớn. Ngoài ra, bạn đã tuyên bố một gia đình phông chữ sẽ được áp dụng khi bạn bắt đầu thêm nội dung văn bản. Sử dụng các quy tắc như thế này cho phép bạn thay đổi hình ảnh phông chữ và nền của trang web bằng cách tạo một quy tắc cho bộ chọn thẻ 

<h2>A sample titleh2>
<p>Some paragraph textp>
37. Cuối cùng, bạn đã tạo một quy tắc kiểu chỉ định màu của bất kỳ văn bản siêu liên kết nào bạn thêm vào trang.

Trong hướng dẫn tiếp theo, bạn sẽ tạo lại phần tiêu đề của trang web trình diễn.

// Hướng dẫn //

Giới thiệu

Trong hướng dẫn này, bạn sẽ tạo lại phần tiêu đề hàng đầu của trang web trình diễn bằng cách sử dụng HTML và CSS. Bạn có thể chuyển sang thông tin Sammy, nếu bạn muốn thử nghiệm hoặc cá nhân hóa kích thước. Các phương pháp mà bạn sử dụng ở đây có thể được áp dụng cho các dự án trang web CSS/HTML khác.

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Điều kiện tiên quyết

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Thêm tiêu đề và phụ đề vào tiêu đề trang web của bạn

Tiêu đề trang web của chúng tôi bao gồm tiêu đề (Hồi Sammy the Shark,), một phụ đề (Selachimorpha cao cấp tại DigitalOcean,) và một hình ảnh hồ sơ nhỏ. Các yếu tố này được bọc bên trong một thùng chứa 

<h2>A Sample Titleh2>
56 được tạo kiểu với một lớp được xác định trong bảng kiểu CSS. Bạn sẽ tạo lại phần này bằng cách thêm nội dung văn bản và hình ảnh, tạo một lớp cho thùng chứa 
<h2>A Sample Titleh2>
56, sau đó quấn nội dung văn bản và hình ảnh trong một thùng chứa 
<h2>A Sample Titleh2>
56 được gán lớp mới được tạo.

Để thêm một tiêu đề và phụ đề vào trang web của bạn, hãy thêm đoạn mã được tô sáng sau đây giữa các thẻ mở và đóng 

<h2>A sample titleh2>
<p>Some paragraph textp>
31 trong tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7. Chuyển thông tin của Sammy, nếu bạn muốn cá nhân hóa trang web của mình:

index.html

<h2>A sample titleh2>
<p>Some paragraph textp>
7

Trong đoạn mã này, bạn đã thêm tiêu đề 

<h2>A sample titleh2>
<p>Some paragraph textp>
70 và gán thẻ tiêu đề 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
1 vì đây là tiêu đề quan trọng nhất của trang web này. Bạn cũng đã thêm phụ đề 
<h2>A sample titleh2>
<p>Some paragraph textp>
72 và gán cho nó thẻ tiêu đề 
<h2>A sample titleh2>
<p>Some paragraph textp>
73, vì nó là một tiêu đề ít quan trọng hơn.

Lưu ý rằng bạn cũng đã thêm bình luận 

<h2>A sample titleh2>
<p>Some paragraph textp>
74 ngay trước tiêu đề. Một nhận xét được sử dụng để lưu các ghi chú giải thích trên mã của bạn để tham khảo trong tương lai và không được trình duyệt hiển thị cho khách truy cập trang web (trừ khi họ xem mã nguồn của trang web). Trong HTML, các bình luận được viết giữa 
<h2>A sample titleh2>
<p>Some paragraph textp>
45 và 
<h2>A sample titleh2>
<p>Some paragraph textp>
46 như đã được chứng minh trong đoạn mã ở trên. Đảm bảo đóng bình luận của bạn với thẻ nhận xét kết thúc (
<h2>A sample titleh2>
<p>Some paragraph textp>
46) hoặc tất cả nội dung của bạn sẽ được nhận xét.

Thêm và tạo kiểu cho một hình ảnh hồ sơ nhỏ vào tiêu đề trang web của bạn

Tiếp theo, bạn sẽ thêm một hình ảnh hồ sơ nhỏ vào phần tiêu đề. Chọn một bức ảnh hồ sơ mà bạn muốn đưa vào trang web của bạn. Nếu bạn không có ảnh hồ sơ, bạn có thể sử dụng bất kỳ hình ảnh thay thế nào (chẳng hạn như hình ảnh hồ sơ của Sammy) hoặc tạo hình đại diện thông qua một trang web như getavataaars.com.

Khi bạn đã chọn một hình ảnh, hãy lưu nó vào thư mục 

h2 {
  color: blue;
}
10 của bạn là 
h2 {
  color: blue;
}
66.

Bây giờ hãy thêm hình ảnh hồ sơ vào trang web bằng cách sử dụng thẻ 

h2 {
  color: blue;
}
72 và thuộc tính 
<h2>A sample titleh2>
<p>Some paragraph textp>
81 đã gán đường dẫn tệp của hình ảnh hồ sơ của bạn. Thêm đoạn mã mã được tô sáng sau đây vào tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn ngay sau dòng 
<h2>A sample titleh2>
<p>Some paragraph textp>
74 và trước dòng 
<h2>A sample titleh2>
<p>Some paragraph textp>
84:

index.html

<h2>A sample titleh2>
<p>Some paragraph textp>
8

Lưu tệp và tải nó trong trình duyệt. Trang web của bạn bây giờ sẽ có một tiêu đề, phụ đề, hình ảnh hồ sơ và hình nền:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Lưu ý rằng hình ảnh không có kiểu dáng giống như hình ảnh hồ sơ trong trang trình diễn. Để tạo lại hình dạng, kích thước và đường viền của hình ảnh hồ sơ trong trang trình diễn, hãy thêm các quy tắc sau vào tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn:

styles.css

<h2>A sample titleh2>
<p>Some paragraph textp>
9

Trước khi tiếp tục, hãy để xem lại từng dòng mã mà bạn vừa thêm:

  • <h2>A sample titleh2>
<p>Some paragraph textp>
    86 là một bình luận CSS để ghi nhãn mã.
  • Văn bản 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    87 đề cập đến tên của lớp mà chúng tôi xác định với quy tắc. Lớp này sẽ được áp dụng cho hình ảnh hồ sơ trong bước tiếp theo.
  • Tuyên bố 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    88 đặt chiều cao của hình ảnh thành 150 pixel và tự động điều chỉnh chiều rộng để duy trì tỷ lệ kích thước hình ảnh.
  • Tuyên bố 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    89 làm tròn các cạnh của hình ảnh thành một hình tròn.
  • Tuyên bố 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    90 cung cấp cho hình ảnh một đường viền chắc chắn rộng 10 pixel và có mã màu HTML 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    91.

Lưu tệp và quay lại tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn để thêm lớp 
<h2>A sample titleh2>
<p>Some paragraph textp>
93 vào thẻ 
h2 {
  color: blue;
}
72 của bạn như vậy:

index.html

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
0

Lưu tệp và tải lại nó trong trình duyệt của bạn. Hình ảnh hồ sơ của bạn bây giờ sẽ có chiều cao 150 pixel, hình tròn và đường viền màu vàng:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Trong bước tiếp theo, bạn sẽ áp dụng toàn bộ kiểu dáng bổ sung cho tiêu đề, phụ đề và hình ảnh hồ sơ.

Kiểu dáng và định vị nội dung tiêu đề với CSS

Bây giờ bạn sẽ xác định một lớp có CSS ​​để tạo kiểu và định vị nội dung tiêu đề. Quay lại tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 và tạo lớp 
<h2>A sample titleh2>
<p>Some paragraph textp>
96 bằng cách thêm các quy tắc CSS sau:

styles.css

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
1

Hãy để tạm dừng một cách ngắn gọn để hiểu từng dòng mã mà bạn vừa thêm vào:

  • <h2>A sample titleh2>
<p>Some paragraph textp>
    97 là một nhận xét, không được hiển thị bởi trình duyệt.
  • Văn bản 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    98 là tên của bộ chọn lớp mà chúng tôi tạo và xác định với quy tắc này.
  • Tuyên bố 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    99 tạo ra 40 pixel đệm giữa nội dung và đường viền của phần tử.
  • Tuyên bố 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    00 di chuyển nội dung đến trung tâm của phần tử. Bạn cũng có thể điều chỉnh giá trị thành 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    01 hoặc 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    02 để căn chỉnh văn bản phù hợp.
  • Tuyên bố 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    03 đặt màu cho mã màu HTML cụ thể được sử dụng trong trang web trình diễn. Hướng dẫn này sẽ không bao gồm các mã màu HTML trong chuỗi hướng dẫn này, nhưng bạn cũng có thể sử dụng tên màu HTML (
    <h2>A Sample Titleh2>
    32, 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    05, 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    06, 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    07, 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    08, 
    h2 {
  color: blue;
}
    87 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    18 và 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    19) để thay đổi giá trị màu của thuộc tính này.
  • Tuyên bố 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    20 tạo ra biên độ 30 pixel giữa chu vi của phần tử và chu vi của chế độ xem hoặc bất kỳ phần tử xung quanh nào.
  • Tuyên bố 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    21 tăng kích thước của cả tiêu đề và phụ đề.

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn. Tiếp theo, bạn sẽ áp dụng lớp 
<h2>A sample titleh2>
<p>Some paragraph textp>
96 này cho nội dung tiêu đề của bạn. Quay trở lại trang 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 và bọc nội dung tiêu đề (mà bạn đã thêm vào tệp của mình) trong thẻ 
<h2>A Sample Titleh2>
56 được gán lớp 
<h2>A sample titleh2>
<p>Some paragraph textp>
96:

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
2

Lưu tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 và tải lại nó trong trình duyệt của bạn. Tiêu đề, phụ đề và hình ảnh hồ sơ của bạn hiện nên được tạo kiểu bên trong thùng chứa 
<h2>A Sample Titleh2>
56 theo các quy tắc bạn đã khai báo với lớp 
<h2>A sample titleh2>
<p>Some paragraph textp>
96:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Sự kết luận

Bây giờ bạn đã tạo lại phần tiêu đề của trang web trình diễn trên trang web của bạn bằng HTML và CSS. Bạn đã thêm và tạo kiểu cho một tiêu đề, phụ đề và hình ảnh hồ sơ bằng cách sử dụng các lớp container và CSS 

<h2>A Sample Titleh2>
56. Nếu bạn quan tâm, bạn có thể tiếp tục khám phá các khả năng thiết kế bằng cách sửa đổi các quy tắc CSS của bạn cho nội dung tiêu đề của bạn.

Khi bạn đã sẵn sàng, bạn có thể tiếp tục hướng dẫn tiếp theo, nơi bạn sẽ tạo lại phần thứ hai của trang trình diễn.

// Hướng dẫn //

Giới thiệu

Trong hướng dẫn này, bạn sẽ tạo lại phần thứ hai của trang web trình diễn bằng CSS. Hãy thoải mái chuyển thông tin Sammy, nếu bạn muốn cá nhân hóa kích thước. Các phương pháp bạn học ở đây có thể được áp dụng cho các dự án trang web CSS/HTML khác.

Phần thứ hai của trang web chứa hai hộp nội dung, một hộp chứa văn bản và một hộp có ảnh hồ sơ lớn:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Điều kiện tiên quyết

Để làm theo hướng dẫn này, hãy đảm bảo rằng bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Bạn sẽ cần một hình ảnh hồ sơ để đặt trong hộp nội dung ở bên phải. Nếu bạn không có hình ảnh hồ sơ, bạn có thể sử dụng hình ảnh này cho mục đích trình diễn.

Lưu ý: Để tải xuống hình ảnh hồ sơ lớn, hãy truy cập liên kết này và nhấp vào 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
9 (trên MAC) hoặc 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
8 (trên Windows) trên hình ảnh và chọn Lưu Lưu hình ảnh dưới dạng và lưu nó dưới dạng 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
33 vào thư mục 
h2 {
  color: blue;
}
10 của bạn.: To download the large profile image, visit this link and click 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
9 (on Macs) or 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
8 (on Windows) on the image and select “Save Image As” and save it as 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
33 to your 
h2 {
  color: blue;
}
10 folder.

Trước khi tiến hành, hãy đảm bảo hình ảnh đã chọn của bạn được lưu trong thư mục 

h2 {
  color: blue;
}
10 của bạn dưới dạng 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
33.

Tạo quy tắc kiểu cho hộp nội dung văn bản và hình ảnh

Để tạo hai hộp nội dung này, trước tiên bạn sẽ xác định một lớp cột trong tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 tạo kiểu cho các hộp cho mục đích này. Sau đó, bạn sẽ thêm nội dung văn bản và hình ảnh vào tài liệu HTML.

Quay lại tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 và sao chép và dán các quy tắc sau ở dưới cùng của tệp:

styles.css

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
3

Trước khi tiếp tục, hãy để tạm dừng để hiểu từng quy tắc mà chúng tôi vừa thêm vào.

Quy tắc đầu tiên sử dụng bộ chọn của ____ ____539 để chỉ ra rằng quy tắc nên được áp dụng cho tất cả các phần tử và lớp HTML. Quy tắc này tuyên bố giá trị thuộc tính 

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
40 là 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
41, điều chỉnh tổng chiều rộng và chiều cao được tính toán của phần tử CSS để bao gồm đệm và kích thước biên của nó. Theo mặc định, kích thước chiều rộng và chiều cao của một phần tử chỉ đề cập đến nội dung của một phần tử. Đặt thuộc tính 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
40 thành 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
41 giúp điều chỉnh tổng chiều rộng và chiều cao của một phần tử dễ dàng hơn và có thể hữu ích khi đặt nội dung trên một trang. Để đọc thêm về mô hình hộp CSS, vui lòng truy cập hướng dẫn của chúng tôi về cách điều chỉnh nội dung, đệm, đường viền và lề của phần tử HTML với CSS.

Quy tắc thứ hai xác định một lớp có tên là cột 2 2 với các thông số kỹ thuật kích thước cho phép hai cột được hiển thị cạnh nhau trên trang. Lớp này được đặt tên là 

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
44 để phân biệt nó với các cột với các kích thước khác mà bạn sẽ tạo các lớp sau này trong hướng dẫn.

Một số giá trị và thuộc tính trong quy tắc này vẫn chưa được đề cập trong chuỗi hướng dẫn này:

  • Tuyên bố 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    45 hướng dẫn phần tử nổi sang phía bên trái của container mà nó bên trong (trong trường hợp này là chế độ xem) trong khi cho phép nội dung xung quanh chảy xung quanh bên phải của nó. Bạn cũng có thể đặt giá trị thuộc tính 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    46 thành 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    02 hoặc 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    48, mặc dù hướng dẫn này sử dụng giá trị 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    01 để tạo lại trang web trình diễn.
  • Tuyên bố 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    50 đặt phần tử chiều rộng của phần tử lên 45% chiều rộng của container của nó, trong trường hợp này là chính chế độ xem. Cài đặt kích thước (chẳng hạn như chiều rộng) theo tỷ lệ phần trăm thay vì pixel có thể hữu ích khi bạn muốn phần tử thay đổi kích thước theo kích thước của container mà nó nằm. Tuy nhiên, lưu ý rằng kích thước động có thể là một quá trình khó khăn, có nhiều phương pháp để tạo các yếu tố đáp ứng có thể được thực hiện sau khi thiết lập nền tảng trong CSS.
  • . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    51 đặt màu nền phần tử thành mã màu HTML#fede00 ".
  • . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    52 tăng khoảng cách giữa các đường.
  • Nếu bạn muốn tìm hiểu thêm về các tuyên bố khác, vui lòng xem lại các phần trước trong chuỗi hướng dẫn này về việc thiết lập kích thước của nội dung, đệm và lề.

Thêm hộp nội dung của tôi về tôi

Tiếp theo, bạn sẽ thêm hộp nội dung của tôi về tôi vào trang web bằng lớp 

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
44 mà bạn vừa tạo. Lưu tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn và quay lại tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7. Thêm mã sau sau khi đóng thẻ 
<h2>A Sample Titleh2>
84 trong phần tiêu đề của bạn, trước khi đóng thẻ 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
57:

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
4

Lưu tệp và tải nó trong trình duyệt. Để biết hướng dẫn tải tệp HTML, vui lòng truy cập bước hướng dẫn của chúng tôi cách xem tệp HTML ngoại tuyến trong trình duyệt của bạn.

Bây giờ bạn nên có một hộp màu vàng ở phía bên trái của trang web có chứa văn bản:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Lưu ý rằng trang web của bạn vẫn phải chứa nội dung tiêu đề bạn đã thêm trong hướng dẫn trước đây của loạt bài này cách xây dựng phần tiêu đề của trang web của bạn với CSS.

Hãy để xem xét ngắn gọn cách mã HTML này hoạt động:

  • Dòng đầu tiên trong đoạn mã này (
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    58) là một nhận xét giúp tổ chức nội dung HTML. Nó sẽ không hiển thị trong trình duyệt và được bao gồm ở đây để tham khảo sau.
  • Dòng mã tiếp theo (
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    59) tạo ra một thùng chứa 
    <h2>A Sample Titleh2>
    56, gán cho nó kiểu của lớp 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    44 mà bạn đã xác định trong tệp 
    <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
    7 và sử dụng thuộc tính HTML inline 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    63 để gán màu nền 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    91.
  • Các thẻ 
    <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
    1 và 
    <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
    2 theo sau có chứa văn bản bạn đang chèn vào hộp văn bản của tôi về tôi. Lưu ý rằng bạn đã đóng thùng chứa 
    <h2>A Sample Titleh2>
    56 ở cuối văn bản này. Bạn có thể chuyển văn bản Sammy, bằng văn bản của riêng bạn nếu bạn có kế hoạch cá nhân hóa trang web của mình.

Thêm hộp nội dung hình ảnh hồ sơ

Tiếp theo, bạn sẽ thêm hộp nội dung thứ hai chứa hình ảnh hồ sơ lớn. Có một số cách bạn có thể thêm một hộp hình ảnh, nhưng trong hướng dẫn này, bạn sẽ thêm hình ảnh cấu hình lớn bằng cách biến nó thành hình ảnh nền của một thùng chứa 

<h2>A Sample Titleh2>
56 khác được gán lớp 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
44.

Quay lại tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 và thêm đoạn mã sau vào cuối tài liệu:

styles.css

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
5

Trong đoạn mã này, bạn đã thêm một bình luận để sắp xếp các quy tắc CSS và được tạo và xác định lớp mới 

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
71 mà bạn sẽ sử dụng để tạo kiểu hộp chứa hình ảnh hồ sơ lớn. Trong quy tắc này, khai báo 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
72 cho trình duyệt sử dụng hình ảnh được tìm thấy tại đường dẫn tệp được chỉ định làm hình ảnh nền của phần tử. Tuyên bố 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
73 phù hợp với hình ảnh để che không gian của container nằm trong đó, tuyên bố 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
74 tập trung hình ảnh bên trong container.

Tiếp theo, bạn sẽ thêm một thùng chứa 

<h2>A Sample Titleh2>
56 được gán cả lớp 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
44 và lớp 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
71 để tạo lại hộp với hình ảnh cấu hình lớn.

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn và quay lại tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7. Thêm đoạn mã sau bên dưới thẻ 
<h2>A Sample Titleh2>
84 của cột đầu tiên của bạn và trên thẻ 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
57 đóng:

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
6

Đoạn mã này tạo ra một container 

<h2>A Sample Titleh2>
56 được tạo kiểu theo các quy tắc được khai báo trong lớp 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
44 và lớp 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
84.

Lưu cả hai tệp và tải lại 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 trong trình duyệt của bạn. Trang web của bạn bây giờ sẽ có hộp văn bản và hộp hình ảnh được tạo kiểu trong trang web trình diễn (và hình ảnh trong hình ảnh đầu tiên của hướng dẫn này). Lưu ý rằng trang web của bạn cũng nên bao gồm nội dung tiêu đề bạn đã tạo trong hướng dẫn trước đó. Bạn có thể tiếp tục thử nghiệm các giá trị được khai báo trong các lớp 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
44 và 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
87 để khám phá các khả năng thiết kế khác nhau.

Sự kết luận

Bây giờ bạn đã tạo và tạo kiểu hộp nội dung cho văn bản và hình ảnh bằng CSS. Trong hướng dẫn tiếp theo, bạn sẽ tạo lại phần thứ ba của trang web. Trong quá trình này, bạn sẽ sắp xếp nội dung thành hai hàng của bốn hộp và áp dụng một lớp giả sẽ khiến các hộp thay đổi màu khi người dùng di chuyển qua chúng bằng con trỏ của họ.

// Hướng dẫn //

Giới thiệu

Trong hướng dẫn này, bạn sẽ tạo lại bố cục lát gạch của phần Dự án trên mạng của trang web trình diễn bằng cách tạo kiểu cho tám container HTML 

<h2>A Sample Titleh2>
56 với các lớp CSS. Bạn cũng sẽ thêm lớp giả pseudo vào các yếu tố này để chúng thay đổi màu sắc khi người dùng di chuyển trên chúng. Hãy thoải mái chuyển thông tin Sammy, nếu bạn muốn cá nhân hóa kích thước. Các phương pháp bạn sử dụng ở đây có thể được áp dụng cho các dự án trang web CSS/HTML khác.

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Điều kiện tiên quyết

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Thêm và tạo kiểu tiêu đề tiêu đề

Để bắt đầu, hãy thêm tiêu đề Dự án Tiêu đề " :

index.html

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
7

Dòng đầu tiên của đoạn mã này là một nhận xét để dán nhãn mã bạn sẽ thêm để tạo phần thứ ba của trang web. Một nhận xét được sử dụng để lưu các ghi chú giải thích trên mã của bạn để tham khảo trong tương lai và không được trình duyệt hiển thị cho khách truy cập trang web (trừ khi họ xem mã nguồn của trang web). Dòng thứ hai bổ sung văn bản tiêu đề Các dự án trực tuyến và gán cho nó phần tử tiêu đề 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
1.

Tiếp theo, bạn sẽ tạo kiểu tiêu đề tiêu đề bằng cách tạo một lớp 

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
93. Quay lại tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 và sao chép và dán đoạn mã sau ở dưới cùng của tệp:

styles.css

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
8

Snippet mã này xác định kiểu cho lớp 

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
93. Vui lòng xem lại các phần trước trong loạt hướng dẫn này về việc thiết lập kích thước của nội dung, đệm và lề.

Tiếp theo, bạn sẽ thêm lớp Tiêu đề Phần của Phần vào các dự án tiêu đề Tiêu đề "trong tệp HTML. Quay trở lại tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 và thêm lớp vào phần tử HTML như vậy:

index.html

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
9

Lưu cả hai tệp và tải trang web của bạn trong trình duyệt. Để biết hướng dẫn tải tệp HTML, vui lòng truy cập bước hướng dẫn của chúng tôi cách xem tệp HTML ngoại tuyến trong trình duyệt của bạn. Tiêu đề bây giờ nên được tập trung vào trang và kích thước, định vị và màu của nó nên được điều chỉnh như trong hình ảnh sau:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Thêm và tạo kiểu hộp dự án lát gạch

Bây giờ bạn sẽ thêm tám hộp dự án bên dưới tiêu đề phần. Để bắt đầu, bạn sẽ tạo một lớp CSS cho phép chúng tôi tạo kiểu cho các thùng chứa 

<h2>A Sample Titleh2>
56 theo cách cho phép bốn trong số chúng phù hợp với nhau trên trang web.

Quay lại tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 và thêm đoạn mã sau ở dưới cùng của tài liệu:

styles.css

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
0

Trong đoạn mã này, bạn đã xác định lớp 

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
99 và các giá trị được chỉ định cho phép bốn cột được hiển thị cạnh nhau trên trang:

  • Tuyên bố 
    . . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
    00 hướng dẫn phần tử nổi sang phía bên trái của container mà nó bên trong (trong trường hợp này là trang web) trong khi cho phép nội dung xung quanh (trong trường hợp này là các hộp dự án khác) nghỉ ngơi ở phía bên phải của nó.
  • Tuyên bố 
    . . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
    01 đặt phần tử chiều rộng lên 21% chiều rộng của container, trong trường hợp này là trang web. Cài đặt kích thước (chẳng hạn như chiều rộng) theo tỷ lệ phần trăm thay vì pixel có thể hữu ích khi bạn muốn phần tử thay đổi kích thước theo kích thước của container mà nó bên trong. Tuy nhiên, lưu ý rằng kích thước động có thể là một quá trình khó khăn, có nhiều phương pháp để tạo các yếu tố đáp ứng có thể được thực hiện sau khi thiết lập nền tảng trong CSS.
  • Nếu bạn muốn tìm hiểu thêm về các tuyên bố khác, vui lòng xem lại các phần trước trong chuỗi hướng dẫn này về việc thiết lập kích thước của nội dung, đệm và lề.

Tiếp theo, bạn sẽ tạo một lớp cho mỗi tám hộp để bạn có thể tạo kiểu cho chúng khác nhau, cũng như thêm một hình ảnh đặc trưng vào hộp đầu tiên và cuối cùng để phù hợp với trang trình diễn. Để bắt đầu, hãy lưu một hoặc hai hình ảnh để sử dụng làm hình ảnh nổi bật trong thư mục hình ảnh của bạn. Nếu bạn không có hình ảnh, bạn có thể tải xuống hình ảnh của một robot phải và robot đối diện bên trái mà bạn đã sử dụng trong trang trình diễn.

Lưu ý: Để tải xuống các hình ảnh robot, hãy truy cập liên kết và nhấp vào 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
9 (trên MAC) hoặc 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
8 (trên Windows) trên hình ảnh và chọn Lưu Lưu hình ảnh dưới dạng và lưu nó dưới dạng 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
04 và 'Project-Shol.jpeg' vào thư mục hình ảnh của bạn .: To download the robot images, visit links and click 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
9 (on Macs) or 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
8 (on Windows) on the image and select “Save Image As” and save it as 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
04 and ‘project-right.jpeg’ to your images folder.

Để tạo một lớp cho mỗi hộp dự án, hãy thêm đoạn mã sau vào cuối tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn:

styles.css

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
1

Nếu bạn đang sử dụng hình ảnh của riêng mình, hãy đảm bảo bạn đã lưu chúng vào thư mục hình ảnh của mình và bạn đã chỉ định đường dẫn tệp chính xác trong khu vực được tô sáng trong quy tắc cho lớp 

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
06 và lớp 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
07.

Hãy để tạm dừng ngắn gọn để xem lại mã mà chúng tôi vừa viết. Trong các quy tắc cho lớp 

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
06 và 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
07, bạn đã thêm một hình ảnh nền, chỉ định vị trí đường dẫn tệp của nó và tuyên bố rằng hình ảnh nền phải được trang bị để che đậy toàn bộ phần tử.

Trong các quy tắc cho 

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
10 đến 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
11, bạn đã chỉ định các màu nền khác nhau bằng mã màu HTML. Lưu ý rằng bạn đã làm cho màu nền trong suốt cho 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
11 như một lựa chọn thiết kế, nhưng bạn có thể thay đổi điều này như bạn muốn. Bạn cũng có thể khám phá các hình ảnh và màu nền khác nhau cho từng lớp này bằng cách thử nghiệm các giá trị của chúng.

Tiếp theo, bạn sẽ thêm một quy tắc thay đổi kích thước phông chữ và định vị của văn bản sẽ được thêm vào các hộp dự án này. Thêm các quy tắc sau vào cuối tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7:

styles.css

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
2

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn. Bây giờ bạn sẽ thêm các container 
<h2>A Sample Titleh2>
56 vào tài liệu HTML và tạo kiểu cho chúng với các lớp CSS bạn vừa xác định. Quay lại tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 và thêm đoạn mã sau bên dưới dòng này: 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
17:

index.html

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
3

Lưu tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn và tải lại nó trong trình duyệt. Bạn sẽ nhận được đầu ra như hình ảnh sau:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Bạn nên có hai hàng bốn hộp, mỗi hàng được tạo kiểu theo các lớp 

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
99 và 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
20 mà họ đã được chỉ định với thuộc tính lớp. Trong mã HTML, bạn cũng đã thêm nội dung văn bản (chẳng hạn như Bot Bots ") và được chỉ định tất cả nội dung văn bản là lớp 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
21

Bạn cũng đã thêm phần tử ngắt dòng HTML (

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
22) để tạo đường ngắt giữa hai từ trong mỗi hộp. Hãy thay đổi văn bản này ngay bây giờ hoặc muộn hơn nếu bạn muốn cá nhân hóa trang web của mình. Bạn cũng có thể sử dụng phần tử HTML HyperLink 
<h2>A sample titleh2>
<p>Some paragraph textp>
60 để liên kết văn bản này với các trang mới bạn tạo cho trang web của mình. Bạn có thể khám phá tùy chọn này chi tiết hơn ở cuối loạt hướng dẫn.

Tiếp theo, bạn sẽ thêm một lớp giả để làm cho các hộp thay đổi màu khi người dùng lượn trên con trỏ của họ trên chúng.

Thay đổi màu nội dung với tương tác người dùng

Nếu bạn trở lại trang web trình diễn và di chuyển con trỏ của bạn trên các hộp trong phần Dự án ", bạn sẽ nhận thấy rằng chúng thay đổi màu sắc. Sự thay đổi màu này đạt được bằng cách thêm lớp giả 

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
89 cho từng lớp dự án.

Như bạn có thể nhớ lại nếu bạn đã làm theo hướng dẫn về các lớp giả trước đó trong loạt bài này, các lớp giả được tạo bằng cách nối thêm một đại tràng và tên lớp giả vào tên của lớp bạn đang cố gắng sửa đổi. Để thêm lớp giả ____257 vào các lớp dự án, hãy thêm các quy tắc sau ở dưới cùng của tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn:

styles.css

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
4

Trong đoạn mã này, bạn đã tạo các lớp 

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
89 cho sáu trong số tám lớp dự án. Lớp 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
89 này hướng dẫn phần tử thay đổi màu của nó thành mã màu HTML 
<h2>A sample titleh2>
<p>Some paragraph textp>
91 khi người dùng di chuyển con trỏ trên hộp. Lưu ý rằng bạn chỉ thêm lớp Hover vào các hộp dự án có chứa văn bản (và không vào các hộp dự án có chứa hình nền).

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 và tải lại 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 trong trình duyệt. Kiểm tra để đảm bảo rằng lớp giả pseudo đang hoạt động bằng cách di chuột con trỏ của bạn trên các hộp dự án. Chúng nên thay đổi màu sắc khi con trỏ của bạn đi qua chúng:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Sự kết luận

Bây giờ bạn đã đặt nội dung HTML trong các hộp bằng các lớp CSS và thêm một lớp giả 

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
89 để thay đổi ngoại hình của họ khi con trỏ người dùng lượn trên chúng. Bạn có thể tiếp tục thử nghiệm các phương pháp này bằng cách thay đổi các khai báo kiểu trong các lớp này hoặc thay đổi kích thước và số lượng hộp bạn sử dụng để sắp xếp bố cục trang của trang của bạn.

Trong hướng dẫn tiếp theo, bạn sẽ thêm phần Việc làm "vào một trang web bằng cách sử dụng các bảng HTML.

// Hướng dẫn //

Giới thiệu

Trong hướng dẫn này, bạn sẽ tạo lại phần Việc làm của trang web Trình diễn (hoặc phần thứ tư) bằng cách sử dụng các lớp HTML và các lớp CSS. Hãy thoải mái chuyển thông tin Sammy, nếu bạn muốn cá nhân hóa kích thước. Các phương pháp bạn sử dụng ở đây có thể được áp dụng cho các dự án trang web CSS/HTML khác.

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Để xây dựng phần này, bạn sẽ thêm và tạo kiểu tiêu đề phần, thêm và tạo kiểu cho một cột rộng, và thêm và tạo kiểu cho một bảng HTML bên trong cột.

Điều kiện tiên quyết

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Tạo phần Break và tiêu đề phần

Để bắt đầu, hãy tạo một lớp sẽ thêm không gian giữa nội dung trong phần "Dự án" và việc làm này "này. Thêm các nhận xét CSS sau đây và quy tắc CSS vào cuối tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn:

styles.css

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
5

Trong đoạn mã này, bạn đã thêm một bình luận CSS ghi nhãn các quy tắc CSS cho phần 4 Phần 4 và bình luận CSS giải thích mục đích của lớp 

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
35. Bạn sẽ gán lớp này cho một 
<h2>A Sample Titleh2>
56 trống trong tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7, sẽ cung cấp cho nó chiều cao 500 pixel và biên độ 50 pixel. Mặc dù 
<h2>A Sample Titleh2>
56 sẽ vô hình, nhưng chiều cao của nó sẽ hoạt động như một phần phá vỡ bằng cách đẩy nội dung tiếp theo 500 pixel xuống trang.

Quay lại tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn và thêm đoạn mã sau:

index.html

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
6

Đoạn mã này thêm một bình luận HTML để dán nhãn mã HTML được sử dụng cho phần thứ tư của trang web và thêm một container 

<h2>A Sample Titleh2>
56 được gán cho lớp 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
35 mà bạn vừa tạo. CNIPPET CODE cũng bổ sung tiêu đề phần Trải nghiệm của người Viking và các kiểu nó bằng lớp 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
93 mà bạn đã tạo trong hướng dẫn trước [Cách xây dựng bố cục lát gạch với CSS] (https://www.digitalocean.com/community/tutorials/ How-to-Build-A-Layout-With-CSS-Phần-3).

Lưu ý: Nếu bạn chưa theo dõi cùng với chuỗi hướng dẫn này, bạn có thể thêm lớp 

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
93 vào tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của mình bằng cách thêm đoạn mã sau vào cuối tệp:: If you have not been following along with this tutorial series, you can add the 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
93 class to your 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 file by adding the following code snippet to the bottom of the file:

styles.css

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
7

Lưu tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn và tải nó trong trình duyệt. Bây giờ bạn nên có một tiêu đề phần có tên là Trải nghiệm, sau khi phá vỡ phần:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Tạo kiểu cho một cột và bàn rộng

Tiếp theo, bạn sẽ tạo các lớp cho phép bạn tạo kiểu cho cột màu trắng rộng và bảng bạn sẽ đặt bên trong nó. Thêm đoạn mã sau ở dưới cùng của tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7:

styles.css

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
8

Trong quy tắc đầu tiên, bạn đã tuyên bố một số quy tắc kiểu cho lớp 

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
47. Lưu ý rằng bạn đã chỉ định 
h2 {
  color: blue;
}
90 theo tỷ lệ phần trăm để cột sẽ thay đổi kích thước theo chiều rộng của chế độ xem. Bạn đã chỉ định 
<h2>A Sample Titleh2>
48 đến 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
50, sẽ cho phép bảng điều chỉnh chiều cao của nó theo nhu cầu chiều cao của nội dung HTML bạn đặt bên trong. Bạn cũng đã tạo ra một quy tắc để tạo màu nền của 
<h2>A Sample Titleh2>
56 được chỉ định lớp này 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
05.

Nếu bạn muốn tìm hiểu thêm về các tuyên bố khác trong quy tắc này, vui lòng xem lại các phần trước trong chuỗi hướng dẫn này về việc thiết lập kích thước của nội dung, đệm và lề.

Trong quy tắc thứ hai, bạn đã xác định lớp 

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
53 và tuyên bố một số quy tắc. Tuyên bố 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
54 làm cho độ rộng của bảng chiếm toàn bộ chiều rộng của container trong đó nó nằm ở vị trí, đó sẽ là cột rộng mà bạn tạo ra. Tuyên bố 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
55 đặt 24 pixel không gian giữa các ô của bảng, cho phép nội dung của bảng chiếm chiều rộng của cột. Nếu bạn không bao gồm quy tắc này, mỗi ô bảng sẽ gần nhau hơn nhiều.

Thêm cột và bảng

Bây giờ bạn sẽ thêm cột và bảng vào tệp HTML. Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn, quay lại tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 và thêm đoạn mã sau ngay bên dưới dòng mã HTML 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
58:

index.html

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
9

Trong đoạn mã này, bạn đã thêm một container 

<h2>A Sample Titleh2>
56 được tạo kiểu theo lớp 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
47 và đặt một bảng HTML bên trong được tạo kiểu với lớp 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
53. Bên trong bàn, bạn đã đặt nội dung lịch sử việc làm. Thẻ 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
62 mở ra một hàng bảng trong đó ba bộ dữ liệu bảng sau đây (được đánh dấu bằng thẻ 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
63) được chèn. Để đọc thêm về cách các bảng HTML hoạt động, vui lòng truy cập hướng dẫn của chúng tôi cách tạo bảng với HTML

Lưu cả hai tệp và tải lại trang web của bạn trong trình duyệt. Trang web của bạn bây giờ sẽ có một cột rộng duy nhất chứa một bảng với bốn hàng và ba cột như hình khi bắt đầu của hướng dẫn này.

Lưu ý rằng ba phần tử 

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
63 đầu tiên được chèn giữa bộ mở và đóng đầu tiên của các thẻ 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
62. Bạn có thể tiếp tục thêm các hàng bằng cách sử dụng cùng một hàng và định dạng dữ liệu và chiều cao cột sẽ điều chỉnh phù hợp vì bạn đã đặt 
<h2>A Sample Titleh2>
48 thành 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
50 cho lớp 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
47. Hoặc, bạn có thể thêm các cột bổ sung bằng cách thêm các phần tử 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
63 bên trong các hàng 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
62.

Sự kết luận

Bây giờ bạn đã tạo và tạo kiểu cho một bảng với CSS để hiển thị nội dung lịch sử việc làm trong bố cục có cấu trúc. Thử nghiệm với kích thước và thêm các hàng và cột để tùy chỉnh các bảng cho các mục đích khác nhau. Trong hướng dẫn tiếp theo, bạn sẽ tiếp tục khám phá các khả năng bố trí bảng bằng cách tạo ra một bảng cho giáo dục "và kỹ năng".

// Hướng dẫn //

Giới thiệu

Trong hướng dẫn này, bạn sẽ tạo lại phần Giáo dục và phần Kỹ năng của Cameron (hoặc phần thứ năm) của trang web trình diễn bằng các lớp HTML và các lớp CSS. Vui lòng chuyển thông tin Sammy, nếu bạn muốn cá nhân hóa trang web của mình. Các phương pháp bạn sử dụng ở đây có thể được áp dụng cho các dự án trang web CSS/HTML khác.

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Để xây dựng các phần này, bạn sẽ tạo một lớp CSS tạo kiểu cho hai hộp nội dung có kích thước bằng nhau có thể phù hợp với nhau trên trang web. Sau đó, bạn sẽ thêm một bảng bên trong mỗi hộp nơi bạn sẽ thêm nội dung văn bản.

Điều kiện tiên quyết

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Tạo và tạo kiểu hai bảng có kích thước bằng nhau

Đầu tiên, sao chép và dán đoạn mã sau ở dưới cùng của tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn:

styles.css

<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
0

Đoạn mã này tạo ra lớp 

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
72, giống như lớp 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
44 mà bạn đã tạo để tạo kiểu , bạn có thể cần phải điều chỉnh chiều cao cho phù hợp, nếu không nó có thể tràn hoặc bị cắt. Nếu bạn muốn tìm hiểu thêm về các tuyên bố khác, vui lòng xem lại các phần trước trong chuỗi hướng dẫn này về việc thiết lập kích thước của nội dung, đệm và lề.

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 trước khi bạn tiến hành.

Tiếp theo, hãy quay lại tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 và dán đoạn mã sau sau khi đóng thẻ 
<h2>A Sample Titleh2>
84 cuối cùng:

index.html

<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
1

Đoạn mã này tạo ra một cột bằng cách sử dụng lớp cột 2A và chèn một bảng được tạo kiểu với lớp 

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
53 được tạo trong hướng dẫn trước. Bên trong bàn, bạn đã đặt nội dung lịch sử giáo dục của bạn. Thẻ 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
62 mở ra một hàng bảng trong đó ba bộ dữ liệu bảng sau đây (được đánh dấu bằng thẻ 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
63) được chèn. Để đọc thêm về cách các bảng HTML hoạt động, vui lòng truy cập hướng dẫn của chúng tôi cách tạo bảng với HTML

Lưu tệp và tải lại trình duyệt của bạn để kiểm tra xem bảng có hiển thị chính xác không. Bạn nên có bảng như ảnh chụp màn hình sau:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Tiếp theo, bạn sẽ thêm bảng thứ hai liệt kê các kỹ năng Sammy. Quay lại tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 và dán đoạn mã sau sau khi đóng thẻ 
<h2>A Sample Titleh2>
84 cuối cùng:

index.html

<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
2

Đoạn mã này hoạt động chính xác giống như đoạn mã trước: nó tạo một cột bằng lớp 

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
72 và chèn một bảng được tạo kiểu với lớp 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
53. Lưu ý rằng bạn đang sử dụng biểu tượng cảm xúc để tạo hình ảnh ngôi sao. Bạn có thể sử dụng bất kỳ biểu tượng cảm xúc nào làm nội dung văn bản HTML.

Lưu tệp và tải lại trình duyệt của bạn để kiểm tra xem bảng có hiển thị chính xác không. Bây giờ bạn sẽ có hai bảng được hiển thị cạnh nhau như trong hình ảnh ở đầu hướng dẫn này.

Sự kết luận

Bây giờ bạn đã thêm nội dung văn bản bằng cách sử dụng bảng kiểu. Bạn có thể thử nghiệm kích thước và thêm các hàng và cột để tùy chỉnh các bảng cho các mục đích khác nhau. Trong hướng dẫn tiếp theo, bạn sẽ tạo một hộp nội dung với một trích dẫn lớn trên trang web của bạn.

// Hướng dẫn //

Giới thiệu

Trong hướng dẫn này, bạn sẽ tạo lại phần Giáo dục và phần Kỹ năng của Cameron (hoặc phần thứ năm) của trang web trình diễn bằng các lớp HTML và các lớp CSS. Vui lòng chuyển thông tin Sammy, nếu bạn muốn cá nhân hóa trang web của mình. Các phương pháp bạn sử dụng ở đây có thể được áp dụng cho các dự án trang web CSS/HTML khác.

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Điều kiện tiên quyết

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Tạo và tạo kiểu hai bảng có kích thước bằng nhau

Đầu tiên, sao chép và dán đoạn mã sau ở dưới cùng của tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn:

styles.css

Đoạn mã này tạo ra lớp 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
72, giống như lớp 
. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
44 mà bạn đã tạo để tạo kiểu , bạn có thể cần phải điều chỉnh chiều cao cho phù hợp, nếu không nó có thể tràn hoặc bị cắt. Nếu bạn muốn tìm hiểu thêm về các tuyên bố khác, vui lòng xem lại các phần trước trong chuỗi hướng dẫn này về việc thiết lập kích thước của nội dung, đệm và lề.

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 trước khi bạn tiến hành.

Lưu ý rằng lề được đặt thành 

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
50, theo chiều ngang của container ở giữa trang. Ngoài ra, lề dưới cùng được đặt thành 200 pixel để cung cấp một số không gian ở cuối trang. Nếu bạn muốn tìm hiểu thêm về các tuyên bố khác, vui lòng xem lại các phần trước trong chuỗi hướng dẫn này về việc thiết lập kích thước của nội dung, đệm, biên giới và lề.

Bạn cũng đã tạo ra lớp 

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
89 mà bạn sẽ sử dụng để tạo kiểu văn bản của trích dẫn đặc trưng. Lưu ý rằng bạn đã đặt thuộc tính 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
90 thành 
. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
91, thu nhỏ khoảng trống giữa các dòng văn bản từ cài đặt mặc định là 1.6. Thử nghiệm thay đổi giá trị này để xác định khoảng cách dòng nào bạn thích.

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7.

Thêm phần trích dẫn đặc trưng

Quay trở lại tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7. Sau lần đóng cuối cùng 
<h2>A Sample Titleh2>
84, thêm đoạn mã sau:

index.html

<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
4

Trước khi tiếp tục, hãy để tạm dừng để kiểm tra từng dòng mã:

  • Nhận xét HTML 
    . . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
    95 Nhãn Phần mã này trong tệp 
    . . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
    7 và sẽ không được trình duyệt hiển thị.
  • Phần tử 
    . . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
    97 tạo ra một phần ngắt bằng cách sử dụng một lớp mà bạn có thể đã xác định trong một hướng dẫn trước đó. Nếu bạn không làm theo hướng dẫn đó, bạn có thể thêm lớp đó bằng cách thêm Quy tắc CSS 
    . . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
    98 vào tệp 
    <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
    7 của bạn. Phần tử này tạo không gian giữa nội dung trong phần trước và phần trích dẫn nổi bật.
  • Thẻ 
    <h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
    00 và thẻ 
    <h2>A Sample Titleh2>
    84 đóng của nó Tạo một thùng chứa cho báo giá nổi bật với các quy tắc kiểu bạn đã khai báo cho lớp 
    . . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
    87 trong tệp 
    <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
    7 của bạn.
  • <h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
    04 chèn nội dung văn bản vào thùng chứa 
    <h2>A Sample Titleh2>
    56 mà bạn đã mở trong dòng trên và tạo kiểu theo các quy tắc bạn đã khai báo cho bộ chọn lớp 
    . . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}
    89 trong tệp 
    <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
    7 của bạn. Nếu bạn thay đổi độ dài của nội dung văn bản, bạn có thể muốn sửa đổi một trong các lớp trong phần này để thay đổi kích thước của phông chữ hoặc kích thước của container để đảm bảo văn bản vẫn phù hợp.

Lưu tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 và tải lại nó trong trình duyệt của bạn. Trang web của bạn bây giờ sẽ hiển thị một báo giá lớn trong một thùng chứa trong suốt với nền chắc chắn:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Sự kết luận

Trong hướng dẫn này, bạn đã tạo một hộp văn bản nổi bật trên trang web của mình và sửa đổi phong cách của nó cho các bố cục trang web khác nhau. Nếu bạn muốn siêu liên kết báo giá của bạn đến một trang web mới, vui lòng truy cập hướng dẫn của chúng tôi cách tạo và liên kết đến các trang trang web bổ sung với HTML.

Trong hướng dẫn tiếp theo và cuối cùng của loạt hướng dẫn, bạn sẽ tạo ra một chân trang tĩnh, trong đó có thể sử dụng một vị trí cố định ở dưới cùng của chế độ xem khi khách truy cập cuộn xuống trang.

// Hướng dẫn //

Giới thiệu

Trong hướng dẫn cuối cùng của loạt CSS, bạn sẽ tạo một chân trang tĩnh ở vị trí cố định ở dưới cùng của chế độ xem khi khách truy cập cuộn xuống trang. Hướng dẫn này sẽ tái tạo chân trang trong trang web trình diễn nhưng bạn cũng có thể sử dụng các phương pháp này cho các dự án trang web khác.

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Điều kiện tiên quyết

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã thiết lập các tệp và thư mục cần thiết theo hướng dẫn trước đây trong loạt bài này về cách thiết lập dự án thực hành CSS và HTML của bạn.

Hướng dẫn này sử dụng một số biểu tượng truyền thông xã hội làm nội dung trong chân trang. Nếu bạn muốn sử dụng các biểu tượng này, hãy tải chúng ngay từ trang trình diễn của chúng tôi và lưu chúng vào thư mục hình ảnh của bạn như:

  • Twitter Twitter.jpeg ”
  • "GitHub.jpeg"
  • Email email.jpeg.

Để tải xuống các hình ảnh này, nhấp vào tên tệp được liên kết ở trên và sau đó nhấp vào 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
9 (trên Macs) hoặc 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
8 (trên Windows) trong khi di chuột trên hình ảnh và chọn Lưu Lưu hình ảnh dưới dạng. Lưu hình ảnh với tên tệp được hướng dẫn vào thư mục 
h2 {
  color: blue;
}
10 của bạn.

Khi bạn đã lưu các biểu tượng của mình, bạn có thể tiến hành phần tiếp theo.

Đầu tiên, bạn sẽ xác định một lớp chân trang trên máy tính bằng cách thêm đoạn mã sau vào cuối tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7:

styles.css

<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
5

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7. Trong đoạn mã này, bạn đã thêm một bình luận để dán nhãn mã CSS cho phần chân trang. Sau đó, bạn đã xác định một lớp có tên 
<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
14 và tuyên bố một số quy tắc kiểu. Quy tắc đầu tiên tuyên bố 
<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
15 của nó là 
<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
16 có nghĩa là phần tử sẽ không di chuyển từ vị trí bạn chỉ định khi người dùng cuộn xuống trang. Vị trí này được chỉ định bởi hai khai báo tiếp theo: 
<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
17 và 
<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
18, trong đó chỉ định vị trí 0 pixel từ bên trái và không có pixel từ dưới cùng của chế độ xem của trình duyệt.

Bằng cách thay đổi các giá trị này, bạn có thể thay đổi vị trí của phần tử trên trang. Tuy nhiên, lưu ý rằng bất kỳ giá trị nào ngoài số 0 cần bao gồm hậu tố 

<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
19 sau số. Quy tắc cũng chỉ định màu sắc, chiều cao và màu nền của lớp 
<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
14.

Bây giờ bạn đã sẵn sàng để thêm nội dung chân trang trong phần tiếp theo của hướng dẫn này.

Để thêm nội dung chân trang, bạn sẽ thêm một container 

<h2>A Sample Titleh2>
56 vào trang web và gán lớp chân trang mà bạn vừa tạo. Quay trở lại tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn và dán đoạn mã sau sau khi kết thúc thẻ 
<h2>A Sample Titleh2>
84 cuối cùng: thẻ:

index.html

<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
6

Lưu tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn và tải lại nó trong trình duyệt. (Để biết hướng dẫn tải tệp HTML, vui lòng truy cập bước hướng dẫn của chúng tôi cách xem tệp HTML ngoại tuyến trong trình duyệt của bạn). Bây giờ bạn sẽ có một phần chân trang trống ở cuối trang web của bạn giữ đúng vị trí khi bạn cuộn lên và xuống trang:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Tiếp theo bạn sẽ thêm nội dung vào chân trang mới được tạo.

Trong bước này, bạn sẽ thêm và tạo kiểu cho các mục menu vào phía bên trái của chân trang. Các mục menu này có thể được sử dụng để liên kết đến các trang khác trên trang web của bạn. Hiện tại, chỉ có một trang web trên trang web của bạn, vì vậy bạn có thể sử dụng các liên kết chúng tôi cung cấp cho mục đích trình diễn. Sau này, nếu bạn thêm các trang bổ sung vào trang web của mình, bạn có thể tạo các mục menu tại đây và thêm các liên kết chính xác. Bạn có thể tìm hiểu cách tạo và liên kết đến các trang web mới với hướng dẫn này về cách xây dựng một trang web với HTML.

Quay lại tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn và thêm đoạn mã sau vào cuối tệp:

styles.css

<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
7

Hãy để tạm dừng ngắn gọn để xem xét từng quy tắc mà chúng tôi đã tạo ra:

  • Quy tắc đầu tiên xác định một lớp có tên 

    <h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
    26 sẽ được sử dụng để tạo kiểu văn bản mục menu. Lưu ý rằng bạn đang đặt thuộc tính 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    46 thành 
    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    01 để văn bản được gán cho lớp này sẽ nổi sang bên trái của trang. Bạn cũng đang sử dụng thuộc tính 
    <h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
    29 để cấp thêm không gian giữa các mục menu. Nếu bất kỳ mục menu nào của bạn là nhiều hơn một từ, bạn sẽ cần tạo một lớp để tạo kiểu cho các mục menu (thay vì chỉ thay đổi giá trị khoảng cách từ).

  • Quy tắc thứ hai sử dụng lớp giả 

    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    89 để thêm màu nền màu vàng vào văn bản khi người dùng di chuyển con trỏ của họ qua văn bản.

Bây giờ bạn sẽ thêm các mục menu vào trang web. Quay trở lại tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn và thêm đoạn mã được tô sáng sau đây bên trong thùng chứa chân dung mà bạn đã tạo:

index.html

<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
8

CNIPPET mã này thêm hai mục menu (về các khoản tín dụng và các tín dụng trực tuyến), liên kết các mục menu này và tạo kiểu văn bản với các lớp 

<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
26 và 
<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
33 bạn vừa tạo.

Lưu cả hai tệp và tải lại trang web của bạn trong trình duyệt. Bạn sẽ nhận được một cái gì đó như thế này:

Hướng dẫn how do you add a website to css? - Làm thế nào để bạn thêm một trang web vào css?

Tiếp theo bạn sẽ thêm các biểu tượng xã hội vào chân trang, bạn có thể sử dụng để liên kết với các tài khoản truyền thông xã hội của mình. Nếu bạn muốn sử dụng các biểu tượng cho các nền tảng truyền thông xã hội khác nhau, bạn có thể tìm kiếm các biểu tượng miễn phí trên web và tải chúng xuống thư mục 

h2 {
  color: blue;
}
10 của bạn. Quay lại tệp 
<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn và thêm ba quy tắc sau vào cuối tệp của bạn:

styles.css

<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
9

Hãy để tạm dừng để xem xét từng quy tắc:

  • Quy tắc đầu tiên xác định lớp 

    <h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
    36 và chỉ định các giá trị đệm, lề và phao cụ thể của nó. Bạn sẽ sử dụng quy tắc này để tạo kiểu cho một yếu tố 
    <h2>A Sample Titleh2>
    56 sẽ giữ các biểu tượng truyền thông xã hội.

  • Quy tắc thứ hai tạo ra lớp 

    <h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
    38 sẽ cung cấp các giá trị chiều cao và ký quỹ cho kích thước và vị trí của các biểu tượng truyền thông xã hội.

  • Quy tắc thứ ba sử dụng lớp giả 

    . . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
    89 để thêm nền màu vàng vào biểu tượng khi người dùng di chuyển con trỏ của họ qua văn bản.

Lưu tệp 

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
7 của bạn. Bây giờ bạn sẽ thêm các biểu tượng truyền thông xã hội vào chân trang. Quay lại tệp 
. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn và thêm đoạn mã sau sau khi đóng thẻ 
<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
42 cuối cùng của các mục menu:

index.html

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">
0

Đảm bảo rằng bạn thay đổi các đường dẫn tệp và liên kết với thông tin phương tiện truyền thông xã hội của riêng bạn.

Đoạn mã này tạo ra một thùng chứa 

<h2>A Sample Titleh2>
56, được gán theo kiểu 
<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
36 lớp. Bên trong container 
<h2> This is red text with a size of 40 pixels. h2>
<h3> This is purple text with a size of 50 pixels. h3>
<h4> This is green text with a size 60 pixels. h4>
45 này, bạn đã thêm ba biểu tượng phương tiện truyền thông xã hội bằng thẻ HTML 
h2 {
  color: blue;
}
72 và liên kết từng hình ảnh bằng thẻ HTML 
<h2>A sample titleh2>
<p>Some paragraph textp>
60.

Bạn cũng đã thêm văn bản thay thế mô tả từng biểu tượng bằng thuộc tính 

h2 {
  color: blue;
}
78. Khi tạo trang web, văn bản thay thế nên được thêm vào tất cả các hình ảnh để hỗ trợ khả năng truy cập trang web cho các cá nhân sử dụng đầu đọc màn hình. Để đọc thêm về việc sử dụng văn bản thay thế với HTML, vui lòng truy cập phần trên văn bản thay thế trong hướng dẫn của chúng tôi Cách thêm hình ảnh vào trang web của bạn bằng HTML.

Lưu tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn và tải lại nó trong trình duyệt. Bây giờ bạn sẽ có một chân trang cố định với ba biểu tượng phương tiện truyền thông xã hội ở bên phải liên kết đến tài khoản của bạn. Các liên kết sẽ thay đổi màu sắc khi người dùng di chuyển con trỏ của họ trên chúng. Để xác nhận kết quả của bạn, bạn có thể so sánh chúng với GIF khi bắt đầu hướng dẫn này.

Sự kết luận

Bây giờ bạn đã tạo ra một chân trang tĩnh ở vị trí cố định ở dưới cùng của chế độ xem khi khách truy cập cuộn xuống trang. Bạn có thể tiếp tục khám phá các khả năng thiết kế chân trang và khả năng nội dung bằng cách thay đổi các giá trị trong các lớp CSS mà bạn đã tạo hoặc thêm các loại nội dung khác nhau vào tệp 

. . .
img {
  border: 2px solid red;
  border-radius: 8px;
  width: 200px;
}
7 của bạn. Để biết thêm ý tưởng về việc khám phá các khả năng thiết kế và bố cục cho trang web của bạn, kết luận của loạt hướng dẫn này có nhiều gợi ý hơn cho những thứ cần thử như sắp xếp lại các phần nội dung, thêm liên kết vào các trang khác và thay đổi kiểu bố trí bằng mô hình hộp.

Sự kết luận

Sự kết luận

Xin chúc mừng! Bạn vừa xây dựng một trang web bằng CSS và HTML. Bạn đã khám phá cách sử dụng CSS để tạo các thành phần HTML bằng cách xác định các lớp và lớp giả. Bạn cũng đã triển khai các sắp xếp bố cục trang web khác nhau bằng cách sử dụng nhiều yếu tố HTML và kiểu CSS.

Mặc dù có rất nhiều thứ để học với CSS, các phương pháp được đề cập trong loạt bài này sẽ cung cấp một nền tảng vững chắc để tiếp tục các kỹ năng CSS của bạn và chuẩn bị cho bạn khám phá các kỹ năng phát triển web phía trước bổ sung (như JavaScript) và Frameworks ( Giống như đuôi). Hãy tiếp tục sửa đổi trang web của bạn bằng cách thêm nội dung và kiểu dáng bổ sung. Đối với một số ý tưởng bắt đầu, bạn có thể quan tâm đến:

  • Cá nhân hóa nội dung văn bản và hình ảnh trên trang web của bạn. Nếu bạn cần làm mới hình ảnh, vui lòng truy cập hướng dẫn của chúng tôi cách thêm hình ảnh với HTML hoặc hướng dẫn của chúng tôi cách tạo kiểu hình ảnh với CSS
  • Thêm các trang web và liên kết bổ sung với hướng dẫn này cách tạo và liên kết đến các trang trang web bổ sung với HTML
  • Thêm một favicon với hướng dẫn của chúng tôi cách thêm favicon vào trang web của bạn
  • Khám phá các kiểu bố trí hộp khác nhau bằng cách sửa đổi kích thước và số lượng của các hộp dự án theo hướng dẫn trong hướng dẫn cách xây dựng bố cục lát gạch với CSS
  • Sắp xếp lại và sửa đổi các phần trang web mà bạn đã tạo trong chuỗi hướng dẫn này
  • Thay đổi hình nền 
    <h2>A sample titleh2>
<p>Some paragraph textp>
    31 như được giải thích trong hướng dẫn này
  • Thay đổi màu nền được sử dụng trong các yếu tố 
    <h2>A Sample Titleh2>
    56 khác nhau để thay đổi bảng màu của trang web của bạn

Bây giờ bạn cũng nên có tất cả các tệp và thư mục cần thiết để triển khai một trang web đã hoàn thành lên đám mây. Nếu bạn muốn triển khai trang web của mình thông qua nền tảng ứng dụng DigitalOcean, hãy làm theo hướng dẫn thân thiện với người mới bắt đầu của chúng tôi cách triển khai một trang web tĩnh lên đám mây với nền tảng ứng dụng DigitalOcean.

Kiểm tra tất cả các chuỗi hướng dẫn của chúng tôi

Muốn tìm hiểu thêm? Tham gia cộng đồng DigitalOcean!

Tham gia cộng đồng DigitalOcean của chúng tôi miễn phí hơn một triệu nhà phát triển! Nhận trợ giúp và chia sẻ kiến ​​thức trong phần Câu hỏi & Câu trả lời của chúng tôi, tìm hướng dẫn và công cụ sẽ giúp bạn phát triển như một nhà phát triển và mở rộng quy mô dự án hoặc doanh nghiệp của bạn, và đăng ký các chủ đề quan tâm.

Đăng ký

programming css Style inline HTML CSS inline css inline-block Style inline ReactJS Inline style CSS CSS inline HTML HTML, CSS online

Bài Viết Liên Quan

Chi phí đánh giá môi trường chiến lược là gì năm 2024
Chi phí đánh giá môi trường chiến lược là gì năm 2024

là ai Hỏi Đáp Là gì Cryto Giá Review Đánh giá
Bài tập unit 5 tiếng anh 7 thí điểm năm 2024
Bài tập unit 5 tiếng anh 7 thí điểm năm 2024

mẹo hay Khỏe Đẹp Bài tập Học Tốt Tiếng anh
Giấy chứng nhận đăng ký doanh nghiệp là gì năm 2024
Giấy chứng nhận đăng ký doanh nghiệp là gì năm 2024

là ai Hỏi Đáp Là gì
Khoa công nghệ thông tin là gì năm 2024
Khoa công nghệ thông tin là gì năm 2024

là ai Hỏi Đáp Là gì Công Nghệ Công nghệ
Bài tập trắc nghiệm unit 13 lớp 8 năm 2024
Bài tập trắc nghiệm unit 13 lớp 8 năm 2024

mẹo hay Khỏe Đẹp Bài tập
Chồng quý hợi vợ đinh mão xây nhà hướng nào năm 2024
Chồng quý hợi vợ đinh mão xây nhà hướng nào năm 2024

mẹo hay Xây Đựng Xây Nhà
Ga hàng hóa als voz site forums.voz.vn năm 2024
Ga hàng hóa als voz site forums.voz.vn năm 2024

mẹo hay
Kỹ năng cứng của nhà lãnh đạo là gì năm 2024
Kỹ năng cứng của nhà lãnh đạo là gì năm 2024

là ai Hỏi Đáp Là gì Xây Đựng Nhà
Lỗi màn hình dvd ô tô ngược hình năm 2024
Lỗi màn hình dvd ô tô ngược hình năm 2024

mẹo hay Công Nghệ Màn hình
Cách mã hóa biến latent variable trên mplus năm 2024
Cách mã hóa biến latent variable trên mplus năm 2024

mẹo hay Mẹo Hay Cách
Không gian và thời gian là gì năm 2024
Không gian và thời gian là gì năm 2024

là ai Hỏi Đáp Là gì
Cho thuê văn phòng 150 m2 tại thanh xuân năm 2024
Cho thuê văn phòng 150 m2 tại thanh xuân năm 2024

mẹo hay
Sinh ngày 5 tháng 2 năm 1985 là tuổi gì năm 2024
Sinh ngày 5 tháng 2 năm 1985 là tuổi gì năm 2024

là ai
Chỗ làm chứng minh nhân dân phạm văn đồng năm 2024
Chỗ làm chứng minh nhân dân phạm văn đồng năm 2024

mẹo hay
Mẫu thư chúc tết và xin lỗi sự chậm trễ năm 2024
Mẫu thư chúc tết và xin lỗi sự chậm trễ năm 2024

mẹo hay
Mô hình cdm là viết tắt của từ gì năm 2024
Mô hình cdm là viết tắt của từ gì năm 2024

là ai
Soạn bài văn bản hoàng lê nhất thống chí năm 2024
Soạn bài văn bản hoàng lê nhất thống chí năm 2024

mẹo hay
Giải bài tập sách giáo khoa anh 11 trang 73 năm 2024
Giải bài tập sách giáo khoa anh 11 trang 73 năm 2024

mẹo hay Khỏe Đẹp Bài tập Học Tốt Sách
Dải hội tụ nhiệt đới ký hiệu là gì năm 2024
Dải hội tụ nhiệt đới ký hiệu là gì năm 2024

là ai Hỏi Đáp Là gì
Nữ sinh năm 1994 hợp với tuổi nào nhất năm 2024
Nữ sinh năm 1994 hợp với tuổi nào nhất năm 2024

mẹo hay 94 tuổi gì

Quảng Cáo

Có thể bạn quan tâm

Đời cua cua máy đời cáy cáy đào là gì năm 2024
1 ngày trước . bởi BleakSorcery
Chỗ nào bán xe honda rẻ nhất sài gòn năm 2024
1 ngày trước . bởi OutrightTuesday
Những lỗi vi phạm giao thông cần hình ảnh năm 2024
1 ngày trước . bởi NarrowMartyrdom
Excel bị lỗi 1 dòng 1 trang in năm 2024
1 ngày trước . bởi UtmostApologise
Bài hát em nào biết em nào có hay năm 2024
1 ngày trước . bởi WavyAnxiety
Cây chó đẻ có tên gọi khác là gì năm 2024
1 ngày trước . bởi AwedRecurrence
Hàng hóa công nghiệp và dịch vụ là gì năm 2024
1 ngày trước . bởi Old-timeSnack
Ac dc its a long way to top album cover năm 2024
1 ngày trước . bởi MockPueblo
Làm thế nào để trẻ dậy thì muộn năm 2024
1 ngày trước . bởi AtmosphericCoding
Trả diện là gì trên facebook năm 2024
1 ngày trước . bởi NeighboringForefinger

Toplist được quan tâm

#1
Top 4 uống nước chanh sả mật ong có tác dụng gì 2023
6 tháng trước
#2
Top 10 bài tập làm văn số 5 lớp 7 de 4 2023
6 tháng trước
#3
Top 3 vừa chơi đã có tài khoản vương giả chap 1 2023
6 tháng trước
#4
Top 6 anh sẽ on thôi cover phạm nguyên ngọc lyrics 2023
6 tháng trước
#5
Top 7 tài liệu quản lý nhà nước và quản lý ngành giáo dục đào tạo 2023
6 tháng trước
#6
Top 7 hãy ra khỏi người đó đi hợp âm 2023
6 tháng trước
#7
Top 6 giáo án thơ về thăm nhà bác 2023
6 tháng trước
#8
Top 8 giáo án ngữ văn 6 cánh diều 2023
6 tháng trước
#9
Top 9 tinh bột tham gia phản ứng nào 2023
6 tháng trước

Quảng cáo

Xem Nhiều

Các sở ban ngành tiếng trung là gì năm 2024
5 ngày trước . bởi LoathsomeOuting
Top 10 leadership qualities that make good leaders năm 2024
5 ngày trước . bởi ParalyzedInstructor
Đề thi môn toán lớp 8 học kì 2 năm 2024
6 ngày trước . bởi AgonizedHostility
Chèn ảnh có sẵn trong word vào văn bản năm 2024
2 ngày trước . bởi OriginalCorrelation
Mổ mắt cận thị ở bệnh viện nào tốt nhất năm 2024
1 tuần trước . bởi NamelessProspectus
Bị hạt gạo ở móng tay là bị gì năm 2024
20 giờ trước . bởi Two-year-oldLitigation
Bài 37 sgk toán 9 tập 1 trang 94 năm 2024
3 ngày trước . bởi UrbanPeter
Đầu số 0766 là mạng gì năm 2024
1 tuần trước . bởi SemanticTrauma
Bluestack là gì chơi có quảng cáo không năm 2024
4 ngày trước . bởi DevotedOutdoors
Công văn thu hồi hóa đơn xuất dư năm 2024
1 tuần trước . bởi NarrowRunoff

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

DMCA.com Protection Status
Bản quyền © 2021 Hàng Hiệu Inc.