Bạn đang tìm hiểu thuật ngữ CSS cho sự nghiệp phát triển web? Kỹ năng CSS sẽ giúp bạn định dạng (style) các trang web và tài liệu HTML. Bạn có thể học CSS để tạo ra các trang web nhanh, nhất quán và dễ bảo trì.
Có rất nhiều cơ hội trong thiết kế web và phát triển web, dù bạn muốn làm nhà phát triển web tại Silicon Valley, tìm việc làm từ xa trong thiết kế web, thậm chí freelance kỹ năng của bạn. Đối với bất kỳ điều nào trong đó, bạn sẽ cần biết thuật ngữ CSS để thành công. Trong bài viết này, bạn sẽ tìm thấy một bảng từ điển thuật ngữ CSS và những gì bạn cần biết nếu muốn sự nghiệp là nhà thiết kế web.
CSS là gì?
CSS là viết tắt của Cascading Style Sheets (Bảng định dạng xếp chồng), một ngôn ngữ lập trình được dùng rộng rãi trong việc thêm style cho trang web HTML trong không gian kỹ thuật số. Nó được phát triển bởi World Wide Web Consortium và có thể được dùng bởi bất kỳ ngôn ngữ đánh dấu XML nào. Ngoài ra, do ngôn ngữ và cú pháp đơn giản, nó dễ hiểu trong ngôn ngữ con người.
Nhà thiết kế web và người xây dựng trang web dùng CSS để định nghĩa và tùy chỉnh giao diện của các phần tử HTML. CSS giúp tăng cường việc render (hiển thị) các phần tử và sức hấp dẫn trực quan của chúng trên màn hình trong trang web và app. Nó cho phép triển khai nhiều style như inline style và thêm animation với keyframes.
Ai dùng thuật ngữ CSS?
Nhà thiết kế web, nhà phát triển web, nhà phát triển front end, và nhà phát triển ứng dụng dùng thuật ngữ CSS để áp dụng các khái niệm và cú pháp CSS vào code trang web. Họ dùng công cụ phát triển web như Bootstrap, một framework CSS được dùng rộng rãi, để tạo trang web thẩm mỹ. Một số nhà phát triển cũng dùng app như Mimo, Programming Hero, và CodeHub để viết code và nâng cao giao diện trang web với CSS.
Danh sách thuật ngữ CSS: Những điều mọi người làm CSS nên biết
- Aspect ratio (Tỷ lệ khung hình)
- Box model (Mô hình hộp)
- Child selectors (Bộ chọn con)
- Declaration block (Khối khai báo)
- Flexbox
- Grid layout (Bố cục lưới)
- Inheritance (Kế thừa)
- Padding values (Giá trị padding)
- Paragraph element (Phần tử đoạn văn)
- Positioning (Định vị)
- Properties (Thuộc tính)
- Pseudo-class (Lớp giả)
- Rem units (Đơn vị Rem)
- Right-floating element (Phần tử nổi bên phải)
- Ruleset (Bộ quy tắc)
- Selectors (Bộ chọn)
- Specificity (Độ đặc hiệu)
- Syntax (Cú pháp)
- Unit identifier (Định danh đơn vị)
- Whitespace characters (Ký tự khoảng trắng)
Từ điển thuật ngữ CSS: 5 thuật ngữ CSS phổ biến
Dù bạn đang chuyển đổi sang sự nghiệp công nghệ hay tìm việc cấp nhập (entry-level) trong thiết kế web, bạn chắc chắn cần kiến thức vững chắc về CSS và HTML. Học CSS có thể vui và thú vị. Tuy nhiên, trước khi bạn đắm chìm vào khóa học CCS trực tuyến, bạn có thể hưởng lợi từ việc hiểu thuật ngữ CSS phổ biến trước.
Box Model (Mô hình hộp)
Mô hình hộp CSS định nghĩa cách các phần tử nên xuất hiện trên trang web. Theo thiết kế, CSS là một mô hình định dạng hướng hộp đơn giản bao gồm margin (lề), border (viền), padding (đệm), và content (nội dung). Tất cả nội dung và phần tử được trình bày trong các hộp này.
Tại sao nhà thiết kế web cần biết về Box Model
Nhà thiết kế web cần biết về box model vì nó xây dựng nền tảng cho việc hiển thị nội dung trên trang web CSS. Với box model, họ có thể thiết lập cấu trúc và kích thước của bố cục CSS bằng cách định nghĩa các thuộc tính hộp như width (chiều rộng) và height (chiều cao). Cũng có block boxes (hộp khối) và inline boxes (hộp nội tuyến) để tổ chức và định vị nội dung.
Declaration Block (Khối khai báo)
Là một phần của cú pháp CSS, khối khai báo ghép cặp một thuộc tính CSS và giá trị để thiết lập rõ ràng style CSS trên trang web. Ví dụ, đối với thuộc tính background-color, màu bạn gán cho nó là giá trị. Bạn ghép cặp chúng dùng cú pháp khối khai báo CSS, với dấu hai chấm giữa chúng và dấu chấm phẩy sau giá trị. Các nhóm khai báo có ngoặc nhọn mở ở đầu và ngoặc nhọn đóng ở cuối.
Tại sao nhà thiết kế web cần biết về Declaration Block
Nhà thiết kế web cần biết về khối khai báo vì chúng là cơ bản trong việc hình thành giao diện và bố cục trang web. Chúng định nghĩa thuộc tính CSS và áp dụng quy tắc CSS để định dạng các phần tử trang web. Sử dụng khối khai báo, nhà thiết kế web có thể thiết lập thuộc tính để thay đổi màu font, màu nền văn bản, đường lưới, căn chỉnh, chiều cao dòng, và nhiều hơn nữa.
Flexbox
Flexbox là một module CSS để thêm thuộc tính vào container cha (main flexbox) và container con (flex item). Sử dụng flexbox, bạn có thể điều chỉnh phân phối không gian, căn chỉnh, và hướng nội dung. Vì flexbox áp dụng cho mối quan hệ cha-con, các thuộc tính của container cha tác động trực tiếp đến vị trí và chuyển động của con trong không gian của cha.
Tại sao nhà thiết kế web cần biết về Flexbox
Nhà thiết kế web cần biết flexbox vì nó cho họ nhiều kiểm soát hơn lên hành vi và căn chỉnh của các phần tử. Flexbox cho nhà thiết kế web sự linh hoạt trong việc tùy chỉnh file CSS và nâng cao bố cục trang web. Điều này đặc biệt quan trọng khi họ thiết kế trang web có thể thích ứng với bất kỳ kích thước thiết bị hoặc loại màn hình nào.
Positioning (Định vị)
Định vị CSS là một thuộc tính dùng để chỉ định nơi mọi phần tử đơn lẻ nên nằm trên trang web. Năm giá trị có thể dùng cho định vị là absolute, fixed, relative, static, và sticky. Giá trị mặc định của vị trí CSS là static, nhưng bạn có thể thay đổi và tùy chỉnh nó theo nhu cầu.
Tại sao nhà thiết kế web cần biết về Positioning
Nhà thiết kế web định vị các phần tử để làm cho bố cục trực quan trông gọn gàng và có tổ chức. Họ đảm bảo vị trí của các phần tử phù hợp cho cả ứng dụng desktop và mobile. Định vị cũng làm cho trang web trông đẹp trên bất kỳ màn hình hiển thị và trình duyệt nào.
Properties (Thuộc tính)
Thuộc tính CSS chủ yếu dùng để áp dụng style CSS trên trang web, tạo thành danh sách lớn các thuộc tính. Danh sách này bao gồm thuộc tính border (viền), thuộc tính box (hộp), và thuộc tính list-style (kiểu danh sách). Ví dụ, để thiết lập margin dọc, margin âm với float, hoặc margin liền kề của các hộp bạn cần tùy chỉnh thuộc tính margin. Các thuộc tính khác liên quan đến thuộc tính background riêng lẻ, thuộc tính padding, và thuộc tính viết tắt (shorthand).
Tại sao nhà thiết kế web cần biết về Properties
Nhà thiết kế web cần biết về thuộc tính vì mọi đoạn code snippet đều có chúng để định dạng các phần tử khác nhau. Khi nào họ làm thay đổi, họ có thể duy trì thiết kế trang web và tách biệt cấu trúc tài liệu và nội dung. Chỉ cần điều chỉnh giá trị của các thuộc tính cụ thể.
Bảng cheat sheet thuật ngữ CSS: 5 thuật ngữ CSS nâng cao
CSS là ngôn ngữ đánh dấu cho phép coder sáng tạo bằng cách tạo style sheet và dùng nó để thiết lập các thuộc tính và style riêng lẻ cho các phần tử.
Học thêm thuật ngữ và khái niệm CSS nâng cao có thể cho bạn lợi thế cạnh tranh cần thiết để bứt phá vào ngành công nghệ. Nhiều ngành công nghiệp hiện đang tìm kiếm nhà phát triển tài năng và nhà thiết kế web sáng tạo để thiết kế trang web. Vì vậy, đây là lúc thích hợp để có một bảng cheat sheet thuật ngữ CSS nâng cao sẽ tiện lợi khi bạn theo đuổi trở thành nhà thiết kế web hoặc nhà phát triển front end.
Inheritance (Kế thừa)
Kế thừa là quá trình chuyển một số thuộc tính từ phần tử cha đến phần tử con trực tiếp. Khái niệm kế thừa đơn giản hóa quy trình viết code trong việc định dạng thẩm mỹ trang web. Cú pháp của trang web áp dụng quy tắc kế thừa khi không có giá trị khởi tạo được đặt cho thuộc tính của phần tử con.
Tại sao nhà thiết kế web nên biết về Inheritance
Việc dùng kế thừa giúp nhà thiết kế web tiết kiệm thời gian trong việc định dạng bộ chọn hậu duệ (descendant selector) và giảm nỗ lực cần thiết trong quy trình phát triển web. Một số thuộc tính có thể kế thừa giá trị mặc định, như color (màu), font, visibility (độ hiển thị), text-align (căn chỉnh văn bản), line height (chiều cao dòng), và list style (kiểu danh sách). Tuy nhiên, class CSS không thể được kế thừa, khác với những gì thường thấy trong các ngôn ngữ lập trình khác.
Pseudo-class (Lớp giả)
Pseudo-class là từ khóa được định nghĩa trước dùng để thêm style cho bất kỳ một hoặc nhiều phần tử được chọn. Nó cho phép bộ chọn CSS có style khác với các style gốc. Có nhiều pseudo-class khác nhau, bao gồm location (vị trí), language (ngôn ngữ), user action (hành động người dùng), và time (thời gian).
Tại sao nhà thiết kế web nên biết về Pseudo-class
Nhà thiết kế web dùng pseudo-class để nâng cao bố cục và giao diện trình duyệt. Pseudo-class giúp nhà thiết kế web thao tác giao diện trực quan của trang web mà không can thiệp vào các phần tử cấu trúc và nội dung.
Ruleset (Bộ quy tắc)
Một ruleset bao gồm bộ chọn (selectors) và khai báo (declarations) được định nghĩa cho stylesheet. Khi một trang web được mở qua trình duyệt, nó có quy tắc tác giả (author rule) và quy tắc người đọc (reader rule) áp dụng, tùy thuộc vào ai đang truy cập trang web. Quy tắc tác giả thường dành cho nhà thiết kế web, và quy tắc người đọc dành cho người dùng.
Tại sao nhà thiết kế web nên biết về Ruleset
Nhà thiết kế web nên biết về ruleset vì nó quan trọng cho việc viết khối code trong CSS. Một ruleset thiết lập một cascade (xếp chồng) trong stylesheet và giữ cho quy trình thiết kế web hiệu quả và được định nghĩa rõ ràng. Điều này làm cho việc định dạng phần tử HTML có tổ chức và cho phép gỡ lỗi (debugging) và bảo trì dễ dàng hơn.
Selectors (Bộ chọn)
Bộ chọn CSS định nghĩa các phần tử nào được chọn để áp dụng giá trị thuộc tính hoặc style. Một bộ chọn đơn giản trỏ đến các phần tử mà style CSS được áp dụng, trong khi bộ chọn tổ hợp (combinator selector) bao gồm một nhóm bộ chọn. Mỗi loại bộ chọn phục vụ việc chọn một phần tử xác định và định nghĩa nó theo một cách cụ thể. Ví dụ, bộ chọn toàn cục (universal selector) được định nghĩa bởi ký tự dấu sao (*).
Tại sao nhà thiết kế web nên biết về Selectors
Nhà thiết kế web nên biết về bộ chọn vì họ có thể dùng chúng để chọn phần tử cho việc định dạng trang web. Họ cần hiểu sự khác biệt và ứng dụng đúng của bộ chọn toàn cục, bộ chọn class, bộ chọn thuộc tính, trong số những cái khác.
Specificity (Độ đặc hiệu)
Specificity xếp hạng các bộ chọn CSS. Nó nghĩa là chỉ định cho trình duyệt áp dụng, sắp xếp và ưu tiên một style trên phần tử được chọn. Với specificity, thứ hạng của bộ chọn càng cao, nó càng quan trọng vì style của nó rất đặc hiệu. Điều này có nghĩa là style CSS có thể đè lên style của các trang web khác.
Tại sao nhà thiết kế web nên biết về Specificity
Nhà thiết kế web nên biết về specificity vì nó sẽ giúp họ định nghĩa hai quy tắc cho cùng một phần tử mà ngược lại sẽ xung đột. Specificity quan trọng trong CSS cho tính năng cascade (xếp chồng) do chính ngôn ngữ đánh dấu cung cấp. Các style được áp dụng theo một thứ tự cụ thể, một sau một. Không có hai style nào được áp dụng cùng một lúc.
Làm thế nào để học thuật ngữ CSS trong năm 2022?
Bạn có thể học thuật ngữ CSS qua các khóa học trực tuyến mở lớn (MOOCs) như Coursera và Udemy chứa các khóa học và dự án cho CSS. Bạn cũng có thể tìm khóa học trên nền tảng học tập dựa trên đăng ký như Skillshare. Nếu bạn hấp thụ khái niệm tốt hơn bằng nghe hơn đọc, bạn cũng có thể học từ các kênh video thiết kế web trên YouTube.
Bạn có thể đưa việc học về thuật ngữ CSS lên cấp độ mới bằng cách đăng ký coding bootcamp cung cấp chương trình thiết kế và phát triển web bao gồm CSS. Bootcamp thiết kế web chuẩn bị bạn cho công việc mơ ước trong phát triển hoặc thiết kế web và cho phép bạn mài giũa kỹ năng lập trình CSS bằng cách làm dự án về ý tưởng truyền cảm hứng cho bạn.
Câu hỏi thường gặp về CSS
Tôi nên học HTML hay CSS trước?
Bạn nên học HTML trước nếu bạn vừa bắt đầu trong thế giới thiết kế web và phát triển web. Sau đó, nâng cao kiến thức bằng cách tìm tài nguyên mạnh để học CSS nếu bạn muốn có sự nghiệp hứa hẹn trong phát triển web.
Học CSS có dễ không?
Có, CSS dễ học. Bạn có thể khám phá nhiều hướng dẫn để học cú pháp CSS. Bạn cũng có thể dùng công cụ cho nhà thiết kế web để thực hành và định dạng các trang web cơ bản.
CSS có giống JavaScript không?
Không, CSS không giống JavaScript. CSS là ngôn ngữ đánh dấu và ngôn ngữ bố cục cho trang web HTML. JavaScript là ngôn ngữ lập trình dùng để làm cho trang web động, thêm tương tác, và nâng cao khả năng truy cập. CSS có file riêng dùng đuôi .css trong khi JavaScript dùng đuôi .js.