Cascading Style Sheets (CSS) là một ngôn ngữ đánh dấu web, được phát triển bởi World Wide Web Consortium (W3C). CSS đi kèm với HTML và cung cấp cho cả nhà phát triển và người dùng nhiều quyền kiểm soát hơn đối với cách hiển thị các trang. CSS cho phép các nhà phát triển web tách biệt giao diện của một trang (CSS) khỏi cấu trúc và nội dung thông tin (HTML) của nó. Đây là một ý tưởng hay vì người dùng truy cập nội dung bằng nhiều loại thiết bị và phương tiện khác nhau. Do đó, cách trình bày của một tài liệu không nên giống nhau đối với mọi người, nhưng nội dung và cấu trúc nên được. Người khuyết tật được hưởng lợi từ phương pháp này vì họ có nhiều quyền kiểm soát hơn đối với cách hiển thị hoặc trình bày các trang web

Ví dụ: người dùng có thị lực kém có thể tạo biểu định kiểu có phông chữ lớn, độ tương phản cao của riêng họ và yêu cầu trình duyệt ghi đè biểu định kiểu hiện có của trang web bằng biểu định kiểu phù hợp với nhu cầu của họ và phản ánh sở thích của họ. Thông tin thêm có sẵn trong tài liệu W3C Tính năng trợ năng của CSS. Hiện tại có hai phiên bản CSS—CSS1 và CSS2. Phiên bản thứ hai, do W3C phát hành vào tháng 5 năm 1998, có tiềm năng to lớn để cải thiện khả năng truy cập ở chỗ nó cho phép các biểu định kiểu dành riêng cho phương tiện, chẳng hạn như biểu định kiểu âm thanh và biểu định kiểu cho các thiết bị không chuẩn

Với những lợi ích về khả năng truy cập này, việc sử dụng CSS để kiểm soát việc trình bày nội dung web được khuyến khích mạnh mẽ. Trong Nguyên tắc truy cập nội dung web của W3C (WCAG) 1. 0, Điểm kiểm tra 3. 3 nói "Sử dụng biểu định kiểu để kiểm soát bố cục và bản trình bày". Checkpoint tương ứng trong WCAG 2. 0, hiện đang là bản nháp đang hoạt động, là Hướng dẫn 1. 3, có nội dung "Đảm bảo rằng thông tin, chức năng và cấu trúc có thể tách rời khỏi bản trình bày"

WCAG 1. 0 là nguồn gốc của một số nhầm lẫn về chủ đề này, vì nó khuyến nghị sử dụng biểu định kiểu như đã lưu ý ở trên, nhưng đồng thời nó dường như không khuyến khích sử dụng biểu định kiểu. Trạm kiểm soát 6. 1 nói, "Sắp xếp tài liệu để chúng có thể được đọc mà không cần biểu định kiểu. Ví dụ: khi một tài liệu HTML được hiển thị mà không có biểu định kiểu được liên kết, tài liệu đó vẫn có thể đọc được. " Điểm kiểm tra này không nên bị hiểu sai là CSS không khuyến khích. Thay vào đó, ý tưởng là sử dụng CSS mà trang web của bạn không phụ thuộc vào CSS. Vì người dùng có khả năng ghi đè biểu định kiểu được chỉ định của tác giả, nên nội dung web có thể trông rất khác đối với những người dùng này. Ngoài ra, người dùng truy cập trang bằng trình duyệt cũ hơn, trình duyệt chỉ có văn bản, máy tính cầm tay, điện thoại không dây hoặc các công nghệ khác có thể không hỗ trợ CSS vẫn có thể truy cập nội dung

Nhớ HTML (Ngôn ngữ đánh dấu siêu văn bản)?

Cho dù bạn là nhà phát triển giao diện người dùng, nhà phát triển toàn bộ ngăn xếp hay người mới bắt đầu thiết kế web, cách sử dụng biểu định kiểu CSS là điều bạn chắc chắn nên biết cách thực hiện.

Công nghệ có phù hợp với bạn không?

Bạn sẽ học. Nghề công nghệ có phù hợp với bạn không Nghề công nghệ nào phù hợp với thế mạnh của bạn Bạn cần có những kỹ năng gì để đạt được mục tiêu của mình

CSS là gì?

Vậy CSS là gì và CSS dùng để làm gì?

CSS là viết tắt của Cascading Style Sheets với điểm nhấn là “Kiểu” và phiên bản mới nhất là CSS 3

