Thứ hai, 12/10/2020 | 00:00 GMT+7

Cách tạo kiểu cho HTML phần tử div với CSS

Hướng dẫn này là một phần của loạt bài về cách tạo và tùy chỉnh trang web này bằ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ạn có thể theo dõi toàn bộ loạt bài này để tạo lại trang web trình diễn và làm quen với CSS hoặc sử dụng các phương pháp được mô tả ở đây cho các dự án trang web CSS khác.

Một phần của loạt bài: Cách xây dựng trang web bằng CSS

Trước khi tiếp tục, bạn nên có một số kiến thức về HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Nếu bạn chưa quen với HTML, bạn có thể làm theo mười hướng dẫn đầu tiên của loạt bài Cách tạo trang web với HTML trước khi bắt đầu loạt bài này.

Hướng dẫn này sẽ giới thiệu cho bạn cách tạo kiểu cho phần tử Phân chia nội dung HTML — hoặc phần tử <div> — bằng cách sử dụng CSS. Phần tử <div> được dùng để cấu trúc bố cục của trang và chia trang web thành các thành phần riêng biệt để tạo kiểu riêng. Trong hướng dẫn này, bạn sẽ tạo và tạo kiểu cho các phần tử <div> , cũng như tìm hiểu cách thêm và tạo kiểu cho các phần tử khác bên trong containers <div> . Những kỹ năng này sẽ giúp bạn chuẩn bị để sử dụng các phần tử <div> làm công cụ bố cục ở phần sau của loạt bài này khi bạn bắt đầu tạo lại trang web trình diễn .

Phần tử <div> được sử dụng bằng cách thêm thẻ mở và đóng </div> vào trang HTML . Riêng phần tử <div> thường có ít ảnh hưởng trực quan đến 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ử <div> , bạn có thể gán luật kiểu cho phần tử đó bằng cách sử dụng CSS.

Yêu cầu

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã cài đặt các file và folder cần thiết như được hướng dẫn trong hướng dẫn trước trong loạt bài Cách cài đặt Dự án thực hành CSS và HTML cho bạn .

Khám phá phần tử <div> trong thực tế

Hãy thử làm một bài tập thực hành để nghiên cứu cách hoạt động của phần tử <div> . Xóa mọi thứ trong file styles.css 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 luật CSS sau cho bộ chọn thẻ <div> :

styles.css
div {  background-color: green;   height: 100px;  width: 100px; } 

Lưu file styles.css . Tiếp theo, quay lại index.html của bạn, xóa mọi thứ ở đó (ngoại trừ dòng mã đầu tiên: <link rel="stylesheet" href="css/styles.css"> ) và thêm đoạn mã sau:

index.html
<div></div> 

Lưu ý phần tử <div> có thẻ mở và thẻ đóng nhưng không yêu cầu bất kỳ nội dung nào. Lưu index.html và reload trong trình duyệt của bạn. (Để biết hướng dẫn về cách tải file HTML, vui lòng truy cập bước hướng dẫn Cách Xem Tệp HTML Offline Trong Trình duyệt của Bạn ).

Trang web sẽ hiển thị một hộp màu xanh lục rộng 100 pixel và cao 100 pixel như được quy định bởi luật CSS:

Trang web có hộp <div> màu xanh lục.

Đến đây bạn đã có luật tạo kiểu cho phần tử <div> , mọi phần tử <div> bạn thêm vào trang web sẽ được tạo kiểu chính xác theo cùng một cách. Tuy nhiên, khi tạo một trang web, không chắc bạn cần tất cả các phần tử <div> HTML 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 các lớp mà họ có thể sử dụng để tạo kiểu cho các phần tử <div> theo những cách khác nhau.

Để thực hành tạo các lớp cho các phần tử <div> , hãy xóa luật CSS bạn vừa tạo và thêm ba bộ luật CSS mới sau vào file styles.css :

.div-1 {   background-color: blue;    height: 50px;   width: 50px; }  .div-2 {   background-color: red;    height: 100px;   width: 100px; }  .div-3 {   background-color: yellow;    height: 200px;   width: 200px; } 

Trong đoạn mã này, bạn đã tạo các-luật tạo kiểu cho ba lớp khác nhau: div-1 , div-2div-3 . Lưu ý bạn đã thêm một . trước bộ chọn lớp theo yêu cầu khi khai báo các-luật CSS cho các lớp.

Lưu file styles.css và quay lại index.html của bạn. Xóa phần tử <div> bạn vừa tạo và thêm ba phần tử <div> vào index.html của bạn, áp dụng một lớp cho mỗi phần tử tương ứng với bộ chọn lớp CSS mà bạn đã xác định trong styles.css :

