نحوه تورفتگی خط اول در html چگونه در CSS تورفتگی کنیم؟ چیز هایی برای به یاد آوردن

Lorem ipsum dolor sit amet، consectetur adipisicing elit، sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. خورد "Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." پاراگراف 1.10.32 "de Finibus Bonorum et Malorum" نوشته سیسرو در سال 45 بعد از میلاد. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore vertatis et quasi architecto beatae vitae dicta sunt a explicabo. Nemo en. ut fu git، sedquia نتیجه بزرگی دولورس eos qui ratione voluptatem sequi nesciunt . حداقل ونیام , quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur؟ ترجمه انگلیسی 1914، H. Rackham "اما من باید برای شما توضیح دهم که چگونه این ایده اشتباه در تقبیح لذت و ستایش درد متولد شد و من شرح کاملی از آن به شما ارائه خواهم داد. سیستمو آموزه های واقعی کاشف بزرگ حقیقت، استاد سازنده سعادت بشر را توضیح دهید. هیچ کس خود لذت را رد نمی کند، دوست ندارد یا از آن اجتناب نمی کند، زیرا لذت است، بلکه به این دلیل است که کسانی که نمی دانند چگونه به طور عقلانی لذت را دنبال کنند، با عواقب بسیار دردناکی مواجه می شوند. باز هم کسی نیست که دوست داشته باشد یا به دنبال آن باشد یا بخواهد درد خود را به دست آورد، زیرا درد است، بلکه به این دلیل که گاه شرایطی پیش می آید که در آن روغن و درد می تواند لذتی بزرگ برای او به ارمغان آورد. برای مثال بی اهمیت، کدام یک از ما تا به حال تمرینات بدنی سختی را انجام می دهیم، مگر اینکه از آن مزیتی کسب کنیم؟ اما چه کسی حق دارد با مردی که لذت بردن از لذتی را انتخاب می‌کند که عواقب آزاردهنده‌ای ندارد، یا کسی که از دردی که هیچ لذتی حاصل نمی‌شود اجتناب می‌کند عیب جویی کند؟» پاراگراف 1.10.33 «de Finibus Bonorum et Malorum»، نوشته شده توسط سیسرو در سال 45 پس از میلاد "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias استثنایی sint occaecati cupiditate non proventor, similique voluptatum deleniti atque corrupti quos dolores et quas molestias. دولورم فوگا . Et harum quidem rerum facilis est et expedita distinctio. Nam Libero tempore، cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus، omnis voluptas assummenda est، omnis dolor repellendus. Temporibus autem quibusdam و aut officiis debitis aut rerum necessitatibus saepe eveniet 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 repellat." ترجمه انگلیسی 1914، H. Rackham "از سوی دیگر، ما با خشم و عصبانیت مردان عادل، بسیار مضطرب و مأیوس هستیم. با جذابیت های لذت لحظه، چنان کور شده از میل، که نمی توانند پیش بینی کنند دردو مشکلاتی که باید حل شوند. و سرزنش مساوی از آن کسانی است که با ضعف اراده در انجام وظایف خود کوتاهی می کنند، که مانند گفتن از طریق فروکشیدن از روغن و درد است. این موارد کاملاً ساده هستند و به راحتی قابل تشخیص هستند. در یک ساعت آزاد، زمانی که قدرت انتخاب ما مهار نشده است و زمانی که هیچ چیز مانع از توانایی ما در انجام کاری که بیشتر دوست داریم نمی شود، باید از هر لذتی استقبال کرد و از هر دردی اجتناب کرد. اما در شرایط خاص و به دلیل ادعای تکلیف یا تعهدات تجارتی، غالباً باید از لذت رد شود و آزارها پذیرفت. بنابراین انسان عاقل همیشه در این مسائل به این اصل انتخاب پایبند است: او لذت ها را رد می کند تا لذت های بزرگتر دیگر را تأمین کند، یا در غیر این صورت دردها را تحمل می کند تا از دردهای بدتر جلوگیری کند.

یک منبع وب توسط کاربران بر اساس جذابیت بصری آن رتبه بندی می شود. بنابراین، حتی متن مفید اطلاعاتی نیز ممکن است به دلیل طراحی ضعیف خوانده نشود. نتیجه گیری - شما باید با دقت و دقت نه تنها به محتوای معنایی صفحات سایت، بلکه به آن نیز نزدیک شوید. بازنمایی بصری. ظهور فناوری CSS امکان ایجاد مقالات جذاب را گسترش داده است. یکی از ویژگی های طراحی شده برای آسان تر خواندن نوشتن، تورفتگی متن CSS است.

