با استفاده از Property-Text گنجانده شده و مجاوران Sibling Selectors
طراحی وب خوب در مورد تایپوگرافی خوب است. از آنجا که بسیاری از محتوای صفحه وب به عنوان متن ارائه شده است، قادر بودن به سبک آن متن برای هر دو جذاب و موثر یک مهارت مهم برای داشتن به عنوان یک طراح وب است. متاسفانه، ما از همان سطح کنترل آنلاین تایپوگرافی که در چاپ انجام می شود نداریم. این به این معنی است که ما همیشه نمیتوانیم به طور قابل اعتماد متن را بر روی یک وبسایت به نحوی که می توانیم در یک قطعه چاپی انجام دهیم، سبک کنیم.
یکی از پارامترهای رایج که اغلب در چاپ دیده می شود (و اینکه ما می توانیم آن را آنلاین بازیابی کنیم) جایی است که خط اول آن پاراگراف یک فضای تکه تکه شده است . این به خوانندگان اجازه می دهد تا ببینند کجا یک پاراگراف آغاز می شود و دیگر به پایان می رسد.
شما این تصویر بصری را در صفحات وب مشاهده نکنید زیرا مرورگرها به طور پیش فرض پاراگرافها را با فضای زیر آنها نمایش می دهند به عنوان راهی برای نشان دادن جایی که پایان می یابد و دیگری شروع می شود، اما اگر شما می خواهید یک صفحه را برای آن چاپ چاپ کنید، الهام گرفته از سبک عقب در پاراگرافها، شما می توانید این کار را با ویژگی سبک text-indent انجام دهید .
نحو این ویژگی ساده است. در اینجا چگونگی اضافه کردن متن به تمام پاراگراف ها در یک سند اضافه می شود.
p {text-indent: 2em؛ }سفارشی کردن بازه ها
یکی از راه هایی که می توانید دقیقا پاراگراف ها را به عقب مشخص کنید، می توانید یک کلاس را به پاراگراف هایی که می خواهید با زاویه اضافه کنید، اضافه کنید، اما لازم است که هر پاراگراف را ویرایش کنید تا یک کلاس به آن اضافه شود. این ناکارآمد است و بهترین روش های کد گذاری HTML را دنبال نمی کند.
در عوض، هنگامی که پاراگراف ها را ترک می کنید، باید در نظر بگیرید. شما پاراگرافهایی را که مستقیما به دنبال یک پاراگراف دیگر هستند، میگذارید برای انجام این کار، می توانید از گزینه ی برادر مجاور استفاده کنید. با استفاده از این انتخاب، شما انتخاب هر پاراگراف که بلافاصله توسط پاراگراف دیگری پیش می آید.
p + p {text-indent: 2em؛ }از آنجایی که خط اول را رد می کنید، باید اطمینان حاصل کنید که پاراگراف ها بین آنها فاصله ای بین فضای اضافی ندارند (به طور پیش فرض مرورگر است). به صورت سبک، شما باید فاصله بین پاراگرافها یا خط اول را داشته باشید، اما نه هر دو.
p {margin-bottom: 0؛ زیر بغل: 0؛ } p + p {margin-top: 0؛ padding-top: 0؛ }انحراف منفی
شما همچنین می توانید از property -text-indent همراه با یک مقدار منفی استفاده کنید تا شروع یک خط را به سمت چپ منتهی شود و به سمت راست مانند یک عنصر طبیعی باشد. شما ممکن است این کار را انجام دهید اگر یک خط با یک علامت نقل قول شروع می شود به طوری که شخصیت نقل قول در حاشیه کمی در سمت چپ پاراگراف ظاهر می شود و حروف خود همگی یک چارچوب خوب چپ را تشکیل می دهند.
بگو، به عنوان مثال، شما یک پاراگراف دارید که یک نسل از بلوک نقل قول است و شما می خواهید آن را منفی تند شما می توانید این CSS را بنویسید:
blockquote p {text-indent: -5em؛ }این به آغاز پاراگراف، که احتمالا شامل شخصیت نقل قول باز است، کمی به سمت چپ منتهی می شود تا معادلات آویزان ایجاد شود.
با توجه به حاشیه ها و پوشش
اغلب در طراحی وب، شما از مقادیر حاشیه یا پلاگین برای انتقال عناصر و ایجاد فضای سفید استفاده می کنید. با این وجود، این خواص برای رسیدن به اثر پاراگراف ضخیم کار نخواهد کرد. اگر هر یک از این مقادیر را به پاراگراف اعمال کنید، کل متن آن پاراگراف، از جمله هر خط، به جای خط اول، فاصله خواهد داشت.