Giải thích các thuật ngữ cơ bản về CSS Bài viết này là một phần của chúng tôi "Loạt bài hướng dẫn HTML5 / CSS3" - dành riêng để giúp bạn trở thành một nhà thiết kế và / hoặc nhà phát triển tốt hơn. Bấm vào đây để xem thêm các bài viết từ cùng một bộ.
CSS hoặc Cascading Stylesheets hoàn thành ngôn ngữ xác định quy tắc thiết kế cho web của chúng tôi. Các nghệ sĩ ở khắp mọi nơi đang sử dụng CSS hàng ngày để tạo, sắp xếp và mã hóa các bộ quy tắc cho bố cục trang web cơ bản. Đây đã trở thành ngôn ngữ phổ biến nhất cho thiết kế mặt trước và cung cấp các khả năng tuyệt vời với bản phát hành CSS3 gần đây. Nhưng tất cả các mã này thực sự có nghĩa là gì?
Ngôn ngữ này đã được phát triển đầy đủ trong một vài năm nay. Nhầm lẫn có thể phát sinh chủ yếu là do thông tin sai lệch và sử dụng sai các điều khoản tương tự. CSS mang lại rất nhiều khái niệm mới cho bảng. Chúng tôi sẽ đề cập đến một số thuật ngữ phổ biến nhất để thành thạo như một bậc thầy về CSS.
Tại sao Chuyên về CSS?
Câu hỏi này đã được đặt ra trước đây và thậm chí vào năm 2011 chúng ta có thể thấy kết quả tương tự xuất hiện. CSS là một ngôn ngữ mạnh mẽ không thích kịch bản hay lập trình. Đó là ngôn ngữ kiểu, mã cụ thể hơn được sử dụng để mô tả cách trang web hoạt động.
Sử dụng CSS, chúng ta có thể thao tác trực tiếp các thuộc tính từ các thành phần HTML riêng lẻ. Tất cả các khối, đoạn văn, liên kết và hình ảnh có thể bị ảnh hưởng thông qua các quy tắc CSS. Tinh chỉnh ngữ nghĩa trình bày cho web luôn luôn là một bước tiến lớn. Đây là lý do chính tại sao CSS vẫn là trình phát hàng đầu cho các nhà thiết kế - không ai tạo ra thứ gì tốt hơn!
Thuộc tính và giá trị
Đây là cách đơn giản nhất để đột nhập vào CSS. Tất cả các mã rơi vào hai hành động: chọn một yếu tố để áp dụng thiết kế và những gì cần áp dụng. Cái sau được tạo thông qua các cặp thuộc tính / giá trị.
Làm ví dụ màu đỏ; là một cặp tài sản / giá trị rất đơn giản. Tài sản chúng tôi sử dụng là màu cho phép chúng tôi vượt qua trong bất kỳ chấp nhận được giá trị để thay đổi màu văn bản. Đây cũng có thể là mã hex hoặc dữ liệu màu RGB [Red-Green-Blue]. Nhiều lần các nhà thiết kế sẽ không đề cập đến ý tưởng về các giá trị bởi vì nó có thể gây hiểu nhầm.
Các thuộc tính và giá trị thực sự là một ý tưởng duy nhất. Mỗi tuyên bố tài sản đòi hỏi một giá trị, và các giá trị riêng của chúng là vô nghĩa. Có nhiều tài liệu trực tuyến đi qua nhiều thuộc tính khác nhau và cách chúng ảnh hưởng đến các yếu tố HTML. Tôi sẽ khuyên bạn nên mua một cuốn sách tham khảo CSS từ bất kỳ cửa hàng sách gần đó. Chúng khá rẻ và chứa hầu hết tất cả thông tin bạn cần.
Giá trị chọn
Bộ chọn là cần thiết để hoàn thành toàn bộ dòng mã CSS. Đây là những gì chúng tôi tuyên bố để đặt loại phần tử chúng tôi đang nhắm mục tiêu. Có rất nhiều công cụ chọn và nhiều công cụ rất hấp dẫn, nhà thiết kế trung bình sẽ không cần các kỹ năng. Kiểm tra tài liệu chọn của W3 nếu bạn muốn tìm hiểu thêm.
Cách đơn giản nhất để bắt đầu định nghĩa kiểu là sử dụng các phần tử trần làm bộ chọn thuộc tính. Điều này có nghĩa là thao túng mã gốc như p cho đoạn văn, div cho các bộ phận, và thậm chí thân hình và html có thể được sử dụng để thao tác trên toàn bộ tài liệu trang web. Dưới đây là một ví dụ nhanh về kiểu dáng tất cả các yếu tố đoạn. p font-Family: Arial, sans-serif; màu: # 222; font-weight: in đậm;
Điều mang lại cho CSS trọng lượng thực sự là cách bắn tỉa chọn chính xác có thể. Cách tốt nhất để thực hiện các kiểu được nhắm mục tiêu là thông qua 2 phương thức được gọi là các lớp học và ID. Đây là những ý tưởng phổ biến trong HTML nơi bạn có thể đặt bất kỳ phần tử nào có ID và giá trị lớp thông qua các thuộc tính. Sau đó, sử dụng CSS thật đơn giản để áp dụng các kiểu cho khối cụ thể đó. p # firstpar font-size: 14px; / * kiểu đoạn văn với ID của "Firstpar" * / p.comment font-size: 1.0em; chiều cao dòng: 1,3em; / * kiểu đoạn văn với lớp "bình luận" * /
Đơn vị chiều dài và giá trị
Thường thì những điều khoản này bị lẫn lộn, không phải là một bất ngờ lớn. Các giá trị đã được giải thích trước đó là vị trí chúng tôi sử dụng để mô tả một tài sản. Đơn vị độ dài cũng là giá trị ở chỗ chúng được sử dụng để mô tả một thuộc tính.
Sự khác biệt là các giá trị này yêu cầu dữ liệu số và do đó phải trả về một số dạng đơn vị. Pixel [px] là phổ biến nhất và có thể được sử dụng cho hầu hết mọi thứ: chiều rộng / chiều cao, kích thước phông chữ, phần đệm / lề, để đặt tên cho một số.
Khác với những điều này bạn có thể thấy tỷ lệ phần trăm [%] được sử dụng thường xuyên thông qua bố trí chất lỏng. Khi đặt giá trị độ rộng thành phần trăm, trình biên dịch sẽ giả sử 100% là toàn bộ chiều rộng của trình duyệt web. Điều này mang lại rất nhiều độ chính xác cho các nhà thiết kế khi áp dụng các kiểu cho cấu trúc bố cục và thậm chí kiểu chữ trang.
Khối khai báo
Bây giờ sau khi kết hợp tất cả các điều khoản này với nhau, cuối cùng chúng ta cũng có thể thảo luận về ý tưởng cốt lõi đằng sau các bảng định kiểu. Các khối mã được sử dụng để phân định các khu vực chủ đề và chỉ định chi tiết thành phần. Ví dụ: bên dưới là một dòng mã cho một thùng chứa điều hướng đơn giản: div # nav hiển thị: khối; chiều rộng: 100%; đệm: 3px 6px; lề dưới: 20px;
Cách dễ nhất để hiển thị mã này là các thuộc tính dòng lần lượt. Các nhà phát triển CSS đã sử dụng các khối mã để phá vỡ từng thuộc tính trên dòng riêng của nó. Chương trình nghị sự này không chỉ chiếm nhiều chỗ hơn mà còn làm giảm khả năng hớt bọt tờ của bạn để tìm chính xác những gì bạn cần.
Một cách tốt hơn để phá vỡ các khối mã là tách các phần tử phức tạp thành của riêng chúng sau khi chúng đạt đến ngưỡng. Con số này là cá nhân và sẽ khác nhau giữa các nhà phát triển. Đó là điểm bùng phát trong đó logic chỉ ra rằng thật ngớ ngẩn khi giữ mọi thứ trên một dòng, chủ yếu là vì tính dễ đọc.
Dưới đây tôi đã viết một ví dụ về một khối các thuộc tính điều hướng cùng nhau. Thực tiễn này giữ các phần tử sâu hơn trong cùng một vị trí để chỉnh sửa tất cả các phần tử điều hướng đơn giản hơn nhiều. div # nav hiển thị: khối; chiều rộng: 100%; đệm: 3px 6px; lề dưới: 20px; div # nav ul list-style: none; hiển thị: khối; div # nav ul li float: left; lề phải: 10px; cỡ chữ: 12px; div # nav ul li a color: # 0f0f0f; trang trí văn bản: không có; hiển thị: khối nội tuyến; phần đệm: 2px 5px;
Những tiến bộ có thể có từ CSS2 / CSS3
Trong các tiêu đề gần đây đã không ngừng nói về những lợi ích tuyệt vời từ CSS3. Nhưng những gì đã thực sự đã thay đổi trong ngôn ngữ? Rõ ràng mã cũ vẫn sẽ chạy tốt. Điều này ít nhất cho thấy khả năng tương thích ngược hoàn toàn giữa các trình biên dịch [luôn luôn là một điều tốt].
Sự khác biệt chính chủ yếu liên quan đến tài sản mới. Những thứ này cho phép các góc tròn và hiệu ứng đổ bóng được hiển thị trên trình duyệt. CSS3 cũng cung cấp các công cụ mới để mô tả màu sắc trong tài liệu. HSL [Hue-Saturation-Lightness] là sản phẩm mới nhất ngoài HSLA bao gồm kênh Alpha để giảm độ mờ.
Bộ chọn thuộc tính là một bước tiến lớn liên quan đến kiểu dáng đánh dấu thẳng. Với kiểu mã này, bạn có thể nhắm mục tiêu một tên thành phần cụ thể có chứa các thuộc tính với các giá trị nhất định. Chúng hầu hết hữu ích khi làm việc với đánh dấu, chẳng hạn như XML, nơi không có các nguyên tắc thiết kế tiêu chuẩn để thao tác các nút. Ví dụ dưới đây là một ý tưởng tương đối đơn giản: div [attrib ^ = "1"] / * kiểu ở đây * /
Đoạn mã trên là một phần của thư viện bộ chọn CSS. Điều này sẽ ảnh hưởng đến tất cả các phần tử div với một thuộc tính chú ý cũng giữ giá trị 1. Nếu điều này vẫn còn gây nhầm lẫn tham khảo ví dụ dưới đây để làm rõ. Về lý thuyết, hai bộ chọn này sẽ thực hiện các hành động giống nhau. p [id ^ = "chính"] / * kiểu * / p # chính / * kiểu * /
Phần kết luận
Sau khi phá vỡ một vài thuật ngữ bối rối nhất, CSS có vẻ giống như một cuộc dạo chơi trong công viên. Ngôn ngữ rất trực quan và người mới bắt đầu có thể bắt đầu thiết kế trong vòng vài giờ đầu tiên. Đây là điều khiến CSS trở nên phổ biến đối với các nhà phát triển web.
Những lợi ích của CSS3 chỉ mới bắt đầu có hiệu lực. Trong vài năm mới, xu hướng web phát triển sẽ cho chúng ta thấy chúng ta thực sự có bao nhiêu quyền kiểm soát đối với thiết kế trang web. CSS hiện đang tự hào là ngôn ngữ chính cho phong cách trang web mặt trước. Thực hành các kỹ năng trình độ trung cấp thô sơ thậm chí có thể tạo ra kinh nghiệm thiết kế tuyệt vời và kiến thức sâu hơn.