Cách tạo một thụt lề nhỏ trong html. Cách tạo dòng màu đỏ trong html hoặc thụt dòng đầu tiên trong đoạn văn

Theo tôi, phương pháp thụt lề cho văn bản này là tối ưu nhất, tuy nhiên, hãy xem xét một cách khác để thụt lề bằng hình ảnh.

Thụt lề văn bản HTML, phương pháp thứ tư - ở đây chúng ta sẽ sử dụng hình ảnh để thụt lề.

Để làm ví dụ hoạt động, hãy xem ngay mã html minh họa cách hoạt động của phương thức này:

Từ ví dụ trên có thể thấy rõ rằng bằng cách thay đổi độ rộng của hình ảnh, chúng ta có thể thay đổi vị trí của văn bản, tức là đặt mức thụt lề mong muốn cho văn bản.

Là một hình ảnh, bạn có thể sử dụng hình ảnh có chiều rộng và chiều cao bằng một pixel. Để ngăn hình ảnh chúng tôi đang sử dụng hiển thị trên trang, chúng tôi sẽ đặt màu của nó giống hệt với nền của trang web.

Theo tôi, các phương pháp thụt lề cho văn bản ở trên là khá đủ để sắp xếp mức thụt lề mà bạn cần trong mọi tình huống khi thêm nội dung vào trang trên trang web của bạn.

Chào mừng đến với blog của tôi. Css (Cascading Style Sheets) cung cấp nhiều tùy chọn để tùy chỉnh giao diện của trang web. Hôm nay tôi muốn trình bày ngắn gọn cách xác định trong CSS phần đệm ở trên cùng hoặc ở bất kỳ phía nào khác cho bất kỳ phần tử nào.

Lề

Lề được đặt bằng thuộc tính lề. Với sự trợ giúp của nó, bạn có thể đặt lề cho cả bốn cạnh cùng một lúc hoặc sử dụng các thuộc tính khác: lề trên, lề trái, lề phải, lề dưới, cho phép bạn chỉ đặt lề ở một bên.

Lề xác định khoảng cách mà cạnh được chọn của một phần tử sẽ được bù đắp từ các phần tử khác trên trang. Ví dụ: mục:

P, div( Lề trên: 20px; )

Điều này có nghĩa là tất cả các khối và đoạn văn sẽ được thụt vào ở trên cùng 20 pixel, nghĩa là cạnh trên của chúng sẽ được di chuyển ra khỏi các phần tử liền kề với nó một khoảng cách này.

Lề có thể được viết ở mỗi bên chỉ bằng một thuộc tính lề, trong đó 4 giá trị được viết liên tiếp:

Div( Lề: 20px 10px 20px 10px; )

Phần đệm sẽ được đưa ra lần lượt từ các cạnh trên, phải, dưới và trái. Vì trong trường hợp này chúng bằng nhau ở các phía đối diện nên chúng ta cũng có thể viết nó như thế này:

Div( Lề: 20px 10px; )

Giá trị đầu tiên là lề ở trên và dưới, giá trị thứ hai là lề ở hai bên.

Thụt lề

Phần đệm bên trong hoạt động khác - nó không di chuyển khối ra khỏi các phần tử khác mà thêm khoảng trống đó bên trong phần tử, di chuyển nội dung của khối ra khỏi các cạnh của nó. Thật thoải mái. Bạn đã thấy trang web nào có văn bản bắt đầu ở phía trên cùng bên trái của cửa sổ ở đâu chưa?

Tôi chưa thấy điều này, bởi vì các nhà phát triển web luôn sử dụng thụt lề bên ngoài và bên trong để làm cho văn bản dễ đọc nhất có thể. Khoảng đệm bên trong được chỉ định bằng thuộc tính đệm, trong đó 4 giá trị có thể được liệt kê cùng một lúc, cách nhau bằng dấu cách, tương ứng cho tất cả các cạnh.

Ngoài ra, tương tự như lề, bạn có thể thêm tên của cạnh và chỉ đặt khoảng cách cho nó. Ví dụ: phần đệm trên cùng có thể được viết bằng cách sử dụng phần đệm trên cùng. Nói chung, thuộc tính đệm hoạt động giống hệt như thuộc tính lề.

Ví dụ: bạn có thể đưa ra đoạn mã này:

Khối( Chiều rộng: 200px; Khoảng đệm: 20px; )

Bạn nghĩ chiều rộng thực tế của phần tử của chúng ta sẽ là bao nhiêu? Ở đây bạn có thể thấy rằng nó có kích thước 200 pixel, nhưng phần đệm thêm 20 pixel vào mỗi bên, tổng cộng là 240 pixel. Hãy tính đến điều này khi thiết kế.

