Thụt lề dòng đầu tiên của đoạn văn 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

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 Tuy nhiên, khi tạo trang web, việc thiết kế đường màu đỏ khá hiếm, mặc dù thực tế là nó giúp văn bản dễ nhìn hơn rất 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, ví dụ, bạn có thể chèn một vài 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. một số lượng lớn thời gian. Vì vậy, tôi khuyên bạn nên sử dụng Thuộc tính CSS 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 từ điểm xuất phát. 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 cân 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 đỏ cho bạn trang html . Hẹn gặp lại!

Xin chào! Chúng ta hãy tiếp tục xem xét những điều cơ bản về lập trình trang web. Thật khó để tưởng tượng ít nhất một trong số chúng không chứa thẻ đoạn văn trong mã của nó. Hôm nay chúng ta sẽ xem cách viết đúng và mô tả một số hành động bổ sung với văn bản.

Ví dụ

Hãy xem một ví dụ về cách tạo một đoạn văn trong mã HTML.

Một hoặc nhiều câu.

Điều kiện bắt buộc là sự hiện diện của thẻ mở và thẻ đóng. Nhân tiện, bạn có thể thực hiện mọi thứ trực tiếp trong Notepad, sau này bạn chỉ cần lưu tệp ở định dạng thích hợp.

Định dạng

Tôi thường xuyên nhận thấy mọi người quan tâm đến cách tạo ranh giới màu đỏ. Đối với một đoạn cụ thể, nó được thực hiện rất đơn giản.

Việc bật các tùy chọn này sẽ thụt lề dòng đầu tiên 15 pixel tính từ cạnh trái. Nếu những thay đổi đó nên được áp dụng cho tất cả các thẻ P thì trong tệp CSS được kết nối với các trang của trang web, bạn có thể viết mã hiển thị bên dưới.

Cá nhân tôi thường không tạo ra các dòng màu đỏ khi chỉnh sửa mã trong Notepad hoặc trình soạn thảo khác.

Tôi chỉ đơn giản bao gồm phần đệm giữa các khối văn bản. Để làm điều này, bạn cần phải viết bằng CSS thông số đặc biệt.

p(lề-dưới:25px;)

Nếu bạn sử dụng thiết kế này thì sau mỗi đoạn văn sẽ có một khoảng thụt lề là 25 pixel.

Trên thực tế, có rất nhiều tùy chọn để làm việc với HTML và nhiều phong cách khác nhau. Tôi chỉ mô tả một vài trong số đó, rất khó để trình bày hết mọi thứ trong một bài viết.

Bạn muốn biết thêm? Có lẽ những ấn phẩm trước đây của tôi về theo chủ đề:

Đây là nơi tôi sẽ kết thúc bài viết và tôi nghĩ bây giờ sẽ không khó để tạo các đoạn văn trong HTML và định dạng chúng đẹp mắt bằng cách sử dụng các thẻ đặc biệt.

Chúc các bạn thành công trong việc làm chủ lập trình. Nhân tiện, bạn đã nghĩ đến việc kiếm tiền trên các trang thông tin phi lợi nhuận chưa? Ông đã cung cấp thông tin đơn giản tuyệt vời đặc biệt cho độc giả của mình.

Hoạt động binh thương và tài chính trực tuyến là những chủ đề chính của blog này. Bạn có thể làm quen trực tuyến với các khách hàng tiềm năng trực tuyến từ các tài liệu đã xuất bản. Tôi tiếp tục chuẩn bị và xuất bản những điều mới, và quan trọng nhất là nó có thật nội dung hữu ích. Đăng ký nhận thông tin cập nhật Workip trên e-mail. Hẹn gặp lại.

11/04/16 10.5K

Định dạng đoạn HTML bằng kiểu

Trong trường hợp tài liệu HTML, thẻ hoạt động nhiều hơn để đánh dấu nội dung hơn là chỉ ra cách trình bày nội dung đó. Kiểm soát tốt hơn việc trình bày đạt được với các phong cách. Trong bài viết này, tôi sẽ xem xét các kiểu liên quan đến định dạng đoạn văn trong HTML.

Nhãn

Trong HTML, bạn có thể chỉ định các đoạn văn và thuộc tính căn chỉnh sẽ căn chỉnh chúng sang trái, phải, giữa hoặc căn đều. Ngoài chúng, chúng ta sẽ sử dụng thuộc tính style toàn cục.

Căn chỉnh đoạn văn

Bạn có thể căn chỉnh một đoạn văn bằng thuộc tính căn chỉnh với các giá trị sau:

căn chỉnh văn bản: trái|phải|giữa|căn chỉnh|ban đầu|kế thừa;

Sao chép đoạn mã sau vào tệp .html của bạn.

Đoạn này được căn giữa

Đoạn này được căn phải

Đoạn này xuất hiện hợp lý trong cửa sổ trình duyệt. Đoạn văn căn đều được căn chỉnh sang phải và trái bằng cách thêm khoảng trắng. Bạn có thể thấy rằng các cạnh của đoạn văn được căn đều khớp với các cạnh của đoạn văn được căn trái và căn phải. Trong đoạn văn căn trái, cạnh trái là thẳng, trong khi ở đoạn văn căn phải, cạnh trái là thẳng. Bạn có thấy cả hai cạnh của đoạn văn này đều thẳng không? Điều này đạt được thông qua kiểu text-align:justify.

