Học hỏi
|
Rachel Andrew là nhà phát triển web, nhà văn và diễn giả. Cô ấy là tác giả của một số cuốn sách, bao gồm Bố cục CSS mới. Cô ấy là một trong những người đứng sau … Thông tin thêm về Rachel ↬ Show
Bản tin emailEmail (đập vỡ) của bạn
Mẹo hàng tuần về giao diện người dùng & UX.
Tôi nhận được rất nhiều người yêu cầu tôi giới thiệu cho họ các hướng dẫn về các phần khác nhau của CSS hoặc hỏi cách học CSS. Tôi cũng thấy rất nhiều người nhầm lẫn về các bit của CSS, một phần là do những quan niệm lỗi thời về ngôn ngữ này. Cho rằng CSS đã thay đổi khá nhiều trong vài năm qua, đây thực sự là thời điểm tốt để làm mới kiến thức của bạn. Ngay cả khi CSS chỉ là một phần nhỏ trong công việc của bạn (vì bạn làm việc ở nơi khác trong ngăn xếp), CSS là cách mọi thứ kết thúc trông như bạn muốn trên màn hình, vì vậy, nó đáng để cập nhật một cách hợp lý Do đó, bài viết này nhằm mục đích phác thảo các nguyên tắc cơ bản chính của CSS và các tài nguyên để đọc thêm về các lĩnh vực chính của phát triển CSS hiện đại. Nhiều trong số đó là những thứ có ngay trên Tạp chí Smashing, nhưng tôi cũng đã chọn một số tài nguyên khác và cả những người để theo dõi trong các lĩnh vực chính của CSS. Nó không phải là một hướng dẫn hoàn chỉnh cho người mới bắt đầu hoặc có ý định bao gồm tất cả mọi thứ. Mục đích của tôi là bao quát toàn bộ CSS hiện đại, tập trung vào một số lĩnh vực chính, điều này sẽ giúp mở khóa phần còn lại của ngôn ngữ cho bạn Ngôn ngữ cơ bảnĐối với phần lớn CSS, bạn không cần phải lo lắng về việc học thuộc lòng các thuộc tính và giá trị. Bạn có thể tra cứu chúng khi bạn cần. Tuy nhiên, có một số nền tảng chính của ngôn ngữ mà nếu không có chúng, bạn sẽ gặp khó khăn trong việc hiểu ý nghĩa của nó. Việc dành thời gian để đảm bảo rằng bạn hiểu những điều này thực sự đáng giá, vì nó sẽ giúp bạn tiết kiệm rất nhiều thời gian và sự thất vọng về lâu dài Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓ Gặp gỡ Hội thảo trực tuyến Smashing về giao diện người dùng & giao diện người dùng, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Stephanie Troeth và rất nhiều người khác Chuyển đến hội thảo ↬Bộ chọn, không chỉ là lớpBộ chọn thực hiện những gì nó nói trên hộp, nó chọn một phần tài liệu của bạn để bạn có thể áp dụng các quy tắc CSS cho nó. Mặc dù hầu hết mọi người đều quen thuộc với việc sử dụng một lớp hoặc trực tiếp tạo kiểu cho một phần tử HTML chẳng hạn như Bộ chọn là một phần của đặc tả Cấp 3 (bạn có thể đã nghe chúng được gọi là bộ chọn Cấp 3) có. Để có cái nhìn chi tiết về các bộ chọn khác nhau mà bạn có thể sử dụng, hãy xem Tài liệu tham khảo MDN Một số bộ chọn hoạt động như thể bạn đã áp dụng một lớp cho nội dung nào đó trong tài liệu. Ví dụ: Xem dòng đầu tiên của Bút viết bởi Rachel Andrew (@rachelandrew) trên CodePen Xem dòng đầu tiên của Bút viết bởi Rachel Andrew (@rachelandrew) trên CodePenKế thừa và CascadeTầng xác định quy tắc nào thắng khi một số quy tắc có thể áp dụng cho một phần tử. Nếu bạn đã từng rơi vào tình huống không hiểu tại sao một số CSS dường như không được áp dụng, thì có khả năng dòng thác đang khiến bạn vấp ngã. Cascade được liên kết chặt chẽ với tính kế thừa, xác định thuộc tính nào được kế thừa bởi các phần tử con của phần tử mà chúng được áp dụng cho. Nó cũng được liên kết với tính đặc hiệu; Ghi chú. Để hiểu tất cả những điều này, tôi khuyên bạn nên đọc The Cascade and Inheritance, trong MDN Introduction to CSS Nếu bạn đang vật lộn với việc lấy một số CSS để áp dụng cho một thành phần thì DevTools trên trình duyệt của bạn là nơi tốt nhất để bắt đầu, hãy xem ví dụ bên dưới, trong đó tôi có một thành phần Xem tính đặc hiệu của Bút của Rachel Andrew (@rachelandrew) trên CodePen Xem tính đặc hiệu của Bút của Rachel Andrew (@rachelandrew) trên CodePen.Mô hình hộpCSS là tất cả về hộp. Mọi thứ được hiển thị trên màn hình đều có hộp và Mô hình hộp mô tả cách kích thước của hộp đó được xử lý — có tính đến lề, phần đệm và đường viền. Mô hình Hộp CSS tiêu chuẩn lấy chiều rộng mà bạn đã cung cấp cho một phần tử, sau đó thêm phần đệm và đường viền vào chiều rộng đó — nghĩa là không gian chiếm bởi phần tử lớn hơn chiều rộng mà bạn đã cung cấp cho nó Gần đây hơn, chúng tôi đã có thể chọn sử dụng mô hình hộp thay thế sử dụng chiều rộng đã cho trên phần tử làm chiều rộng của phần tử hiển thị trên màn hình. Bất kỳ phần đệm hoặc đường viền nào sẽ chèn nội dung của hộp từ các cạnh. Điều này có ý nghĩa hơn nhiều đối với nhiều bố cục Trong bản demo bên dưới, tôi có hai hộp. Cả hai đều có chiều rộng 200 pixel, với đường viền là 5 pixel và phần đệm là 20 pixel. Hộp đầu tiên sử dụng mô hình hộp tiêu chuẩn, do đó chiếm tổng chiều rộng là 250 pixel. Cái thứ hai sử dụng mô hình hộp thay thế, vì vậy thực tế rộng 200 pixel Xem các mô hình hộp bút của Rachel Andrew (@rachelandrew) trên CodePen Xem các mô hình hộp bút của Rachel Andrew (@rachelandrew) trên CodePenDevTools của trình duyệt một lần nữa có thể giúp bạn hiểu mô hình hộp đang được sử dụng. Trong hình bên dưới, tôi sử dụng Firefox DevTools để kiểm tra hộp bằng mô hình hộp Ghi chú. Trước IE6, Internet Explorer đã sử dụng Mô hình hộp thay thế, với phần đệm và đường viền đặt nội dung cách xa chiều rộng nhất định. Vì vậy, trong một thời gian, các trình duyệt đã sử dụng các Mô hình hộp khác nhau. Khi thất vọng vì các vấn đề về khả năng tương tác ngày nay, hãy vui mừng vì mọi thứ đã được cải thiện để chúng tôi không xử lý các trình duyệt tính toán chiều rộng của mọi thứ theo cách khác Có một lời giải thích hay về Mô hình hộp và Định cỡ hộp trên Thủ thuật CSS, cùng với lời giải thích về cách tốt nhất để sử dụng toàn cầu mô hình hộp thay thế trong trang web của bạn dòng chảy bình thườngNếu bạn có một tài liệu với một số HTML đánh dấu nội dung và xem nó trong trình duyệt, thì hy vọng nó sẽ có thể đọc được. Các tiêu đề và đoạn văn sẽ bắt đầu trên một dòng mới, các từ hiển thị dưới dạng một câu với một khoảng trắng giữa chúng. Các thẻ để định dạng, chẳng hạn như em, không làm ngắt dòng câu. Nội dung này đang được hiển thị trong Luồng bình thường hoặc Bố cục luồng khối. Mỗi phần của nội dung được mô tả là “trong dòng chảy”; Nếu bạn hợp tác thay vì chống lại hành vi này, cuộc sống của bạn sẽ dễ dàng hơn nhiều. Đó là một trong những lý do tại sao việc bắt đầu với một tài liệu HTML được đánh dấu chính xác rất có ý nghĩa, vì do quy trình bình thường và các biểu định kiểu sẵn có mà các trình duyệt tôn trọng nó, nội dung của bạn bắt đầu từ một nơi có thể đọc được Bối cảnh định dạngSau khi bạn có một tài liệu với nội dung ở luồng thông thường, bạn có thể muốn thay đổi giao diện của một số nội dung đó. Bạn làm điều này bằng cách thay đổi bối cảnh định dạng của phần tử. Một ví dụ rất đơn giản, nếu bạn muốn tất cả các đoạn của mình chạy cùng nhau và không bắt đầu trên một dòng mới, bạn có thể thay đổi phần tử Bối cảnh định dạng về cơ bản xác định một loại bên ngoài và bên trong. Phần bên ngoài kiểm soát cách phần tử hoạt động cùng với các phần tử khác trên trang, phần bên trong kiểm soát giao diện của phần tử con. Vì vậy, ví dụ: khi bạn nói Ghi chú. Phiên bản mới nhất của Thông số hiển thị thay đổi các giá trị của Đọc thêm về Ở trong hoặc ngoài dòng chảyCác phần tử trong CSS được mô tả là 'đang hoạt động' hoặc 'không hoạt động'. ' Các phần tử trong dòng chảy được cung cấp không gian và không gian đó được tôn trọng bởi các phần tử khác trong dòng chảy. Nếu bạn đưa một phần tử ra khỏi luồng, bằng cách thả nổi hoặc định vị phần tử đó, thì không gian dành cho phần tử đó sẽ không còn được tôn trọng bởi các phần tử khác trong luồng Điều này dễ nhận thấy nhất với các mục được định vị tuyệt đối. Nếu bạn đưa ra một mục Xem Bút Hết Dòng. định vị tuyệt đối của Rachel Andrew (@rachelandrew) trên CodePen Xem Bút Hết Dòng. định vị tuyệt đối của Rachel Andrew (@rachelandrew) trên CodePenTuy nhiên, các mục nổi cũng bị xóa khỏi luồng và trong khi nội dung theo sau sẽ bao quanh các hộp dòng rút gọn của phần tử nổi, bạn có thể thấy bằng cách đặt màu nền trên hộp của các phần tử sau mà chúng đã tăng lên và đang bỏ qua Xem Bút Hết Dòng. float của Rachel Andrew (@rachelandrew) trên CodePen Xem Bút Hết Dòng. float của Rachel Andrew (@rachelandrew) trên CodePenBạn có thể đọc thêm về các phần tử trong luồng và ngoài luồng trên MDN. Điều quan trọng cần nhớ là nếu bạn lấy một phần tử ra khỏi luồng, bạn cần tự quản lý chồng chéo vì các quy tắc thông thường của bố cục luồng khối không còn được áp dụng Cách trình bàyTrong hơn mười lăm năm, chúng tôi đã thực hiện bố cục trong CSS mà không có hệ thống bố trí công việc được thiết kế. Điều này đã thay đổi. Bây giờ chúng tôi có một hệ thống bố cục có khả năng hoàn hảo bao gồm Grid và Flexbox, ngoài ra còn có Bố cục nhiều cột và các phương pháp bố cục cũ hơn được sử dụng cho mục đích thực sự của chúng. Nếu Bố cục CSS là một bí ẩn đối với bạn, hãy xem hướng dẫn Tìm hiểu Bố cục MDN hoặc đọc bài viết của tôi Bắt đầu với Bố cục CSS tại đây trên Tạp chí Smashing Đừng tưởng tượng rằng các phương thức như grid và flexbox bằng cách nào đó đang cạnh tranh. Để sử dụng tốt Layout, đôi khi bạn sẽ thấy một component tốt nhất là flex component và đôi khi là Grid. Đôi khi, bạn sẽ muốn hành vi chạy theo cột của nhiều màu. Tất cả đều là những lựa chọn hợp lệ. Nếu bạn cảm thấy mình đang đấu tranh chống lại cách hành xử của một thứ gì đó, nói chung, đó là một dấu hiệu rất tốt cho thấy bạn nên lùi lại một bước và thử một cách tiếp cận khác. Chúng tôi đã quá quen với việc hack CSS để làm cho nó làm những gì chúng tôi muốn mà chúng tôi có thể quên rằng chúng tôi có một số tùy chọn khác để thử Bố cục là lĩnh vực chuyên môn chính của tôi và tôi đã viết một số bài báo ở đây trên Tạp chí Smashing và các nơi khác để thử và giúp chế ngự bối cảnh Bố cục mới. Ngoài bài viết về Bố cục đã đề cập ở trên, tôi có cả một loạt bài về Flexbox — bắt đầu với Điều gì xảy ra khi bạn tạo một Flexbox Flex Container. Trên Lưới theo ví dụ, tôi có rất nhiều ví dụ nhỏ về Lưới CSS — cùng với một video hướng dẫn về màn hình Ngoài ra — và đặc biệt dành cho các nhà thiết kế — hãy xem Jen Simmons và loạt video Layout Land của cô ấy căn chỉnhTôi đã tách Căn chỉnh ra khỏi Bố cục nói chung bởi vì mặc dù hầu hết chúng ta đã được giới thiệu về Căn chỉnh như một phần của Flexbox, nhưng các thuộc tính này áp dụng cho tất cả các phương pháp bố cục và đáng để hiểu chúng trong ngữ cảnh đó hơn là nghĩ về “Căn chỉnh Flexbox” hoặc . ” Chúng tôi có một tập hợp các thuộc tính Căn chỉnh hoạt động theo cách chung nếu có thể; Trên MDN, bạn có thể tìm hiểu về Sắp xếp hộp và cách nó được triển khai cho Grid, Flexbox, Multicol và Block Layout. Ở đây trên Tạp chí Smashing, tôi có một bài viết cụ thể về căn chỉnh trong Flexbox. Mọi thứ bạn cần biết về căn chỉnh trong Flexbox định cỡTôi đã dành phần lớn thời gian của năm 2018 để nói về đặc điểm kỹ thuật Kích thước bên trong và bên ngoài cũng như cách nó liên quan đến Lưới và Flexbox nói riêng. Trên web, chúng tôi đã quen với việc đặt kích thước theo độ dài hoặc tỷ lệ phần trăm, vì đây là cách chúng tôi có thể tạo bố cục kiểu Lưới bằng cách sử dụng số float. Tuy nhiên, các phương pháp bố cục hiện đại có thể thực hiện rất nhiều việc phân bổ không gian cho chúng ta — nếu chúng ta để chúng. Hiểu cách Flexbox chỉ định không gian (hoặc đơn vị Lưới Ở đây trên Tạp chí Smashing, tôi đã viết về Định cỡ trong Bố cục nói chung và cả cho Flexbox trong Hộp linh hoạt đó lớn cỡ nào? Thiết kế đáp ứngCác phương thức bố cục mới của Grid và Flexbox thường có nghĩa là chúng ta có thể xử lý ít truy vấn phương tiện hơn mức cần thiết với các phương thức cũ hơn, do thực tế là chúng linh hoạt và đáp ứng các thay đổi về kích thước khung nhìn hoặc thành phần mà chúng ta không cần phải thay đổi . Tuy nhiên, sẽ có những nơi bạn muốn thêm vào một số điểm ngắt để nâng cao hơn nữa thiết kế của mình Dưới đây là một số hướng dẫn đơn giản về Thiết kế đáp ứng và đối với các truy vấn phương tiện nói chung, hãy xem bài viết của tôi Sử dụng truy vấn phương tiện cho thiết kế đáp ứng năm 2018. Tôi xem xét Truy vấn phương tiện hữu ích cho việc gì và cũng hiển thị các tính năng mới sắp có trong Truy vấn phương tiện ở Cấp 4 của thông số kỹ thuật Phông chữ và Kiểu chữCùng với Layout, việc sử dụng font chữ trên web đã có sự thay đổi lớn trong năm qua. Phông chữ biến đổi, cho phép một tệp phông chữ có các biến thể không giới hạn, có tại đây. Để có cái nhìn tổng quan về chúng là gì và chúng hoạt động như thế nào, hãy xem đoạn nói chuyện ngắn xuất sắc này của Mandy Michael. Phông chữ biến đổi và tương lai của thiết kế web. Ngoài ra, tôi muốn giới thiệu Dynamic Typography With Modern CSS and Variable Fonts của Jason Pamental Để khám phá Phông chữ biến đổi và khả năng của chúng, có một bản demo thú vị từ Microsoft cùng với một số sân chơi để dùng thử Phông chữ biến đổi — Axis Praxis được biết đến nhiều nhất (Tôi cũng thích Sân chơi phông chữ) Khi bạn bắt đầu làm việc với Phông chữ có thể thay đổi, thì hướng dẫn này trên MDN sẽ cực kỳ hữu ích. Để tìm hiểu cách triển khai giải pháp dự phòng cho các trình duyệt không hỗ trợ Phông chữ thay đổi, hãy đọc Triển khai phông chữ thay đổi với phông chữ web dự phòng của Oliver Schöndorfer. Trình chỉnh sửa phông chữ DevTools của Firefox cũng hỗ trợ làm việc với Phông chữ có thể thay đổi chuyển đổi và hoạt hìnhCSS Transforms và Animation chắc chắn là thứ tôi tìm kiếm trên cơ sở cần biết. Tôi không thường xuyên cần sử dụng chúng và cú pháp dường như nhảy ra khỏi đầu tôi giữa các lần sử dụng. Rất may, tài liệu tham khảo trên MDN đã giúp tôi và tôi khuyên bạn nên bắt đầu với các hướng dẫn về Sử dụng Chuyển đổi CSS và Sử dụng Ảnh động CSS. Zell Liew cũng có một bài viết hay cung cấp lời giải thích tuyệt vời cho quá trình chuyển đổi CSS Để khám phá một số điều có thể, hãy xem trang Animista Một trong những điều có thể gây nhầm lẫn về hoạt hình là cách tiếp cận nào. Ngoài những gì được hỗ trợ trong CSS, bạn có thể cần phải liên quan đến JavaScript, SVG hoặc API Web Animation và tất cả những thứ này đều có xu hướng gộp lại với nhau. Trong bài nói chuyện của cô ấy, Chọn cuộc phiêu lưu hoạt hình của bạn được ghi lại tại An Event Apart, Val Head giải thích các tùy chọn Sử dụng Cheatsheets như một lời nhắc nhở, không phải là một công cụ học tậpKhi tôi đề cập đến tài nguyên Grid hoặc Flexbox, tôi thường thấy các câu trả lời nói rằng họ không thể làm Flexbox nếu không có một cheatsheet nhất định. Tôi không gặp vấn đề gì với cheatsheets với tư cách là người trợ giúp bộ nhớ để tra cứu cú pháp và tôi đã xuất bản một số cú pháp của riêng mình. Vấn đề với việc hoàn toàn dựa vào những thứ đó là bạn có thể bỏ lỡ lý do tại sao mọi thứ hoạt động khi bạn sao chép cú pháp. Sau đó, khi bạn gặp trường hợp thuộc tính đó dường như hoạt động khác đi, sự không nhất quán rõ ràng đó có vẻ khó hiểu hoặc lỗi của ngôn ngữ Nếu bạn thấy mình đang ở trong một tình huống mà CSS dường như đang làm điều gì đó rất kỳ lạ, hãy hỏi tại sao. Tạo một trường hợp thử nghiệm rút gọn làm nổi bật vấn đề, hỏi người quen thuộc hơn với thông số kỹ thuật. Nhiều vấn đề về CSS mà tôi được hỏi là vì người đó tin rằng một thuộc tính hoạt động theo cách khác với cách nó hoạt động trong thực tế. Đó là lý do tại sao tôi nói nhiều về những thứ như căn chỉnh và định cỡ, vì đây là những nơi thường xảy ra sự nhầm lẫn này. Vâng, có những điều kỳ lạ trong CSS. Đó là một ngôn ngữ đã phát triển qua nhiều năm và có những thứ về nó mà chúng ta không thể thay đổi — cho đến khi chúng ta phát minh ra cỗ máy thời gian. Tuy nhiên, khi bạn đã nắm được một số kiến thức cơ bản và hiểu tại sao mọi thứ hoạt động như vậy, bạn sẽ dễ dàng hơn nhiều với những nơi phức tạp hơn Làm thế nào để học CSS miễn phí?Các khóa học hàng đầu về CSS và HTML . HTML & CSS hiện đại ngay từ đầu (Bao gồm cả Sass). Khóa học Dự án và Hướng dẫn HTML&CSS 2022 (Flexbox&Grid). Phát triển web. HTML. CSS. JavaScript. jQuery. NodeJS. . Viết mã cho trẻ em - Giới thiệu về HTML, CSS và JavaScript. . React JS- Hướng dẫn đầy đủ về phát triển web giao diện người dùng [2022] Học CSS ở đâu?10 nơi tốt nhất để học CSS trực tuyến . W3Schools (Miễn phí) Một trong những tài nguyên đầu tiên mà các nhà thiết kế web mới bắt đầu được giới thiệu là W3Schools. . SoloLearn (Miễn phí). Codecademy (Miễn phí). Tài liệu web MDN (Miễn phí). freeCodeCamp (Miễn phí). Dash bởi Đại hội đồng. . Udemy (Trả phí). lynda. com (Trả tiền) Tôi nên học CSS hay HTML trước?Cascading Style Sheets — hay CSS — là công nghệ đầu tiên bạn nên bắt đầu tìm hiểu sau HTML . Mặc dù HTML được sử dụng để xác định cấu trúc và ngữ nghĩa của nội dung của bạn, CSS được sử dụng để tạo kiểu và bố cục nội dung đó.
Học CSS có dễ không?CSS được coi là một trong những ngôn ngữ dễ học nhất . Các quy tắc và cú pháp cơ bản của nó rất đơn giản và bạn có thể bắt đầu tạo kiểu trang web sau một ngày học (nếu bạn đã quen thuộc với HTML). Có thể mất nhiều thời gian hơn để tìm hiểu các tính năng nâng cao hơn của nó, nhưng sau khi bạn làm như vậy, các quy tắc tương tự sẽ được áp dụng. |
