Có bao nhiêu khái niệm trong CSS?

Ở đây chúng tôi sẽ hiển thị một trang HTML được hiển thị với bốn biểu định kiểu khác nhau. Nhấp vào liên kết "Biểu định kiểu 1", "Biểu định kiểu 2", "Biểu định kiểu 3", "Biểu định kiểu 4" bên dưới để xem các kiểu khác nhau

---

---

Tại sao nên sử dụng CSS?

CSS được sử dụng để xác định kiểu cho các trang web của bạn, bao gồm thiết kế, bố cục và các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau

Ví dụ CSS

body {
  màu nền. xanh nhạt;
}

h1 {
  màu. màu trắng;
  căn chỉnh văn bản. trung tâm;
}

p {
  họ phông chữ. verdana;
  cỡ chữ. 20px;
}

Tự mình thử »

---

CSS đã giải quyết một vấn đề lớn

HTML KHÔNG BAO GIỜ có ý định chứa các thẻ để định dạng trang web

HTML được tạo ra để mô tả nội dung của một trang web, như

Đây là một tiêu đề

Đây là một đoạn

Khi các thẻ như và các thuộc tính màu được thêm vào HTML 3. 2, nó bắt đầu cơn ác mộng cho các nhà phát triển web. Việc phát triển các trang web lớn, nơi phông chữ và thông tin màu sắc được thêm vào từng trang, trở thành một quá trình lâu dài và tốn kém

Để giải quyết vấn đề này, World Wide Web Consortium (W3C) đã tạo CSS

CSS đã xóa định dạng kiểu khỏi trang HTML

Nếu bạn không biết HTML là gì, chúng tôi khuyên bạn nên đọc Hướng dẫn HTML của chúng tôi

---

CSS tiết kiệm rất nhiều công việc

Các định nghĩa kiểu dáng thường được lưu ở bên ngoài. tập tin css

Với tệp biểu định kiểu bên ngoài, bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách chỉ thay đổi một tệp

CSS nổi tiếng và thiết yếu. Đối với những người không biết, CSS là viết tắt của Cascading Style Sheets và được sử dụng để thêm kiểu cho các thành phần của ngôn ngữ đánh dấu, như HTML. Hãy nghĩ về CSS như trang trí của…

Giống như hầu hết các nhà thiết kế giao diện người dùng, tôi bắt đầu ở khía cạnh thiết kế mọi thứ trước khi tìm hiểu về các khía cạnh kỹ thuật của giao diện người dùng. Tôi luôn háo hức muốn hiểu mọi thứ hoạt động như thế nào và giao diện người dùng cũng vậy. Trước khi tôi biết điều đó, tôi đã lập trình các ứng dụng giao diện người dùng phức tạp. Bắt đầu trở lại với ActionScript trong Macromedia Flash, tiếp theo là Adobe Flash Builder, HTML, CSS, jQuery, tất cả các cách để kết hợp các ứng dụng web JavaScript được tối ưu hóa hoàn toàn với công cụ tìm kiếm Tiếp theo. js, React và các hệ thống quản lý nội dung headless như Contentful — thật tuyệt vời

“gotoAndPlay(25);“

— Tập lệnh hành động 2. 0, 15 năm trước

Khi làm việc với các nhà thiết kế giao diện người dùng, có sự phân biệt rất rõ ràng giữa những nhà thiết kế biết cách viết mã và những người không biết.

Mười lăm năm trước - nhưng cũng giống như ngày nay - một nhà thiết kế đồ họa giỏi biết những kiến ​​thức cơ bản về in ấn. Anh ấy biết các loại giấy và trọng lượng; . Tương tự như vậy, một nhà thiết kế (UI) giỏi nên biết những điều cơ bản về CSS và cách giao diện người dùng thực sự được xây dựng

Hôm nay, chúng ta sẽ xem xét 5 khái niệm CSS cơ bản nhất mà mọi nhà thiết kế nên biết

1. Cha mẹ và con cái

Cho dù bạn có biết hay không, mọi thành phần đều là một hệ thống phân cấp nào đó. Thừa nhận hệ thống phân cấp này trong đầu và sau đó triển khai nó trong thiết kế của bạn sẽ giúp cấu trúc thông tin cho người dùng — và giữ cho thiết kế của bạn chặt chẽ và nhất quán

Thứ bậc bao gồm cha mẹ và con cái. Cũng giống như cây gia đình, trẻ em có thể là cha mẹ của nhiều trẻ em hơn và hầu hết cha mẹ đều là con cái. Nói cách khác, bạn có tổ tiên. cha mẹ, ông bà, ông bà, v.v. , và bạn có con cháu. con, cháu, vân vân

