Cách suy nghĩ trong css

Tôi chỉ cho bạn xem chiếc thuyền buồm này, bởi vì những gì tôi sẽ dạy bạn trong khóa học này sẽ thúc đẩy sự phát triển giao diện người dùng của bạn theo đúng nghĩa đen

Có thể bạn đã nghe nói rằng với TailwindCss, bạn có thể phát triển các trang web và giao diện đẹp và độc đáo rất nhanh chóng

Nhưng lợi thế quan trọng nhất đối với tôi là bạn không phải tạo vô số biểu định kiểu để điều chỉnh trang web của mình cho các kích thước màn hình khác nhau

Ví dụ: nếu bạn chỉ muốn áp dụng một lớp cho kích thước màn hình lớn trở lên, bạn chỉ cần thêm “lg. ” đến lớp mà bạn đang sử dụng

Tên tôi là Martin và tôi đã sử dụng CSS và các Framework như Bootstrap ở cấp độ chuyên nghiệp trong một thời gian rất dài

Tôi phải nói với bạn rằng - đối với tôi - TailwindCss thực sự là một cuộc cách mạng nhỏ trong lĩnh vực phát triển web

Trên thực tế, với TailwindCss, bạn đang kết hợp các ưu điểm của CSS bình thường với các ưu điểm của các framework như Bootstrap

Trong khóa học này, tôi sẽ chỉ cho bạn Thông tin chi tiết về cách cài đặt, định cấu hình và trong nhiều ví dụ về cách áp dụng TailwindCss

Chúng tôi sẽ thực hiện Bố cục đáp ứng, Ảnh động và hơn thế nữa

Hơn nữa, tôi sẽ giới thiệu ngắn gọn về núi cao. js, cũng là một cuộc cách mạng, khi dễ dàng kích hoạt hành vi như hoạt ảnh trong thiết kế web của bạn

Tôi sẽ cung cấp cho bạn mã nguồn đầy đủ cho mọi bước chúng ta thực hiện trong khóa học này, cũng như một số bảng gian lận hữu ích - sẽ giúp bạn ghi nhớ sau này những gì bạn đã học

Khóa học này không dài lắm, tôi thực sự muốn khuyên bạn nên đầu tư một ngày cuối tuần hoặc vài buổi tối để tham gia khóa học này và học được điều gì đó, điều đó rất thú vị và điều gì đó chắc chắn sẽ đóng vai trò rất quan trọng trong việc phát triển web ở

Khi bạn xem một trang web, bạn có thể hoàn toàn kinh ngạc về bố cục hoặc cách khác. Nếu đó là trước bạn có thể nghĩ. Làm thế nào mà họ làm điều này? . tôi có thể làm tốt hơn thế này

Dù thế nào đi chăng nữa, bạn có thể khởi chạy trình chỉnh sửa mã của mình với ý định tạo lại bố cục của trang web. Trừ khi bạn có kinh nghiệm trong việc thiết kế một trang web, bạn có thể gặp rắc rối và dành vô số thời gian trên các công cụ tìm kiếm để tìm kiếm giải pháp.

Số giờ dành cho công cụ tìm kiếm có thể được tiết kiệm nếu bạn có thể tạo một mô hình tinh thần về bố cục trang web. Khi bạn đã quen với mô hình này, bạn sẽ có được mức độ tự tin cao khi bắt đầu tạo bất kỳ bố cục nào mà bạn tìm thấy ở đó. Tôi gọi mô hình tinh thần. Suy nghĩ trong hộp

Bây giờ, bạn có thể hỏi. Tại sao phải suy nghĩ trong hộp?

Hãy nhìn vào hình ảnh dưới đây. Tôi đã đánh dấu tất cả các phần tử của trang Web trên trang chủ của Google và mọi thứ trông giống như một cái hộp

Tôi cảm thấy một câu hỏi khác xuất hiện trong đầu của bạn. Tại sao chúng là những chiếc hộp mà không phải là một số hình dạng khác?

Hãy cùng tìm hiểu

Khi tôi đánh dấu trang chủ của Google, bạn sẽ nhận thấy rằng tôi đã sử dụng các đường viền xuyên suốt và các đường viền đều có màu xanh lục. Màu sắc là từ CSS mà tôi đã thêm vào trang Web thông qua các công cụ dành cho nhà phát triển và lần lượt tất cả các phần tử xuất hiện dưới dạng "hộp"

