Áp dụng các kiểu trong html. Bao gồm CSS trong mã html. Bao gồm một tệp CSS riêng biệt

Chúng ta đã biết rằng để trang web trông đẹp và phong cách, chúng ta cần phải làm việc với tệp CSS. Và để áp dụng phong cách của chúng tôi, chúng tôi cần kết hợp tập tin HTML và một tệp CSS.

Có một số tùy chọn để thực hiện thao tác này: sử dụng các biểu định kiểu lồng nhau, các biểu định kiểu bên ngoài và kiểu nội tuyến.

Hôm nay chúng ta sẽ nói về phương pháp thứ hai.

Đưa kiểu vào thẻ HTML

Bản chất phương pháp này là chúng tôi triển khai thiết kế cần thiết bên trong thẻ. riêng biệt thuộc tính - phong cách. Thuộc tính này có thể được áp dụng vào bất kỳ thẻ nào, nhưng chỉ trong phần nội dung của trang web, nghĩa là trong cơ thể. Giá trị của thuộc tính này là toán tử của các kiểu cần được áp dụng cho một phần tử nhất định.

Ví dụ: hãy đặt kích cỡ khác nhau phông chữ cho hai đoạn văn bản khác nhau:

< p style= "font-size:25px;" >Đặt đoạn văn bản này có chiều cao chữ cái là 25 pixel. < p style= "cỡ chữ:15px; màu:#2400ff;"> Và văn bản này sẽ có các chữ cái, cao 15 pixel và chúng tôi cũng sẽ tô màu xanh lam cho nó để thể hiện việc sử dụng nhiều kiểu cùng một lúc.

sai sót

Ví dụ này thể hiện một cách hoàn hảo cách kiểu dáng như vậy làm tắc nghẽn mã trang.

Bạn cũng có thể lưu ý thêm một số nhược điểm khi sử dụng kỹ thuật cách điệu này. Đầu tiên trong số đó là sự phổ biến về phong cách trong toàn bộ tài liệu, điều này trong tương lai việc chỉnh sửa sẽ làm phức tạp quá trình này một cách đáng kể.

Việc định dạng số lượng lớn văn bản cũng sẽ gặp khó khăn. Tôi nghĩ không ai hài lòng với viễn cảnh chỉ định cỡ chữ cho mỗi đoạn văn, đặc biệt nếu có 40 đoạn văn như vậy.

Ngay cả khi sử dụng các kiểu dựng sẵn, cũng không thể sử dụng các lớp giả, điều này đến một mức độ lớn ràng buộc bàn tay của một nhà thiết kế web.

Cũng cần lưu ý đến sự nhầm lẫn chắc chắn sẽ xuất hiện khi sử dụng thuộc tính style. Sự nhầm lẫn này sẽ phát sinh do việc sử dụng dấu ngoặc kép khác nhau khi thêm kiểu.

Để rõ ràng, chúng ta hãy xem ví dụ dưới đây:

< div style= "họ phông chữ: "Roboto Condensed", sans-serif"> Mục nhập là chính xác. < div style= "họ phông chữ: "Roboto Condensed", sans-serif"> Điều đó cũng đúng. < div style= "font-family: " Roboto Condensed ", sans-serif" >Đây không phải là một mục chính xác. < div style= "font-family: " Roboto Condensed ", sans-serif" >Và điều này cũng không đúng

Nhìn vào các tính toán được cung cấp ở trên, kết luận hợp lý cho thấy rằng việc sử dụng các kiểu cài sẵn có liên quan đến một số phức tạp và bất tiện đáng kể.

Khi nào nên sử dụng kiểu nội tuyến

Bất chấp tất cả những thiếu sót, phong cách tích hợp không được phát minh ra một cách vô ích. Quản trị viên web thường sử dụng chúng trong trường hợp gán phong cách có lập trình. Ví dụ: hãy xem mã này

< div id= "productRate" > < div style= "width: 40%" >

Việc ghi lại chiều rộng cần thiết cho khối này sẽ là một thao tác đơn giản.

Tình huống tương tự có thể xảy ra nếu cần thay thế hình nền (ví dụ) của người dùng bằng vai trò quản trị viên. Trong trường hợp này thẻ img có thể không phù hợp. Vì vậy, đáng để tham khảo thuộc tính style:

< div style= "background:url(fon.jpg)" >

Ngoài ra, các lập trình viên thường chuyển sang các kiểu có sẵn khi tạo cửa sổ bật lên. Thông thường quá trình này diễn ra như sau: khối có thiết kế đang được thực hiện được gán display:block và các cửa sổ còn lại được ẩn bằng cách sử dụng display:none để chúng không ảnh hưởng trực quan đến công việc của lập trình viên. Đây là một ví dụ:

< div class = "element" style= "display:block" >Cửa sổ bật lên hiện đang được thiết kế

Điểm mấu chốt

Việc sử dụng các style tích hợp đi kèm với một số khó khăn, bất tiện, tuy nhiên, trong quá trình thiết kế một số thành phần nhất định, các webmaster thường hướng tới phương pháp này để tối ưu hóa công việc của mình.

Hãy cùng tìm hiểu Cascading Style Sheets là gì, chúng là gì nhé kiểu CSS và tìm hiểu cách thiết lập nó cho các phần tử HTML.

Qua bài viết này bạn đã hiểu rõ về ngôn ngữ đó đánh dấu siêu văn bảnđược sử dụng để mô tả nội dung của một trang web. Khi di chuyển trên Internet, chúng tôi nhận thấy rằng các trang trông khác nhau: màu sắc, phông chữ, khoảng cách dòng khác nhau, hinh nên và thậm chí cả hoạt hình. Không cần gác lại, tôi muốn giải thích ngay cho bạn rằng giao diện của những trang này sẽ bị ảnh hưởng bởi những trang được sử dụng. Cascading Style Sheets (Cascading Style Sheets - CSS). Ở trong hướng dẫn HTML Chúng ta sẽ xem xét ngắn gọn cách sử dụng các biểu định kiểu xếp tầng, bạn có thể nghiên cứu chúng một cách chi tiết sau khóa học này trong phần Hướng dẫn CSS.

Phong cách là gì? Bộ phong cách vẻ bề ngoài bất kỳ phần tử trang nào, tức là đại khái, đây là một quy tắc cho trình duyệt biết cách định dạng yếu tố cụ thể(ví dụ: thay đổi màu nền hoặc màu phông chữ).

Mỗi phần tử HTML có phong cách mặc định. Việc thay đổi kiểu dáng mặc định của phần tử HTML có thể được thực hiện bằng thuộc tính chung phong cách. Thuộc tính chỉ định được xây dựng trong (nội tuyến) Kiểu CSS cho phần tử. CSS nội tuyến được sử dụng để áp dụng kiểu dáng độc đáo cho một phần tử HTML. Với mục đích học HTML, chúng ta sẽ chỉ xem xét việc sử dụng CSS nội tuyến.

Gợi ý: Ví dụ này sử dụng các màu sau: trắng(trắng), kaki(kaki), xám(xám). Phông chữ được sử dụng cho văn bản của bài thơ là Verdana.

Nếu bạn gặp khó khăn khi hoàn thành nhiệm vụ, hãy kiểm tra mã trang bằng cách mở ví dụ trong một cửa sổ riêng bằng cách nhấp vào hình ảnh.