Những thuộc tính CSS cơ bản
07/09/2024
Xin chào các bạn mình là Danh hôm nay mình sẽ chia sẽ với các bạn những thuộc tính css cơ bản và vài thủ thuật nho nho để bạn có thể làm giao diện tốt hơn
1. Màu sắc.
- Color có chức năng dùng để tạo màu cho chữ. VD: color: black;
- background-color có chức năng dùng để tạo màu cho phần nền. VD background-color: blue;
- border dùng để tạo viền chúng ta sẽ set 3 thông số: độ dày, loại nét, màu sắc. VD: border: 1px solid black;
2. Kiểu chữ.
- font-family có chức năng dùng để thiết lâp kiểu chữ cho văn bản. VD: font-family: \”Times New Roman\”, Times, serif;
- font-style có chức năng dùng để thiết lập sự in nghiêng của chữ. VD: font-style: italic;
- font-weight có chức năng dùng thiết lập độ đậm, độ dày của chữ. VD: font-weight: bold;
- font-size có chức năng dùng để thiết lập kích thước của chữ. VD: font-size: 20px;
3. Hình ảnh
- height có chức năng dùng để xác định chiều cao của ảnh.
- width có chức năng dùng để xác định chiều rộng của ảnh.
4. Bố cục
Phần bố cục chúng ta sẽ sử dụng flexbox. Vậy thì Flexbox là gì?
Flexbox là 1 kiểu thiết kế cấu trúc bố cục đáp ứng các yêu cầu một cách linh hoạt dễ dàng hơn mà không cần sử dụng float hay positioning.
Đây là sơ đồ các trục và các điển của flexbox.
Các thuộc tính cơ bản của flexbox: display, flex-direction, flex-wrap, flex-flow, justified-content, align-items, align-content.
bên trên mình đã liệt kê 1 số thuộc tính css cơ bản của flexbox và giờ mình sẽ phần tích xem các thuộc tính đó sử dụng như thế nào
4.1. display
display: flex; đây là thuộc tính bắt buộc khi các bạn muốn dùng flexbox thuộc tính này đc đặt ở div bọc của các phần tử mà bạn muốn chỉnh sửa.
4.2. Flex-direction
Flex-direction dùng để chỉ định hướng hiển thì của các item, việc thay đổi hướng hiển thị flex cũng thể có thể cho phép ta thay đổi vị trí của các flex item.
VD: flex-direction: row => khi khởi tạo flexbox thì thuộc tính mặc định được áp lên các flex-item là flex-direction: row nó sẽ chỉ định các item sắp xếp từ trái sang phải theo trục chính.
Ngoài row ra Flex-direction còn 3 thuộc tính khác là row-reverse, column, column-reverse
- row-reverse: thì ngược với row lại các flex-item được sắp từ phải sang trái
- column : thì các flex-item được sắp từ trên xuống dưới
- column-reverse: thì ngược column lại các flex-item đucợ sắp từ dưới lên trên
4.3. flex-wrap
flex-wrap dùng để kiểm soát các flex-item khi thay đổi chiều rộng container thì các flex-item có thể xuống dòng hoặc không.
Thuộc tính flex-wrap có 3 option lựa chọn là: nowrap, wrap, wrap-reverse.
- nowrap: khi khởi tạo flexbox thì các flex-item mặc định được gán thuộc tính nowrap nghĩa là nằm trên cùng 1 dòng.
- wrap: ngược lại với nowrap các flex-item sẽ xuống dòng khi không đủ chiều rộng và các item sẽ đc sắp từ trái sang phải
- wrap-reverse: giống như wrap nhưng thứ tự sắp xếp sẽ khác đi 1 tí là các flex-item vẫn sẽ sắp xếp từ trái sang phải và flex-item dư thay vì sẽ được sắp xuống dòng dưới thì sẽ được sắp ngược lên trên.
4.4 flex-flow
Đơn giản flex-flow chỉ là cách viết rút gọn của Flex-direction và flex-wrap truyền vào 2 thuộc tính đầu tiên là flex-direction và flex-wrap.
4.5. justified-content
Dùng để căn chỉnh vị trí của các flex-items so với trục chính(main axis). Có 6 giá trị có thể dùng đối với thuộc tính: flex-start, flex-end, center, space-between, space-around, space-evenly.
- flex-start: flex-item sẽ bắt đầu từ main start (và đây cũng là giá trị mặc định).
- flex-end: flex-item sẽ bắt đầu từ main end.
- center: tất cả flex-item sẽ ở giữa trục main axis.
- space-between: các flex-item sẽ chia đều khoảng cách thừa và thêm nó vào giữa các flex-item.
- space-around: các flex-item sẽ chia khoảng cách ở đầu và cuối. Khoảng cách ở đầu và cuối sẽ bằng 1 nửa khoảng cách ở giữa 2 flex-item với nhau.
- space-evenly: các flex-item sẽ chia khoảng cách đều khoảng cách giữa các flex-item với flex-item, flex-item và main start, flex-item với main end bằng nhau.
4.6. align-items
Thuộc tính align-items dùng để xác định vị trí mà các flex-item được đặt trong container dọc theo chiều cross axis.align-item có các giá trị có thể dùng đối với thuộc tính: stretch, flex-start, flex-end, center, baseline. Các bạn có thể vào trang web https://www.w3schools.com/css/css3_flexbox.asp để hiểu rõ hơn về từng giá trị.
4.7. align-content
Tương tự như justify-content chỉ khác một chỗ là thay vì căn theo trục main axis thì align-content căn theo trục cros axis.
Và đó là các thuộc tính css cơ bản để bạn có thể tạo nên một gia diện cơ bản. Mọi thắc mắc các bạn vui lòng liên hệ mình qua mail danh@allxone.vn mình cảm ơn.
Cựu học viên Onschool Bootcamp – Hiện là full-stack Developer tại All Xone
Các chia sẻ của cựu học viên Onschool Bootcamp?
Danh mục bài viết
- Kiến thức lập trình
- Cộng đồng học viên
- Chia sẻ học viên
Bài viết mới nhất