Mặc dù Ngôn ngữ đánh dấu siêu văn bản (HTML) được sử dụng để cấu trúc một tài liệu web (xác định những thứ như tiêu đề và đoạn văn, đồng thời cho phép bạn nhúng hình ảnh, video và phương tiện khác), ngôn ngữ Biểu định kiểu xếp tầng xuất hiện và chỉ định kiểu tài liệu của bạn — bố cục trang . ) đều được xác định bằng cú pháp CSS, có nghĩa là CSS là một ngôn ngữ quan trọng để bạn thành thạo về mặt tạo kiểu trang web của mình

Hãy coi HTML là nền tảng (mỗi nhà đều có một cái) và Cascading Style Sheets là các lựa chọn thẩm mỹ (có một sự khác biệt lớn giữa một biệt thự thời Victoria và một ngôi nhà hiện đại giữa thế kỷ). Bạn cần cả hai để tạo một trang web và JavaScript để làm cho nó tương tác

CSS hoạt động như thế nào?

CSS 3 mang lại phong cách cho các trang web của bạn bằng cách tương tác với các phần tử HTML bằng cú pháp. Các phần tử là các thành phần HTML riêng lẻ của một trang web - chẳng hạn như một đoạn văn - trong HTML có thể trông như thế này

This is my paragraph!

Nếu bạn muốn làm cho đoạn này có màu hồng và đậm đối với những người xem trang web của bạn thông qua trình duyệt web, bạn sẽ sử dụng mã CSS giống như thế này

p  {  color:pink;  font-weight:bold;  }

Trong trường hợp này, “p” (đoạn văn) được gọi là “bộ chọn” - đó là một phần của mã Cascading Style Sheets chỉ định phần tử HTML nào mà kiểu dáng CSS sẽ ảnh hưởng. Trong CSS, bộ chọn được viết ở bên trái của dấu ngoặc nhọn đầu tiên. Thông tin giữa các dấu ngoặc nhọn được gọi là khai báo và nó chứa các thuộc tính và giá trị được áp dụng cho bộ chọn

Thuộc tính là những thứ như kích thước phông chữ, màu sắc và lề, trong khi giá trị là cài đặt cho các thuộc tính đó và bạn có thể thay đổi những cài đặt này bằng cách áp dụng các thay đổi cho bộ chọn. Ví dụ: “vị trí nền,” “màu đường viền,” “kiểu đường viền,” và “độ rộng đường viền,” và “căn chỉnh văn bản” là các thuộc tính và “trên cùng,” “màu đỏ,” “chấm chấm,” “

Đối với một ví dụ thực tế, trong ví dụ trên, “color” và “font-weight” đều là các thuộc tính và “pink” và “bold” là các giá trị. Bộ dấu ngoặc đơn đầy đủ của

{  color:pink;  font-weight:bold;  } 

là phần khai báo, và một lần nữa, “p” (có nghĩa là đoạn HTML) là bộ chọn. Những nguyên tắc cơ bản tương tự này có thể được áp dụng để thay đổi kích thước phông chữ, màu nền, thụt lề, v.v. trên trang web của bạn bằng cách chọn bộ chọn cụ thể. Ví dụ. .

body  {  background-color:lightblue;  }

. . sẽ làm cho nền trang của bạn có màu xanh nhạt hoặc. .

p  {  font-size:20px;  color:red;  }

. . sẽ tạo một đoạn phông chữ 20 điểm với các chữ cái màu đỏ

Công nghệ có phù hợp với bạn không?

Bạn sẽ học. Nghề công nghệ có phù hợp với bạn không Nghề công nghệ nào phù hợp với thế mạnh của bạn Bạn cần có những kỹ năng gì để đạt được mục tiêu của mình

CSS bên ngoài, nội bộ hay nội tuyến?

Tuy nhiên, bạn có thể tự hỏi làm thế nào mã CSS này thực sự được áp dụng cho nội dung HTML. Giống như HTML, Cascading Style Sheets được viết bằng văn bản thuần túy, đơn giản thông qua trình soạn thảo văn bản hoặc trình xử lý văn bản trên máy tính của bạn và có ba cách chính để thêm mã CSS đó vào các trang được tạo kiểu HTML của bạn. Mã CSS (hoặc biểu định kiểu) có thể ở bên ngoài, bên trong hoặc nội tuyến