index.html
<div class="div-1"></div> <div class="div-2"></div> <div class="div-3"></div> 

Lưu ý bạn đã thêm lớp dưới dạng thuộc tính vào <div> bằng cách thêm thuộc tính lớp và tên lớp vào mỗi <div> mở. Lưu file và reload trong trình duyệt của bạn. Bạn sẽ nhận được thông tin như thế này:

Trang web có ba phần tử <div> được tạo kiểu với các lớp khác nhau

Trang web phải hiển thị ba phần tử <div> , mỗi phần tử được tạo kiểu với một màu sắc và kích thước khác nhau theo luật kiểu CSS được chỉ định. Lưu ý mỗi phần tử <div> bắt đầu trên dòng mới của riêng nó vì các phần tử <div> 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 containers <div>

Bạn có thể đặt văn bản bên trong containers <div> bằng cách chèn văn bản vào giữa các <div> mở và đóng. Thử thêm văn bản vào bên trong mỗi phần tử <div> trong index.html của bạn:

index.html
<div class="div-1">Blue</div> <div class="div-2">Red</div> <div class="div-3">Yellow</div> 

Lưu file và reload trong trình duyệt của bạn. Đến đây bạn sẽ có văn bản được hiển thị trong mỗi containers <div> :

Trang web có phần tử `<div>` chứa văn bản

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ử <div> . Ví dụ: hãy thử thêm các thẻ tiêu đề HTML ( <h2> đến <h4> ) vào văn bản của bạn bên trong các <div> trong index.html của bạn:

<div class="div-1"><h2>Blue</h2></div> <div class="div-2"><h3>Red</h3></div> <div class="div-3"><h4>Yellow</h4></div> 

Lưu file và reload trong trình duyệt của bạn. Văn bản bên trong các containers <div> bây giờ sẽ được tạo kiểu theo các thuộc tính mặc định của <h1> đến <h4> :

Trang web có văn bản tiêu đề bên trong containers  `<div>`

Lưu ý các phần tử <div> cũng đã điều chỉnh vị trí của chúng một chút. Việc định vị lại này là do thuộc tính lề mặc định của các phần tử <h2> đến <h4> . Bạn sẽ tìm hiểu thêm về lề trong hướng dẫn tiếp theo về Mô hình hộp CSS , nhưng bây giờ bạn có thể bỏ qua chúng

Để tạo kiểu cho văn bản bên trong các containers <div> , bạn có thể chỉ định các giá trị thuộc tính văn bản trong các bộ luật cho các lớp <div> . Hãy thử thêm các thuộc tính và giá trị vào các bộ luật của bạn trong file styles.css như được đánh dấu trong đoạn mã sau:

styles.css
.div-1 {   background-color: blue;    height: 50px;   width: 50px;   font-size: 10px;    color: white; iu }  .div-2 {   background-color: red;    height: 100px;   width: 100px;   font-size: 20px;    color: yellow;  }  .div-3 {   background-color: yellow;    height: 200px;   width: 200px;   font-size:30px;      color: blue;  }  

Lưu file styles.css của bạn và reload index.html trong trình duyệt của bạn. Văn bản bên trong các containers <div> bây giờ sẽ được tạo kiểu theo các-luật CSS trong file styles.css của bạn:

Trang web có văn bản tiêu đề được tạo kiểu bên trong containers  <div>

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ử <div> cũng như cách thêm và tạo kiểu cho văn bản bên trong phần tử <div> . Bạn sẽ sử dụng phần tử <div> để kiểm soát bố cục của trang khi 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ề CSS Box Model và cách sử dụng nó để điều chỉnh kích thước nội dung, phần đệm, đường viền và lề của một phần tử.


Tags:

Các tin trước

Tổng quan về Trang web HTML và CSS Trình diễn của Chúng tôi 2020-10-12
Cách tạo bảng trong HTML 2020-10-12
Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS 2020-10-12
Cách sử dụng thuộc tính Rel cho thẻ neo trong HTML 2020-10-12
Cách thêm các thực thể HTML trong Thuộc tính nội dung CSS 2020-10-12
Tham chiếu cú pháp thẻ liên kết HTML cho tệp CSS bên ngoài 2020-10-12
Cách tạo nhận xét HTML 2020-10-12
Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS 2020-10-12
Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS 2020-10-12
Cách điều chỉnh nội dung, phần đệm, đường viền và lề của một phần tử HTML bằng CSS 2020-10-12