Hãy nghĩ về thiết kế của bạn như một bộ sưu tập của tổ tiên và con cháu, với gốc rễ của thiết kế ở trên cùng. bức vẽ. Nếu một tổ tiên di chuyển, con cháu của nó cũng di chuyển. Nếu tổ tiên thay đổi kích thước, thì con của nó cũng phân phối lại hoặc thay đổi kích thước

2. Ký quỹ (không gian cá nhân)

Mọi đối tượng trong thiết kế của bạn đều muốn có một không gian cá nhân xác định — hoặc lề. Lề là khoảng không gian mà một đối tượng muốn giữ giữa chính nó và các đối tượng khác, giống như mọi người muốn giữ một khoảng cách nhất định với những người khác ở một nơi đông người

Các đối tượng có thể có các lề khác nhau cho mỗi bên của chúng. Ví dụ: một hình vuông có thể muốn giữ 100 pixel không gian ở bên trái nhưng chỉ 50 pixel không gian ở trên cùng của nó. Một nguyên tắc chung là các đối tượng có cùng cha mẹ (anh chị em ruột) đều chia sẻ cùng một bộ lề. Điều này giúp một thiết kế trông có tổ chức

Thay đổi lề của đối tượng sẽ thay đổi khoảng cách giữa đối tượng đó và các đối tượng khác

3. Đệm (lông)

Liên quan chặt chẽ đến lề, nhưng khác về cơ bản là phần đệm. Đệm có thể được xem như lông thú. nó là một phần không thể thiếu của đối tượng, không phải không gian xung quanh nó. Cũng giống như lề, phần đệm có thể có các giá trị khác nhau cho trên, trái, phải và dưới

Padding chỉ phát huy tác dụng khi một đối tượng có con (hoặc khi một đối tượng có chiều rộng hoặc chiều cao được xác định trước, nhưng đừng làm phức tạp mọi thứ). Nếu đối tượng mẹ có phần đệm 20 pixel và chứa một phần tử con có chiều rộng 100 pixel và chiều cao 50 pixel, thì đối tượng mẹ sẽ có chiều rộng 140 pixel và chiều cao 90 pixel do lông thú được thêm vào kích thước của đối tượng mẹ

Việc sử dụng đệm nhất quán giúp ổn định thiết kế. Nếu thiết kế của bạn chứa nhiều loại vùng chứa (cha và con), ngay cả khi chúng phục vụ các mục đích khác nhau, thì tốt nhất bạn nên sử dụng cùng một vùng đệm trên mỗi vùng chứa đó

Một thùng chứa đầy trẻ em sẽ lớn lên khi phần đệm tăng lên

Vùng chứa có thể — và thường có — có cả phần đệm và lề. Phần đệm tăng kích thước thực của vùng chứa, sau đó lề xác định khoảng cách giữa vùng chứa và các đối tượng khác

4. Flexbox (phân phối)

Việc phân phối các đối tượng trong một thiết kế tĩnh hầu như không phải là vấn đề. Tuy nhiên, giao diện người dùng hiếm khi tĩnh. Thay vì nghĩ về các đối tượng có một vị trí cố định trong cha mẹ của chúng, sẽ rất hữu ích khi nghĩ về các vị trí của chúng được điều chỉnh bởi một logic nhất định. Flexboxes mô tả logic này

Căn chỉnh. Hướng (ngăn xếp)

Điều đầu tiên cần xem xét là cách các đối tượng sẽ được xếp chồng lên nhau trong cha mẹ của chúng. Nói chung, có hai lựa chọn. bạn có thể xếp chúng sang một bên (từ trên xuống dưới hoặc từ dưới lên trên) hoặc theo chiều dọc (từ trái sang phải hoặc phải sang trái)

Trong CSS, đây được gọi là thuộc tính flex-direction và các giá trị được chấp nhận là row | row-reverse | column | colum-reverse

Vùng màu xanh là phần đệm của đối tượng cha

Căn chỉnh. Bắt đầu, Trung tâm, Kết thúc

Hãy tưởng tượng bạn muốn xếp các đối tượng của mình từ trái sang phải, nhưng các đối tượng có chiều cao thay đổi hoặc bố mẹ của chúng cao hơn nhiều so với con cái. Trong trường hợp này, bạn phải quyết định cách căn chỉnh chúng theo chiều dọc, thông thường bạn sẽ chọn một trong ba tùy chọn. bắt đầu, trung tâm hoặc kết thúc. Kết quả chính xác của giá trị này phụ thuộc rất nhiều vào hướng bạn đã chọn

• Bắt đầu sắp xếp các phần tử con ở trên cùng của phần tử gốc trong ngăn xếp từ trái sang phải
• Căn giữa căn giữa các phần tử con với tâm dọc của phần tử gốc trong ngăn xếp từ trái sang phải
• End căn chỉnh các phần tử con ở dưới cùng của phần tử gốc trong ngăn xếp từ trái sang phải