حاشیه و بالشتک: تفاوت چیست؟

قبل از شروع قالب بندی متن، باید بفهمید که حاشیه ها و تورفتگی ها چیست. با وجود این واقعیت که این عناصر نشانه گذاری در برخی موارد برای کاربر یکسان به نظر می رسند، تفاوت های اساسی بین آنها وجود دارد:

• فیلد توسط ویژگی مشخص شده است لایه گذاری، تورفتگی - لبه;
• حاشیه با شکاف بین محتوا و مرز بلوک، تورفتگی - بین مرزهای بلوک های مجاور تعیین می شود.
• ممکن است حاشیه ها در ابعاد عنصر (عرض و ارتفاع) در نظر گرفته شود یا خیر.

دارایی حاشیه

بنابراین، برای تعیین تورفتگی افقی یا عمودی متن CSS، از ساختار استفاده کنید لبه. این ویژگی برای تگ اعمال می شود تعریف پاراگراف سند در ساده ترین حالت به صورت زیر نوشته می شود:

حاشیه: 12 پیکسل

این خط به این معنی است که در اطراف بلوک متن (یا هر بلوک دیگری) یک فرورفتگی 12 پیکسل در هر طرف وجود خواهد داشت. برای افزایش فاصله، به عنوان مثال، سه برابر، فقط بنویسید:

حاشیه: 36 پیکسل

اما اگر فاصله بین بلوک ها در هر طرف متفاوت باشد چه؟ توسعه دهندگان صفحات وب از چندین شکل ضبط استفاده می کنند:

1. حاشیه: 11 پیکسل 22 پیکسل.
2. حاشیه: 11 پیکسل 22 پیکسل 33 پیکسل.
3. حاشیه: 11px 22px 33px 44px.

در مثال اول، 11 پیکسل از حاشیه های پایین و بالای بلوک، و 22 پیکسل در کناره های بلوک فرورفته خواهند شد. طبق فرم ضبط دوم، 11 پیکسل بین لبه بالای بلوک و محتوا، 33 پیکسل بین پایین و 22 پیکسل در طرفین وجود خواهد داشت. در حالت سوم، بالشتک 11 پیکسل در بالا، 22 پیکسل در سمت راست، 33 پیکسل در پایین و 44 پیکسل در سمت چپ خواهد بود.

همچنین می توان فاصله تا مرز بلوک را فقط از یک طرف ثبت کرد: حاشیه-بالا، حاشیه-پایین، حاشیه-چپ، حاشیه-راست. با ترجمه نام املاک به روسی، به راحتی می توان هدف آنها را حدس زد. به عنوان مثال، ورودی زیر می گوید که حاشیه سمت راست 22 پیکسل خواهد بود:

حاشیه سمت راست: 22 پیکسل.

برای اضلاع دیگر، فواصل اطراف بلوک برابر با مقدار عنصر والد فرض می شود.

ویژگی لبهدارای ویژگی است که یک توسعه دهنده باید هنگام استفاده از تورفتگی عمودی متن CSS در نظر داشته باشد. فواصل عناصر همسایهخلاصه نمی شوند، بلکه بر یکدیگر سوار می شوند. به عنوان مثال، اجازه دهید یکی از بلوک ها داشته باشد حاشیه پایین: 15 پیکسلو بلوک مجاور آن در زیر حاشیه بالا: 35 پیکسل. محاسبات مدرسه و عقل سلیم نشان می دهد که فضای کل بین آنها 50 پیکسل خواهد بود. در عمل اینطور نیست. مسدود کردن با ارزش عالیخواص لبههمسایه خود را "جذب" خواهد کرد. در نتیجه فاصله بین عناصر 35 پیکسل خواهد بود.

"خط قرمز

تنظیم سند در ویرایشگر متن، کاربران ترجیح می دهند از هر کدام بپرسند پاراگراف جدیدبا استفاده از خط قرمز با استفاده از تورفتگی CSSساخت متن در سمت چپ آسان است - ساخت و ساز استفاده شده است تورفتگی متن. اینگونه نوشته شده است:

تورفتگی متن: 11 پیکسل.

یعنی خط اول پاراگراف نسبت به لبه سمت چپ 11 پیکسل جابه جا می شود. برای اینکه متن در یک صفحه وب بیشتر شبیه یک سند در ویرایشگر باشد، باید علاوه بر این، تنظیم کنید، یعنی بنویسید:

text-indent: 11px;