Biểu định kiểu bên ngoài được lưu dưới dạng tệp CSS (. css) và có thể được sử dụng để xác định giao diện của toàn bộ trang web thông qua một tệp (thay vì thêm các phiên bản mã CSS riêng lẻ vào mọi thành phần HTML mà bạn muốn điều chỉnh). Để sử dụng loại biểu định kiểu này, bạn. các tệp html cần bao gồm phần tiêu đề liên kết đến biểu định kiểu bên ngoài và trông giống như thế này

Điều này sẽ liên kết các. html vào biểu định kiểu của bạn (trong trường hợp này là mysitestyle. css) và tất cả các hướng dẫn CSS trong tệp đó sau đó sẽ áp dụng cho tệp được liên kết của bạn. trang html

Biểu định kiểu bên trong là các hướng dẫn CSS được viết trực tiếp vào tiêu đề của một tệp cụ thể. trang html. (Điều này đặc biệt hữu ích nếu bạn có một trang duy nhất trên một trang web có giao diện độc đáo. ) Một biểu định kiểu nội bộ trông giống như thế này. .

. . màu nền cây kế và các đoạn văn có 20 điểm, phông chữ màu xanh lam trung bình giờ sẽ được áp dụng cho trang đơn này

Cuối cùng, các kiểu nội tuyến là các đoạn mã CSS được viết trực tiếp vào mã HTML và chỉ áp dụng cho một phiên bản mã hóa duy nhất mà không cần thêm tệp CSS. Ví dụ

Check out this headline!

sẽ gây ra một tiêu đề cụ thể trên một. trang html xuất hiện ở màu tím, phông chữ 40 point

Nói chung, biểu định kiểu bên ngoài là phương pháp hiệu quả nhất để triển khai CSS trên trang web (việc theo dõi và triển khai kiểu trang web từ tệp CSS chuyên dụng sẽ dễ dàng hơn), trong khi biểu định kiểu bên trong và kiểu nội tuyến có thể được sử dụng trong trường hợp

Vì vậy, nếu HTML là nền tảng, khung, tường và dầm hỗ trợ trang web của bạn, hãy xem CSS là màu sơn, kiểu cửa sổ và cảnh quan xuất hiện sau đó. Bạn không thể đạt được bất cứ điều gì mà không đặt nền tảng đó lên trước, nhưng —một khi bạn làm vậy — bạn sẽ muốn theo đuổi một số phong cách và CSS là tấm vé để giải phóng công cụ trang trí bên trong của bạn. Điều gì tiếp theo sau khi bạn trở thành bậc thầy về CSS?

📌 Tái bút – Nếu bạn muốn tìm hiểu thêm về CSS, phát triển giao diện người dùng hoặc thiết kế web, Skillcrush có thể giúp bạn đạt được điều đó. Khóa học Break Into Tech của chúng tôi là một chương trình toàn diện được thiết kế để giúp những người mới bắt đầu trong lĩnh vực công nghệ bắt đầu một sự nghiệp mới và viên mãn

Công nghệ có phù hợp với bạn không?

Bạn sẽ học. Nghề công nghệ có phù hợp với bạn không Nghề công nghệ nào phù hợp với thế mạnh của bạn Bạn cần có những kỹ năng gì để đạt được mục tiêu của mình

Scott Morris

Scott Morris là nhà văn và nhà sản xuất nội dung của Skillcrush. Giống như tất cả các thành viên trong nhóm của Skillcrush, anh ấy làm việc từ xa (trong trường hợp của anh ấy là từ Napa, CA). Anh ấy tin rằng nội dung đáng đọc (và khán giả của bạn có thể tìm thấy. ) tạo thương hiệu mà mọi người theo dõi. Anh ấy có kinh nghiệm viết về các chủ đề bao gồm việc làm và công nghệ, tiếp thị kỹ thuật số, trục xoay nghề nghiệp, bình đẳng giới, nuôi dạy con cái và văn hóa đại chúng. Trước khi bắt đầu sự nghiệp của mình với tư cách là một nhà văn và nhà tiếp thị nội dung, anh ấy đã dành 10 năm làm cha mẹ toàn thời gian cho hai cô con gái Veronica và Athena

CSS có còn được sử dụng ngày nay không?

Các đề xuất w3c hiện tại cho việc sử dụng biểu định kiểu là gì?

Tại sao biểu định kiểu hữu ích?

Tiêu chuẩn mới nhất trong biểu định kiểu là gì?