Trong CSS, hành vi này được điều chỉnh bởi thuộc tính align-items và các giá trị được chấp nhận là flex-start | flex-end | center | stretch | baseline | first baseline | last baseline | start | end | self-start | self-end + .. safe | unsafe

Vùng màu xanh là phần đệm của đối tượng cha

biện minh. Bắt đầu, Trung tâm, Kết thúc

Biện minh rất giống với căn chỉnh. Tuy nhiên, khi căn chỉnh liên quan đến vị trí trên trục chéo, thì căn chỉnh chi phối vị trí đối tượng trên trục chính. Nói một cách đơn giản hơn. khi sử dụng ngăn xếp từ trái sang phải (ngang), căn chỉnh sẽ xác định vị trí con bạn đi trên trục dọc và biện minh liên quan đến phân phối theo chiều ngang

Ở đây cũng vậy, chúng ta có ba nghi phạm thông thường. bắt đầu, trung tâm và kết thúc

Vùng màu xanh là phần đệm của đối tượng cha

Biện minh cho steroid. Khoảng cách giữa, Khoảng cách xung quanh, Khoảng cách đều nhau

May mắn thay, có nhiều điều hơn để biện minh. Đây là nơi logic của flexboxes thực sự bắt đầu tỏa sáng

• Space-between phân bố đều không gian trống giữa tất cả trẻ em
• Không gian xung quanh phân bổ lượng không gian bằng nhau cho hai bên của trẻ em. (Trực quan giống hệt nhau để cung cấp cho mỗi đối tượng các lề giống hệt nhau để chiếm hoàn toàn không gian có sẵn)
• Không gian-phân bổ đồng đều không gian trống giữa tất cả trẻ em và giữa các giới hạn của cha mẹ. Thường được coi là một phân phối thỏa mãn trực quan của các đối tượng

Lưu ý về hộp linh hoạt và lề

Thật hấp dẫn khi bỏ qua lợi nhuận khi bạn sử dụng flexbox hoàn toàn. Tuy nhiên khi sử dụng flexbox vẫn tính đến lề của các đối tượng con. Ví dụ: trong tình huống từ trái sang phải khi các phần tử con được căn đều ở đầu flexbox, nếu các phần tử con có lề, sẽ có khoảng cách giữa các phần tử con

Vùng màu xanh là phần đệm của đối tượng cha

Vùng màu xanh là phần đệm của đối tượng cha. 5. Tương đối so với. tuyệt đối

Cuối cùng, có khái niệm về giá trị tuyệt đối so với giá trị tương đối. Trong một thiết kế, một đối tượng có thể rộng 200 pixel hoặc 500 hoặc 1171. Nhưng một khi đối tượng này là một phần của giao diện người dùng thực tế, nó sẽ hoạt động như thế nào?

Đây là những điều bạn phải suy nghĩ về. Một lời khuyên. có thói quen sử dụng các giá trị tương đối. Hầu như mọi thứ trong giao diện người dùng đều có kích thước tuyệt đối. Hầu như không có gì - bởi vì có những ngoại lệ. Ví dụ: một nút quan trọng nằm ở dưới cùng của chế độ xem có thể có chiều rộng hoặc chiều cao cố định. Hoặc một phương thức bật lên. Hoặc một chỉ số tải. Đối với bất cứ điều gì khác. sử dụng tỷ lệ phần trăm và xác định chiều rộng và chiều cao tối đa và tối thiểu

UX Collective tặng US$1 cho mỗi bài báo chúng tôi xuất bản. Câu chuyện này đã đóng góp cho Trường thiết kế đẳng cấp thế giới. một trường thiết kế miễn phí cấp đại học, tập trung vào việc chuẩn bị cho các nhà thiết kế châu Phi trẻ và tài năng cho thị trường sản phẩm kỹ thuật số trong nước và quốc tế. Xây dựng cộng đồng thiết kế mà bạn tin tưởng

🙏 Cảm ơn bạn đã đọc nội dung của tôi. Nếu bạn cân nhắc đăng ký một gói Medium, thì bây giờ là thời điểm tốt hơn bao giờ hết. Khi bạn đăng ký bằng liên kết giới thiệu cá nhân của tôi, 50% phí đăng ký của bạn sẽ hỗ trợ trực tiếp cho bài viết của tôi. Bắt đầu đọc Phương tiện chỉ với 5 đô la mỗi tháng tại đây

Các khái niệm trong CSS là gì?

3 loại CSS là gì?

6 chủ đề quan trọng Giới thiệu về khóa học CSS là gì?

2 phần của CSS là gì?