Tôi cũng muốn lưu ý rằng phần đệm thường chỉ được cung cấp cho các phần tử khối; tốt hơn là không cung cấp phần đệm này cho các phần tử nội tuyến. Lề hoạt động tốt với bất kỳ yếu tố nào.

Một tài nguyên web được người dùng đánh giá dựa trên sự hấp dẫn trực quan của nó. Do đó, ngay cả văn bản hữu ích về mặt thông tin cũng có thể không được đọc do nó được thiết kế kém. Kết luận - bạn cần tiếp cận một cách cẩn thận và chăm chú không chỉ nội dung ngữ nghĩa của các trang trên trang web mà còn cả cách trình bày trực quan của nó. Sự ra đời của công nghệ CSS đã mở rộng khả năng tạo ra những bài viết hấp dẫn. Một trong những thuộc tính được thiết kế để giúp văn bản dễ đọc hơn là thụt lề văn bản CSS.

Lề và phần đệm: Sự khác biệt là gì?

Trước khi bắt đầu định dạng văn bản, bạn nên hiểu lề và thụt lề là gì. Mặc dù thực tế là các phần tử đánh dấu này trong một số trường hợp trông giống nhau đối với người dùng, nhưng vẫn có những khác biệt cơ bản giữa chúng:

• trường được chỉ định bởi thuộc tính phần đệm, thụt lề - lề;
• lề được xác định bằng khoảng cách giữa nội dung và đường viền của khối, khoảng thụt lề - giữa đường viền của các khối liền kề;
• lề có thể được tính đến hoặc không theo kích thước của phần tử (chiều rộng và chiều cao).

tài sản ký quỹ

Vì vậy, để thiết lập mức thụt lề ngang hoặc dọc của văn bản CSS, hãy sử dụng cấu trúc lề. Thuộc tính này áp dụng cho thẻ xác định đoạn văn của tài liệu. Trong trường hợp đơn giản nhất nó được viết là:

lề: 12px.

Dòng này có nghĩa là xung quanh khối văn bản (hoặc bất kỳ khối nào khác) sẽ có một vết lõm 12 pixel ở tất cả các cạnh. Ví dụ: để tăng khoảng thời gian ba lần, chỉ cần viết:

lề: 36px.

Nhưng điều gì sẽ xảy ra nếu khoảng cách giữa các khối ở mỗi bên khác nhau? Các nhà phát triển trang web sử dụng một số hình thức ghi:

1. lề: 11px 22px.
2. lề: 11px 22px 33px.
3. lề: 11px 22px 33px 44px.

Trong ví dụ đầu tiên, 11 pixel sẽ được thụt vào từ viền dưới và trên của khối và 22 pixel ở các cạnh của khối. Theo dạng ghi thứ hai, sẽ có 11 pixel giữa cạnh trên của khối và nội dung, 33 pixel giữa đáy và 22 pixel ở hai bên. Trong trường hợp thứ ba, phần đệm sẽ có 11 pixel ở trên, 22 pixel ở bên phải, 33 pixel ở dưới cùng và 44 pixel ở bên trái.

Cũng có thể ghi lại khoảng cách đến ranh giới khối chỉ ở một bên: lề trên, lề dưới, lề trái, lề phải. Bằng cách dịch tên tài sản sang tiếng Nga, bạn có thể dễ dàng đoán được mục đích của chúng. Ví dụ: mục sau đây cho biết lề phải sẽ là 22 pixel:

lề phải: 22px.

Đối với các mặt khác, khoảng cách xung quanh khối được coi là bằng giá trị của phần tử cha.

Tài sản lề có một tính năng mà nhà phát triển phải ghi nhớ khi sử dụng thụt lề dọc văn bản CSS. Khoảng cách của các phần tử liền kề không được cộng lại mà chồng lên nhau. Ví dụ: để một trong các khối có lề dưới: 15px, và khối liền kề bên dưới lề trên: 35px. Số học và lẽ thường ở trường cho thấy tổng không gian giữa chúng sẽ là 50 pixel. Trong thực tế, đây không phải là trường hợp. Khối có giá trị thuộc tính cao lề sẽ “hấp thụ” hàng xóm của nó. Do đó, khoảng cách giữa các phần tử sẽ là 35 pixel.

"Vạch kẻ màu đỏ

Khi định dạng tài liệu trong trình soạn thảo văn bản, người dùng thích chỉ định từng đoạn mới bằng dòng “màu đỏ”. Với sự trợ giúp của CSS, thật dễ dàng để thụt lề văn bản ở bên trái - cấu trúc được sử dụng thụt lề văn bản. Nó được viết như thế này:

thụt lề văn bản: 11px.

Tức là dòng đầu tiên của đoạn văn sẽ bị dịch chuyển so với cạnh trái 11 pixel. Để làm cho văn bản trên trang web giống một tài liệu hơn trong trình chỉnh sửa, bạn nên đặt thêm, nghĩa là viết:

