Hướng dẫn how do i connect python and html? - làm cách nào để kết nối python và html?
Khi bạn muốn xây dựng các trang web như một lập trình viên Python, thì không có cách nào xung quanh HTML và CSS. Hầu như mọi trang web trên internet đều được xây dựng với đánh dấu HTML để cấu trúc trang. Để làm cho một trang web trông đẹp, bạn có thể tạo kiểu HTML với CSS.HTML markup to structure the page. To make a website look nice, you can style HTML with CSS. Show
Nếu bạn quan tâm đến việc phát triển web với Python, thì việc biết HTML và CSS sẽ giúp bạn hiểu các khung web như Django và Flask tốt hơn. Nhưng ngay cả khi bạn chỉ bắt đầu với Python, HTML và CSS cũng có thể cho phép bạn tạo các trang web nhỏ để gây ấn tượng với bạn bè.Django and Flask better. But even if you’re just getting started with Python, HTML and CSS can enable you to create small websites to impress your friends. Trong hướng dẫn này, bạn sẽ học cách:
Bạn sẽ nhận được lời giới thiệu về HTML và CSS mà bạn có thể theo dõi cùng với. Trong suốt hướng dẫn này, bạn sẽ xây dựng một trang web với ba trang và kiểu dáng CSS:
Trong khi tạo dự án web, bạn sẽ tạo ra một tài liệu HTML Boilerplate mà bạn có thể sử dụng trong các dự án web sắp tới của mình. Bạn có thể thấy rằng mã nguồn sẽ có ích khi bạn làm việc trong các dự án trong tương lai. Bạn có thể tải xuống tại đây: Sau khi tìm hiểu những điều cơ bản của HTML và CSS, bạn sẽ tìm thấy ý tưởng về cách tiếp tục hành trình của mình ở cuối hướng dẫn. Tạo tệp HTML đầu tiên của bạnHãy nghĩ về bất kỳ trang web nào mà bạn đã truy cập gần đây. Có thể bạn đọc một số tin tức, trò chuyện với bạn bè hoặc xem video. Bất kể loại trang web nào, bạn có thể đặt cược rằng mã nguồn của nó có thẻ 0 cơ bản ngay từ đầu.HTML là viết tắt của ngôn ngữ đánh dấu siêu văn bản. HTML được tạo bởi Tim Berners-Lee, người có tên cũng có thể vang lên tiếng chuông cho bạn với tư cách là người phát minh ra thế giới trên toàn thế giới.HyperText Markup Language. HTML was created by Tim Berners-Lee, whose name might also ring a bell for you as the inventor of the World Wide Web. Phần siêu văn bản của HTML đề cập đến việc xây dựng các kết nối giữa các trang HTML khác nhau. Với các siêu liên kết, bạn có thể nhảy giữa các trang và lướt web.hypertext part of HTML refers to building connections between different HTML pages. With hyperlinks, you can jump between pages and surf the Web. Bạn sử dụng đánh dấu để cấu trúc nội dung trong một tài liệu. Trái ngược với định dạng, đánh dấu xác định ý nghĩa của nội dung chứ không phải nó trông như thế nào. Trong phần này, bạn sẽ tìm hiểu về các yếu tố HTML và vai trò của chúng.markup to structure content in a document. In contrast to formatting, the markup defines the meaning of content and not how it looks. In this section, you’ll learn about HTML elements and their roles. Viết mã HTML ngữ nghĩa sẽ giúp tài liệu của bạn có thể truy cập được cho nhiều khách truy cập. Rốt cuộc, bạn muốn cho phép mọi người tiêu thụ nội dung của bạn, cho dù họ có truy cập trang của bạn bằng trình duyệt hoặc sử dụng các công cụ đọc màn hình.semantic HTML code will make your documents accessible for a wide range of visitors. After all, you want to enable everybody to consume your content, whether they’re visiting your page with a browser or using screen reading tools. Đối với mỗi phần tử HTML, có một tiêu chuẩn xác định mục đích sử dụng của nó. Ngày nay, các tiêu chuẩn của HTML được xác định bởi Nhóm làm việc công nghệ ứng dụng siêu văn bản Web (Whatwg). Whatwg đóng vai trò tương tự cho HTML như Hội đồng lái Python làm cho Python. Khoảng 95 phần trăm các trang web sử dụng HTML, vì vậy bạn sẽ khó có thể tránh được nếu bạn muốn thực hiện bất kỳ công việc phát triển web nào trong Python. Trong phần này, bạn sẽ bắt đầu bằng cách tạo tệp HTML đầu tiên của mình. Bạn sẽ học cách cấu trúc mã HTML của mình để làm cho nó có thể đọc được cho trình duyệt của bạn và cho con người. Tài liệu HTMLTrong phần này, bạn sẽ tạo một tệp HTML cơ bản. Tệp HTML sẽ chứa cấu trúc cơ sở mà hầu hết các trang web được xây dựng. Để bắt đầu mọi thứ, hãy tạo một tệp có tên 1 bằng một số văn bản:
Theo truyền thống, tệp đầu tiên của trang web của bạn được gọi là 1. Bạn có thể nghĩ về trang 1 giống như tệp 4 hoặc 5 trong một dự án Python.Cho đến nay, nội dung duy nhất của 1 là chuỗi 7 đơn giản. Bạn đã thêm bất kỳ cú pháp HTML nào, ngoại trừ nhận xét HTML trên dòng 1. Tương tự như trình thông dịch Python không thực hiện nhận xét trong mã Python của bạn, trình duyệt đã giành được nội dung của các bình luận HTML của bạn. Tuy nhiên, hãy tiếp tục và mở 1 trong trình duyệt của bạn:HTML comment on line 1. Similar to the Python interpreter not executing comments in your Python code, the browser won’t render the contents of your HTML
comments. Still, go ahead and open 1 in your browser:Trình duyệt của bạn hiển thị văn bản mà không phàn nàn. Có vẻ như trình duyệt có thể xử lý một tệp HTML, ngay cả khi dấu hiệu duy nhất của nó là phần mở rộng. Điều đó tốt để biết, nhưng hành vi này cũng có một nhược điểm. Các trình duyệt sẽ luôn cố gắng hiển thị các tài liệu HTML, ngay cả khi cú pháp HTML của tài liệu của bạn không hợp lệ. Rất hiếm khi, bản thân trình duyệt sẽ cho bạn thấy một cái gì đó giống như một cú pháp, tương tự như những gì Python làm khi bạn cố gắng chạy mã không hợp lệ. Điều này có nghĩa là bạn có thể không nhận thấy nếu bạn đã vận chuyển mã không hợp lệ, điều này có thể gây ra sự cố cho khách truy cập trang web của bạn. Cập nhật 1 và tạo tài liệu HTML hợp lệ tối thiểu bằng cách thêm mã bên dưới:
Mã này là tài liệu HTML hợp lệ tối thiểu nhất mà bạn có thể nhận được. Nói đúng ra, bạn thậm chí có thể bỏ thuộc tính 0 trong dòng 4. Nhưng việc thêm phần phụ ngôn ngữ phù hợp được khuyến nghị để khai báo ngôn ngữ tự nhiên mà tài liệu của bạn chứa.attribute in line 4. But adding the right language subtag is recommended to declare which natural language your document contains.Tại gốc của nó, bất kỳ tài liệu HTML nào mà bạn xây dựng có thể sẽ tuân theo cấu trúc của ví dụ trên. Nhưng có một yếu tố HTML quan trọng bị thiếu. Mở 1 và thêm 2 bên dưới 3:
Bất kỳ tệp HTML hợp lệ nào cũng phải bắt đầu với khai báo doctype. Trong hướng dẫn này, bạn sẽ sử dụng 4, cho biết trình duyệt rằng tài liệu chứa mã HTML5 và sẽ hiển thị trang của bạn ở chế độ tiêu chuẩn:doctype declaration. In this tutorial, you’ll be using 4, which tells the browser that the document contains HTML5 code and should render your page in standard mode:
Sau khi tuyên bố doctype, bạn có thẻ 0 mở. Trong dòng 12, bạn có thể tìm thấy thẻ 6 đóng tương ứng. Hầu hết các yếu tố trong HTML đều có thẻ mở, một số nội dung ở giữa và thẻ đóng ở cuối. Những phần này thậm chí có thể nằm trên cùng một dòng, như phần tử 7 trong dòng 7.opening tag, some content in between, and a closing tag at the end. These parts can even be on the same line, like the 7 element in line 7.Các yếu tố khác, như 8 trong dòng 6, don lồng có thẻ đóng phù hợp, vì vậy chúng không chứa bất kỳ nội dung nào. Những yếu tố trống này là các yếu tố khoảng trống. Chúng đứng độc lập và thậm chí có thể không chứa các thuộc tính. Một ví dụ như vậy là 9 trong dòng 10, tạo ra một ngắt dòng.empty
elements are so-called void elements. They stand independently and may not even contain attributes. One such example is 9 in line 10, which creates a line break.Thẻ HTML bắt đầu bằng khung góc ( 0) và kết thúc bằng khung góc ( 1). Các tên thẻ ở giữa các khung góc thường khá mô tả và nêu phần tử HTML có nghĩa là gì. Một ví dụ điển hình là 7 trong dòng 7, trong đó nội dung xác định tiêu đề của trang của bạn.Khối 2 chứa khối lượng nội dung của bạn. Bạn có thể nghĩ 2 là một phần của tài liệu HTML mà bạn có thể tương tác trong trình duyệt của mình.Đôi khi các tên thẻ được viết tắt, giống như phần tử ngắt dòng 9 trong dòng 10. Để có được cái nhìn tổng quan về các tên thẻ HTML khác, hãy truy cập tham chiếu các phần tử HTML Mozilla.Khi bạn đã làm quen với cấu trúc của tài liệu HTML của mình, hãy tải lại 1 trong trình duyệt của bạn và xem trang web của bạn trông như thế nào:Tuyệt vời, bạn hiện đang hiển thị nội dung của trang web thích hợp đầu tiên của bạn! Có một cơ hội tốt là bạn sẽ bắt đầu bất kỳ dự án web nào với cấu trúc như dự án mà bạn đã xây dựng trong phần này. Để lưu cho mình một số công việc trong tương lai, bạn có thể tải xuống mã Boilerplate HTML bằng cách nhấp vào liên kết bên dưới: Trong phần tiếp theo, bạn sẽ cải thiện cấu trúc cơ sở mà bạn đã tạo ra cho đến nay. Để khám phá lý do tại sao HTML được gọi là ngôn ngữ đánh dấu, bạn sẽ thêm nội dung và cấu trúc vào trang web của mình. Định dạng khoảng trắng và văn bảnĐánh dấu duy nhất mà tài liệu HTML của bạn có cho đến nay là bộ xương cơ sở của trang web của bạn. Bây giờ, thời gian để lặn sâu hơn và cấu trúc một số nội dung thực sự. Để có một cái gì đó để làm việc, hãy thêm văn bản bên dưới vào khối 2 của 1:
Khi bạn mở trang web trong trình duyệt của mình, có vẻ như trình duyệt đã không nhận ra bất kỳ khoảng trắng nào. Mặc dù bạn đã phân phối nội dung của mình trên nhiều dòng bên trong 2, trình duyệt hiển thị mọi thứ như một dòng liên tục:Là một nhà phát triển Python, bạn biết rằng khoảng trắng là một thành phần quan trọng để viết mã Python tuyệt đẹp. Việc thụt mã mã Python của bạn tạo ra sự khác biệt trong cách Python thực thi mã của bạn. Không có bất kỳ điều chỉnh bổ sung nào, các trình duyệt sụp đổ nhiều không gian, ngắt dòng hoặc thụt vào một ký tự không gian. Để định dạng nội dung của bạn khác nhau, bạn phải cung cấp thêm thông tin cho trình duyệt. Đi trước và cấu trúc 1 bằng cách thêm thẻ HTML vào nội dung của bạn:
Bằng cách gói văn bản của bạn trong các khối HTML, bạn cung cấp cho trình duyệt thông tin bổ sung về ý định của bạn cho nội dung. Đầu tiên, hãy xem các yếu tố HTML bao bọc các khối văn bản lớn hơn:
Danh sách được đặt hàng, thường được hiển thị dưới dạng danh sách được đánh số 8Một số yếu tố HTML mà bạn đã sử dụng ở trên chỉ chứa văn bản. Những người khác chứa các yếu tố HTML bổ sung cấu trúc nội dung hơn nữa:
Tất cả các thẻ HTML truyền đạt ý nghĩa. Do đó, nó cực kỳ quan trọng để chọn cẩn thận đánh dấu nào bạn sử dụng cho các phần nội dung của bạn. Khi bạn sử dụng ngữ nghĩa phù hợp, thì bạn sẽ cho phép mọi người tiêu thụ nội dung của mình theo cách mà bạn dự định. Bạn làm cho trang web của bạn có thể truy cập được cho tất cả:
Một số yếu tố HTML khá đơn giản. Đối với các đoạn văn, bạn sử dụng 2. Các yếu tố khác khó nắm bắt hơn một chút:Kushagra Gour cung cấp một bản tóm tắt tuyệt vời trong mục blog của mình Strong vs em:
Nói cách khác, 0 có nghĩa là bạn sẽ nhấn mạnh từ này trong khi nói. Ví dụ, nếu ai đó nói, thì bạn không có vẻ xấu, bạn có thể tự hỏi, nhưng tôi có mùi hôi không? Vị trí của sự nhấn mạnh là chìa khóa cho ý nghĩa của câu.Ví dụ, nếu bạn chỉ muốn thu hút sự chú ý của người đọc vào một phần từ vựng, thì bạn có thể muốn sử dụng 9 thay thế.Khi nghi ngờ, don lồng ngần ngại tìm kiếm tên HTML trên web. Bạn sẽ tìm thấy các cuộc thảo luận và ghi chú sử dụng về bất kỳ yếu tố HTML nào. Ngoài ra, phong cách HTML mặc định của trình duyệt của bạn có thể tạo ấn tượng tốt bằng cách tạo kiểu các yếu tố khác nhau: Với Markup, bạn thêm ý nghĩa vào nội dung trang web của bạn. Viết HTML chính xác về mặt ngữ nghĩa rất quan trọng để hiểu nội dung của bạn. Sử dụng ngữ nghĩa thích hợp trong tài liệu HTML của bạn không chỉ hữu ích cho trình duyệt. Nó cũng làm cho trang HTML được hiển thị có thể truy cập được cho người dùng tiêu thụ nội dung của bạn bằng phần mềm văn bản thành giọng nói. Nếu bạn muốn tìm hiểu thêm về HTML hiện đại, thì bác sĩ HTML5 là một nguồn tài nguyên tuyệt vời. Để tìm hiểu thêm về khả năng truy cập, bạn có thể kiểm tra khóa học của Google về việc làm cho tất cả mọi người có thể truy cập được. Liên kết, hình ảnh và bảngNhảy từ trang web này sang trang khác là một phần thiết yếu của internet. Các tài liệu tham khảo này được gọi là siêu liên kết, thường được gọi là liên kết. Không có liên kết, các trang web sẽ tồn tại trong một silo và bạn chỉ có thể truy cập chúng nếu bạn biết địa chỉ web.hyperlinks, commonly referred to as links. Without links, websites would exist in a silo, and you could only access them if you knew the web address. Ngoài ra, bạn sẽ có thể điều hướng giữa nhiều trang của một trang web nếu bạn không có liên kết kết nối các trang. Để kết nối các tài liệu HTML mà bạn đã tạo cho đến nay, hãy thêm menu điều hướng vào mã nguồn HTML của bạn:
Với yếu tố 3, bạn khai báo một phần cung cấp điều hướng. Bên trong 3, bạn thêm một liên kết với thẻ 5, viết tắt cho neo. Thuộc tính 6 là viết tắt của tham chiếu siêu văn bản, chứa mục tiêu liên kết.Hypertext Reference, containing the link’s target. Với các liên kết tương đối, bạn có thể tham chiếu các tệp trong cây thư mục của mình. Bạn có thể mong đợi được xem một URL bất cứ khi nào bạn có một liên kết, nhưng điều đó không phải là trường hợp có liên kết tương đối.relative links, you can reference files in your directory tree. You may expect to see a URL whenever you have a link, but that’s not the case with relative links. Trong trường hợp này, bạn liên kết đến một tệp có tên 7. Trình duyệt hiểu rằng nó có thể tìm thấy 7 trong cùng một thư mục và hoàn thành URL đầy đủ cho bạn. Bằng cách đó, bạn không cần phải lo lắng về việc thay đổi bất kỳ đường dẫn tuyệt đối nào khi bạn quyết định triển khai dự án web của mình tại một số điểm.Cho đến nay, 7 không tồn tại. Để sửa lỗi này, hãy tạo một tệp mới có tên 7 bên cạnh 1:
Cấu trúc của 7 tương tự như 1. Nội dung của 2 trong 7 gần như giống hệt với phần thực tế ngẫu nhiên của 1, ngoại trừ việc bạn đã thay đổi tiêu đề và di chuyển nó lên một cấp độ là 1.Ở đầu 2, bạn cũng có một yếu tố 3. Tuy nhiên, lần này, bạn có liên kết đến 1.Tiếp theo, hãy tạo một thư mục mới có tên 01 bên trong thư mục dự án của bạn và thêm một tệp có tên 02:
Bạn sẽ thêm một số hình ảnh vào 02 trong một khoảnh khắc. Nhưng trước tiên, hãy xem các dòng 11 và 12, nơi bạn liên kết đến các trang khác của mình.Vì 1 và 7 là một thư mục trên 02, bạn phải tiền tố mục tiêu liên kết với hai dấu chấm ( 07) và một dấu gạch chéo (____108).Để có quyền truy cập thuận tiện hơn, bạn cũng có thể thêm một liên kết vào bộ sưu tập của mình trong menu điều hướng là 1:
Bạn cũng có thể liên kết đến bộ sưu tập của mình trong 7:
Nếu bạn thêm một liên kết vào một trang HTML, thì bạn luôn phải suy nghĩ về việc điều hướng ở đó từ tệp mà bạn có thể ở ngay bây giờ. Tệp 02 là một thư mục dưới 1 trong một thư mục có tên 01. Vì vậy, khi bạn liên kết đến 02, thì bạn cần đưa thư mục con vào liên kết, mà bạn đã làm ở trên.Liên kết tương đối rất hữu ích cho việc liên kết các trang trang web của bạn. Khi bạn muốn thêm các liên kết bên ngoài, thì bạn sử dụng các liên kết tuyệt đối:absolute links: 0Thay vì liên kết với các tệp HTML, bạn sẽ liên kết với các địa chỉ web tuyệt đối trong danh sách các trang web yêu thích của bạn. Các liên kết này là cùng một liên kết mà bạn đã nhập vào thanh địa chỉ trình duyệt của bạn. Nhảy vào trình duyệt và điều hướng xung quanh trang web của bạn với các liên kết mà bạn vừa thêm vào:
Các liên kết aren chỉ hữu ích cho việc kết nối các trang của trang web của bạn, họ là một phần quan trọng của cơ sở hạ tầng Internet. Nếu bạn muốn tìm hiểu thêm về các liên kết, thì hãy xem hướng dẫn neo HTML này. Một yếu tố quan trọng khác của web là hình ảnh. Nếu không có khả năng chia sẻ hình ảnh kỳ nghỉ và gif mèo, internet sẽ buồn tẻ. Bạn đính kèm hình ảnh vào tài liệu HTML của mình với phần tử 15 chứa thuộc tính 16. Giống như với 6 trong một liên kết, bạn tham chiếu nguồn hình ảnh trong 16. Ngoài ra, bạn phải luôn luôn sử dụng thuộc tính 19 để thêm văn bản thay thế mô tả hình ảnh. Bằng cách đó, bạn làm cho trang web của bạn có thể truy cập được cho những người sử dụng đầu đọc màn hình.Cập nhật 02 và liên kết đến ba hình ảnh: 1Bạn sẽ tìm thấy hình ảnh bầu trời bên trong thư mục 01 sau khi tải xuống các tài liệu bằng cách nhấp vào mã bên dưới:Nếu bạn sử dụng hình ảnh của riêng mình, thì bạn cần điều chỉnh tên tệp phù hợp. Đừng quên cập nhật văn bản 19 để mô tả nội dung của hình ảnh để làm cho hình ảnh của bạn có thể truy cập được.Văn bản 19 có thể so sánh rộng rãi với các tài liệu trong Python. Trong khi một tài liệu có thể mô tả mục đích của một đối tượng, văn bản 19 mô tả nội dung của một hình ảnh. Giống như một tài liệu, một văn bản 19 sẽ kết thúc bằng một dấu chấm ( 26).Thêm thông tin bổ sung vào hình ảnh của bạn là công việc thêm, nhưng nó đáng để làm. Nếu có một con chó dễ thương trong một bức tranh, mọi người đều xứng đáng được biết rằng có một con chó dễ thương trong hình. Trong trường hợp bạn cần bất kỳ sự thuyết phục nào, hãy truy cập các văn bản alt: Hướng dẫn cuối cùng trên Axess Lab. Khi bạn mở 02 trong trình duyệt, trang của bạn sẽ trông tương tự như thế này:Hình ảnh là một cách tuyệt vời để làm cho trang web của bạn hấp dẫn trực quan hơn. Tuy nhiên, bộ sưu tập hình ảnh là một chút ở khắp mọi nơi và không có bất kỳ kiểu dáng bổ sung nào, trang web trông khá cũ. Nó thời gian để thay đổi điều đó! Trong phần tiếp theo, bạn sẽ thêm các quy tắc kiểu dáng vào HTML của mình và kiểm soát tốt hơn cách các yếu tố trên trang web của bạn trông. Kiểu nội dung của bạn với CSSKhi bạn mở một tệp HTML đơn giản trong trình duyệt, trình duyệt sẽ thêm một số kiểu dáng theo mặc định. Đó là lý do tại sao bạn có thể phân biệt các yếu tố trong phần trước mặc dù bạn đã không thêm bất kỳ kiểu dáng nào. Đó về cơ bản là một dịch vụ từ trình duyệt đến bạn như một con người. Nhưng nói đúng ra, khi bạn viết HTML, bạn chỉ xác định đánh dấu của trang web của mình. Pure HTML không cung cấp bất kỳ kiểu dáng nào cho các yếu tố trên trang của bạn. Để các yếu tố phong cách, bạn cần thêm CSS. CSS là viết tắt của các bảng phong cách xếp tầng. Như bạn sẽ thấy sau này, bạn có thể kết hợp và làm tổ các quy tắc kiểu CSS của mình, do đó tên là bảng kiểu xếp tầng.Cascading Style Sheets. As you’ll see later, you can combine and nest your CSS styling rules, hence the name cascading style sheets. Giống như HTML, nó là một công nghệ nền tảng của Internet. Nó giúp bạn phân tách giao diện trang web của bạn khỏi nội dung thực tế:
Trong phần này, bạn sẽ học cách kiểm soát kiểu dáng trang web của bạn bằng cách thêm CSS. Thêm màu vào trang web của bạnCho đến nay, bạn chỉ sử dụng trình duyệt để tải tệp HTML của mình. Nhưng trình duyệt web là công cụ mạnh mẽ và chúng có thể giúp bạn rất nhiều khi bạn phát triển một trang web. Bạn có thể điều tra bất kỳ trang web nào với ngăn công cụ nhà phát triển của trình duyệt của bạn. Đặc biệt là khi bạn làm việc với CSS, các công cụ nhà phát triển trình duyệt của bạn có ích:
Lưu ý rằng những thay đổi trong các công cụ nhà phát triển của bạn không còn tồn tại. Khi bạn tải lại trang của mình, tất cả các thay đổi đã biến mất. Vì vậy, một khi bạn hài lòng với các điều chỉnh kiểu của mình, bạn cần sao chép và dán mã vào thẻ 28 trong tệp HTML của bạn.Mở 1 và thêm phần tử 28 bên trong 3: 2Với phần tử 28, bạn có thể thêm mã CSS vào tài liệu HTML của mình. Mặc dù các trình duyệt không nghiêm ngặt về nó, nhưng bạn chỉ nên đặt phần tử 28 bên trong 3. Mặt khác, trình duyệt có thể cố gắng hiển thị các phần tử trước khi áp dụng bất kỳ quy tắc CSS nào, điều này có thể gây ra đèn flash của nội dung không được định hướng.Nội dung của 28 là mã HTML, nhưng CSS. Với CSS, bạn xác định các quy tắc về cách tạo kiểu các yếu tố trên trang.Với các bộ chọn, bạn xác định những yếu tố bạn muốn nhắm mục tiêu, theo sau là một khối khai báo. Trong mã CSS ở trên, bạn đã sử dụng các bộ chọn loại để nhắm mục tiêu 2 và tất cả các yếu tố 5. Bạn sẽ sử dụng một số loại bộ chọn CSS khác sau này trong hướng dẫn. Nếu bạn muốn tìm hiểu thêm về các bộ chọn CSS, thì hãy truy cập trang của Mozilla CSS CSS.selectors, you define which elements you want to target, followed by a declaration block. In the CSS code above, you’re using
type selectors to target 2 and all 5 elements. You’ll use some other kinds of CSS selectors later in the tutorial. If you want to learn more about CSS selectors already, then head over to Mozilla’s CSS selectors page.Khối khai báo được phân định bằng một nẹp mở ( 38) và nẹp đóng ( 39). Bạn phân tách các khai báo bên trong một khối với dấu chấm phẩy ( 40). Bản thân tuyên bố được cấu trúc thành hai phần:
Tài sản và giá trị được phân tách bằng một dấu hai chấm ( 41). Trong ví dụ trên, bạn đã thay đổi màu nền của 2 thành màu xanh đậm và văn bản thành màu xám rất nhạt bằng cách chỉ định các giá trị RGB của chúng. Trong quy tắc CSS thứ hai, bạn đã tô màu tất cả các liên kết trong một màu cá hồi hiện đại.Màu sắc là một phần quan trọng của việc kiểm soát giao diện của trang web của bạn. Trong CSS, bạn có nhiều cách mô tả một màu. Bạn có thể kiểm tra Smashing Magazine Hướng dẫn về màu sắc CSS hiện đại để mở rộng kiến thức của bạn về việc sử dụng màu sắc trong CSS. Bên cạnh việc lựa chọn màu sắc, bạn có thể thay đổi bộ mặt trang web của mình bằng phông chữ. Bạn đã thay đổi màu sắc của văn bản. Tiếp theo, điều chỉnh kích thước văn bản của 43 với thuộc tính 44: 3Với 45, bạn bảo trình duyệt hiển thị văn bản lớn hơn 46 lần so với kích thước phông chữ của phần tử cha. Phần tử cha của 2 là 0, do đó, văn bản sẽ được hiển thị lớn hơn 46 lần so với kích thước phông chữ mặc định trong trình duyệt. Kích thước phông chữ mặc định thường là mười sáu pixel, vì vậy văn bản sẽ được hiển thị ở kích thước khoảng hai mươi mốt pixel.Bạn có thể xác định kích thước phông chữ trực tiếp với pixel. Tuy nhiên, nó phổ biến để sử dụng tỷ lệ phần trăm hoặc 0 cho kích thước văn bản:
Quay lại khi bạn phải đúc các chữ cái vào các khối kim loại, chữ M thường lấy toàn bộ chiều rộng ngang của khối đúc. Trong CSS, bạn cũng có thể sử dụng 0 cho độ dài dọc và nó là một đơn vị tốt để tạo ra các thiết kế có thể mở rộng. Điều đó có nghĩa là người dùng của bạn có thể phóng to trên trang web của bạn mà không phá vỡ thiết kế. Điều này rất quan trọng khi người dùng muốn tăng kích thước phông chữ để đọc nội dung của bạn tốt hơn hoặc khi họ truy cập trang web của bạn từ thiết bị di động.Pixels và 0 chỉ là hai trong số nhiều đơn vị chiều dài trong CSS mà bạn có thể sử dụng. Khi bạn bắt đầu tập trung vào việc thiết kế trang web của mình, nó đáng để xem các đơn vị này và chơi xung quanh với các loại đơn vị khác nhau.Bên cạnh kích thước của văn bản, phông chữ mà bạn hiển thị văn bản là một nền tảng khác tác động đến thiết kế trang web của bạn rất nhiều. Thay đổi phông chữPhông chữ là một công cụ phi thường để thay đổi đặc tính của tài liệu của bạn. Khi sử dụng phông chữ trên trang web của bạn, bạn có hai tùy chọn:
Với một trong hai tùy chọn, đó là một ý tưởng tốt để xác định một ngăn xếp phông chữ. Khi bạn liệt kê nhiều phông chữ cho 53, trình duyệt sau đó cố gắng tải các phông chữ từ trái sang phải:font stack. When you list more than one font for 53, the browser then tries to load the fonts from left to right: 4Khi bạn khai báo một ngăn xếp phông chữ như được hiển thị ở trên, đầu tiên trình duyệt cố gắng tải kiểu chữ Helvetica. Nếu trình duyệt có thể tìm thấy một phông chữ trong ngăn xếp phông chữ, thì nó tiếp tục bằng cách cố gắng tải phông chữ dự phòng tiếp theo. Trong trường hợp này, trình duyệt sẽ tải bất kỳ phông chữ Sans-serif nào nếu không có Helvetica và Arial có mặt.fallback font. In this case, the browser will load any sans-serif font if neither Helvetica nor Arial is present. Chọn phông chữ phù hợp với dự án của bạn là một khởi đầu tốt để làm cho nội dung của bạn trở nên dễ hiểu. Nhưng hãy nhớ rằng bên cạnh phông chữ, có những yếu tố khác ảnh hưởng đến mức độ dễ đọc của các văn bản của bạn. Bạn có thể chơi xung quanh với giao diện và cảm nhận của kiểu chữ web của bạn bằng cách điều chỉnh kích thước phông chữ, chiều cao dòng và màu sắc. Các văn bản của bạn càng dễ đọc, chúng càng dễ tiếp cận cho mọi người! Mở 1 trong trình duyệt của bạn và xem phông chữ nào hiển thị cho bạn:Bạn có thể sử dụng các công cụ phát triển trình duyệt của bạn để điều tra phông chữ nào đã được tải. Điều gì sẽ xảy ra nếu nó không Helvetica hay Arial? Hy vọng các ý kiến dưới đây và cho cộng đồng Python thực sự biết phông chữ nào của bạn tải! Nếu bạn muốn có nhiều quyền kiểm soát hơn đối với phông chữ được hiển thị, thì bạn cần tải các phông chữ Web tùy chỉnh. Cách sử dụng @font-face trong CSS là một hướng dẫn tuyệt vời về việc triển khai các phông chữ Web tùy chỉnh trên trang web của bạn. Với CSS mà bạn đã thêm vào HTML của mình, bạn chỉ làm trầy xước bề mặt thiết kế trang web của mình. Có những cách gần như vô hạn để tạo kiểu cho nội dung của bạn với CSS. Nếu bạn muốn lặn sâu hơn, thì bạn có thể kiểm tra tài liệu tham khảo của Mozilla CSS. Tách biệt mối quan tâm của bạnBạn đã thêm mã CSS từ phần trước trực tiếp vào 1 với sự trợ giúp của phần tử 28. Nếu bạn muốn tạo kiểu 7 theo cùng một cách, thì bạn sẽ cần sao chép và dán mã.Là một nhà phát triển Python, bạn biết rằng sao chép và dán mã không phải là ý tưởng tốt nhất. Bạn kết thúc với cùng một mã ở hai nơi, điều này làm cho việc cập nhật mã của bạn cồng kềnh. Trong mã Python của bạn, bạn có thể nhập các mô -đun để ngăn chặn việc lặp lại chính mình. HTML cung cấp chức năng tương tự để tải tài nguyên bên ngoài vào mã HTML của bạn. Điều này cho phép bạn tải một tệp CSS bên ngoài và tham khảo bảng kiểu này từ các tệp HTML của bạn.style sheet from your HTML files. Tạo một tệp mới có tên 58 bên cạnh 1 và 7. Sau đó, cắt nội dung của 28 từ 1 và dán nó vào 58: 5Lưu ý rằng tệp CSS của bạn chỉ chứa các khai báo CSS. Trong một tệp CSS, bạn không cần thẻ 28 mà bạn đã sử dụng để bọc mã CSS của mình trong 1.Ngoài ra, hãy phát hiện cú pháp của các bình luận CSS trong dòng 1. Một dấu gạch chéo phía trước theo sau là dấu hoa thị ( 66) cho thấy sự bắt đầu của một bình luận. Bạn có thể phân phối nhận xét CSS trên nhiều dòng. Bạn đóng bình luận với một dấu hoa thị khác, sau đó là một chém về phía trước ( 67).CSS comments in line 1. A forward slash followed by an
asterisk ( 66) indicates the start of a comment. You can distribute a CSS comment over multiple lines. You close the comment with another asterisk followed by a forward slash ( 67).Bây giờ bạn có thể tham khảo 58 trong đầu tệp 1 của bạn: 6Phần tử 70 tương tự như thẻ neo ( 5). Nó cũng chứa một thuộc tính 6 xác định liên kết. Tuy nhiên, nó là một yếu tố trống chỉ chứa các thuộc tính và giành được một siêu liên kết có thể nhấp.Thêm liên kết 73 vào 7: 7Để phản ánh những thay đổi trong 02, hãy thêm liên kết tương đối vào 58: 8Hãy nhớ rằng 58 là một thư mục trên 02, nằm trong thư mục 01 của bạn. Vì vậy, thay vì chỉ liên kết với 58, bạn phải liên kết đến 81.Khi bạn đã cập nhật các tài liệu tham khảo CSS, hãy xem các trang của bạn trong trình duyệt:
Tất cả các trang của bạn có chung kiểu dáng. Khi bạn thay đổi mã CSS trong 58, bạn có thể thấy các thay đổi xuất hiện trên tất cả các trang.Là một nhà phát triển web Python, bạn có thể cần phải viết một chút HTML tốt trong các dự án web. Tuy nhiên, đối với CSS, nó khá phổ biến khi sử dụng các khung CSS bên ngoài để chăm sóc thiết kế của bạn.CSS frameworks to take care of your design. Khung CSS cung cấp cho bạn mã CSS làm sẵn. Để sử dụng khung CSS để có toàn bộ lợi thế của mình, bạn có thể cần điều chỉnh mã HTML của mình để tuân thủ quy tắc của nó. Nhưng một khi bạn đã quen với khung CSS, nó có thể giúp bạn tiết kiệm công việc của các yếu tố HTML kiểu dáng rõ ràng trong thời gian dài. Một trong những khung CSS phổ biến nhất là Bootstrap. Bạn cũng sẽ bắt gặp Simple.css hoặc Bulma, bao gồm trong các hướng dẫn thực sự của Python về việc quản lý danh sách việc cần làm của bạn và tạo một ứng dụng Flashcards. Bạn có thể thêm các bảng kiểu CSS bên ngoài, không cục bộ giống như bảng kiểu địa phương của bạn với phần tử 70. Nếu bạn tham khảo nhiều hơn một bảng kiểu trên trang web của bạn, đặt hàng có vấn đề. Bạn sẽ điều tra hành vi này trong một khoảnh khắc.Đầu tiên, hãy tiếp tục và thêm một liên kết biểu định kiểu khác vào các trang HTML của bạn. Ở đây, mã ví dụ cho 1: 9Như C trong CSS ngụ ý, bạn cũng có thể xếp tầng theo phong cách. Khi bạn mở 1 trong trình duyệt của mình, bạn có thể thấy rằng thiết kế đã thay đổi:Bạn đã kết hợp các quy tắc phong cách của 58 địa phương của bạn và 87 bên ngoài. Chơi xung quanh với thứ tự của cách bạn tải các bảng kiểu bên ngoài. Khi bạn tải lại các trang của mình, bạn sẽ phát hiện ra rằng sự xuất hiện của trang web của bạn thay đổi.Tương tự như các biến ghi đè trong Python, các thuộc tính CSS ghi đè lên nhau. Nói chung, giá trị cuối cùng mà áp dụng cho một yếu tố chiến thắng. Trong phần này, bạn đã học được rằng bạn có thể sử dụng một bảng kiểu bên ngoài thay vì phần tử 28. Thậm chí còn có một cách thứ ba để thêm các quy tắc CSS vào HTML của bạn. Bạn có thể sử dụng thuộc tính 89 HTML cho các phần tử HTML kiểu. Điều này được gọi là kiểu CSS Inline.inline CSS styling.Rõ ràng hơn trong việc kết nối các khai báo CSS của bạn với các yếu tố HTML cụ thể có thể cung cấp cho bạn sự kiểm soát mà bạn cần để hoàn thiện thiết kế của mình. Trong phần tiếp theo, bạn sẽ học cách tạo kiểu các yếu tố linh hoạt hơn với các lớp CSS. Sử dụng các lớp để linh hoạt hơnCác quy tắc CSS mà bạn đã đặt cho đến nay chỉ nhắm mục tiêu các yếu tố HTML chung. Nhưng bạn có thể cụ thể hơn nhiều với mã CSS của mình khi đặt quy tắc cho các thuộc tính HTML. Thêm thuộc tính 90 vào phần tử HTML cho phép bạn sử dụng các bộ chọn lớp CSS vào các phần tử kiểu dựa trên các giá trị lớp của chúng.CSS class selectors to style elements based on their class values.Một đặc điểm thiết yếu của các lớp CSS là chúng cho phép bạn nhóm các yếu tố chung và áp dụng một bộ quy tắc cho tất cả chúng trong một lần, và sau đó có khả năng cập nhật chúng trong khi vẫn giữ phong cách nhất quán. Ví dụ: bạn có thể xác định một lớp áp dụng góc tròn cho hình ảnh. Nhưng thay vì nhắm mục tiêu tất cả các yếu tố hình ảnh bằng cách sử dụng tên 91, bạn có thể gán một lớp chỉ cho những hình ảnh nên có các góc tròn. Điều này cung cấp cho bạn lợi thế bổ sung là có thể thêm các góc tròn vào các yếu tố khác bằng cách cung cấp cho họ cùng một lớp.Để tìm hiểu cách các bộ chọn lớp CSS hoạt động, hãy điều chỉnh mã trong 02 để có vẻ như thế này: 0Đầu tiên, hãy nhớ thêm một liên kết đến các bảng phong cách bên ngoài của bạn. Don Tiết quên dành hai dấu chấm để liên kết đến 81 vì bảng kiểu là một thư mục trên 02.Sau đó, bạn sẽ gói các yếu tố 15 trong một khối 96. Phần tử 96 là một yếu tố chung để cấu trúc trang của bạn. Nó không chứa bất kỳ ý nghĩa ngữ nghĩa nào và bạn chỉ nên sử dụng nó khi không có thẻ HTML nào khác phù hợp hơn để sử dụng.Bạn cũng thêm các thuộc tính 90 vào các phần tử HTML của bạn. Trong dòng 14, bạn thậm chí còn chuỗi các lớp trong một danh sách phân tách không gian. Điều này có nghĩa là bạn áp dụng hai lớp CSS cho phần tử 96. Ngược lại, các phần tử 15 trong các dòng 15 đến 17 chỉ chứa một lớp CSS.Để tạo các lớp, hãy đến 58 và thêm mã CSS này: 1Bạn đề cập đến các lớp CSS trong thuộc tính HTML 90 mà không có dấu chấm ( 26). Tuy nhiên, trong mã CSS của bạn, bạn phải thêm một dấu chấm ở đầu bộ chọn để chỉ định rằng bạn đang nhắm mục tiêu các thuộc tính 90. Nếu bạn muốn đọc thêm về các bộ chọn CSS, thì hãy truy cập tài liệu của Mozilla CS CSS.Trong các dòng 6 và 7, bạn đặt các quy tắc cho 05, giống như nền trong suốt một phần và phần đệm 06 để thêm không gian vào tất cả các mặt bên trong phần tử phòng trưng bày.Với bộ chọn 07, bạn cung cấp cho tất cả các phần tử HTML chứa lớp này một góc tròn với bán kính mười lăm pixel.Bạn thậm chí có thể chuỗi các bộ chọn CSS của mình như bạn làm trong dòng 14. Với danh sách bộ chọn được phân tách không gian 08, bạn đã thêm một quy tắc cho tất cả các phần tử 91 bên trong phần tử HTML với lớp 10. Với các khai báo CSS của bạn trong các dòng 15 và 16, bạn cung cấp cho họ một khoảng trống ở phía bên phải với 11 và làm cho hình ảnh phòng trưng bày rộng 150 pixel.Với các thuộc tính 12, 13 và 14, bạn xác định khoảng cách của các yếu tố CSS. Bạn có thể nghĩ về các yếu tố này như các hộp có một không gian nhất định xung quanh chúng và không gian bên trong chúng nơi lưu trữ nội dung. Khái niệm này được gọi là mô hình hộp:box model:
Nếu bạn muốn đi sâu hơn vào CSS, thì hãy tìm hiểu về mô hình hộp là chìa khóa. Bạn có thể theo dõi Mozilla, Học cách tạo kiểu HTML bằng cách sử dụng hướng dẫn CSS để hiểu rõ hơn về tất cả các khối xây dựng mà CSS chứa. Bạn có thể cất cánh từ đây và khám phá thế giới đánh dấu và thiết kế mà HTML và CSS cung cấp. Nhưng đặc biệt là với HTML, bạn sẽ sớm nhận thấy rằng đó là một ngôn ngữ rất dài dòng và có thể rất cồng kềnh khi viết nó bằng tay. Đó là nơi mà bạn có thể để các kỹ năng của mình như một nhà phát triển Python tỏa sáng. Trong phần tiếp theo, bạn sẽ tìm hiểu làm thế nào Python có thể giúp bạn làm việc với các tệp HTML hiệu quả hơn. Xử lý HTML với PythonLà một nhà phát triển Python, bạn biết rằng Python có thể là một công cụ tuyệt vời để tự động hóa các nhiệm vụ mà bạn có thể cần phải làm bằng tay. Đặc biệt là khi làm việc với các tệp HTML lớn, sức mạnh của Python có thể giúp bạn tiết kiệm một số công việc. Lập trình viết htmlVới tất cả các thẻ mở và đóng, HTML có thể cồng kềnh để viết. May mắn thay, Python là hoàn hảo để giúp bạn lập trình tạo các tệp HTML lớn. Trong phần này, bạn sẽ mở rộng 7 để hiển thị thêm thông tin về biểu tượng cảm xúc yêu thích của bạn. Thay thế danh sách đã đặt hàng bằng một bảng: 2Bạn xác định một bảng HTML với phần tử 16 và các hàng bảng với 17. Giống như một cái bàn trong bảng tính, các bảng HTML có thể có đầu bàn và thân bàn. Mặc dù sử dụng 18 và 19 là bắt buộc đối với một bảng hoạt động, nhưng đó là một thực tế tốt để thêm chúng vào đánh dấu bảng của bạn.Trong đầu bảng của bạn, bạn xác định ba cột bảng bằng cách thêm ba phần tử 20 vào hàng đầu tiên.Cơ thể bảng chứa cùng một số cột và một hoặc nhiều hàng. Đối với các ô dữ liệu bảng, bạn sử dụng cùng một phần tử 21 như bạn làm trong tiêu đề bảng.Bảng biểu tượng cảm xúc liệt kê ba biểu tượng cảm xúc yêu thích của bạn với các mô tả Unicode của họ. Tất nhiên, không ai chỉ có ba biểu tượng cảm xúc yêu thích! Ngay cả với một số vừa phải như mười hai biểu tượng cảm xúc yêu thích, nó cũng khó chịu khi tạo ra bảng HTML bằng tay. Vì vậy, bạn thêm Python vào hỗn hợp! Tạo một tệp Python mới có tên 22 trong thư mục dự án của bạn và để Python thực hiện công việc cho bạn: 3Với sự trợ giúp của mô-đun 23 tích hợp và 24, Python có thể lập trình một bảng biểu tượng cảm xúc cho bạn.Chạy 22 trong thiết bị đầu cuối của bạn, sao chép mã HTML và dán nó vào 7: 4Với 22, giờ đây bạn có thể mở rộng bảng biểu tượng cảm xúc HTML của mình để bao gồm tất cả các biểu tượng cảm xúc yêu thích của bạn.Nếu bạn muốn làm cho bảng của bạn trông tốt hơn một chút, thì bạn có thể thêm kiểu dáng bổ sung với lớp giả 28 trong 58: 5Các bảng HTML là một cách tuyệt vời để cấu trúc dữ liệu bảng trên trang web của bạn. Bạn có thể xem tài liệu Mozilla, về các bảng HTML và bảng kiểu dáng để tìm hiểu thêm về việc làm việc với các bảng trong HTML. Mặc dù 22 giúp bạn xây dựng các bảng lớn hơn, nhưng nó vẫn là một quá trình phức tạp. Hiện tại, bạn cần sao chép đầu ra đầu ra vào tệp HTML của mình. Đó không phải là lý tưởng.Nhưng bây giờ, thời gian để khám phá những cách khác mà Python có thể giúp bạn với mã HTML của bạn. Tạo các thực thể HTML với PythonHTML đi kèm với một danh sách lớn các tài liệu tham khảo ký tự được đặt tên mà bạn có thể sử dụng để mã hóa các văn bản của mình trong HTML. Vì vậy, ví dụ, bạn có thể viết dấu hiệu tiền tệ Euro là thực thể HTML 31 thay vì ký tự UTF-8 32.HTML entity 31 instead of the
UTF-8 32 character.Trong quá khứ, các ký tự mã hóa như thế này rất quan trọng vì không có cách nào để gõ chúng trực tiếp. Với sự ra đời của mã hóa ký tự UTF-8, thay vào đó, bạn có thể sử dụng ký tự UTF-8 thực tế. Hầu hết thời gian, điều đó thậm chí còn được đề xuất bởi vì nó dễ đọc hơn. Tuy nhiên, có những tình huống mã hóa HTML là sự lựa chọn tốt hơn. Theo nguyên tắc thông thường, bạn sử dụng các thực thể HTML khi ký tự:
Lấy các ký tự khoảng trắng, ví dụ. Có hai mươi lăm ký tự khoảng trắng được liệt kê trong cơ sở dữ liệu ký tự Unicode. Một số trong số chúng trông giống hệt nhau, như không gian thông thường ( 33) và không gian không phá vỡ ( 34). Trực quan, các không gian không thể phân biệt được. Nhưng khi bạn có một cái nhìn vào mã nguồn của trang này, bạn sẽ thấy rằng cái sau được thoát ra như là thực thể HTML của nó, 35:Nếu bạn muốn hiển thị thẻ HTML trên tài liệu HTML, bạn cũng cần thoát các ký tự như khung góc mở ( 0) và khung góc đóng ( 1). Một lần nữa, hãy xem mã nguồn của hướng dẫn này và lưu ý cách thoát khỏi khung góc:Các giá đỡ góc mở được thoát ra là 38. Đóng khung góc được thoát ra như 39.Để xem danh sách đầy đủ các thực thể HTML, bạn có thể tận dụng mô-đun 40 tích hợp của Python:>>> 6Mô -đun 41 của 40 xác định bốn từ điển. Một trong số đó là 43, ánh xạ các tham chiếu ký tự có tên HTML cho các đối tác ký tự Unicode của họ.Với 44, bạn có thể tìm thấy tên thực thể HTML của một ký tự:>>> 7Mô -đun 41 của 40 xác định bốn từ điển. Một trong số đó là 43, ánh xạ các tham chiếu ký tự có tên HTML cho các đối tác ký tự Unicode của họ.Với 44, bạn có thể tìm thấy tên thực thể HTML của một ký tự:Codepoint của đồng euro ( 1
2
3
4
5
6
7 |