Không cần phải nói, phát triển web là rất lớn. Một phần lớn trong số đó là vì hầu hết mọi người đều ở trên Web. Tuy nhiên, có sự thiếu hụt các nhà phát triển trong lĩnh vực này và đó là lý do tại sao chương trình giảng dạy phát triển web rất sẵn có và cũng miễn phí. Với ý nghĩ đó, chúng tôi sẽ cho bạn thấy một chút về HTML và CSS là gì. Cụ thể hơn, chúng tôi sẽ cho bạn thấy cách thức hoạt động của các lớp học.
Chúng tôi không bắt đầu bạn từ đầu, vì đã có rất nhiều chương trình giảng dạy miễn phí ngoài kia. Thay vào đó, chúng tôi đặc biệt sẽ chỉ cho bạn cách các lớp hoạt động, vì đó là một thành phần cần thiết để tạo kiểu cho trang web của bạn. Chúng tôi cũng nghĩ rằng nó có thể có giá trị trước khi chúng tôi đăng cái nhìn của chúng tôi về API Bootstrap của Twitter, vì các lớp cũng là một thành phần bắt buộc.
Như một từ chối trách nhiệm, nếu bạn hoàn toàn mới với HTML và CSS, đây có lẽ không phải là một khởi đầu tốt cho bạn. Nếu bạn quen thuộc với nó, mặc dù vậy, nó không quá khó để chọn. Nhưng, nếu bạn đang tìm kiếm một hướng dẫn cho người mới bắt đầu hoàn chỉnh, có rất nhiều lựa chọn tuyệt vời trực tuyến. Để đặt tên cho một số ít, có FreeCodeCamp, Dự án Odin, CodeAcademy, Code School, Team Treehouse, Udacity, và nhiều hơn nữa. Nếu bạn chọn bắt đầu đào sâu vào một trong số đó, tôi rất khuyên bạn nên gắn bó với một (như Free Code Camp) và hoàn thiện nó trước khi bắt đầu một cái khác, vì rất nhiều nội dung cơ bản của Drake có thể lặp đi lặp lại.
Ngoài ra, hãy tìm hiểu về các lớp học.
Lớp học hoạt động như thế nào
Các lớp học cực kỳ hữu ích. Họ lấy sự lặp đi lặp lại của kiểu dáng HTML. Nếu không có các lớp, bạn sẽ tạo kiểu riêng cho từng thành phần trong đánh dấu của bạn. Và nếu bạn có hai yếu tố giống nhau, nhưng muốn tạo kiểu cho mỗi yếu tố khác nhau thì sao? Nó sẽ là một mớ hỗn độn. Đó là lý do tại sao chúng tôi có các lớp học. Các lớp thêm một số cấu trúc tổ chức HTML của bạn, cho phép bạn giữ mã của mình tương đối sạch sẽ. Không chỉ vậy, nhưng các lớp có thể được sử dụng nhiều lần. Nói cách khác, bạn sẽ không bao giờ phải tạo cùng một quy tắc tạo kiểu hai lần.
Đây là những lớp học trông như thế nào trong chúng ta
nhãn:
Như bạn có thể thấy, dưới thẻ cơ thể của chúng tôi, chúng tôi có hai
các yếu tố với các lớp khác nhau. Đầu tiênThẻ này có lớp class head11 trong khi thẻ thứ hai có lớp Head2 .viết Vì vậy, trong CSS của chúng tôi, thay vì áp dụng kiểu dáng cho chỉyếu tố, chúng ta có thể áp dụng kiểu dáng cho các lớp riêng lẻ. Tại sao chúng ta muốn làm điều đó?
yếu tố, chúng ta có thể áp dụng kiểu dáng cho các lớp riêng lẻ. Tại sao chúng ta muốn làm điều đó?
Lý do chính là bạn không muốn tất cả
các yếu tố để có cùng kiểu dáng. Nó sẽ tạo ra rất nhiều vấn đề đau đầu khi tạo một trang web và ngoài ra, các trang web sẽ trông rất tuyệt vời. Các lớp cho phép chúng ta áp dụng kiểu dáng cho chỉ một thể hiện của thẻ, không phải tất cảthẻ trên tài liệu. Vì vậy, làm thế nào để bạn viết một lớp trong HTML? Như thế này:
Một số nội dung
Bạn có thể thêm thuộc tính của lớp lớp Wikipedia vào hầu hết mọi phần tử HTML.
Tuyệt quá! Vì vậy, chúng tôi có các lớp, nhưng ở trạng thái hiện tại, họ không thực sự làm gì cả. Đó là bởi vì chúng tôi chưa thêm bất kỳ quy tắc tạo kiểu nào vào lớp. Để làm điều đó, chúng ta sẽ cần tạo một tài liệu .css riêng. Tôi sẽ gọi nó là main.css. Trong tài liệu đó, chúng tôi sẽ tạo kiểu cho một lớp như thế này:
Để chọn một lớp chúng tôi muốn tạo kiểu, chúng tôi làm điều này:
.head1 {màu: đỏ; văn bản-align: trung tâm; }
Trong các dấu ngoặc nhọn là tất cả các quy tắc của người Viking (hoặc kiểu dáng) mà chúng ta áp dụng cho lớp đó. Có rất nhiều quy tắc khác nhau mà bạn có thể đặt trong lớp đó. Trong trường hợp của tôi, tôi đã thay đổi màu sắc của văn bản thành màu đỏ bằng cách sử dụng quy tắc Màu sắc của Wap và tôi đã căn giữa văn bản bằng cách sử dụng quy tắc văn bản-canh lề văn bản. Bạn có thể tìm thấy một danh sách đầy đủ các quy tắc CSS cũng như tài liệu của họ từ Mạng lưới nhà phát triển của Mozilla.
Bây giờ, kiểu dáng của chúng tôi vẫn chưa được áp dụng cho các lớp trong tài liệu HTML của chúng tôi và đó là vì chúng tôi chưa liên kết hai tệp với nhau. Quay trở lại tệp HTML của bạn và trong
thẻ, bạn sẽ muốn liên kết tệp CSS của mình bằng cách này:
Tài liệu HTML của bạn sẽ trông như thế này:
Và dự án thử nghiệm của bạn sẽ giống như thế này trên Web:
Để xem video chi tiết hơn về các bước này, vui lòng xem bên dưới.
Video
Phần kết luận
Và đó là tất cả các lớp học! Chúng thực sự đơn giản để hiểu. Rõ ràng trên các trang web lớn và phổ biến mà bạn truy cập, các quy tắc trong các lớp phức tạp hơn nhiều so với những gì chúng tôi đề cập, nhưng ở dạng cơ bản nhất, đó là cách chúng hoạt động.
Nếu bạn có bất kỳ câu hỏi hoặc gặp khó khăn trong thời gian dài, hãy chắc chắn cho chúng tôi biết trong các ý kiến dưới đây hoặc trên Diễn đàn PCMech! Hoặc, nếu bạn quan tâm đến một hướng dẫn dành cho người mới bắt đầu HTML / CSS hoàn chỉnh trên PCMech, hãy chắc chắn cho chúng tôi biết điều đó!