thụt lề văn bản: 11px;

căn chỉnh văn bản: căn chỉnh.

Ngoài pixel, khi mô tả dấu, được phép sử dụng các đơn vị khác - inch, điểm, tỷ lệ phần trăm. Đặt khối có phần đệm văn bản CSS là 10%. Với chiều rộng khối là 500 pixel thì đường màu đỏ sẽ là 50 pixel (10% của 500).

Thuộc tính này có thể được đặt thành thừa kế. Mục này nói rằng khối sử dụng thuộc tính tương tự của khối cha.

thụt lề văn bản: kế thừa.

Đáng ngạc nhiên là nó cũng có thể nhận giá trị âm! Trong trường hợp này, cái gọi là phần nhô ra được hình thành, nghĩa là văn bản chính vẫn được giữ nguyên và dòng đầu tiên được dịch sang trái 22 pixel:

thụt lề văn bản: -22px.

Để ngăn các chữ cái vượt ra ngoài viền trái của trình duyệt, ngoài thụt lề văn bản bạn cần sử dụng cấu trúc để đặt trường:

phần đệm bên trái: 22px.

Các thuộc tính cơ bản của CSS được xem xét. Và thực hành sẽ giúp củng cố chúng. Dưới đây là một số mẹo cuối cùng để áp dụng những gì bạn đã học được vào việc phát triển trang web của mình:

• dòng màu đỏ và thụt lề văn bản là các khái niệm khác nhau và các thuộc tính khác nhau được sử dụng để biểu thị chúng;
• Đối với thụt lề dọc, các quy tắc toán học không được áp dụng - các khoảng trùng nhau, phần tử có giá trị lớn hơn “thắng”;
• thụt lề đoạn văn phủ định được sử dụng để chỉ ra dòng đầu tiên của đoạn văn sử dụng hình ảnh.

Chào buổi chiều các độc giả thân mến. Hôm nay có một lưu ý ngắn về cách làm dòng màu đỏ cho mỗi đoạn trên trang html. Nếu ai chưa biết thì dòng màu đỏ chính là phần thụt dòng đầu tiên trong khối văn bản. Việc thụt lề như vậy trong các đoạn văn có thể được tìm thấy ở hầu hết mọi văn bản in, nhưng khi tạo trang web, việc thiết kế đường màu đỏ là khá hiếm, mặc dù thực tế là nó làm cho văn bản dễ nhìn hơn nhiều. Trong trường hợp một khách hàng đột nhiên yêu cầu các đoạn trên trang web của họ bắt đầu bằng một dòng màu đỏ, thì tôi sẽ cung cấp cho bạn một công thức đơn giản để giải quyết vấn đề này.

Bạn có thể giải quyết vấn đề bằng nhiều cách, chẳng hạn như bạn có thể chèn một số ký tự đặc biệt liên tiếp vào đầu mỗi đoạn văn, nhưng việc này có thể mất khá nhiều thời gian. Vì vậy, tôi khuyên bạn nên sử dụng thuộc tính CSS để tạo đường màu đỏ thụt lề văn bản, bộ nào thụt lề dòng đầu tiên khối văn bản. Trong trường hợp này, không có hiệu lực nào được thực hiện trên các dòng còn lại.

Thuộc tính thụt lề văn bản có cú pháp đơn giản:

thụt lề văn bản:<значение> | <проценты>| thừa kế

Bạn có thể chỉ định pixel (px), điểm (pt) và các đơn vị khác được chấp nhận trong CSS làm giá trị. Giá trị xác định mức độ dịch chuyển văn bản của dòng đầu tiên sang phải so với vị trí ban đầu. Có thể chấp nhận chỉ định các giá trị âm, sau đó văn bản sẽ di chuyển sang trái. Khi chỉ định giá trị phần trăm, việc thụt lề dòng đầu tiên được tính tùy thuộc vào độ rộng của khối văn bản.

Nếu bạn chỉ cần thêm một dòng màu đỏ vào một đoạn văn, bạn có thể thực hiện việc này:

Kết quả:

Có một cây sồi ở rìa đường. Có lẽ nó già hơn những cây bạch dương trong rừng gấp mười lần, dày gấp mười lần và cao gấp đôi mỗi cây bạch dương. Đó là một cây sồi khổng lồ, chu vi gấp đôi, với những cành gãy và vỏ cây đầy những vết loét cũ. Với những cánh tay và ngón tay to lớn, vụng về, xương xẩu không đối xứng, ông đứng như một lão già kỳ dị, giận dữ và khinh thường giữa những cây bạch dương đang mỉm cười. Chỉ có mình anh là không muốn khuất phục trước vẻ đẹp quyến rũ của mùa xuân và không muốn nhìn thấy cả mùa xuân lẫn mặt trời.

