📔Hướng dẫn cơ bản cấu trúc dự án - EXE FPT
Cấu Trúc Chung Của Project
Project gồm 4 mục chính:
fonts: chứa các font chữ
images: chứa các ảnh
styles: chứa các file css ( đây là file dùng để chỉnh màu sắc, kích thước, font chữ, v.v.. Nói chung màu sắc, kích thước các nút, các icon của trang web sẽ được chỉnh ở đây, nó giống như da của trang web)
html: chứa các file html ( đây là file chứa nội dung của trang web, nó giống như khung xương của trang web quy định cấu trúc của trang web)
Cấu trúc HTML
Thuộc tính chung
class: dùng để đặt tên cho các phần tử, nó giống như tên của một người, nó sẽ được dùng để chỉ định các thuộc tính của phần tử đó, ví dụ như màu sắc, kích thước, font chữ, v.v..
trong project này, mỗi class sẽ có 1 định dạng nhất định, ví dụ như text-manhattan-500 sẽ có nghĩa là màu sắc của phần tử đó là màu #6B7280, font-medium sẽ có nghĩa là font chữ của phần tử đó là font chữ medium, inline-block sẽ có nghĩa là phần tử đó sẽ được hiển thị dưới dạng inline-block, v.v..
<a href="./about.html" class="inline-block font-medium text-manhattan-500" >Giới Thiệu</a>Tag <a> <a/>
<a> <a/>đây là thẻ dùng để tạo link đến một trang khác, nó có 2 thuộc tính quan trọng là href
href: đường dẫn đến file html
Vd:
trong đó href="./about.html" sẽ có nghĩa là khi click vào thẻ này, nó sẽ chuyển đến trang about.html
Tag <div> <div/>
<div> <div/>đây là thẻ dùng để tạo một khối, nó không có thuộc tính nào quan trọng, nó có thể chứa các thẻ khác bên trong, có thể xem nó như frame trong figma hoặc photoshop
Vd:
trong đó, thẻ <div> bên ngoài sẽ chứa các thẻ <div> bên trong, thẻ <div> bên trong sẽ chứa các thẻ <a>
Tag <img> <img/>
<img> <img/>đây là thẻ dùng để hiển thị ảnh, nó có 1 thuộc tính quan trọng là src, nó sẽ chỉ định đường dẫn đến file ảnh
Vd:
trong đó src="./images/user.png" sẽ có nghĩa là hiển thị ảnh user.png trong thư mục images
Tag <input> <input/>
<input> <input/>đây là thẻ dùng để tạo một ô nhập dữ liệu, nó có 1 thuộc tính quan trọng là type, nó sẽ chỉ định kiểu dữ liệu của ô nhập
Vd:
trong đó type="text" sẽ có nghĩa là ô nhập này sẽ chỉ nhận dữ liệu dạng text trong khi type="password" sẽ có nghĩa là ô nhập này sẽ chỉ nhận dữ liệu dạng password và sẽ hiển thị dấu * thay vì dữ liệu thực
Tag <link> <link/>
<link> <link/>đây là thẻ dùng để liên kết với các file css, nó có 1 thuộc tính quan trọng là href, nó sẽ chỉ định đường dẫn đến file css
Vd:
trong đó href="./styles/style.css" sẽ có nghĩa là liên kết với file style.css trong thư mục styles
Các thẻ khác
Các thẻ này không quan trọng vd như thẻ button, label, đây là những thẻ dùng để tạo các nút, các ô nhập dữ liệu, các ô chọn dữ liệu, v.v..
Cấu trúc CSS
css như là da của trang web, nó sẽ chỉnh màu sắc, kích thước, font chữ, v.v.. của các phần tử trong trang web
vd:
trong đó text-\[64px\] sẽ có nghĩa là kích thước của font chữ của phần tử đó là 64px
một số vidu khác như:
text-manhattan-500 sẽ có nghĩa là màu sắc của phần tử đó là màu #6B7280
font-medium sẽ có nghĩa là font chữ của phần tử đó là font chữ medium
inline-block sẽ có nghĩa là phần tử đó sẽ được hiển thị dưới dạng inline-block flex sẽ có nghĩa là phần tử đó sẽ được hiển thị dưới dạng như auto layout trong figma
space-x-3 sẽ có nghĩa là khoảng cách giữa các phần tử bên trong phần tử đó là 12px (nhân với 4)
w-96 sẽ có nghĩa là chiều rộng của phần tử đó là 384px (nhân với 4)
h-10 sẽ có nghĩa là chiều cao của phần tử đó là 40px (nhân với 4)
border-2 sẽ có nghĩa là độ dày của viền của phần tử đó là 8px (nhân với 4)
border-gray-300 sẽ có nghĩa là màu sắc của viền của phần tử đó là màu #D1D5DB
rounded-md sẽ có nghĩa là bo góc của phần tử đó là 16px (nhân với 4)
bg-manhattan-500 sẽ có nghĩa là màu sắc nền của phần tử đó là màu #6B7280
leading-10 sẽ có nghĩa là khoảng cách giữa các dòng của phần tử đó là 40px (nhân với 4)
text-center sẽ có nghĩa là căn giữa nội dung của phần tử đó
Last updated