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 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) 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 với ví dụ là gì?

Sự khác biệt giữa HTML và CSS là gì?

3 loại CSS là gì?

Tại sao chúng tôi sử dụng CSS thay vì HTML?