Trong cửa sổ trình duyệt HTML Mã đoạn văn trông như thế này.

Khoảng cách dòng

Bạn có thể kiểm soát khoảng cách dòng đoạn văn bằng cách sử dụng style=line-height . Sử dụng thuộc tính style với các giá trị sau:

chiều cao dòng: bình thường|số|độ dài|ban đầu|kế thừa;

Dưới đây là ví dụ về mã HTML hiển thị các đoạn văn có khoảng cách dòng khác nhau:

Đoạn này sử dụng hai ý nghĩa cho thuộc tính phong cách. Chiều cao dòng đầu tiên:1.5 chỉ định khoảng cách một dòng rưỡi cho đoạn văn và giá trị thứ hai text-align:justify chỉ định rằng văn bản đoạn phải trải đều theo chiều rộng.

Đoạn này được cách dòng đôi và căn đều. line-height:2 chỉ định khoảng cách gấp đôi. Thuộc tính style không nhất thiết phải có hai giá trị. Nhưng nếu bạn cần chỉ định hai giá trị, bạn có thể làm như vậy bằng cách phân tách chúng bằng dấu chấm phẩy.

Dưới đây là một số cách khác nhau để sử dụng giá trị chiều cao dòng cho thuộc tính style:

: Bộ khoảng cách dòng 13 pixel;

: Đặt thành Khoảng cách HTML giữa các đoạn văn ở mức 200% so với cỡ chữ hiện tại;

: Đặt chiều cao của dòng thành 14 pixel.

Thụt lề

Tôi đã sử dụng thuật ngữ "thụt lề" để dễ hiểu hơn. Nhưng trong HTML chúng ta sử dụng khoảng cách để tạo xung quanh một đối tượng khoảng trống. Bạn có thể sử dụng thuộc tính style với giá trị đệm để thụt lề đoạn văn sang trái hoặc phải.

Dưới đây là ví dụ về các đoạn văn có thụt lề trái và phải:

Đoạn này không được thụt lề, nó chỉ đơn giản là hợp lý. Hãy xem thuộc tính style của phần tử P cho đoạn văn này.

Đối với đoạn này, tôi đặt phần đệm bên trái thành 30 px bằng cách sử dụng kiểu đệm-left:30px. Đoạn văn này cũng được căn chỉnh bằng cách sử dụng kiểu text-align:justify. Như bạn đã biết, chúng ta có thể sử dụng nhiều giá trị cho thuộc tính Style bằng cách phân tách chúng bằng dấu chấm phẩy.

Và đoạn văn này có thụt lề phải là 30 pixel nhưng không có thụt lề trái. Nó cũng được căn chỉnh theo chiều rộng. Giá trị 'padding-right' của thuộc tính style chỉ định phần đệm bên phải. Nếu bạn không thấy hiệu ứng, hãy giảm độ rộng của cửa sổ trình duyệt để đoạn HTML căn đều hiển thị chính xác.

Thụt lề giữa các đoạn văn (thụt lề trước và thụt lề sau đoạn văn)

Trong HTML hoặc CSS chúng ta không cần điều này. Chúng ta có thể chỉ định kiểu đệm cho phần tử

Phần đệm trên và phần đệm dưới chỉ định khoảng trắng trước và sau một đoạn văn, hoạt động giống như phần đệm ở trên cùng hoặc dưới cùng. Nhìn vào ví dụ thẻ bên dưới

Tôi đã cài đặt cái đầu tiên Đoạn HTML thụt lề 10 pixel trước đoạn thứ hai và 50 pixel sau đoạn thứ hai:

Đoạn này không có bất kỳ thụt lề trước hoặc sau được chỉ định. Đây là một đoạn văn thông thường, hợp lý. Như bạn đã biết, chúng ta có thể căn đều một đoạn văn bằng cách sử dụng mã style=”text-align:justify” bên trong thẻ.

Đoạn này quá khổ. Nó cũng có 10 pixel đệm trước đoạn văn và 50 pixel sau nó. Bên trong thẻ tôi đã đặt 3 kiểu.

Đây là đoạn văn thông thường không có thụt lề và căn chỉnh mặc định.

Những điều cần ghi nhớ

• Một đoạn HTML có thể được căn chỉnh bằng thuộc tính căn chỉnh hoặc kiểu căn chỉnh văn bản;
• HTML sẽ được hiển thị khác nhau tùy thuộc vào kích thước màn hình, kích thước cửa sổ trình duyệt;
• Việc thêm khoảng trắng hoặc dòng trống vào HTML của bạn sẽ không ảnh hưởng đến kết quả đầu ra. Trình duyệt loại bỏ tất cả các khoảng trống thừa;
• Thẻ xác định những gì sẽ được hiển thị và kiểu xác định cách hiển thị nó;
• Kiểu dáng có thể được chỉ định trong ba những cách khác— tích hợp (trong thẻ), nội bộ ( bên trong cùng một tệp HTML bằng cách sử dụng phần tử