Hoặc, đối với những đoạn văn bắt đầu bằng dòng màu đỏ, hãy thêm thuộc tính lớp và thêm kiểu mong muốn:

Hoàng tử Andrei đã nhìn lại cây sồi này nhiều lần khi lái xe xuyên rừng. Dưới gốc cây sồi có hoa cỏ, nhưng anh vẫn đứng giữa chúng, u ám, bất động, xấu xí và bướng bỉnh.

Kết quả:

Hoàng tử Andrei đã nhìn lại cây sồi này nhiều lần khi lái xe xuyên rừng. Dưới gốc cây sồi có hoa cỏ, nhưng anh vẫn đứng giữa chúng, u ám, bất động, xấu xí và bướng bỉnh.

Bây giờ bạn có thể dễ dàng tạo một đường màu đỏ trên các trang html của bạn. Hẹn gặp lại!

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ullamco labis nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate "Velit esse cillum dolore eu fugiat nulla pariatur. Ngoại trừ sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labum." Đoạn 1.10.32 "de Finibus Bonorum et Malorum", được viết bởi Cicero vào năm 45 sau Công Nguyên. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illovente veritatis et quasi architectureo beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fu git, sedquia consequuntur magni dolores eos quiratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labe et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam , quis nostrum exerciteem ullam corporis suscipit lao động, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" Bản dịch tiếng Anh 1914, H. Rackham "Nhưng tôi phải giải thích cho bạn làm thế nào mà tất cả những ý tưởng sai lầm về việc tố cáo niềm vui và ca ngợi nỗi đau lại ra đời và tôi sẽ cung cấp cho bạn một tài khoản đầy đủ về hệ thống, đồng thời giải thích những lời dạy thực tế của nhà thám hiểm vĩ đại của sự thật, bậc thầy xây dựng nên hạnh phúc của con người. Không ai từ chối, không thích hay tránh né chính niềm vui, bởi vì nó là niềm vui, mà bởi vì những người không biết cách theo đuổi niềm vui một cách hợp lý sẽ gặp phải những hậu quả vô cùng đau đớn. Và cũng không phải vậy nữa. có bất kỳ ai yêu, theo đuổi hoặc mong muốn có được nỗi đau cho riêng mình, bởi vì đó là nỗi đau, nhưng vì đôi khi có những hoàn cảnh xảy ra trong đó dầu và nỗi đau có thể mang lại cho anh ta niềm vui lớn lao. , ngoại trừ để có được một số lợi ích từ nó? Nhưng ai có quyền chỉ trích một người chọn tận hưởng một niềm vui mà không gây ra hậu quả khó chịu, hoặc một người trốn tránh nỗi đau không tạo ra niềm vui? Đoạn 1.10.33 "de Finibus Bonorum et Malorum", được viết bởi Cicero vào năm 45 sau Công Nguyên. "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque Correti quos dolores et quas molestias ngoại trừuri sint occaecati cupiditate non Provident, similique sunt in culpa qui officia deserunt mollitia animi, id est labum et dolorum fuga. Et harum quidem rerum facilis est et expedita Differentio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo trừ id quod maxime placeat facere possimus, omnis voluptas giả địnhnda est, omnis dolor đẩy lùi. Temporibus autem quibusdam et aut oficiis debitis aut rerum necessitatibus saepe Evenie t "ut et voluptates Repudiandae sint et molestiae non recusandae. Itaque Earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores đẩy lùi." Bản dịch tiếng Anh 1914, H. Rackham "Mặt khác, chúng tôi tố cáo với sự phẫn nộ chính đáng và không thích những người bị mê hoặc và mất tinh thần bởi sự quyến rũ của thú vui nhất thời, đến mức mù quáng vì ham muốn, đến nỗi họ không thể thấy trước nỗi đau và rắc rối mà họ gặp phải." chắc chắn sẽ xảy ra sau đó, và trách nhiệm ngang nhau thuộc về những người thất bại trong nhiệm vụ của mình do yếu đuối về ý chí, điều này cũng giống như nói rằng do trốn tránh công việc vất vả và đau đớn. Những trường hợp này hoàn toàn đơn giản và dễ phân biệt. quyền lựa chọn của chúng ta là không bị cản trở và khi không có gì ngăn cản chúng ta có thể làm những gì chúng ta thích nhất thì mọi niềm vui đều được hoan nghênh và mọi nỗi đau đều có thể tránh được. xảy ra rằng những thú vui phải bị từ chối và những điều khó chịu phải được chấp nhận. Do đó, người khôn ngoan luôn tuân thủ nguyên tắc lựa chọn này trong những vấn đề này: anh ta từ chối những thú vui để đảm bảo những thú vui khác lớn hơn, hoặc nếu không thì anh ta chịu đựng nỗi đau để tránh những nỗi đau tồi tệ hơn.