So sánh cách bố trí bảng và khối. Cái nào tốt hơn: bố trí khối hay bảng? Bố trí bảng hay khối, cái nào tốt hơn?
Trong hai năm qua, tất cả những gì tôi nghe được từ (các) khách hàng là anh ấy muốn tạo bố cục thiết kế trang web hiện tại của mình bằng cách sử dụng các khối. Những thứ kia. anh ta cần bố cục khối được xây dựng trên DIV và CSS. Nhưng mã này có thực sự tốt như vậy không? Tôi đã suy nghĩ về điều này trong một thời gian dài. Tôi phải tạo nhiều trang web khác nhau, nhiều trang trong số đó được trình bày bằng cách sử dụng bảng, khối hoặc lựa chọn thứ ba khối và bảng.
Theo tôi, ưu điểm của bố cục khối so với bố cục dạng bảng là rõ ràng:
- kích thước nhỏ của mã HTML so với bảng
- các tham số và đặc điểm chính của các khối được lưu trữ trong một tệp CSS riêng biệt, được trình duyệt lưu vào bộ nhớ đệm hoàn hảo và không yêu cầu tải liên tục.
- khả năng đặt nội dung chính ở đầu trang (trong chính mã), nhưng hiển thị nó trên màn hình ở bất kỳ điểm nào, ngay cả ở cuối trang. chỉ cần thiết lập các tham số thích hợp cho khối.
Nhưng cùng với những ưu điểm dường như này, một số vấn đề và bất lợi nảy sinh liên quan đến chính quy trình bố cục khối và với việc hiển thị nó trong các trình duyệt khác nhau (Đặc biệt là các vấn đề phát sinh với Internet Explorer 6).
Nhược điểm chính, điều mà bạn cũng nên chú ý đến:
- Viết mã hoạt động chính xác trong tất cả các trình duyệt và sau đó hiển thị trang chính xác đòi hỏi nhiều thời gian hơn so với khi sử dụng bố cục bảng
- Đôi khi mã được viết ra lớn hơn nhiều so với dự kiến ban đầu, điều này xảy ra do có nhiều điều chỉnh, điều chỉnh, hack hoặc các kiểu viết bổ sung cho từng trình duyệt riêng lẻ
- Thường thì bạn phải sử dụng JavaScript hoặc các thư viện như jQuery, những thư viện này cũng không mang lại hiệu quả tốt nhất cho toàn bộ trang web. Trang có thể không hiển thị chính xác nếu trình duyệt của người dùng không hỗ trợ thực thi JS hoặc chức năng này bị tắt.
- Một lần nữa, liên quan đến một trình duyệt có vấn đề như IE6. Trong bố cục khối, tham số định vị nổi (trái hoặc phải) thường được sử dụng; các khối thường bắt đầu nhảy và bò bên dưới nhau khi kích thước trang (cửa sổ trình duyệt) thay đổi. Người ta cũng nhận thấy rằng khi mọi thứ hoạt động tốt trong IE Thử nghiệm (6), thì bản thân IE6 đã có đầy đủ các sai sót.
- Thường cần phải sử dụng thêm hình ảnh để tô lên hoặc điều chỉnh nền. Ví dụ: khi khối điều hướng không thể kéo dài toàn bộ chiều cao của trang đến chân trang, một phương pháp được sử dụng để vẽ các cột sai - Cột giả
- Ngoài ra, chi phí của công việc như vậy thường cao hơn chi phí bố trí bàn ăn.
Kết quả cuối cùng và thời gian dành cho nó thường có thể không hợp lý. Vì lý do này, tôi nghĩ bạn nên suy nghĩ cẩn thận về cách bạn sẽ bố trí, sử dụng phương pháp gì?
Xin chào các độc giả thân mến, trong số này chúng ta sẽ nói về các kiểu bố cục. Có lẽ tất cả các bạn đã nghe nói về bố cục khối và dạng bảng, hôm nay tôi muốn nói về hai cách tiếp cận khác nhau đối với bố cục trang web. Trong bài viết trước, tôi đã mô tả cách bảo vệ thư điện tử, trước đó chúng ta đã xem xét một ví dụ cụ thể về một cửa hàng sử dụng thành phần virginmart hiện đại cho CMS miễn phí j Joomla.
Bài viết này sẽ hữu ích cho những nhà phát triển web mới bắt đầu bước vào con đường chông gai của “người xây dựng trang web” và muốn tự làm trang web. Các nhà phát triển web có kinh nghiệm cũng sẽ có thể học hỏi được điều gì đó cho mình; cụ thể, bài viết so sánh Ưu điểm và nhược điểm của cách bố trí bảng và khối.
Có lẽ chúng ta nên bắt đầu với bố cục trang web là gì? Nhà thiết kế bố cục nhận được bố cục của trang web trong tương lai từ nhà thiết kế; theo quy định, bố cục được cung cấp ở định dạng Photoshop. Bố cục thực chất là một bản vẽ, chỉ chi tiết hơn, trong đó các thành phần riêng lẻ (menu, tiêu đề trang web...) được tách thành các lớp, điều này xảy ra một cách tự nhiên khi người thiết kế vẽ bố cục, hơn nữa, nó rất thuận tiện, bạn có thể dễ dàng sao chép bản vẽ từ lớp mong muốn, xem thông số phông chữ, v.v. Vì vậy, bản chất của bố cục là chuyển đổi bố cục thành tài liệu HTML và biên dịch một bộ quy tắc CSS.
Cần lưu ý rằng bố cục là một quá trình sáng tạo, tất nhiên không giống như vẽ bố cục trong Photoshop, tuy nhiên, vẫn có một phần tính sáng tạo trong việc này, đặc biệt là ở giai đoạn đầu; sau đó, với kinh nghiệm ngày càng tăng, quá trình bố trí có thể được cơ giới hóa. Chất lượng của bố cục được đánh giá bằng cách bố cục của trang web khác với bố cục như thế nào.
Các kiểu bố cục
Như đã nêu trong tiêu đề bố cục có thể là khối hoặc dạng bảng. Trong bố cục khối, các thành phần trang web được cấu trúc bằng các khối (div), trong bố cục dạng bảng, chúng được thực hiện bằng bảng (bảng).Bố trí bảng
Bố trí bảngđược sử dụng vào thời kỳ đầu của việc xây dựng trang web, nó rất phổ biến đối với các nhà phát triển web mới vào nghề. Cần lưu ý rằng nhiều quản trị viên web hiện nay vẫn thực hiện khá hiệu quả việc bố trí bảng, như người ta nói - công việc của bậc thầy thật đáng sợ. Cá nhân tôi thích bố cục khối hơn bố cục dạng bảng, nhưng chúng ta không nói về thị hiếu ở đây. Ý tưởng dựa trên việc trình bày trang web dưới dạng bảng. Như bạn đã biết, phần lớn các trang web đều có cấu trúc tiêu chuẩn có thể được trình bày chi tiết cho một nhiệm vụ cụ thể. Chúng ta hãy xem một trang web điển hình làm ví dụ.
chứa tiêu đề, vùng nội dung, thanh bên phải và chân trang, đây là cấu trúc đơn giản của blog của tôi. Chúng tôi thực hiện cấu trúc này với một bảng
| một cái mũ | |
| nội dung | thanh bên |
| chân trang | |
bảng phải được đặt ở một chiều rộng cố định cụ thể nếu bố cục có chiều rộng cố định hoặc 100% nếu bố cục linh hoạt, trong trường hợp đó, bảng sẽ trải dài theo chiều rộng của màn hình tùy thuộc vào độ phân giải của màn hình.
Ưu điểm và nhược điểm của cách bố trí bảng:
- Dễ hiểu, không yêu cầu kiến thức sâu hơn về HTML và CSS (+)
- Trực quan để xây dựng, quy tắc CSS tối thiểu (+)
- Rất khó để hiểu mã HTML với cấu trúc trang web phức tạp hơn (- )
- Cho đến khi toàn bộ bảng được tải, nó sẽ không hiển thị trên màn hình (-)
- Thiết kế phức tạp với các yếu tố chồng chéo không thể thực hiện được (-)
- Rất nhiều mã không cần thiết (-)
Chúng ta hãy xem xét kỹ hơn ở điểm 4. Thực tế là các bảng HTML được thiết kế theo cách mà trình duyệt không thể biết trước cách vẽ bảng với nội dung của nó cho đến khi nó được tải; cho đến khi hình ảnh cuối cùng trong bảng được tải, bảng sẽ không được hiển thị trên màn hình. màn hình trình duyệt , điều này có thể khiến người dùng rời khỏi trang web mà không đợi trang hiển thị vì khách truy cập không nhìn thấy bất kỳ thứ gì trên màn hình trong một thời gian. Có vẻ như trang web đang chậm lại nhưng trên thực tế, trình duyệt đang đợi cho đến khi tất cả các thành phần của bảng được tải.
bố trí khối
Bố cục khối dựa trên thực tế là các thành phần khối HTML thường được sắp xếp theo chiều dọc, từ trên xuống dưới, lần lượt theo thứ tự xuất hiện trong mã HTML. Ngoài ra, các khối có thể có đặc tính nổi ( nổi:trái | đúng | không | thừa kế). Nếu bạn chỉ định thuộc tính float:left cho một khối thì nó sẽ được căn chỉnh sang trái và tất cả các khối khác sẽ bỏ qua nó, như thể khối này không tồn tại, ngoại trừ văn bản, các khối khác được đặt thành cùng một thuộc tính sẽ nổi xung quanh nó ở bên phải, cho phép chiều rộng của màn hình hoặc phần tử mà chúng nằm trong đó càng nhiều càng tốt. Cần lưu ý rằng bất kỳ phần tử nào cũng có thể được tạo thành khối bằng cách đặt thuộc tính display:block cho nó, ban đầu chỉ các phần tử div được coi là phần tử khối theo mặc định, đối với các phần tử không phải khối ( span, p ) thuộc tính float bị bỏ qua và các phần tử như vậy vẫn được sắp xếp tuần tự từ trên xuống dưới như thường lệ. Để đảm bảo thuộc tính float không bị bỏ qua, bạn phải đặt thuộc tính display:block của các phần tử.float:right sẽ căn chỉnh khối sang bên phải và tất cả các khối khác sẽ bỏ qua nó hoặc di chuyển xung quanh nó nếu cùng một thuộc tính được đặt cho chúng và nếu hai hoặc nhiều khối có thuộc tính được chỉ định xuất hiện liên tiếp trong mã, thì khối đến trước sẽ được đặt đầu tiên ở bên phải trong mã, phần còn lại sẽ bao quanh khối đó ở bên trái.
Thuộc tính float:none hủy hiệu ứng nổi cho khối, nhưng điều này không có nghĩa là khối sẽ được định vị như bình thường từ trên xuống dưới, nếu khối có hiệu ứng nổi nằm ở phía trên thì khối bên dưới sẽ bỏ qua khối phía trên. one và sẽ đứng dưới nó, do đó không cần phải chỉ định điều này cho thuộc tính khối này clear:both . Ôi, khó nhỉ? Thoạt nhìn thì có vẻ như vậy nhưng thực ra mọi thứ đều logic và đơn giản, bạn chỉ cần thực hành.
float:inherit - đặt thuộc tính nổi, giống như thuộc tính của khối cha (khối mà khối con này được lồng vào).
Chúng ta cần những ví dụ cụ thể, hóa ra tôi thấy nó không thuyết phục. Hãy tạo một ví dụ đơn giản, đầu tiên là một hình nền, một khối màu đỏ có chiều rộng 400 px. chiều cao 350px. và căn chỉnh nó ở giữa màn hình.
Bây giờ bạn cần thêm một vài khối nữa vào khối này, màu xanh lá cây và màu xám với chiều cao và chiều rộng là 100 px, khối màu xám có chiều cao là 120 px.
Có thể thấy, các khối được sắp xếp theo dòng chung từ dưới lên trên, theo thứ tự xuất hiện trong mã, đầu tiên là màu xanh lá cây, sau đó là màu xám và cuối cùng là màu xanh lam. Hãy đặt khối màu xanh lá cây thành float:left để các khối màu xám và xanh lam bỏ qua nó.
Như bạn có thể thấy, khối màu xám bỏ qua khối màu xanh lá cây và đứng bên dưới nó, khối màu xanh lá cây, như thể tự nó, khối màu xanh xếp hàng sau khối màu xám. Hãy thiết lập một luồng xung quanh tất cả các khối.
Có thể thấy các khối được xếp lần lượt theo thứ tự xuất hiện trong mã. Hãy thử đặt hai khối ở phía sau khối kia và khối thứ ba ở dưới như thường lệ. Để làm điều này, bạn cần loại bỏ thuộc tính float:left khỏi khối thứ ba, nhưng điều này là chưa đủ vì nó sẽ bò xuống dưới hai khối đầu tiên, như chúng ta đã thấy trước đó. Để ngăn điều này xảy ra, bạn cần đặt thuộc tính clear:both cho khối thứ ba;
Đây là cấu trúc mà chúng tôi có; khi thiết lập chiều rộng của các khối, chúng tôi đã tính đến thực tế là khung hình là 1 pixel. tăng kích thước khối, do đó kích thước tiêu đề được đặt thành 398 pixel. không phải 400 pixel.
Ưu điểm và nhược điểm của cách bố trí khối:
- Trọng lượng trang ít hơn do ít mã (+)
- Thực hiện thiết kế phức tạp với các khối chồng chéo (+)
- Khó thành thạo, bố cục bảng dễ hơn (-)
- Chúng tôi thường xuyên phải giải quyết các vấn đề trên nhiều trình duyệt hơn. các khối có thể chồng lên nhau khi thay đổi độ phân giải màn hình, chia tỷ lệ (-)
Cá nhân tôi bắt đầu với bố cục bảng, bây giờ tôi sử dụng bố cục khối, tôi đã thành thạo nó từ lâu, nó rất dễ dàng, mặc dù nó có một số nhược điểm nhưng tôi đã quen hơn và dễ sử dụng bố cục khối hơn.
Chỉ vậy thôi quý độc giả thân mến, hãy quay lại thường xuyên nhé.
Bản dịch được trình bày dưới đây đặc biệt dành cho độc giả Habr.
CSS tuyệt vời như vậy nhưng việc triển khai các nguyên tắc cơ bản về bố cục trang vẫn chưa đủ. Tuy nhiên, các tùy chọn bổ sung để tạo các trang động hơn đã bắt đầu xuất hiện.
Sau nhiều năm hứa hẹn, CSS3 cuối cùng đã mang lại kiểu dáng. Nó đã bổ sung một bộ công cụ hoàn toàn mới vào kho vũ khí của chúng tôi, cung cấp cho chúng tôi các góc tròn, độ chuyển màu, độ trong suốt, chuyển đổi thành phần, hoạt ảnh và nhiều hơn thế nữa. Những gì khác có thể làm hài lòng đôi mắt của chúng ta?
Vấn đề tiếp theo với CSS là đánh dấu. Cho đến thời điểm hiện tại, chúng tôi đã thực hiện việc này bằng cách sử dụng các hộp nổi, vị trí tương đối và các thủ thuật đệm âm, tất cả đều khó thực hiện theo cách trông giống như bố cục hai hoặc ba cột tiêu chuẩn.
W3C và các nhà sản xuất trình duyệt nhận thức được những vấn đề này và đang nghiên cứu một số giải pháp. Dẫn đầu trong số đó là (không có gì đáng ngạc nhiên) Internet Explorer. Có vẻ như IE10 sẽ là điềm báo cho một kỷ nguyên mới của đánh dấu CSS cho phép bạn tạo các trang web tuyệt vời, năng động và hấp dẫn bằng các khả năng chưa từng có trước đây.
Trong bài viết này, tác giả xem xét các phương pháp đánh dấu khác nhau mà tôi muốn sử dụng ở các giai đoạn phát triển nhất định, từ đã triển khai đến thuần túy lý thuyết. Chúng ta có thể không sử dụng được tất cả chúng trong tương lai (ít nhất là không ở dạng hiện tại), nhưng bạn nên xem xét các phương pháp này để hiểu tương lai của đánh dấu CSS.
Cột
Phân phối nội dung trên nhiều cột là thành phần cơ bản của in ấn và mô-đun Nhiều cột CSS mang lại khả năng tương tự cho web. Có hai cách để tạo cột, mỗi cách sử dụng các thuộc tính khác nhau (của phần tử cha). Trong trường hợp đầu tiên, số cột mà văn bản phải được phân bổ trong đó được chỉ định trực tiếp. Ví dụ: mã này sẽ tạo ba cột có chiều rộng bằng nhau, lấp đầy tổng chiều rộng của phần tử cha:Div ( số cột: 3; )
Trong phương pháp thứ hai, chiều rộng của các cột là cố định, chúng sẽ được lặp lại cho đến khi lấp đầy chiều rộng của phần tử cha. Trong ví dụ này, chiều rộng cột được đặt thành 140px, có nghĩa là năm cột sẽ xuất hiện trong khối rộng 800px:
Div ( chiều rộng cột: 140px; )
Theo mặc định, khoảng cách giữa các cột là 1em, nhưng điều này có thể được thay đổi bằng thuộc tính khoảng cách cột. Bạn cũng có thể đặt đường phân chia giữa các cột bằng cách sử dụng quy tắc cột, cú pháp tương tự như thuộc tính border. Đoạn mã bên dưới sẽ tạo một đường chấm rộng 2px và cũng đặt khoảng cách cột thành 28px (dấu phân cách sẽ ở giữa):
Div ( khoảng cách cột: 28px; quy tắc cột: 2px chấm #ccc; )
Nếu bạn muốn xem kết quả, hãy xem ví dụ triển khai các cột CSS. Để xem ba cột, bạn phải sử dụng Firefox, Chrome, Safari, Opera 11.1 hoặc IE10 Platform Preview (IE10PP). Hoặc nhìn vào ảnh chụp màn hình bên dưới.
Bạn có thể làm những điều khác nhau với loa. Có một ví dụ thực tế về việc sử dụng chúng trong Wikipedia, trong phần ghi chú, nơi nó được sử dụng số cột. Trong Firefox, chức năng nhiều cột được triển khai với tiền tố -moz-, trong Chrome và Safari có tiền tố -webkit-, trong Opera 11.1 và IE10PP không có tiền tố.
Bàn
Điểm mới của IE10PP là hệ thống bố trí bảng. Trước khi sử dụng nó, bạn cần quyết định các hàng và cột. Đối với các cột, bạn có thể sử dụng giá trị độ dài từ khóa tự động và đơn vị đo mới bạn(viết tắt của phân số, số lượng tương đối). Nhìn vào ví dụ này:Div ( hiển thị: lưới; cột lưới: 1fr 3fr 1fr; hàng lưới: 100px auto 12em; )
Mã này sẽ tạo một bảng gồm ba cột, phần giữa của cột này sẽ rộng hơn ba lần so với bên trái và bên phải, đồng thời có ba hàng, trong đó phần trên cùng sẽ có chiều cao 100px, phần dưới cùng là 12em và phần giữa sẽ mở rộng tự động tăng chiều cao, tùy thuộc vào độ dài của nội dung.
Bây giờ chúng ta có một bảng, chúng ta có thể đặt nội dung vào đó. Bằng cách sử dụng các phần tử HTML5, bạn có thể tạo một số đánh dấu trang thực sự đơn giản:
Tiêu đề ( Grid-column: 1; Grid-column-span: 3; Grid-row: 1; ) Điều hướng ( Grid-column: 1; Grid-row: 2; ) Bài viết ( Grid-column: 2; Grid-row: 2; ) sang một bên ( Grid-column: 3; Grid-row: 2; ) footer ( Grid-column: 1; Grid-column-span: 3; Grid-row: 3; )
Nhìn kỹ vào mã, bạn sẽ nhận thấy rằng nội dung trên trang được phân phối trên các hàng và cột tương ứng bằng các thuộc tính hàng lưới Và cột lưới. Yếu tố bài báođặt ở cột thứ hai của hàng thứ hai - giữa bảng 3x3. Tài sản này cũng được sử dụng nhịp cột cho các phần tử tiêu đề Và chân trang, trải dài chúng trên cả ba cột (thuộc tính hoạt động tương tự khoảng hàng, không được sử dụng ở đây).
Bạn có thể xem bản demo về đánh dấu trong ví dụ sử dụng CSS Grid, nhưng bạn cần có nền tảng IE10. Nếu nó không có ở đó, thì chỉ cần nhìn vào ảnh chụp màn hình.
Các thuộc tính được đề cập ở trên được triển khai đầy đủ trong IE10PP, vì vậy bạn có thể thử nghiệm chúng ngay bây giờ. Tuy nhiên, nhiều bất động sản vẫn chưa được triển khai.
Vật mẫu
Một cách tiếp cận khác để xem bảng là mô-đun Bố cục Mẫu. Nó sử dụng một cú pháp hơi khác, trong đó trước tiên bạn cần gán vị trí cho các khối bằng ký tự chữ cái và thuộc tính chức vụ:Tiêu đề ( vị trí: a; ) điều hướng ( vị trí: b; ) bài viết ( vị trí: c; )
Sau khi chỉ định một vị trí, chúng ta có thể tạo đánh dấu bằng cách sử dụng một chuỗi ký tự. Mỗi chuỗi tương đương với một dòng và mỗi ký tự trong chuỗi là một cột. Ví dụ: để tạo một bảng có một hàng và ba cột, bạn có thể sử dụng:
Div (hiển thị: "abc"; )
Trong trường hợp này, ba phần tử cách đều nhau sẽ được hiển thị theo hàng ngang. Nhưng bạn có thể lặp lại các ký tự để mở rộng các cột và bạn cũng có thể sử dụng các ký tự giống nhau ở cùng một vị trí trên các dòng khác nhau để mở rộng các hàng. Trong ví dụ dưới đây, phần tử điều hướng chồng lên nhau hai dòng, và tiêu đề Và bài báo chồng lên nhau hai cột (mã được định dạng cho rõ ràng):
Div ( hiển thị: "baa" "bcc"; )
Bố cục mẫu chưa được trình duyệt sử dụng, nhưng đã có một tập lệnh polyfill tốt trong jQuery cho phép bạn thử nghiệm; nó là tập lệnh được sử dụng trong ví dụ ở liên kết. Kết quả trông giống như ví dụ đánh dấu bảng, nhưng mã hoàn toàn khác.
Trang demo sử dụng JavaScript nên nó sẽ hoạt động trên tất cả các trình duyệt hiện đại. Đánh dấu bảng cũng có thể hỗ trợ cú pháp mẫu, như trong ví dụ bên dưới:
Tiêu đề ( ô lưới: a; ) bài viết ( ô lưới: b; ) div ( hiển thị: lưới; lưới-template: "a" "b"; )
Mã này có chức năng giống với thuộc tính Bố cục Mẫu nhưng cũng chưa được triển khai (và có thể sẽ không bao giờ như vậy).
Khối nổi có thể định vị
Tài sản hiện tại trôi nổi cho phép văn bản bao quanh một phần tử ở bên trái hoặc bên phải, nhưng thuộc tính mở rộng trong IE10PP cho phép bạn nâng cao phần tử nổi bằng cách đặt nó ở bất kỳ đâu và nội dung liền kề sẽ vẫn bao quanh khối đó. Điều này chỉ yêu cầu một giá trị mới cho thuộc tính trôi nổi:Div ( float: định vị; trái: 200px; vị trí: tuyệt đối; trên cùng: 100px; chiều rộng: 250px; )
Mã này sẽ tạo một phần tử rộng 250px, được đặt ở vị trí 200px ở bên trái và 100px từ đầu đối tượng gốc. Theo mặc định, mọi nội dung khác bên trong phần tử gốc sẽ bao quanh phần tử được định vị ở tất cả các phía, nhưng điều này có thể được thay đổi bằng các giá trị thuộc tính khác nhau kiểu bọc, ví dụ: khi văn bản chỉ bao quanh một phần tử ở trên cùng và dưới cùng:
Div ( kiểu bao bọc: trên-dưới; )
Bạn có thể kết hợp các thuộc tính định vị và bố cục bảng bằng cách đặt một phần tử vào bảng và cho phép nội dung bao quanh nó:
Div ( float: định vị; cột lưới: 2; hàng lưới: 2; )
Nếu bạn có IE10PP thì bạn có thể. Nếu không, kết quả sẽ hiển thị trong ảnh chụp màn hình bên dưới, nó không thể được triển khai bằng khả năng CSS hiện tại.
Loại trừ
Tài sản trôi nổi chỉ cho phép các phần tử hình chữ nhật được sắp xếp hợp lý, nhưng tài liệu cung cấp cách bao bọc theo hình dạng. Ý tưởng này xuất hiện sau khi sử dụng mô-đun Loại trừ CSS. Nó có hai thuộc tính chính. Đầu tiên, hình dạng bọc, cho phép bạn tạo các hình elip, hình chữ nhật hoặc đa giác sẽ xác định hình dạng của khối chạy xung quanh nội dung, ví dụ:Div ( bao bọc hình: hình tròn(50%, 50%, 100px); )
Mã này sẽ tạo một vòng tròn có bán kính 100px sẽ được căn giữa vào phần tử gốc. Bạn có thể sử dụng chức năng đa giác()để tạo bất kỳ hình dạng nào bằng cách chỉ định các cặp tọa độ cách nhau bởi dấu cách, ví dụ: đối với hình tam giác:
Div ( bao bọc hình dạng: đa giác(0,100px 100px,100px 50px,0); )
Khi đã có sẵn một hình dạng nhất định, nội dung bên trong có thể được tạo để chạy xung quanh hình dạng đó bằng thuộc tính thứ hai chế độ bọc-hình, như ở đây:
Div ( bao bọc hình dạng: vòng tròn (50%, 50%, 100px); chế độ bao bọc hình dạng: xung quanh; )
Bạn có thể xem tính năng Loại trừ CSS đang hoạt động bằng cách tải xuống mẫu thử nghiệm dành cho Mac hoặc Windows từ phòng thí nghiệm Adobe. Có tài liệu đầy đủ và một số tệp demo rất thú vị, ví dụ như tệp này:
Vùng
Sản phẩm tiếp theo của Adobe là Vùng CSS, xác định cách phân phối nội dung trong nhiều phần tử khác nhau. Điều này được thực hiện bằng cách trước tiên xác định một phần tử sẽ cung cấp nội dung cho người khác, sử dụng mã định danh chuỗi duy nhất trong thuộc tính chảy, sau đó chọn khu vực sẽ được lấp đầy nội dung này bằng hàm từ() của cải nội dung:Nội dung ( flow: foo; ) .target1, .target2 ( content: from(foo); )
Ở đây nội dung sẽ được lấy từ phần tử .nội dung và sau đó sẽ được phân phối đầu tiên trên phần tử .target1 và nếu khối không đủ hiển thị nội dung thì nó sẽ tiếp tục hiển thị ở .target2. Nội dung sẽ không bị trùng lặp theo khối, nó sẽ bắt đầu ở khối đầu tiên và tiếp tục ở khối thứ hai (nếu cần). Để hiểu rõ hơn, chỉ cần nhìn vào hình ảnh dưới đây.
Nhân tiện, không có yêu cầu nào đối với các khu vực mục tiêu về vị trí của chúng trong đánh dấu. Chúng có thể được đặt ở các mặt đối diện của trang nếu cần thiết.
Thông số kỹ thuật cho các khu vực CSS chưa được triển khai trong trình duyệt, nhưng tương tự như Loại trừ, bạn có thể sử dụng nguyên mẫu từ phòng thí nghiệm Adobe và tự mình thử chức năng.
Phần kết luận
Vẫn chưa rõ mô-đun bố cục mới nào (từ FlexBox và Cột) sẽ được triển khai đầy đủ trong trình duyệt. Đối với các khối nổi và Loại trừ, tôi muốn vượt qua chúng vì sự giống nhau về chức năng (có lẽ điều này sẽ xảy ra). Đánh dấu bảng có liên quan chặt chẽ với đánh dấu mẫu và chắc chắn có thể xuất hiện trong IE10. Các vùng CSS đã được triển khai ở một trong các nhánh của WebKit và có thể sẽ sớm xuất hiện trong các trình duyệt WebKit (Safari, Chrome và các trình duyệt khác).Do đó, chúng ta có thể dự đoán rằng với một số thay đổi về cú pháp, mọi thứ được mô tả ở trên sẽ được sử dụng trong CSS3 trong tương lai. Sẽ rất tốt nếu điều này xảy ra, vì trong trường hợp này, các phương pháp mới sẽ cho phép bạn tạo các trang web được cân nhắc kỹ lưỡng với chi phí tối thiểu chỉ trong vài năm.
- hộp linh hoạt
- html5
Trong phần CSS, tôi đã nói về các nguyên tắc cơ bản của CSS và các trường hợp sử dụng điển hình. Những kiến thức cơ bản về CSS, các loại bộ chọn có thể có và cấu trúc của HTML theo quan điểm CSS đã được xem xét. Tôi đã liệt kê các thuộc tính CSS phổ biến nhất và chỉ ra cách chúng có thể được đặt cho các thành phần trang. Tôi đã chú ý đầy đủ đến các thuộc tính CSS chịu trách nhiệm thụt lề và viền, hiển thị văn bản, hình ảnh, liên kết và danh sách. Cuối cùng đã giải quyết được các thuộc tính dành riêng cho kiểu dáng của bảng.
Tất cả điều này đều tốt, nhưng câu hỏi về việc sử dụng các kiểu CSS để hình thành cấu trúc và bố cục của trang vẫn còn bỏ ngỏ. Trước đây, khi còn ít người biết đến CSS và nó mới nổi lên như một công nghệ hiệu quả, các bảng hầu như được sử dụng phổ biến cho các mục đích này. Theo quy định, chúng chiếm toàn bộ không gian trên trang và sử dụng các ô của bảng, các vùng được chỉ định để đặt các phần riêng lẻ. Sự hiện diện của các thuộc tính như colspan và rowpan , tương ứng cho phép bạn dán một số cột trên một dòng và một số dòng trong một cột, thậm chí còn mang lại tính linh hoạt cao hơn cho đánh dấu được xác định theo cách này. Rất thường xuyên, các bảng lồng nhau được sử dụng làm nội dung của một ô, do đó các bảng này có thể có các bảng lồng nhau của riêng chúng. Cấu trúc trang như vậy, trong trường hợp có khối lượng lớn, sẽ trở nên nặng nề, khó bảo trì và không linh hoạt chút nào. Ví dụ, để di chuyển một phần từ bên này sang bên kia của trang, trong một số trường hợp, tôi phải ngồi hàng giờ và viết lại phần đánh dấu theo cách thủ công.
Giờ đây, với việc sử dụng CSS, mọi thứ đã trở nên dễ dàng hơn nhiều. Chỉ cần tách nội dung của phần được yêu cầu thành một lớp riêng bằng thẻ div là đủ và chỉ cần đặt quy tắc định vị cho phần đó trên trang bằng thuộc tính CSS. Nếu sau này bạn cần di chuyển phần này sang phía đối diện của trang, bạn chỉ cần thay đổi thuộc tính CSS mà không cần chạm vào mã của chính trang đó. Mọi thứ đều rất đơn giản và thuận tiện. Tuy nhiên, để sự đơn giản này trở nên rõ ràng, bạn cần tìm hiểu những khả năng này sâu hơn một chút.
Trong bài viết này tôi sẽ nói về các loại bố cục trang, cách sử dụng và cách tạo chúng. Nhưng hãy bắt đầu lại từ đầu.
Tùy chọn bố cục trang.
Theo quy định, tất cả các trang có thể được chia thành ba loại:
Trang có chiều rộng cố định. Các trang như vậy có giới hạn về chiều rộng của các phần tử và bất kể kích thước của cửa sổ trình duyệt, chiều rộng của vùng được sử dụng là cố định và không thay đổi khi làm việc với trang. Các trang như vậy được sử dụng ở những nơi đặt ra các yêu cầu nghiêm ngặt về việc hiển thị các thành phần trang và việc lan truyền không kiểm soát của một số thành phần đơn giản là không thể chấp nhận được. Trong những trường hợp như vậy, thông thường người ta đặt chiều rộng cố định cho thẻ nội dung và căn giữa trang dọc theo chiều rộng của cửa sổ trình duyệt. Giá trị chiều rộng phổ biến nhất cho các trang có chiều rộng cố định là 960px - kích thước này cho phép trang trông đẹp ở độ phân giải màn hình bắt đầu từ 1024x768.
Trang có chiều rộng nổi. – Đối với loại trang này, chiều rộng của các phần tử của nó không được chỉ định và chúng có thể tự do thay đổi kích thước, trải rộng trên toàn bộ màn hình hoặc phần chính và chiếm toàn bộ không gian trống. Cách tiếp cận này phù hợp nhất để sử dụng nếu mục đích chính của trang là hiển thị văn bản. Trong các trường hợp khác, việc sử dụng những cách tiếp cận như vậy có thể biến bạn thành Don Quixote, chiến đấu vô nghĩa với một cối xay gió, trong trường hợp của bạn sẽ là trình duyệt.
"Trang đàn hồi". Những trang này kết hợp cả hai cách tiếp cận. Các phần tử của những trang như vậy có chiều rộng cố định nhưng có thể kéo dài hoặc thu nhỏ tùy thuộc vào chiều rộng của cửa sổ trình duyệt trong phạm vi được xác định trước. Với mục đích như vậy, bạn có thể sử dụng các thuộc tính chiều cao tối thiểu, chiều rộng tối thiểu, chiều cao tối đa và max-width mà tôi đã đề cập ở phần đầu tiên.
Để đạt được kết quả tốt nhất, thường nên kết hợp cả ba cách tiếp cận bố cục trang: ví dụ: tạo tất cả các phần phụ trợ và điều hướng - trong đó việc trải rộng các phần tử không được kiểm soát là không thể chấp nhận được - cố định về chiều rộng và tạo bảng điều khiển trung tâm “ elastic” hoặc thậm chí cho phép nó chiếm toàn bộ không gian còn lại sau các phần cố định trong cửa sổ trình duyệt.
Phương pháp bố cục trang
CSS cho phép bạn triển khai đánh dấu một cách hiệu quả bằng nhiều kỹ thuật và kỹ thuật khác nhau. Các phương pháp phổ biến nhất bao gồm lớp nổi(trong các nguồn tiếng Anh, kỹ thuật này có thể được gọi là bố cục nổi) và định vị tuyệt đối(định vị tuyệt đối). Hơn nữa, về mặt chủ quan, phần đánh dấu của phần lớn các trang web đều sử dụng các lớp nổi. Tiếp theo, tôi sẽ cố gắng xem xét từng kỹ thuật này một cách chi tiết hơn.
Lớp nổi
Lớp nổiđược thực hiện bằng cách thao tác thuộc tính float của các thành phần trang. Sử dụng thuộc tính này, một lớp, đoạn văn và các thành phần khác có thể được định vị ở bên trái hoặc bên phải của trang hoặc vùng chứa bên ngoài. Để làm được điều này, bạn cần đặt thuộc tính float với giá trị phù hợp: float: left, right, none; . Phần nội dung còn lại của trang sẽ “bao quanh” phần tử này, ép sang một bên. Một điểm rất quan trọng cần lưu ý là nội dung sẽ chỉ bao quanh phần tử float khi nó được xác định bên dưới thẻ này trong mã trang và chiều rộng của nó không lớn hơn chiều rộng còn lại của trang hoặc vùng chứa bên ngoài. Vì vậy, trong trường hợp này, điều rất quan trọng là xác định trình tự mô tả các thành phần trang trong tệp HTML.
Đôi khi có những tình huống cần đảm bảo rằng một số nội dung không bao quanh phần tử float mà được vẽ bên dưới phần tử này. Một ví dụ về tình huống như vậy là bảng điều khiển chân trang, dù thế nào đi nữa, bảng này phải luôn ở cuối trang. Đây là nơi tài sản rõ ràng có thể được giải cứu và nhận các giá trị sau: rõ ràng: trái; Phải; cả hai; không có. Thuộc tính này buộc nội dung được vẽ bên dưới phần tử float. Hơn nữa, bằng cách sử dụng các giá trị của thuộc tính này, bạn có thể chỉ định phần tử float nào áp dụng cho: căn trái, căn phải, cả hai hoặc không. Vì vậy, nếu bạn có một phần tử có float:left , để hiển thị phần còn lại của nội dung bên dưới và không cho phép nó bao quanh phần tử đã cho, bạn cũng nên sử dụng clear:left .
Tuy nhiên, chức năng được mô tả chắc chắn là không đủ để triển khai đánh dấu trang một cách hiệu quả. Bây giờ là lúc để hiểu các kỹ thuật tinh chỉnh đánh dấu. Trong trường hợp các lớp nổi, vị trí nằm ngang của một phần tử trang thường được đặt bằng cách sử dụng lề thuộc tính CSS, như chúng ta đã biết, được sử dụng để đặt khoảng cách từ đường viền của phần tử này đến phần tử khác. Thoạt nhìn, điều này có vẻ hơi lạ và không thực tế. Tuy nhiên, đây chỉ là cái nhìn đầu tiên. Một tính năng độc đáo của thuộc tính này là bạn có thể đặt nó thành giá trị âm, từ đó di chuyển phần tử sang bên trái vị trí ban đầu. Vâng, theo đó, một giá trị dương sẽ dịch chuyển phần tử sang bên phải (trên thực tế, tất nhiên, phần tử vẫn giữ nguyên vị trí của nó, chỉ cần thêm thuộc tính lề vào phần tử sẽ dịch chuyển nó một cách trực quan theo giá trị đã chỉ định).
Do đó, bạn có thể đặt chiều rộng và chiều cao cố định cho các phần tử bằng cách sử dụng chiều rộng và chiều cao tương ứng, chỉ định các giá trị float và lề cần thiết và tận hưởng kết quả. Những hành động tiếp theo chỉ bị giới hạn bởi trí tưởng tượng và sự khéo léo của bạn. Ví dụ: tôi muốn chỉ ra cách đánh dấu một trang. Dưới đây là ví dụ về một trang được chia thành các phần và mã cho tệp CSS và trang HTML.
| xem hình ảnh | |
| Index.html | Chính.css |
| | /*xóa các giá trị được xác định trước của trình duyệt*/ Phần đệm: 0; Cỡ chữ: 100%; Độ dày phông chữ: bình thường; nền: #C2C2C2; /*định nghĩa lề trái: auto; và lề phải: tự động; chúng tôi đặt nội dung cơ thể vào giữa màn hình*/ lề trái: tự động; lề phải: tự động; nền: #FFF; căn chỉnh văn bản: giữa; nền: #F2F2F2; đường viền: 1px liền khối #FD8000; viền-trái: 5px liền khối #FD8000; nền: #F2F2F2; đường viền: 1px liền khối #FD8000; lề: 1px; lề trái: 205px; #bottom-lsidebar lề phải: 2px; nền: #FD8000; |
Định vị tuyệt đối
Định vị tuyệt đối, như tôi đã nói, không được sử dụng thường xuyên như các lớp nổi, nhưng nó cũng đáng được chú ý. Đôi khi xảy ra trường hợp việc tiếp nhận các lớp nổi không được chấp nhận vì một số lý do, và do đó tất cả những gì còn lại đối với chúng ta trong tình huống như vậy là định vị tuyệt đối. Tuy nhiên, định vị tuyệt đối thường được sử dụng nhất để định vị cục bộ - chỉ định vị trí của một phần tử so với vị trí của phần tử khác. Bằng cách này hay cách khác, bạn chắc chắn cần phải biết về kỹ thuật này.
Kỹ thuật này dựa trên việc sử dụng thuộc tính vị trí, có thể nhận các giá trị sau: vị trí: tuyệt đối, tương đối, cố định, tĩnh. Giá trị tuyệt đối chỉ định vị trí của phần tử trong tọa độ màn hình hoặc phần tử cha, như được hiển thị bên dưới. tương đối – xác định vị trí tương đối so với vị trí mặc định. Việc chỉ định một phần bù bằng cách sử dụng giá trị này sẽ để lại một "lỗ hổng" trên trang, vì vậy, theo quy luật, không nên sử dụng nó theo cách này, càng nhiều càng tốt - muộn hơn một chút. đã sửa – Cho biết vị trí trên màn hình, bất kể cuộn, nghĩa là dù bạn cuộn thanh cuộn bao nhiêu thì phần tử vẫn sẽ giữ nguyên vị trí của nó. Giá trị tĩnh là định vị bình thường; nếu loại định vị không được chỉ định cho một phần tử thì giá trị này sẽ được áp dụng theo mặc định.
Khi thuộc tính vị trí cho một phần tử đã được đặt, việc chỉ định các thuộc tính xác định tọa độ của phần tử là điều hợp lý: trên, dưới, trái và phải. Vì vậy, bằng cách chỉ định vị trí: tuyệt đối cho bất kỳ phần tử nào, bạn có thể đặt vị trí của nó bằng cách sử dụng các thuộc tính trên so với đường viền này hoặc đường viền khác của cửa sổ trình duyệt. Tuy nhiên, nếu chúng ta đang nói về bất kỳ phần tử nào, chẳng hạn, nằm bên trong một lớp, thì việc định vị tuyệt đối của phần tử đó được thực hiện tương ứng với ranh giới của chính lớp này.
Để làm rõ điều này, chúng ta hãy xem một ví dụ đơn giản. Giả sử chúng ta có một tiêu đề và bên trong tiêu đề có một hình ảnh. Sau đó, vị trí của nó so với chính tiêu đề này có thể được đặt như thế này:
h1 (vị trí: tương đối; )
vị trí: tuyệt đối;
Tức là sử dụng thuộc tính vị trí: tương đối; cho tiêu đề. , dường như chúng ta đang nói đến việc thực hiện việc định vị “tương đối với tôi”, nhưng thuộc tính location: tuyệt đối;
thực hiện định vị tương đối so với ranh giới của phần tử cha. Giống như kỹ thuật trước, tôi sẽ cung cấp một ví dụ để làm rõ những gì nên được sử dụng và sử dụng như thế nào.
| xem hình ảnh | |
| Index.html | Chính.css |
| | html, nội dung, h1, h2, h3, h4, h5, h6, p, ol, ul, li, trước, mã, địa chỉ, biến, biểu mẫu, tập trường, blockquote ( phần đệm: 0; Cỡ chữ: 100%; Độ dày phông chữ: bình thường; nền: #c2c2c2 ; lề trái: tự động; lề phải: tự động; nền: #FFF ; /*Bảng thông tin chung của các trang web*/ nền: #F2F2F2; đường viền: 1px liền khối #FD8000; đường viền trên cùng: 20px Solid #FD8000; lề trên: -20px; độ dày phông chữ: đậm; chuyển đổi văn bản: viết hoa; vị trí: tương đối; vị trí: tuyệt đối; trái: 205px; vị trí: tuyệt đối; vị trí: tuyệt đối; vị trí: tuyệt đối; |
Vậy tiếp theo là gì?
Có lẽ đó là tất cả những gì cần đánh dấu. Các sắc thái khác của việc sử dụng CSS cho tác vụ này sẽ dành riêng cho dự án, trình duyệt và yêu cầu của bạn. Tất nhiên, ngay cả bây giờ tôi vẫn chưa nói về nhiều thứ. Tôi đã không cảnh báo bạn về các chi tiết cụ thể của việc đánh dấu trang cho IE 6.0 (ồ, vâng, tôi nên viết một cuốn sách riêng về vấn đề này). Có rất nhiều thứ ở đó, ngay cả từ những gì tôi đã nói, nó sẽ không hoạt động hoặc sẽ không hoạt động như bạn mong muốn. Và để nó hoạt động, bạn cần sử dụng các phép thuật như * html hoặc zoom: 1; Anh ấy không nói bất cứ điều gì về cách giải quyết các vấn đề phát sinh trong quá trình đánh dấu, khi các bảng thu thập thông tin không thể giải thích được ở đâu và tại sao (và tin tôi đi, điều này sẽ xảy ra, nhiều lần và không chỉ với bạn). Tôi chưa nói về thuộc tính z-index, điều này rất quan trọng, đặc biệt trong trường hợp định vị tuyệt đối, khi nội dung của một phần tử chồng lên nội dung của phần tử khác. Tôi chưa nói với bạn về thuộc tính tràn tuyệt vời, giúp xử lý nội dung bảng điều khiển không vừa với bên trong và chỉ muốn nhảy ra khỏi lớp của nó. Và rất nhiều, rất nhiều điều nữa mà tôi đã giữ im lặng. Không phải vì tôi ngu ngốc, chỉ là tôi hơi lười thôi
Ở đây chúng ta sẽ xem xét các lỗi phổ biến trong đánh dấu HTML5 từ quan điểm ngữ nghĩa và cách tránh chúng.
Trong khi quan sát các trang web trong Thư viện trang web HTML5 và trả lời các câu hỏi của người dùng, tôi thấy nhiều trang web có đánh dấu HTML5. Trong bài viết này, tôi sẽ chỉ cho bạn một số lỗi và cách đánh dấu xấu mà tôi thường thấy và giải thích cách tránh chúng.
Không sử dụng thẻ làm trình bao bọc để tạo kiểu
Một trong những vấn đề phổ biến nhất mà tôi nhận thấy là việc thay thế tầm thường"s trên các phần tử cấu trúc HTML5, đặc biệt là "s. Những thứ kia. khi nội dung trong XHTML hoặc HTML4 trông như thế này:
Trang siêu lừa đảo của tôi
Viết lại nó như thế này:
Nó chỉ sai: không phải là một cái bọc. Phần tử này đề cập đến khối ngữ nghĩa của nội dung của bạn được sử dụng để xây dựng “đề cương tài liệu” và phải chứa tiêu đề. Nếu bạn cần một yếu tố bao bọc, hãy thử tự làm (Kroc Kamen có một số yếu tố để cung cấp). Nếu điều này không giải quyết được vấn đề cần thêm các trình bao bọc, hãy sử dụng cách cũ
"s. Với sự ra đời của HTML5
“Bạn chưa chết, và họ hoàn hảo trong trường hợp này.
Nếu tính đến tất cả những điều trên, sẽ rất tốt nếu đánh dấu ví dụ trên bằng cách sử dụng HTML5 như thế này:
Trang siêu lừa đảo của tôi
Nếu bạn không chắc chắn nên sử dụng phần tử nào thì tôi khuyên bạn nên sử dụng sơ đồ lựa chọn phần tử của chúng tôi ( khoảng người dịch: xem ở cuối mục).
Chỉ sử dụng khi cần thiết
Viết mã chẳng ích gì nếu bạn không phải làm vậy, phải không? Than ôi, tôi thường quan sát xem chúng không cần thiết ở đâu và bằng cách nào. Bạn có thể đọc về các yếu tố chi tiết hơn, nhưng tôi sẽ phác thảo ngắn gọn những điểm chính:- Phần tử này đại diện cho một nhóm các công cụ hỗ trợ giới thiệu hoặc điều hướng và thường chứa tiêu đề của phần
- Một phần tử nhóm một tập hợp các phần tử
-
, đại diện cho tiêu đề của phần trong trường hợp nó bao gồm nhiều cấp độ (tiêu đề phụ, tiêu đề thay thế, v.v.)
Sự dư thừa của các yếu tố
Tôi chắc rằng bạn biết rõ rằng một phần tử có thể được sử dụng nhiều lần trong một tài liệu. Vì vậy, điều này thường xảy ra:bài viết blog tốt nhất của tôi
Nếu phần của bạn chỉ chứa một phần tử tiêu đề thì nó không cần thiết. Trong trường hợp này, phần tử đã đảm bảo rằng tiêu đề sẽ được đưa vào dàn ý tài liệu và vì nó không chứa nhiều phần tử (theo định nghĩa) nên nó có thể được xóa một cách an toàn. Chỉ cần thế này là đủ:
bài viết blog tốt nhất của tôi
Lạm dụng
Và một lần nữa về các tiêu đề: Tôi thường thấy việc sử dụng phần tử này không chính xác. Không nên sử dụng với nếu:- Chỉ có một tiêu đề
- bản thân nó tốt (tức là không có).
bài viết blog tốt nhất của tôi
Trong trường hợp này, chỉ cần xóa hgroup.
bài viết blog tốt nhất của tôi
Trường hợp thứ hai là một ví dụ khác về việc sử dụng một phần tử một cách không cần thiết.
Công ty của tôi
Thành lập 1893
Nếu đứa con duy nhất là "và đây là điều cần thiết? Nếu bạn không có các yếu tố bổ sung trong "e (tức là chị gái liên quan đến), chỉ cần loại bỏ nó.
Công ty của tôi
Thành lập 1893
Không đóng khung tất cả các liên kết trong
HTML5 đã giới thiệu 30 phần tử mới để cung cấp cho chúng tôi khả năng tạo đánh dấu có cấu trúc và có ý nghĩa. Nhưng bạn không nên lạm dụng các yếu tố ngữ nghĩa mới. Thật không may, đây chính xác là những gì sẽ xảy ra. Thông số kỹ thuật mô tả nó theo cách này:Phần tử điều hướng đại diện cho một phần của trang liên kết nó với các trang khác hoặc các phần của trang hiện tại (phần có liên kết điều hướng).Thông số HTML WHATWGLưu ý: Không phải tất cả các nhóm liên kết đều nên được đặt trong phần tử điều hướng. Nó nên được sử dụng cho điều hướng chính. Thông thường ở phần chân trang có một danh sách nhỏ các liên kết đến các trang khác nhau của trang web (Trang chủ, Trợ giúp, điều khoản sử dụng, vân vân). Trong trường hợp này, một footer là đủ, mặc dù không có gì ngăn cản bạn sử dụng điều hướng nhưng điều đó là không cần thiết.
Cụm từ khóa là "điều hướng chính". Người ta có thể tranh luận rất lâu về ý nghĩa của cái chính, nhưng đối với tôi thì đó là:
- Định hương đâu tiên
- Tìm trang
- Điều hướng phụ (còn gây tranh cãi)
- Điều hướng trong trang (ví dụ: trong một bài viết dài)
- Trình chuyển đổi trang
- Liên kết xã hội (mặc dù có thể có ngoại lệ trong trường hợp liên kết xã hội là điều hướng chính. Ví dụ: các trang web như about.me hoặc Flavor.me)
- Đăng thẻ
- Đăng chuyên mục
- Điều hướng cấp ba
- Chân trang tập
- “Đừng sử dụng nếu bạn nghĩ x > cũng có tác dụng” - Hixie trên IRC
- Có lẽ chúng ta nên thêm “Đi tới” cho tiện?
Các lỗi thường gặp khi sử dụng phần tử
Ah, . Hiểu cách sử dụng chính xác yếu tố này, giống như người anh em của nó, không phải là điều dễ dàng. Chúng ta hãy xem xét một số lỗi phổ biến liên quan đến yếu tố này.Không phải mọi hình ảnh
Trước đây, tôi đã khuyên không nên viết nhiều mã hơn mức cần thiết. Tình hình ở đây cũng tương tự. Tôi đã thấy những trang web có đóng khung từng bức ảnh. Đừng sử dụng nhiều đánh dấu hơn chỉ để sử dụng nhiều đánh dấu hơn. Bạn chỉ đang tạo thêm công việc cho chính mình chứ không cải thiện phần mô tả nội dung của mình.Thông số kỹ thuật mô tả nó là “nội dung độc lập, có thể có tiêu đề và thường là phần tử luồng độc lập”. Đây rồi, tất cả vẻ đẹp - phần tử có thể dễ dàng được chuyển từ nội dung chính, chẳng hạn như sang thanh bên.
Sơ đồ lựa chọn mục ở trên sẽ giúp bạn giải quyết.
Nếu hình ảnh chỉ có giá trị trình bày và không được tham chiếu ở bất kỳ đâu trong tài liệu thì chắc chắn là không. Nếu không, hãy tự hỏi mình câu hỏi: “Hình ảnh này trong bối cảnh hiện tại có cần thiết để hiểu không?” Nếu không thì rõ ràng là không (có thể). Nếu vậy, hãy tự hỏi bản thân: “Tôi có thể chuyển cái này vào một ứng dụng không?” Nếu câu trả lời cho cả hai câu hỏi là Có thì nó có thể hoạt động.
Logo của bạn không
Logo cũng vậy. Tôi thường thấy ứng dụng này:Tên công ty của tôi
Không có gì để thêm ở đây. Đơn giản là nó sai. Người ta có thể tranh luận rất lâu về việc có nên đặt logo hay không, nhưng bây giờ chúng ta không nói về điều đó. Sai lầm thực sự là lạm dụng phần tử này. chỉ nên được sử dụng khi bạn đề cập đến nó trong một tài liệu. Rất có thể bạn sẽ liên kết tới logo của mình ở bất cứ đâu. Điều này là đủ: Tên công ty của tôi
có thể không chỉ là một hình ảnh
Một sự hiểu lầm phổ biến khác về phần tử này là giả định rằng nó chỉ có thể được sử dụng cho hình ảnh. Nhưng điều đó không đúng. Nó có thể chứa video, âm thanh, đồ họa (ví dụ như trong SVG), một câu trích dẫn, một bảng, một khối mã, một bài thơ hoặc bất kỳ sự kết hợp nào ở trên. Đừng giới hạn bản thân chỉ bằng hình ảnh. Công việc của chúng tôi với tư cách là người tuân thủ các tiêu chuẩn web là mô tả nội dung đánh dấu của chúng tôi.
Cách đây không lâu tôi đã viết về yếu tố này một cách chi tiết hơn. Tôi khuyên bạn nên đọc nó nếu bạn muốn hiểu rõ hơn hoặc làm mới ký ức của mình.
Không sử dụng thuộc tính loại không cần thiết
Đây có lẽ là vấn đề phổ biến nhất gặp phải với thư viện HTML5. Mặc dù đây không phải là lỗi nhưng tôi nghĩ tốt nhất nên tránh nó.Trong HTML5 không cần chỉ định thuộc tính loại trên các phần tử
Thay vào đó bạn có thể chỉ cần viết:
Trong số những thứ khác, bạn cũng có thể giảm số lượng mã dành cho việc chỉ định mã hóa. Chương về ngữ nghĩa của Mark Pilgrim trong Đi sâu vào HTML5 mô tả tất cả các cách thực hành như vậy.
Sử dụng không chính xác các thuộc tính của biểu mẫu
Bạn có thể đã biết rằng HTML5 giới thiệu rất nhiều thuộc tính biểu mẫu mới. Chúng tôi sẽ xem xét chúng trong thời gian sắp tới, nhưng bây giờ tôi sẽ nói ngắn gọn với bạn những điều không nên làm.Thuộc tính Boolean
Ngoài ra còn có các thuộc tính logic cho các phần tử đa phương tiện và một số phần tử khác. Các quy tắc tôi mô tả cũng áp dụng cho chúng.Một số thuộc tính biểu mẫu mới là boolean, tức là sự hiện diện của chúng trong đánh dấu xác định hành vi của các phần tử. Bao gồm điều này:
- tự động lấy nét
- tự động hoàn thành
- yêu cầu
Tôi hiếm khi nhìn thấy chúng, nhưng trong trường hợp bắt buộc tôi thấy điều này:
Cuối cùng, điều này không đe dọa bất cứ điều gì xấu. Trình phân tích cú pháp HTML của máy khách sẽ gặp thuộc tính bắt buộc trong đánh dấu và áp dụng các quy tắc thích hợp. Nhưng điều gì sẽ xảy ra nếu chúng ta làm khác đi và viết require="false"?
Trình phân tích cú pháp sẽ vẫn nhìn thấy thuộc tính bắt buộc và áp dụng hành vi thích hợp, ngay cả khi bạn yêu cầu nó không làm như vậy. Rõ ràng đây không phải là điều bạn mong muốn.
Giá trị boolean có thể được áp dụng theo ba cách: (Cách thứ hai và thứ ba là điển hình cho XHTML)
- yêu cầu
- bắt buộc=""
- bắt buộc="bắt buộc="
Liên quan đến ví dụ của chúng tôi ở trên, chúng tôi có thể viết điều này (bằng HTML):
Thẻ: Thêm thẻ
Đầu tiên chúng ta hãy định nghĩa markup là gì? Như chính thuật ngữ này đã gợi ý, đánh dấu- đây là vị trí của nhãn, trong trường hợp của chúng tôi là mã HTML của tài liệu, tức là. trang web. Dấu hiệu ở đây là thẻ, cho phép bạn xác định ranh giới của đánh dấu hoặc tạo thành phần tài liệu HTML. Vẫn chưa rõ ràng? Sau đó đọc tiếp và mọi thứ sẽ đâu vào đấy.
Khái niệm cơ bản về đánh dấu HTML hoặc thẻ là gì
Thẻ là một cấu trúc bắt đầu bằng dấu nhỏ hơn () . Hầu hết các thẻ bao gồm thẻ mở và thẻ đóng. Sự khác biệt giữa chúng là ở chỗ thẻ mở bạn có thể (nếu cần) chỉ định một số thuộc tính bổ sung bằng cách sử dụng cái gọi là thuộc tính, và ở đầu tên thẻ đóng ký tự selsh (/) được chỉ định, ví dụ:
Văn bản đoạn văn được căn phải.
.Trong trường hợp này, thẻ khối p tạo một đoạn văn và thuộc tính căn chỉnh căn chỉnh nội dung của đoạn văn về bên phải.
Cần lưu ý rằng trong HTML, thẻ có hai loại: khối và nội tuyến. Chặn thẻ tạo một phần tử khối, thường có thụt lề và bên dưới các phần tử sau đã có " một dòng mới». Thẻ dòng nhằm mục đích đánh dấu một đoạn mã và không tạo ra ngắt dòng.
Như họ nói: mọi quy tắc đều có ngoại lệ - điều này cũng đúng với thẻ. Có những thẻ không có thẻ đóng và nhằm mục đích tạo nhãn và thành phần của tài liệu HTML, ví dụ:
Trong trường hợp này, thẻ chuỗi img chèn một phần tử vào trang web dưới dạng hình ảnh, địa chỉ của nó được ghi trong thuộc tính src. Giá trị của thuộc tính alt là văn bản thay thế được hiển thị nếu hình ảnh không có sẵn và thuộc tính border xác định độ dày của đường viền xung quanh hình ảnh.
Để giúp bạn dễ dàng ghi nhớ mọi thứ đã nêu ở trên, tôi sẽ đưa ra một bảng cheat nhỏ và trực quan mà bạn có thể sử dụng để học HTML:
Hướng dẫn nhanh về thẻ HTML
Và như vậy, chúng ta đã gặp hai thẻ rồi nên tôi sẽ bỏ qua chúng. Dưới đây tôi sẽ đưa ra một số thẻ đánh dấu tài liệu HTML và một số thuộc tính của chúng. Đối với những người mới bắt đầu, điều này là quá đủ, nhưng nếu bạn quan tâm đến danh sách đầy đủ các thẻ HTML và thuộc tính của chúng, tôi khuyên bạn nên xem trang web htmlbook.ru, đồng thời thêm nó vào dấu trang của bạn là đầy đủ nhất và sách tham khảo tiện lợi về HTML và CSS. Chúng ta tiếp tục nhé?
Làm thế nào để tạo một liên kết?Để làm điều này, bạn cần sử dụng thẻ chuỗi A, thẻ này đánh dấu văn bản chứa trong đó là liên kết- một phần tử hoạt động của một trang web, khi được nhấp vào, người dùng có thể truy cập một trang web khác, địa chỉ của trang đó được chỉ định trong thuộc tính href.
Làm thế nào để in đậm văn bản?Để thực hiện việc này, bạn cần sử dụng thẻ dòng B, thẻ này sẽ đặt văn bản chứa trong đó thành kiểu phông chữ đậm.
Làm thế nào để làm cho văn bản in nghiêng?Để làm điều này, bạn cần sử dụng thẻ I inline, thẻ này sẽ đặt văn bản chứa trong đó thành kiểu phông chữ in nghiêng.
Làm thế nào để gạch chân văn bản?Để làm điều này, bạn cần sử dụng thẻ chuỗi U, thẻ này sẽ thêm phần gạch chân vào văn bản chứa trong đó.
Làm thế nào để gạch bỏ văn bản?Để làm điều này, bạn cần sử dụng thẻ dòng S, thẻ này hiển thị văn bản dưới dạng gạch ngang.
Làm cách nào để đánh dấu mã trong văn bản?Để thực hiện việc này, bạn cần sử dụng thẻ chuỗi CODE, thẻ này thường được trình duyệt hiển thị ở phông chữ đơn cách, ví dụ: Chuyển phát nhanh mới.
Làm cách nào để định dạng mã trong văn bản?Để làm điều này, bạn cần sử dụng thẻ khối PRE, thẻ này xác định khối mã chương trình, thường được trình duyệt hiển thị bằng phông chữ đơn cách. Không giống như thẻ dòng CODE, thẻ PRE giữ nguyên khoảng trắng và ngắt dòng.
Làm thế nào để làm cho văn bản lớn hơn?Để làm điều này, bạn cần sử dụng thẻ nội tuyến BIG, thẻ này sẽ tăng kích thước phông chữ lên một so với văn bản thông thường.
Làm thế nào để làm cho văn bản nhỏ hơn?Để làm điều này, bạn cần sử dụng thẻ dòng NHỎ, giúp giảm kích thước phông chữ xuống một so với văn bản thông thường.
Làm cách nào để đặt phông chữ, màu sắc và cỡ chữ trong văn bản?Để làm điều này bạn cần sử dụng thẻ chuỗi FONT. Thuộc tính face ở đây chỉ định kiểu chữ (tên) của phông chữ, color là màu của phông chữ và size là kích thước của nó theo đơn vị thông thường (từ -7 đến 7).
Làm thế nào để tạo một tiêu đề?Để làm điều này, bạn cần sử dụng thẻ khối H, đặt tiêu đề ở các cấp độ khác nhau, từ 1 (To nhất) cho đến 6 (nhỏ nhất), cho phép bạn thiết lập cấu trúc thông tin được xuất bản trên một trang web. Các tiêu đề khác nhau về cỡ chữ và cách thụt lề, đồng thời cũng được đánh dấu bằng chữ đậm.
Làm cách nào để tạo phông chữ chỉ số dưới?Để thực hiện việc này, bạn cần sử dụng thẻ chuỗi SUB, thẻ này hiển thị phông chữ dưới dạng chỉ số dưới, tức là. văn bản sẽ được đặt bên dưới đường cơ sở của các ký tự còn lại trong dòng và ở kích thước được giảm bớt.
Làm thế nào để tạo một phông chữ siêu ký tự?Để thực hiện việc này, bạn cần sử dụng thẻ chuỗi SUP, thẻ này hiển thị phông chữ dưới dạng chỉ số trên, tức là. văn bản sẽ được đặt phía trên đường cơ sở của các ký tự còn lại trong dòng và ở kích thước được giảm bớt.
Làm thế nào để chèn một trích dẫn vào văn bản?Để thực hiện việc này, bạn cần sử dụng thẻ Q nội tuyến, thẻ này được sử dụng để đánh dấu các trích dẫn trong văn bản, được trình duyệt tự động hiển thị trong dấu ngoặc kép.
Làm thế nào để định dạng một trích dẫn trong văn bản?Để thực hiện việc này, bạn cần sử dụng thẻ khối BLOCKQUOTE, thẻ này được thiết kế để làm nổi bật các trích dẫn dài trong tài liệu HTML. Thông thường, văn bản như vậy được hiển thị với khoảng đệm 40 pixel ở bên trái và bên phải, cũng như khoảng đệm ở trên cùng và dưới cùng.
Làm thế nào để ngắt dòng trong văn bản?Để thực hiện việc này, bạn cần sử dụng thẻ khối BR, thẻ này sẽ đặt dòng mới tại vị trí đặt thẻ. Không giống như thẻ đoạn văn p, việc sử dụng thẻ br không thêm khoảng trống trước dòng.
Làm cách nào để tạo một lớp trong HTML?Để thực hiện việc này, bạn cần sử dụng thẻ DIV khối, thẻ này sẽ tạo một lớp không có phần đệm.
Làm thế nào để tạo dấu phân cách trong văn bản?Để thực hiện việc này, bạn cần sử dụng thẻ khối HR, thẻ này sẽ vẽ đường phân chia theo chiều ngang. Thuộc tính color đặt màu của đường kẻ, kích thước - kích thước và không có bóng - tắt hiệu ứng 3D.
Làm thế nào để lập một danh sách? Có hai loại danh sách chính trong HTML: được đánh số (OL) và có dấu đầu dòng (UL). Trong trường hợp này, mã HTML cho danh sách dấu đầu dòng được chỉ định bởi thẻ khối UL sẽ được cung cấp. Theo mặc định, vòng tròn được sử dụng làm điểm đánh dấu (vòng tròn liền nét), xuất hiện ở đầu dòng đầu tiên của mục danh sách được chỉ định bởi thẻ LI.
Tất nhiên, trong bài viết của mình, tôi chỉ cung cấp các thẻ HTML cơ bản mà bạn có thể cần khi đánh dấu một trang web. Trong hầu hết các trường hợp, đối với đánh dấu HTML, điều này là quá đủ. Điều duy nhất tôi bỏ qua chắc chắn quan trọng khi đánh dấu các trang web là làm việc với bảng. Chúng cần được nghiên cứu riêng biệt, bởi vì... có quá nhiều sắc thái, và bài viết hóa ra khá dài. Đó là tất cả những gì tôi có. Cám ơn vì sự quan tâm của bạn. Chúc may mắn!
HTML (Ngôn ngữ đánh dấu siêu văn bản) không phải là ngôn ngữ lập trình, nó là ngôn ngữ định dạng, tức là mang lại sự xuất hiện của một trang web khi được xem trong trình duyệt. Dùng để đánh dấu một tài liệu thẻ. Thẻ được đặt trong dấu ngoặc nhọn và, với một số trường hợp ngoại lệ hiếm hoi, được ghép nối, tức là. có thẻ mở và thẻ đóng. Ví dụ, để đánh dấu sự bắt đầu của một đoạn văn mới trong tài liệu, một thẻ được đặt
(từ đoạn văn). Sau đó cuối đoạn văn phải có thẻ đóng .
Khi đặt thẻ, phải tuân theo quy tắc sau: thẻ được đóng theo thứ tự ngược lại với hình thức của chúng. Ví dụ: nếu một từ trong văn bản cần được tô đậm (thẻ từ in đậm) và đồng thời in nghiêng (thẻ từ in nghiêng), thì việc này có thể được thực hiện theo một trong các cách sau: từ , hoặc từ .
Dưới đây là nội dung của một số tài liệu html và kết quả hiển thị của nó trên trình duyệt:
Chúc một ngày tốt lành, du khách thân mến ! h1>
Tôi hy vọng bạn đã đến chính xác nơi bạn muốn.
Ở đây bạn sẽ tìm thấy thơ , bài hát Và kịch bản để tổ chức bất kỳ ngày lễ nào.
Anh ấy đã quen với điểm "A" -
Tiếng Nga năm và ca hát.
Tôi luôn thích nhật ký của anh ấy
Làm hỏng tâm trạng.
|
Cơm. 74. Hiển thị trang html mẫu trong cửa sổ trình duyệt. |
Trong ví dụ đã cho, các thẻ sau được sử dụng:
… - chỉ ra rằng văn bản nằm giữa các thẻ này phải được coi là html.
… - phần thân của tài liệu html. Tham số màu sắc(màu nền) chỉ định màu nền, văn bản – màu văn bản. Màu sắc được chỉ định trong hệ thống số thập lục phân sử dụng mô hình RGB. Ví dụ, #ffffff có nghĩa R =#ff , G =#ff , B =#ff , những thứ kia. tối đa của mỗi trong ba màu. Chúng ta biết rằng việc trộn ba màu cơ bản trong hệ thống RGB thành những phần bằng nhau với cường độ tối đa sẽ tạo ra màu trắng tinh khiết.
… - tiêu đề cấp đầu tiên, chỉ định định dạng cụ thể cho kiểu này: kích thước phông chữ, thụt lề trước và sau tiêu đề, căn chỉnh, v.v.
... - đoạn văn bản.
- thẻ img chưa ghép nối (từ hình ảnh), điều khiển việc chèn hình minh họa đồ họa vào tài liệu siêu văn bản. Trong trường hợp này, một tệp đồ họa có tên ảnh 1.gif, nằm trong cùng thư mục với tài liệu html này. Nếu bạn chú ý đến URL của tài liệu được hiển thị trong hình ở dòng “địa chỉ”, bạn có thể xác định rằng tài liệu này đã được lưu dưới tên “ chỉ mục.html" trong thư mục " Tai liệu của tôi” trên đĩa C. Tham số căn chỉnh kiểm soát sự căn chỉnh của hình minh họa so với văn bản của trang html. Trong trường hợp này, giá trị tham số = “trái”, đặt căn trái và cho phép văn bản bao quanh.
… - thẻ chèn siêu liên kết. Khi bạn kích hoạt liên kết này, một tài liệu khác sẽ được tải trong cửa sổ trình duyệt, trong trường hợp này cũng phải được lưu trong cùng thư mục và phải được đặt tên câu thơ.html.
… - Làm nổi bật bằng màu sắc. Trong trường hợp này, màu sẽ là màu đỏ (R =#ff , G =#00, B =#00).
… - bài tiết chất béo.
- thẻ không ghép nối – ngắt dòng bắt buộc (ngắt) trong đoạn hiện tại.
Có các thẻ để định dạng bảng và sắp xếp danh sách. Việc thành thạo ngôn ngữ đánh dấu siêu văn bản khá đơn giản và việc tạo và xuất bản trang web của riêng bạn trên Internet cũng khá đơn giản nếu muốn.
Bài viết mới nhất
Ưu điểm của cách bố trí bảng:
1. Sự thuận tiện và dễ dàng khi làm việc với các ô bảng được sử dụng làm thành phần cấu trúc của ấn phẩm điện tử. Sử dụng bảng, bạn có thể dễ dàng tạo các cấu trúc đơn giản. Nếu cần chỉ định một cấu trúc phức tạp hơn, chúng ta sẽ mất nhiều thời gian hơn một chút. Nhưng khi thu nhỏ cửa sổ trình duyệt, các cột sẽ giữ nguyên hình dáng ban đầu cũng như vị trí tương đối của chúng. Ngoài ra, bất kể nội dung của các ô lân cận như thế nào, chúng sẽ giữ nguyên chiều cao.
2.Sử dụng bố cục bảng rất phù hợp để tạo cái gọi là bố cục “linh hoạt”, trong đó chiều rộng phụ thuộc vào chiều rộng của cửa sổ trình duyệt.
3.Trong các ô của bảng, chúng ta có thể căn chỉnh theo chiều ngang và chiều dọc cùng một lúc.
4.Ít phụ thuộc nhất vào trình duyệt do người dùng lựa chọn.
Nhược điểm của cách bố trí bảng:
1.Để hiển thị trang, bạn phải đợi cho đến khi trình duyệt tải toàn bộ bảng.
2. Mã rườm rà hơn và khó hiểu hơn khi tạo bảng, bởi vì cấu trúc phân cấp phức tạp của các thẻ lồng nhau.
3. Không có sự tách biệt giữa thiết kế và nội dung.
4. Lập chỉ mục kém. Sự phân mảnh thông tin khiến công cụ tìm kiếm khó lập chỉ mục chính xác cho trang.
5. Thiếu thanh cuộn (với bố cục khung, bạn có thể cuộn các phần).
6. Bố cục không tuân thủ các tiêu chuẩn html và css (các bảng chỉ dành cho dữ liệu dạng bảng).
Ưu điểm của cách bố trí khối:
1. Mã của các trang html đã được giảm đi rất nhiều thông qua việc sử dụng các phần tử div.
2. Có khả năng lồng các khối vào nhau không chuẩn - bạn có thể đặt các phần tử theo cách bạn muốn.
3.Các khối được hiển thị khi chúng được tải, giúp tăng tốc độ làm việc với các ấn phẩm điện tử.
4. Lập chỉ mục tốt hơn bởi các công cụ tìm kiếm.
5. Có thể sắp xếp nhiều lớp chồng lên nhau, giúp cải thiện việc lập chỉ mục.
6.Khả năng sử dụng thanh cuộn cho từng khối.
7.Từ quan điểm thời trang, bố cục này hiện nay là phổ biến nhấtJ
Nhược điểm của cách bố trí khối:
1.Nếu độ phân giải màn hình của người dùng thấp, các khối có thể thay đổi vị trí tương đối của chúng.
2.Trong các trình duyệt khác nhau (phiên bản cũ), bố cục có thể trông khác nhau.
3. Bố cục này là khó nhất.
Bố cục cố định dựa trên khối bằng CSS.
Có bốn phương pháp định vị khác nhau.
Định vị tĩnh
Các phần tử HTML được định vị tĩnh theo mặc định. Phần tử được định vị tĩnh luôn được định vị theo luồng phần tử tiêu chuẩn trên trang.
Các phần tử được định vị tĩnh không bị ảnh hưởng bởi các thuộc tính trên, dưới, trái và phải.
Định vị cố định
Phần tử có vị trí cố định được định vị tương ứng với cửa sổ trình duyệt.
Nó sẽ không di chuyển ngay cả khi cửa sổ được cuộn:
Ví dụ:
Lưu ý: IE7 và IE8 chỉ hỗ trợ giá trị cố định nếu loại tài liệu!DOCTYPE được chỉ định.
Các phần tử cố định được loại bỏ khỏi luồng thông thường. Tài liệu và các phần tử khác hoạt động như thể phần tử cố định không tồn tại.
Các phần tử cố định có thể chồng lên các phần tử khác.
Định vị tuyệt đối
:
Ví dụ:
vị trí: tuyệt đối;
Bố cục đáp ứng dựa trên khối với CSS.
Thuộc tính định vị CSS cho phép bạn định vị một phần tử. Họ cũng có thể định vị một phần tử phía sau phần tử khác và chỉ định điều gì sẽ xảy ra khi nội dung của phần tử đó quá lớn.
Các phần tử có thể được định vị bằng các thuộc tính trên, dưới, trái và phải. Tuy nhiên, các thuộc tính này sẽ không hoạt động trừ khi thuộc tính vị trí được đặt.
Định vị tương đối
Ví dụ:
vị trí: tương đối;
Ví dụ:
vị trí: tương đối;
Các phần tử được định vị tương đối thường được sử dụng làm nơi chứa các phần tử được định vị tuyệt đối.
Áp dụng vị trí tuyệt đối trên trang. quy tắc chỉ số z.
Định vị tuyệt đối
Phần tử được định vị tuyệt đối được định vị tương ứng với phần tử cha đầu tiên được định vị không phải ở vị trí tĩnh. Nếu không tìm thấy phần tử nào như vậy thì phần tử cha được coi là :
Ví dụ
vị trí: tuyệt đối;
Các phần tử được định vị tuyệt đối sẽ bị xóa khỏi luồng phần tử tiêu chuẩn. Tài liệu và các phần tử khác hoạt động như thể phần tử được định vị tuyệt đối không tồn tại.
Các phần tử được định vị tuyệt đối có thể chồng lên các phần tử khác.
thuộc tính chỉ mục z chỉ định thứ tự dọc cho phần tử.
vị trí: tuyệt đối;
Phần tử có thứ tự dọc lớn hơn luôn được hiển thị trước phần tử có thứ tự dọc nhỏ hơn.
Lưu ý: chỉ mục z chỉ hoạt động đối với các phần tử được định vị (vị trí: tuyệt đối, vị trí: tương đối hoặc vị trí: cố định).
Thuộc tính z-index được hỗ trợ bởi tất cả các trình duyệt chính.
Lưu ý: Giá trị "kế thừa" không được hỗ trợ trong IE7 trở về trước. IE8 yêu cầu khai báo!DOCTYPE. IE9 hỗ trợ "kế thừa".
Giá trị tài sản:
Tự động: Đặt thứ tự dọc giống với phần tử gốc. Được sử dụng theo mặc định
Số: Đặt giá trị thứ tự dọc của phần tử. Giá trị âm được chấp nhận
Kế thừa: Chỉ định thứ tự dọc phải được kế thừa từ phần tử cha
Áp dụng vị trí tương đối Tạo hiệu ứng âm lượng và bóng.
Định vị tương đối
Một phần tử có vị trí tương đối được định vị so với vị trí bình thường của nó.
Ví dụ
vị trí: tương đối;
Ví dụh2.pos_top
vị trí: tương đối;
Bóng vùng chứa CSS3
Trong CSS3, thuộc tính box-shadow được sử dụng để thêm bóng vào vùng chứa:
Ví dụ
Thêm bóng vùng chứa vào phần tử div:
bóng hộp: 10px 10px 5px #888888;
Webkit-box-shadow: 10px 10px 5px #888888; /* Cuộc đi săn */)
Hình ảnh viền CSS3
Thông qua thuộc tính hình ảnh viền CSS3, bạn có thể sử dụng hình ảnh để tạo đường viền:
Thuộc tính border-image cho phép bạn chỉ định đường viền cho hình ảnh.
Ví dụ
Sử dụng hình ảnh để tạo đường viền xung quanh phần tử div:
border-image:url(border.png) 30 30 vòng;
Moz-border-image:url(border.png) 30 30 vòng; /*Firefox*/
Webkit-border-image:url(border.png) 30 30 vòng; /* Safari và Chrome */
O-border-image:url(border.png) 30 30 vòng; /* Opera */)
Thuộc tính mới:
border-image: Thuộc tính viết tắt để thiết lập tất cả các thuộc tính của nhóm border-image-* 3
border-radius: Thuộc tính viết tắt để thiết lập tất cả bốn thuộc tính của border-*-radius 3
box-shadow: Đính kèm một hoặc nhiều hiệu ứng đổ bóng vào vùng chứa
Bố cục là việc tạo một trang html theo cách mà tất cả các thành phần được hiển thị như dự định của thiết kế. Với bố cục chính xác và chất lượng cao, trang web sẽ trông giống nhau trong các trình duyệt khác nhau, nội dung sẽ có sẵn cho tất cả các màn hình. Có ba loại bố cục: dạng bảng, khối và hỗn hợp. Sau khi đọc hết bài viết này, bạn sẽ có thể chọn cho mình cái nào bạn có thể sử dụng để đạt được kết quả tốt nhất trong trường hợp của mình. Hãy nêu bật tất cả những ưu điểm và nhược điểm của từng loại.
Tabular được hình thành ngay cả trước khi CSS ra đời. Trang này là một bảng lớn được hình thành bằng cách sử dụng các thẻ
| , |
| . Tạo một trang web bằng phương pháp này thường đi kèm với việc chia phần trên (tiêu đề), chứa tiêu đề và logo, phần dưới (chân trang), nhằm hiển thị thông tin bản quyền và tham chiếu, phần giữa của trang (giữa). , phần giữa, nội dung, v.v.) đặt nội dung, nội dung chính.
Thuận lợi: Những nhược điểm chính của cách bố trí bảng: Bố cục khối dựa trên mô hình hộp CSS. Trong trường hợp này, trang bao gồm các khối được bọc trong các thẻ trong mã html . Sơ đồ chung của một khối như sau: nội dung, chiều rộng và chiều cao của nó có thể được đặt bởi thuộc tính “width” và “height”, phần đệm bên trong (giữa nội dung và khung) bằng thuộc tính “padding”, khung theo thuộc tính “viền” và phần đệm bên ngoài theo thuộc tính “lề”. Rất dễ dàng để tạo một trang web từ các khối như vậy. Các khối có thể được lồng vào nhau, mỗi khối có thể được gán một lớp và id. Nhiều “con chip” đã được phát minh để bù đắp cho những thiếu sót của các khối, chẳng hạn, bạn có thể căn chỉnh một khối theo chiều dọc như thế này: chiều cao: 200px; hiển thị: khối nội tuyến; căn dọc:giữa. Phương án cuối cùng, bạn có thể yêu cầu khối hoạt động giống như một bảng (thẻ bảng) bằng cách sử dụng thuộc tính display:table, một hàng (thẻ tr) - display:table-row hoặc một ô (thẻ td) - display:table -tế bào. Ưu điểm của cách bố trí khối: Sai sót: Chọn cái gì? |
|---|