text-align: توجیه کردن.

علاوه بر پیکسل ها، هنگام توصیف نشانه ها، مجاز است از واحدهای دیگر - اینچ، امتیاز، درصد استفاده شود. اجازه دهید بلوک دارای یک صفحه متنی CSS 10٪ باشد. با عرض بلوک 500 پیکسل، خط قرمز 50 پیکسل (10٪ از 500) خواهد بود.

این ویژگی را می توان تنظیم کرد به ارث می برند. این ورودی می گوید که بلوک از ویژگی مشابه بلوک والد استفاده می کند.

text-indent: ارث بردن.

با کمال تعجب، می تواند مقادیر منفی نیز بگیرد! در این حالت، به اصطلاح overhangs تشکیل می شود، یعنی متن اصلی در جای خود باقی می ماند و خط اول 22 پیکسل به سمت چپ منتقل می شود:

تورفتگی متن: -22 پیکسل.

برای جلوگیری از خروج حروف از مرز سمت چپ مرورگر، علاوه بر تورفتگی متنبرای تنظیم فیلد باید از ساختار استفاده کنید:

padding-left: 22px.

ویژگی های اصلی CSS بررسی می شود. و تمرین به تحکیم آنها کمک خواهد کرد. در اینجا چند نکته نهایی برای استفاده از آنچه آموخته اید در توسعه وب سایت خود آورده شده است:

• خط قرمز و تورفتگی متن مفاهیم متفاوتی هستند و از خصوصیات مختلفی برای نشان دادن آنها استفاده می شود.
• برای تورفتگی های عمودی، قوانین ریاضی اعمال نمی شود - فواصل با هم همپوشانی دارند، عنصر با مقدار بزرگتر "برنده" است.
• منفی تورفتگی پاراگرافبرای نشان دادن خط اول یک پاراگراف با استفاده از یک تصویر استفاده می شود.

قالب بندی پاراگراف HTML با استفاده از Styles

در مورد اسناد HTML، تگ ها بیشتر برای علامت گذاری محتوا کار می کنند تا اینکه نشان دهند چگونه باید ارائه شود. کنترل بیشتر بر ارائه با سبک ها به دست می آید. در این مقاله به سبک هایی که با قالب بندی پاراگراف در HTML مرتبط هستند نگاه می کنم.

برچسب بزنید

در HTML می‌توانید پاراگراف‌ها را مشخص کنید و ویژگی align آنها را به چپ، راست، وسط یا توجیه می‌کند. علاوه بر آنها، از ویژگی سبک جهانی استفاده خواهیم کرد.

تراز پاراگراف

می توانید یک پاراگراف را با استفاده از ویژگی align با مقادیر زیر تراز کنید:

text-align: چپ|راست|مرکز|توجیه|اولیه|ارث بردن;

کد زیر را در فایل html خود کپی کنید.

این پاراگراف تراز وسط است

این پاراگراف درست تراز شده است

این پاراگراف در پنجره مرورگر موجه به نظر می رسد. یک پاراگراف توجیه شده با افزودن فاصله های اضافی در سمت راست و چپ تراز می شود. می بینید که لبه های پاراگراف توجیه شده با لبه های پاراگراف های تراز چپ و راست مطابقت دارند. در پاراگراف تراز چپ، لبه چپ صاف است، در حالی که در پاراگراف تراز راست، لبه چپ مستقیم است. آیا می بینید که چگونه هر دو لبه این پاراگراف مستقیم هستند؟ این از طریق سبک text-align: justify به دست می آید.

در پنجره مرورگر HTMLکد پاراگراف به این شکل است.

فاصله خطوط

می توانید فاصله خطوط پاراگراف را با استفاده از style=line-height کنترل کنید. از ویژگی style با مقادیر زیر استفاده کنید:

line-height: معمولی|تعداد|طول|اولیه|ارث بردن;

در زیر نمونه ای از کد HTML است که پاراگراف ها را با فاصله خطوط مختلف نمایش می دهد:

این پاراگراف از دو مقدار برای ویژگی style استفاده می کند. اولین line-height:1.5 یک و نیم فاصله خط را برای پاراگراف مشخص می کند و مقدار دوم text-align:justify مشخص می کند که متن پاراگراف باید در عرض پخش شود.

این پاراگراف دارای دو فاصله و توجیه است. line-height:2 فاصله دوگانه را مشخص می کند. ویژگی style لازم نیست دو مقدار داشته باشد. اما اگر نیاز به تعیین دو مقدار دارید، می توانید این کار را با جدا کردن آنها با نقطه ویرگول انجام دهید.