Lý do chúng xuất hiện dưới dạng hộp là vì tất cả các thành phần HTML có thể được coi là hộp trong CSS. Gì? . Mô hình hộp CSS

Mô hình hộp CSS

Mô hình hộp CSS là hộp bao quanh các thành phần trang Web được tạo thành từ các thuộc tính sau

• lề
• đệm
• biên giới
• Nội dung

Lề

Đây là khu vực bên ngoài hộp

đệm

Khu vực xung quanh nội dung

Biên giới

Đường viền bao quanh phần đệm và nội dung

Nội dung

nội dung của hộp

Để biết thêm thông tin về mô hình hộp CSS, tôi đã viết về nó

Các thuộc tính này có thể được thao tác để di chuyển một phần tử trang Web mong muốn đến một vị trí khác trên trang Web vì tôi tin rằng các phần tử trang Web chỉ là các hộp

Bên dưới, tôi đã di chuyển "Google" bên dưới hộp tìm kiếm bằng cách sử dụng thuộc tính margin và như được đánh dấu, đó chỉ là một hộp

Chúng ta di chuyển logo sang bên trái thì sao?

Bạn có thể di chuyển bất kỳ phần tử trang web hộp nào xung quanh vì đó là một hộp. Nhưng chờ đã, tôi có chắc về điều đó không? . Làm thế nào mà?

Chà, nếu bạn định di chuyển một thành phần trang Web, thì nó phải là một thành phần cấp khối. Sau đó, nếu đó là một yếu tố cấp độ nội tuyến như span thì sao?

Bạn có thể sử dụng các thuộc tính khác sang một bên margin để di chuyển các phần tử của trang Web. Chúng bao gồm

• transform
• position

Khi bạn sử dụng transform, bạn có thể thực hiện các thao tác sau trong số những thao tác khác

• Xoay hộp
• Di chuyển hộp dọc theo trục X và Y
• Quy mô hộp
• Xiên cái hộp

Hình ảnh bên dưới là một trang hồ sơ trên Unsplash trong đó tôi đã áp dụng thuộc tính transform với giá trị là margin0 và viền đen

Thuộc tính position có thể được sử dụng để di chuyển một "hộp" đến hầu hết mọi vị trí trên trang Web

Trong hình bên dưới, tất cả các hộp được di chuyển với thuộc tính position và thuộc tính offset i. e. margin3, margin4, margin5, margin6

Cách suy nghĩ về bố cục

Lần tới khi bạn nhìn thấy một bố cục trang Web, hãy nghĩ về nó như một chiếc hộp lớn khổng lồ. e. phần tử gốc margin7 với rất nhiều hộp được sắp xếp trong đó (bắt đầu bằng thẻ margin8). Bạn có thể sắp xếp lại hộp theo ý muốn

Hãy ghi nhớ điều này vào lần tới khi bạn bắt đầu một dự án Web. Nó chỉ là một chiếc hộp khổng lồ và tôi có thể sắp xếp các hộp theo cách mình muốn và tôi có thể điều khiển hành vi của các hộp bằng CSS hoặc JavaScript

lưu ý bên lề

Nếu bạn muốn áp dụng đường viền xung quanh toàn bộ thành phần trang Web như tôi đã làm với Unsplash và Google, hãy thực hiện các bước sau

1. Mở trang Web
2. Nhấp chuột phải vào bất kỳ phần tử nào trên trang và chọn Kiểm tra phần tử, thao tác này sẽ mở Công cụ dành cho nhà phát triển
3. Trong tab Quy tắc, nhấp vào + để thêm CSS mới vào trang như trong hình bên dưới

Nếu bạn đang sử dụng Chrome, phần này sẽ nằm trong tab Kiểu

1. Sau đó, bạn có thể áp dụng kiểu cho tất cả các phần tử bằng bộ chọn chung *. Thí dụ

/**
 * This will apply a black border around every
 * element on the Web page.
 */
* {
    border: 2px solid #1a1a1a;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sự kết luận

Các phần tử HTML là các hộp trong CSS và bạn có thể di chuyển chúng xung quanh. Khi bạn sắp xếp chúng để tạo thành một mẫu, nó được gọi là bố cục. Khi bạn áp dụng màu sắc và hoạt ảnh cho bố cục, bây giờ là thiết kế web

Làm cách nào tôi có thể trở nên giỏi CSS?

CSS có khó thành thạo không?

Mất bao nhiêu giờ để học CSS?

Các chủ đề trong CSS là gì?