Gọi name trong CSS
Trong CSS, các thủ thuật setting đóng vai tò to lớn, nhưng bên cạnh đó, cách đặt tên theo các từ đơn phù hợp cũng quan trọng không kém ! Tùy mỗi cá nhân là sẽ có các cách đặt tên khác nhau, tuy nhiên nếu đặt các từ đơn với ý nghĩa không phù hợp, thì việc tìm kiếm bằng cách search theo các từ đó sẽ trở nên khó khăn~ Hẳn có nhiều list để cho bạn đặt tên CLASS, nhưng những trang web viết các từ đơn tiếng Anh cần sử dụng đó với ý nghĩa thực sự phù hợp, tôi nghĩ là không nhiều. Đặt tên rất khó, nhưng cũng rất quan trọng ! Trong CSS thì Design philosophy rất quan trọng, nhưng trong khi làm việc thực tế, việc gắn các tên theo đúng ý nghĩa của chức năng và tên gọi cũng rất cần thiết để ta không bị rối. Tài liệu dưới đây là những thông tin tổng hợp của cá nhân tôi về các từ đơn tiếng Anh được sử dụng trong CSS, với ý nghĩa và tính năng được rút ngắn gọn hết sức có thể. Và đây không chỉ được sử dụng để làm Class name cho tính năng, UI hay Appearance mà còn khuyến khích các bạn sử dụng làm class name cho vai trò của các component đó hay cho mục tiêu của phần design. Vùng chọn trong CSS đóng vai trò rất quan trọng khi viết CSS, bởi vì nếu bạn sử dụng vùng chọn sai thì điều đó có nghĩa là các quy tắc CSS của bạn sẽ không thể thực thi hoặc thực thi không đúng chỗ. Có thể nói rằng, việc nắm rõ quy tắc sử dụng vùng chọn là kỹ thuật quan trọng đầu tiên khi bạn sử dụng CSS. Vùng chọn trong CSS rất linh hoạt, hầu như bạn có thể chọn bất cứ cái gì từ thẻ Vùng chọn là gì?Trong CSS, vùng chọn nghĩa là khu vực mà bạn muốn nó sẽ được áp dụng các quy tắc CSS mà bạn muốn chỉ định cho nó. Ví dụ bạn muốn tăng kích thước font chữ của các thẻ h1 thì vùng chọn của bạn sẽ là h1. Vùng chọn có thể là tên thẻ HTML hoặc thuộc tính của HTML. Các loại vùng chọn cơ bảnVùng chọn dựa vào tên thẻKiểu vùng chọn này là đơn giản nhất, đó là nó sẽ chọn toàn bộ các phần tử trên tài liệu HTML dựa vào tên thẻ có trong tài liệu rồi áp dụng CSS. Ví dụ mình muốn thay đối style cho toàn bộ thẻ See the Pen NPVEyz by Thach Pham (@thachpham92) on CodePen. Dĩ nhiên với kiểu sử dụng vùng chọn này thì toàn bộ các thẻ HTML trong website được chọn trong CSS đều biến đổi theo, tức là bạn không thể sử dụng kiểu chọn tên thẻ để viết CSS cho một khu vực độc lập. Vùng chọn dựa vào IDVùng chọn dựa vào ID (tên định danh) nghĩa là bạn có thể chọn một phần tử cụ thể dựa vào giá trị của thuộc tính Id được thiết lập dựa vào thuộc tính See the Pen BygBGQ by Thach Pham (@thachpham92) on CodePen. Rõ ràng bạn thấy ở ví dụ trên mình có hai thẻ Ngoài ra còn có một cách viết vùng chọn theo id khác là viết kèm theo tên thẻ đang sử dụng id đó như Hãy lưu ý rằng, một thẻ có thể sẽ chứa nhiều id khác nhau và mỗi tên id sẽ được cách nhau bởi khoảng trắng như thế này. [html] Hello[/html]Vùng chọn dựa vào ClassClass (lớp) cũng rất được sử dụng phổ biến như id nhưng một điểm khác biệt của class là một class có thể được sử dụng cho nhiều phần tử trên một trang tài liệu HTML, còn id thì chỉ được sử dụng một lần duy nhất cho một phần tử. Class được khai báo trong một phần tử HTML bởi thuộc tính class như See the Pen bNPbzq by Thach Pham (@thachpham92) on CodePen. Cũng giống như id, class cũng có thể được viết kèm theo tên thẻ kiểu h1.sticky và phải viết liền nhau. Vùng chọn theo thứ cấpKiểu vùng chọn này bạn cũng sẽ sử dụng rất thường xuyên, đặc biệt là khi tiến hành viết CSS cho website đó là chọn phần tử theo thứ cấp. Nghĩa là với vùng chọn này, bạn có thể chọn một phần tử con trong một phần tử mẹ nào đó. Ví dụ mình có một đoạn HTML thế này: [html]
[/html] Như ở đoạn trên, mình có hai danh sách với thẻ Để chọn các thẻ See the Pen WbqeBE by Thach Pham (@thachpham92) on CodePen. Vùng chọn theo thứ cấp liền nhauĐây cũng là một kiểu vùng chọn dựa theo thứ cấp, cũng giúp bạn chọn các phần tử bên trong một phần tử nào đấy nhưng nó sẽ chỉ áp dụng cho các phần từ nằm dưới nó một bật. Bây giờ mình có cái danh sách hai cấp bật như sau: [html] [/html] Nếu mình muốn viết CSS cho các thẻ
See the Pen WbqNeZ by Thach Pham (@thachpham92) on CodePen. Thường thì cách viết vùng chọn này bạn sẽ sử dụng khi tạo menu đổ xuống trong website. Lời kếtỞ trên là 4 kiểu thiết lập vùng chọn để viết CSS mà bạn sẽ thường xuyên sử dụng nhất, hầu như là dùng liên tục sau này khi viết CSS cho website nên bạn hãy cố gắng luyện tập cách sử dụng nhuần nhuyễn nhất có thể nhé. |