: مجموعه ها فاصله خطوط 13 پیکسل؛

: تنظیم می شود فاصله HTMLبین پاراگراف ها در 200٪ نسبت به اندازه فونت فعلی.

: ارتفاع خط را روی 14 پیکسل تنظیم می کند.

تورفتگی ها

من از اصطلاح "تورفتگی" استفاده کردم تا درک آن آسان تر شود. اما در HTML از فاصله برای ایجاد فضای خالی در اطراف یک شی استفاده می کنیم. می‌توانید از ویژگی style با مقدار padding برای فرورفتگی پاراگراف به چپ یا راست استفاده کنید.

در زیر نمونه ای از پاراگراف هایی با تورفتگی چپ و راست آورده شده است:

این پاراگراف دارای تورفتگی نیست، به سادگی قابل توجیه است. به ویژگی style عنصر P برای این پاراگراف نگاه کنید.

برای این پاراگراف، من padding سمت چپ را با استفاده از سبک padding-left:30px روی 30 پیکسل قرار دادم. این پاراگراف با استفاده از سبک text-align:justify نیز توجیه می شود. همانطور که می دانید، ما می توانیم چندین مقدار را برای ویژگی Style با جدا کردن آنها با نقطه ویرگول استفاده کنیم.

و این پاراگراف دارای تورفتگی سمت راست 30 پیکسل است، اما تورفتگی سمت چپ ندارد. همچنین به عرض هم تراز شده است. مقدار "padding-right" ویژگی style، padding سمت راست را مشخص می کند. اگر اثر را نمی بینید، عرض پنجره مرورگر خود را کاهش دهید تا پاراگراف HTML توجیه شده به درستی نمایش داده شود.

تورفتگی بین پاراگراف ها (تورفتگی قبل و بعد از پاراگراف)

در HTML یا CSS ما به این نیاز نداریم. ما به سادگی می توانیم سبک padding را برای عنصر مشخص کنیم

Padding-top و padding-bottom فضای سفید قبل و بعد از پاراگراف را مشخص می کنند که مانند padding در بالا یا پایین عمل می کند. به مثال برچسب زیر نگاه کنید

من اولین پاراگراف HTML را طوری تنظیم کردم که 10 پیکسل قبل از پاراگراف دوم و 50 پیکسل بعد از پاراگراف دوم داشته باشد:

این پاراگراف هیچ تورفتگی قبل یا بعد از آن مشخص نشده است. این یک پاراگراف معمولی و قابل توجیه است. همانطور که می دانید، ما می توانیم یک پاراگراف را با استفاده از code style=”text-align:justify” در داخل تگ توجیه کنیم.

این پاراگراف بزرگتر است. همچنین دارای 10 پیکسل بالشتک قبل از پاراگراف و 50 پیکسل بعد از آن است. در داخل تگ من 3 سبک تنظیم کرده ام.

این یک پاراگراف معمولی بدون تورفتگی و تراز پیش فرض است.

چیز هایی برای به یاد آوردن

• یک پاراگراف HTML را می توان با استفاده از آن تراز کرد صفت alignیا سبک تراز کردن متن.
• HTML بسته به اندازه صفحه نمایش، اندازه پنجره مرورگر متفاوت ارائه می شود.
• افزودن فضاهای اضافی یا خطوط خالی به HTML شما تأثیری بر خروجی ندارد. مرورگر تمام فضاهای اضافی را حذف می کند.
• برچسب ها تعریف می کنند که چه چیزی باید نمایش داده شود، و سبک ها نحوه نمایش آن را مشخص می کنند.
• سبک ها را می توان در سه مورد مشخص کرد راه های مختلف- داخلی (در برچسب ها)، داخلی ( داخل همان فایل HTML با استفاده از عنصر
  

  شاهزاده آندری هنگام رانندگی در جنگل چندین بار به این درخت بلوط نگاه کرد. زیر درخت بلوط گل و علف بود، اما او همچنان در میان آنها ایستاده بود، عبوس، بی حرکت، زشت و سرسخت.
  

  نتیجه:

  شاهزاده آندری هنگام رانندگی در جنگل چندین بار به این درخت بلوط نگاه کرد. زیر درخت بلوط گل و علف بود، اما او همچنان در میان آنها ایستاده بود، عبوس، بی حرکت، زشت و سرسخت.

  حالا شما به راحتی می توانید یک خط قرمز روی خودت بزن صفحات html . دوباره می بینمت!