Html h2 và p trên cùng một dòng
Tôi đã hình dung nhiều như vậy, nhưng trừ khi bạn muốn thực hành sử dụng các thành phần và độ rộng của khối nội tuyến (vì bất kỳ lý do gì), tôi vẫn khuyên bạn nên sử dụng CSS hiện đại Show
Không có lý do gì để sử dụng các phần tử khối nội tuyến cho bố cục này. Thử thách đến trước khi flexbox được dạy nên có lẽ đó là lý do tại sao nó làm bố cục như vậy, hoặc chỉ để hiển thị nó. Biết về nó thì không tệ, nhưng đó cũng không phải là cách tôi sẽ làm nếu flexbox là một lựa chọn Tất cả khối nội tuyến, chiều rộng và căn chỉnh văn bản có thể được thay thế bằng hai dòng CSS trên vùng chứa 38 Tiết lộ. Hỗ trợ của bạn giúp giữ cho trang web hoạt động. Chúng tôi kiếm được phí giới thiệu cho một số dịch vụ chúng tôi đề xuất trên trang này. Tìm hiểu thêm nội dung
Dòng và Đoạn vănPhần này mô tả HTML được liên kết với các dòng và đoạn văn. Chúng tôi bắt đầu với các thẻ 8 và 9 cơ bảnXin lưu ý. Hướng dẫn này bao gồm các thẻ và thuộc tính không dùng nữa. Để có cái nhìn chi tiết về html hiện đại, hãy tham khảo các hướng dẫn của chúng tôi về đánh dấu ngữ nghĩa, cấu trúc tài liệu HTML, phông chữ và kiểu chữ web Phần tửThis is aligned left. This is the default. This is aligned center. This is aligned right. 8 8, một phần tử cấp khối, chỉ định nghĩa một khối nội dung trong trang. Ngoài việc xác định một khối, bản thân 8 không làm gì cả. Ví dụ: đoạn mã sau tạo một phần tử 8 với hai đoạn văn bên trong nó. Lưu ý rằng bạn có thể đặt các phần tử 9 bên trong một 8________số 8Điều đó mang lại cho chúng ta Đây là thứ trước 6Đây là thứ bên trong 6. Đây là nhiều thứ bên trong 6Đây là thứ sau 6Thuộc tínhThis is aligned left. This is the default. This is aligned center. This is aligned right. 30 30 đặt căn chỉnh nội dung của phần tử 8. Tất cả bốn giá trị, 33, 34, 35 và 36 đều được hỗ trợ tốt. 33 là giá trị mặc định. Mã này hiển thị mặc định. 1Điều đó mang lại cho chúng ta Đây sẽ là thời điểm tuyệt vời cho một tách cà phê, bạn có nghĩ vậy không? . Hãy uống cà phê cả ngày Phần tử đoạn văn 9 chỉ ra sự bắt đầu của một đoạn văn mới. Điều này thường được hiển thị với hai dấu xuống dòng, tạo ra một dòng trống duy nhất ở giữa hai đoạn văn 3Cái nào sản xuất cái này Đây là đoạn đầu tiên. Và đây là đoạn thứ hai Thuộc tínhThis is aligned left. This is the default. This is aligned center. This is aligned right. 30 30 cho biết sự liên kết của đoạn văn
Cái nào sản xuất cái này Cái này được căn trái. Đây là mặc định Đây là trung tâm được căn chỉnh Điều này được căn chỉnh bên phải Thuộc tínhThis is aligned left. This is the default. This is aligned center. This is aligned right. 71 71 được một số trình duyệt nhận dạng và hoạt động rất giống với 73. Tuy nhiên, nó không phải là HTML tiêu chuẩn và vẫn chưa được hỗ trợ rộng rãi, vì vậy hãy sử dụng 73 để thay thếThẻ cuối P có cần thiết không?W3C nói về 75. “Thẻ kết thúc là tùy chọn vì nó luôn có thể được suy ra bởi trình phân tích cú pháp. ” Điều này có nghĩa là một 9 mới ám chỉ sự kết thúc của 9 trước đó (và bất kỳ căn chỉnh nào được thiết lập bởi 9 trước đó)Bất kỳ phần tử cấp độ khối nào khác, chẳng hạn như 79 hoặc 60 cũng nên kết thúc đoạn văn. Tuy nhiên, không phải lúc nào nó cũng diễn ra như vậy. Ví dụ, một số trình duyệt sẽ căn phải văn bản ngay cả sau một bảng. Trong ví dụ sau, MSIE hiển thị phần “sau cái bàn” được căn phải, trong khi Netscape hiển thị phần đó được căn trái Kết xuất của MSIEKết xuất của NetscapeNếu bạn đặt căn chỉnh hoặc thuộc tính kiểu khác cho thành phần đoạn văn thì tốt nhất nên sử dụng 75. Nếu bạn không bao giờ sử dụng thiết lập bất kỳ kiểu nào thì bạn thường có thể bỏ qua 75Xem thông số kỹ thuật của W3C cho các đoạn văn để biết thêm thông tin về chủ đề này Căn chỉnh văn bảnBạn có thể đặt căn chỉnh của bất kỳ thành phần HTML nào bằng quy tắc kiểu 63. 63 có thể được sử dụng để đặt căn chỉnh cho một đoạn văn, một phần của tài liệu hoặc thậm chí toàn bộ tài liệu. 63 có thể được sử dụng để đặt căn chỉnh sang trái, phải, giữa hoặc căn đềuVí dụ: giả sử chúng ta muốn căn giữa một đoạn văn. Trước tiên, chúng ta sẽ tạo một lớp kiểu có tên là 66 bằng cách đặt đoạn mã sau vào phần “ của tài liệu 3Bây giờ chúng ta có thể đặt bất kỳ đoạn nào thành lớp căn giữa như thế này 7Điều này mang lại cho chúng ta điều này căn giữa{căn chỉnh văn bản. trung tâm;} tập trung Chúng ta có thể áp dụng cùng một lớp cho phần tử 8 để căn giữa một phần của trang 6Điều đó mang lại cho chúng ta Đây là một nhóm văn bản được căn giữa. Nó luôn được căn giữa vì nó nằm trong DIV có kiểu căn giữa Mỗi phần tử trong DIV căn giữa kế thừa kiểu căn giữa biện minhTheo mặc định, hầu hết các trình duyệt hiển thị văn bản có cạnh phải có răng cưa Nếu bạn muốn tất cả văn bản được hiển thị giống như trong một cuốn sách có cạnh phải đều nhau, bạn có thể sử dụng một quy tắc kiểu duy nhất. Để đặt tất cả văn bản thành căn đều, hãy sao chép đoạn mã sau vào phần “ trong tài liệu của bạn 8Vấn đề với sự biện minh là nhiều trình duyệt nhầm lẫn về vị trí của dòng văn bản cuối cùng (không nên chứng minh). Ví dụ: MSIE4. x bối rối khi một khối văn bản ngay sau một bảng. Lưu ý trong hình ảnh này rằng dòng văn bản cuối cùng kéo dài các từ “một trong những đặc vụ của chúng tôi” trên toàn bộ dòng Để khắc phục tình trạng này, hãy bao quanh tất cả các khối văn bản bằng 9 và 75 1Bây giờ MSIE sai lầm của chúng tôi làm cho mọi thứ lành mạnh hơn thụt lềCó một số cách để thụt lề các đoạn văn và toàn bộ các phần trên trang web của bạn. Một vài phần tiếp theo mô tả bốn kỹ thuật chính để thụt đầu dòng
Tuy nhiên, trước khi chúng ta bắt đầu, bạn nên nói vài lời về 60. Có một quan niệm sai lầm phổ biến rằng nên sử dụng 60 để thụt lề các phần của trang. Niềm tin này xuất phát từ thực tế là hầu hết các trình duyệt web trực quan hiển thị văn bản được trích dẫn dưới dạng thụt vào. Tuy nhiên, hãy nhớ rằng HTML không phải là ngôn ngữ định dạng và cho kết quả không thể đoán trước khi bạn cố gắng sử dụng nó như một ngôn ngữ định dạng. Sử dụng 60 nếu bạn có một khối văn bản được trích dẫn, nếu không, hãy sử dụng các kỹ thuật được mô tả trong một vài đoạn tiếp theoThụt lề một đoạn vănBạn có thể thụt lề một đoạn văn bằng cách sử dụng các kiểu. Ví dụ: giả sử chúng ta muốn thụt lề một đoạn 50 điểm. Đầu tiên, chúng tôi tạo một lớp được gọi là thụt lề với các quy tắc kiểu sau. Đặt mã này vào phần “ trong tài liệu của bạn 10Bây giờ chúng ta đặt lớp của đoạn văn thành thụt lề bằng cách thêm thuộc tính LỚP vào thẻ 9 11Điều này mang lại cho chúng tôi đoạn văn thụt lề này thụt vào {padding-left. 50 điểm; . 50 điểm;} Bạn không biết về tôi nếu không đọc cuốn sách có tên Những cuộc phiêu lưu của Tom Sawyer; . Cuốn sách đó được thực hiện bởi ông. Mark Twain, và ông đã nói sự thật, chủ yếu. Có những điều anh ấy kéo dài, nhưng chủ yếu là anh ấy nói sự thật. đó là không có gì. Tôi chưa bao giờ thấy ai mà nói dối hết lần này đến lần khác, nếu không thì đó là dì Polly, hoặc góa phụ, hoặc có thể là Mary. Dì Polly — chính là dì Polly của Tom — và Mary, và Góa phụ Douglas, tất cả đều được kể trong cuốn sách đó, hầu hết là một cuốn sách có thật, với một số cáng, như tôi đã nói trước đây. – Mở đầu cho Huck Finn Thụt lề một phần của trangĐể thụt lề nhiều hơn một đoạn văn, chúng tôi sẽ sử dụng cùng một kiểu như chúng tôi đã thiết lập trong ví dụ trước. Đặt mã này vào phần “ trên trang của bạn 10Sau đó, chúng tôi sẽ sử dụng lớp thụt lề trong phần tử 8 13Cung cấp cho chúng tôi một phần thụt lề như thế này Rác thải gia đình nguy hại
Thụt lề toàn bộ trangNếu bạn muốn thụt lề toàn bộ trang, hãy đặt quy tắc kiểu để đặt phần đệm bên phải và bên trái cho phần tử “. Ví dụ: kiểu này đặt phần đệm bên phải và bên trái thành 100 pixel 14Kỹ thuật này phổ biến khi được sử dụng kết hợp với ảnh nền. Ví dụ: giả sử chúng tôi muốn hình ảnh này chạy xuống phía bên trái của trangHình ảnh này rộng 56 pixel, vì vậy hãy đặt phần đệm thành 60. Kiểu sau đặt hình nền, đặt lặp lại thành lặp lại-y (chỉ lặp lại theo chiều dọc ở phía bên trái của trang) và đặt phần đệm bên trái thành 60 (chúng tôi sẽ không đặt phần đệm bên phải) 15Đây là cách nó có thể trông như thế nào .background-indent{background-image:url(“/wp-content/uploads/blue.edge_.gif”); background-repeat:repeat-y; padding-left:60px; width:100%; overflow: auto;} Rác thải gia đình nguy hại Những vật dụng này có thể được mang đến trung tâm tái chế để phân phối lại. Điều này tốt hơn nhiều so với việc ném chúng ra ngoài.
Thụt lề dòng đầu tiên của mỗi đoạnĐể thụt lề dòng đầu tiên của mỗi đoạn, hãy đặt quy tắc kiểu bằng cách sử dụng thụt lề văn bản. Ví dụ đoạn mã sau thụt vào dòng đầu tiên của mỗi đoạn 30 điểm. Sao chép mã này vào phần “ trên trang của bạn 16Đoạn mã này thụt vào dòng đầu tiên của mỗi phần tử 9, nhưng có thể bạn sẽ gặp phải một vấn đề khó chịu. Nếu bạn giống như hầu hết các nhà thiết kế, bạn có thể không đặt chữ P trước đoạn đầu tiên hoặc giữa tiêu đề như 86 và văn bản theo sau nó. Thật không may, đó chính xác là những gì bạn cần làm nếu muốn đoạn văn được thụt vào. Văn bản trong những tình huống này là một phần của thứ gọi là “khối ẩn danh” và không thể được tham chiếu trực tiếp. Để thụt lề, bạn phải đặt văn bản trong phần tử 9Vì vậy, ví dụ, đoạn mã sau không có 9 giữa tiêu đề và văn bản, vì vậy văn bản không được thụt vào 17Điều đó mang lại cho chúng ta Câu chuyện của tôi Mã này không có một 9 giữa tiêu đề và văn bản, vì vậy văn bản được thụt vào 18.indented-p{text-indent: 30pt;}Câu chuyện của tôi Đoạn này được thụt vào Phần tửThis is aligned left. This is the default. This is aligned center. This is aligned right. 73 73 chèn một ký tự xuống dòng đơn. Trong khi ________ 09 biểu thị sự bắt đầu của một đoạn mới, thì ________ 273 chỉ ngụ ý xuống dòng trong cùng một đoạn. 73 thường được hiển thị với một lần xuống dòngVí dụ, mã này 19Cái nào sản xuất cái này Có một người đàn ông đến từ Nantucket Bởi vì 73 không bắt đầu một đoạn mới, tất cả các thuộc tính của đoạn hiện tại vẫn giữ nguyên 30Cái nào sản xuất cái này Có một người đàn ông đến từ Nantucket Thuộc tínhThis is aligned left. This is the default. This is aligned center. This is aligned right. 71 71 nói rằng ngoài việc chèn ngắt dòng, nếu có hình ảnh hoặc đối tượng khác ở bên phải hoặc bên trái, hãy bỏ qua phần đó. Ví dụ: mã này nói rằng hình ảnh phải được căn chỉnh ở phía bên trái của trang. Sau đó, có một số văn bản, sau đó 33. Văn bản sau đó đã qua hình ảnh 31Cái nào sản xuất cái này Hãy đến bữa tiệc Halloween nào. Bạn sẽ có một thời gian tuyệt vời.8. 00 giờ tối đến nửa đêm. Mặc một bộ trang phục hoặc trở thành con người đáng sợ của chính bạn. 19 giống như 100, nhưng không được hỗ trợ trên nhiều trình duyệt, vì vậy hãy sử dụng 100 để thay thếPhần tửThis is aligned left. This is the default. This is aligned center. This is aligned right. 34Khuyến nghị sử dụng. Sử dụng 8 để thay thế 104 hoàn toàn tương đương với 105. “đang bị loại bỏ dần. Sử dụng 105 để thay thế 32Điều đó mang lại cho chúng ta Chào bạn. Hãy nói về những thứ Cái nào giống như 33Điều đó mang lại cho chúng ta Chào bạn. Hãy nói về những thứ Phần tửThis is aligned left. This is the default. This is aligned center. This is aligned right. 79 79 vẽ một đường ngang (“quy tắc ngang”) trên trang. Đó là nó. Đối với một khái niệm đơn giản như vậy, các quy tắc ngang lại phổ biến một cách đáng ngạc nhiên. Hãy bắt đầu với những điều cơ bản. 79 không có thẻ kết thúc và không yêu cầu thuộc tính 34Mà tạo ra quy tắc này Một số văn bản lên đây Một số văn bản dưới đây 79 thường chỉ sự phân chia trong trang. Nội dung trước quy tắc nằm trong một “phần” khác với nội dung sau. Vì lý do đó, nhiều nhà thiết kế coi 79 là thẻ logic chứ không phải thẻ bố cụcThuộc tínhThis is aligned left. This is the default. This is aligned center. This is aligned right. 112 112 chỉ ra rằng quy tắc nên được trình bày dưới dạng phẳng thay vì ba chiều. So sánh quy tắc ngang thông thường nàyVới quy tắc 112 35Điều đó mang lại cho chúng ta 112 thường được sử dụng cùng với 116 36Sản xuất quy tắc này 112 phổ biến vì các trình duyệt thường không hiển thị tốt các quy tắc ba chiều. Thật vậy, trong nhiều trường hợp, quy tắc được trình bày cùng màu với nền, khiến nó gần như vô hìnhThuộc tínhThis is aligned left. This is the default. This is aligned center. This is aligned right. 116 116 cho biết chiều cao của quy tắc. (Tôi đoán gọi nó là “CHIỀU CAO” sẽ quá dễ dàng. ) Đối với chiều ngang, xem 120. So sánh một số kích thước này 37Điều này mang lại cho chúng ta những quy tắc này Các trình duyệt thường sẽ không hiển thị 79 lớn hơn 100Thuộc tínhThis is aligned left. This is the default. This is aligned center. This is aligned right. 120 120 đặt chiều rộng theo chiều ngang của quy tắc. Bạn có thể biểu thị kích thước bằng pixel hoặc theo tỷ lệ phần trămCác 79 này được đặt với độ rộng pixel 38Điều này mang lại cho chúng ta những quy tắc này 120 thường được biểu thị dưới dạng phần trăm. Nếu bạn sử dụng chiều rộng phần trăm, hãy nhớ đặt giá trị trong dấu ngoặc kép 39Sản xuất các quy tắc này Mặc định là 100%. Theo mặc định, quy tắc được căn giữa. Để đặt căn chỉnh khác, hãy sử dụng 30Phần trăm độ rộng sử dụng tỷ lệ phần trăm của chiều rộng có sẵn, không phải toàn bộ chiều rộng của trang. Ví dụ: nếu quy tắc nằm trong bảng thì chiều rộng là phần trăm chiều rộng của ô trong bảng 0Mà sản xuất bảng này Này, sao cũng được Một khâu trong thời gian tiết kiệm chín Thuộc tínhThis is aligned left. This is the default. This is aligned center. This is aligned right. 30 30 thiết lập sự liên kết của quy tắc. ALIGN chỉ hữu ích nếu bạn cũng sử dụng 120 1Đưa cái này cho chúng tôi Phần tửThis is aligned left. This is the default. This is aligned center. This is aligned right. 130 130 là một trong những thẻ đẹp nhất trong hộp công cụ HTML. 130 đánh dấu văn bản là “được định dạng sẵn” — tất cả khoảng trắng và dấu xuống dòng được hiển thị chính xác khi bạn nhập chúng 2Cái nào sản xuất cái này Văn bản 130 được hiển thị bằng phông chữ có chiều rộng cố định, nghĩa là tất cả các ký tự và khoảng trắng đều có cùng chiều rộng. Chiều rộng cố định giúp bạn dễ dàng sắp xếp văn bản theo cách bạn muốn, vì vậy, 130 rất phù hợp để tạo các bảng “nhanh và bẩn” như bảng ở trên 130 KHÔNG khiến trình duyệt bỏ qua các thẻ. Bạn vẫn có thể tạo liên kết và các tính năng khác 3sản xuất cái này Khi bạn bắt đầu thêm phần đánh dấu, sẽ khó xem văn bản hiển thị như thế nào (giãn cách các thẻ của bạn đều nhau như bảng ở trên sẽ hữu ích). 130 thường được sử dụng để trích dẫn các khối văn bản lớn mà bạn không muốn “HTMLize”, nhưng “ có thể làm rối văn bản. Đối với một bảng lớn hơn một vài dòng, về lâu dài việc sử dụng mã bảng thường dễ dàng hơnPhần tử“ngăn chặn sự quay trở lại vận chuyển xảy ra. Ví dụ: đoạn mã sau tạo ra một bài thơ dài một dòng vô nghĩa 4Cái nào sản xuất cái này Xoay người và xoay người, quay tròn và la hét, rít lên và gầm rú, sợ hãi và giễu cợt, giậm chân và la hét, chạy nhảy, gọt vỏ và thái hạt lựu, nấu nướng và cân, định giá và định giá, ăn và uống, tất cả chỉ trong một ngày làm việc 137 5Cái nào sản xuất cái này Vặn vẹo và xoay người, Phần tử 138 để ngăn ngắt dòng trong một phần văn bản, sau đó bạn muốn nói “nhưng bạn có thể ngắt dòng TẠI ĐÂY nếu muốn”. “ không bắt buộc ngắt dòng, nó chỉ cho phép một 6sản xuất Có lẽ bởi vì mỗi khi tôi đọc đến dòng cuối cùng, tôi cảm thấy như mình còn quá nhiều điều để nói nên tôi phải cố gắng nhồi nhét càng nhiều từ mà tôi có thể nghĩ ra càng tốt. |