جدول دوره

تدریس پیشرفته CSS

• کتاب درسی CSS
• مقدمه‌ای بر CSS
• قوانین اساسی CSS
• قوانین پیشرفته CSS
• انتخاب‌گرهای مشتق CSS
• انتخاب‌گرهای id CSS
• انتخاب‌گرهای کلاسی CSS
• ایجاد CSS
• پس‌زمینه CSS
• متن CSS
• شهره CSS
• لیست CSS

مدل جعبه CSS

• مبانی مدل پنجره CSS
• حاشیه داخلی CSS
• کناره CSS
• حاشیه بیرونی CSS
• ادغام حاشیه بیرونی CSS

محاسبه CSS

• مبانی قرارگیری CSS
• محل‌گذاری نسبی CSS
• محل‌گذاری مطلق CSS
• شناور کردن CSS

انتخاب‌گر CSS

• انتخاب‌گرهای عناصر CSS
• گروه‌بندی انتخاب‌گرهای CSS
• تفصیلات انتخاب‌گرهای کلاسی CSS
• تفصیلات انتخاب‌گرهای id CSS
• تفصیلات انتخاب‌گرهای ویژگی CSS
• انتخاب‌گرهای نسل CSS
• انتخاب‌گرهای فرزند CSS
• انتخاب‌گرهای خواهر CSS

درس‌های انتخابی

پیشنهاد دوره:

• جعبه‌های CodeW3C.com

خصوصیات متن CSS می‌توانند ظاهر متن را تعریف کنند.

با استفاده از خاصیت متن، شما می‌توانید رنگ متن، فضای بین حروف، هم‌راستایی متن، تزئین متن، جمع‌آوری متن و غیره را تغییر دهید.

تنظیم فاصله‌گذاری متن

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

CSS ارائه داده است خصیت text-indentاین خاصیت به راحتی می‌تواند جمع‌آوری متن را انجام دهد.

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

این ویژگی معمولاً برای فضای خالی اولین خط پاراگراف استفاده می‌شود، و قوانین زیر باعث می‌شود که تمامی پاراگراف‌ها با 5 em فضای خالی اولین خط نمایش داده شوند:

p {text-indent: 5em;}

توجه:به طور کلی، می‌توان برای تمامی عناصر بلوکی text-indent اعمال کرد، اما نمی‌توان این ویژگی را برای عناصر خطی مانند تصاویر و غیره اعمال کرد. اما اگر یک عنصر بلوکی مانند پاراگراف دارای تصویری در اولین خط خود باشد، آن تصویر با متن باقی‌مانده در همان خط حرکت می‌کند.

نکته:برای اینکه یک عنصر خطی اولین خط خود را "فضا خالی‌سازی کنید"، می‌توانید از حاشیه چپ یا حاشیه خارجی برای ایجاد این تأثیر استفاده کنید.

استفاده از مقدار منفی

text-indent می‌تواند به مقدار منفی نیز تنظیم شود. با استفاده از این تکنیک، می‌توانید تأثیرات جالبی ایجاد کنید، مانند "فضای خالی معلق"، که اولین خط در لبه چپ عنصر باقی می‌ماند:

p {text-indent: -5em;}

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

p {text-indent: -5em; padding-left: 5em;}

استفاده از اعداد اعشاری

ویژگی text-indent می‌تواند از تمامی واحد‌های طول استفاده کند، از جمله اعداد اعشاری.

اعداد اعشاری باید در مقایسه با عرض عنصر والد فضا خالی قرار گیرند. به عبارت دیگر، اگر مقدار فضای خالی را به 20٪ تنظیم کنید، اولین خط عنصر تحت تأثیر قرار گرفته‌است به 20٪ عرض عنصر والد خود فاصله می‌گیرد.

در مثال زیر، مقدار فضای خالی برابر با 20٪ از عنصر والد است، یعنی 100 پیکسل:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p>this is a paragragh</p>
</div>

ارث‌برداری

ویژگی text-indent می‌تواند ارث‌برداری کند، لطفاً به نشانه‌گذاری زیر توجه کنید:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.</div>
<p>this is a paragragh.</p>
</div>
</div>

بخش‌های نشانه‌گذاری شده نیز با 50 پیکسل فضای خالی در داخل فولدهای inner قرار می‌گیرند، زیرا این بخش‌ها از ارزش فضای خالی div با شناسه inner ارث می‌برند.

هماهنگی افقی

text-align یک ویژگی پایه‌ای است که برخطوط متنروش‌های هماهنگی با یکدیگر. سه مقدار اول بسیار ساده هستند، اما مقدارهای چهارم و پنجم کمی پیچیده‌تر هستند.

مقدارهای left، right و center باعث می‌شوند که متن در عنصر به ترتیب چپ، راست و وسط قرار گیرد.

زبان‌های غربی از چپ به راست خوانده می‌شوند، بنابراین مقدار پیش‌فرض text-align left است. متن در لبه چپ هماهنگ شده و لبه راست به صورت دندانه‌ای (به عنوان متن از چپ به راست) است. برای زبان‌هایی مانند عبری و عربی، text-align به صورت پیش‌فرض right است زیرا این زبان‌ها از راست به چپ خوانده می‌شوند. انتظار می‌رود که center هر خط متن را در داخل عنصر居zent کند.

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

text-align:center و <CENTER>

ممکن است فکر کنید که text-align:center و عنصر <CENTER> دارای عملکرد مشابه هستند، اما در واقع آنها بسیار متفاوت هستند.

<CENTER> نه تنها متن را تحت تأثیر قرار می‌دهد بلکه کل عنصر را نیز در وسط قرار می‌دهد. text-align کنترل هماهنگی عنصر را انجام نمی‌دهد بلکه تنها بر محتوای داخلی تأثیر می‌گذارد. عنصر خود از یک بخش به بخش دیگر منتقل نمی‌شود، بلکه تنها متن تحت تأثیر قرار می‌گیرد.

justify

آخرین ویژگی افقی هماهنگی justify است.

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

لازم است توجه داشته باشید که تعیین چگونگی کشش متن جفت شده (text-align) برای پر کردن فضای بین لبه‌های چپ و راست پدر عناصر توسط کارگزار کاربر (نه CSS) انجام می‌شود. برای اطلاعات بیشتر، لطفاً به صفحه مرجع ویژگی text-align CSS.

فاصله کلمه

ویژگی word-spacingمی‌توان فضای استاندارد بین کلمات (واژگان) را تغییر داد. مقدار پیش‌فرض normal با تنظیم مقدار 0 یکسان است.

ویژگی word-spacing یک طول مثبت یا منفی را می‌پذیرد. اگر یک طول مثبت ارائه شود، فضای بین کلمات افزایش خواهد یافت. برای word-spacing یک مقدار منفی تنظیم کنید، آن را نزدیک‌تر می‌کند:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
این یک پاراگراف است. فضاهای بین کلمات افزایش خواهد یافت.
</p>
<p class="tight">
این یک پاراگراف است. فاصله بین کلمات کاهش خواهد یافت.
</p>

مثال TIY: افزایش یا کاهش فاصله بین کلمات (فاصله بین کلمات)

توجه:برای درک عمیق‌تر از تعریف CSS از "کلمه" (word)، لطفاً به صفحه مرجع ویژگی word-spacing CSS.

فاصله بین حروف

ویژگی letter-spacingتفاوت با word-spacing این است که، letter-spacing فاصله بین حروف یا کاراکترها را تغییر می‌دهد.

مانند ویژگی word-spacing، مقادیر قابل قبول برای ویژگی letter-spacing شامل همه اندازه‌ها است. مقدار پیش‌فرض کلید normal است (که با letter-spacing:0 مشابه است). مقدار طول ورودی باعث افزایش یا کاهش فاصله بین حروف به مقدار مشخص شده می‌شود:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

مثال TIY: تنظیم فاصله بین حروف (فاصله بین حروف)

تبدیل حروف

ویژگی text-transformحرف‌های متن را بزرگ و کوچک می‌کند. این ویژگی 4 مقدار دارد:

• none
• uppercase
• lowercase
• capitalize

مقدار پیش‌فرض none هیچ تغییری در متن ایجاد نمی‌کند و از حروف بزرگ و کوچک موجود در مستند منبع استفاده می‌کند. به طور واضح، uppercase و lowercase متن را به حروف بزرگ و کوچک تبدیل می‌کنند. در نهایت، capitalize فقط حروف اول هر کلمه را بزرگ می‌کند.

به عنوان یک ویژگی، text-transform ممکن است بی‌اهمیت به نظر برسد، اما اگر تصمیم بگیرید که همه عناصر h1 را به حروف بزرگ تبدیل کنید، این ویژگی بسیار مفید خواهد بود. نیازی به تغییر محتوای هر عنصر h1 نیست، فقط با استفاده از text-transform می‌توانید این تغییرات را انجام دهید:

h1 {text-transform: uppercase}

استفاده از text-transform دو مزیت دارد. اولاً، فقط یک قانون ساده برای انجام این تغییرات کافی است و نیازی به تغییر خود عناصر h1 نیست. ثانیاً، اگر در آینده تصمیم بگیرید که همه حروف بزرگ و کوچک را به حالت اولیه برگردانید، می‌توانید به راحتی این تغییرات را انجام دهید.

مثال TIY: کنترل حروف بزرگ و کوچک متن

زینت متن

پس از آن، ما بحث می‌کنیم text-decoration 属性، این یک ویژگی بسیار جالب است که رفتارهای بسیار جالبی را ارائه می‌دهد.

ویژگی text-decoration 5 مقدار دارد:

• none
• underline
• overline
• line-through
• blink

underline به عنصر خط زیرین اضافه می‌کند، مانند علامت U در HTML. overline به عنوان مخالف، یک خط بالایی در بالای متن می‌کشد. مقدار line-through یک خط贯穿 در وسط متن می‌کشد، که معادل عناصر S و strike در HTML است. blink باعث می‌شود که متن تاب برود، مانند تاب برقتی که توسط Netscape پشتیبانی می‌شود و مورد انتقاد قرار گرفته است.

مقدار none تمام تزئین‌هایی که به یک عنصر اعمال شده‌اند را غیرفعال می‌کند. معمولاً متن بدون تزئین به صورت پیش‌فرض نمایش داده می‌شود، اما همیشه اینگونه نیست. به عنوان مثال، لینک‌ها به صورت پیش‌فرض خط زیرین دارند. اگر می‌خواهید خط زیرین لینک‌ها را حذف کنید، می‌توانید از CSS زیر استفاده کنید:

a {text-decoration: none;}

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

همچنین می‌توان چندین نوع تزئین را در یک قوانین ترکیب کرد. اگر می‌خواهید همه لینک‌ها هم خط زیرین و هم خط بالایی داشته باشند، قوانین زیر را در نظر بگیرید:

a:link a:visited {text-decoration: underline overline;}

اما باید توجه داشت که اگر دو نوع مختلف از تزئین با یک عنصر همخوانی داشته باشند، مقدار برنده به طور کامل مقدار دیگری را جایگزین می‌کند. به قوانین زیر توجه کنید:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

برای قوانین داده شده، تمام عناصر h2 با class stricken فقط یک خط贯穿 دارند و هیچ خط زیرین و خط بالایی ندارند، زیرا مقدار text-decoration جایگزین می‌شود نه جمع می‌شود.

پردازش فاصله‌های خالی

ویژگی white-spaceاین ویژگی بر روشی که کاربرندها با فاصله‌ها، خطوط شکسته و کاراکترهای tab در مستند منبع تأثیر می‌گذارد، اثر می‌گذارد.

با استفاده از این ویژگی، می‌توان روشی که مرورگر با فاصله‌های خالی بین حروف و خطوط متن برخورد می‌کند را تغییر داد. به نوعی، پردازش پیش‌فرض XHTML برای فاصله‌های خالی انجام شده است: تمام فاصله‌های خالی به یک فاصله تبدیل می‌شوند. بنابراین با توجه به برچسب‌های زیر، در زمان نمایش در مرورگر وب، فقط یک فاصله بین حروف نمایش داده می‌شود و خطوط شکسته در داخل عناصر نادیده گرفته می‌شوند:

<p>This     paragraph has    many
    spaces           in it.</p>

این نوع رفتار پیش‌فرض می‌تواند به صورت زیر به صورت عینی تنظیم شود:

p {white-space: normal;}

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

مثال TIY: white-space: normal

مقدار pre

اما اگر white-space به pre تنظیم شود، پردازش سفید در عناصری که تحت تأثیر این خاصیت قرار می‌گیرند، متفاوت است و مانند عنصر pre XHTML عمل می‌کند؛ سفیدها نادیده گرفته نمی‌شوند.

اگر مقدار white-space به pre باشد، مرورگر به فضاهای اضافی توجه می‌کند، حتی به خطوط بازگشت. در این زمینه و تنها در این زمینه، هر عنصر می‌تواند مانند عنصر pre عمل کند.

مثال TIY: white-space: pre

توجه:بر اساس تست‌ها، مرورگرهای IE 7 و قدیمی‌تر از این مقدار پشتیبانی نمی‌کنند، بنابراین برای مشاهده مثال بالا از مرورگرهای غیر IE استفاده کنید.

مقدار nowrap

مقدار برعکس nowrap، از تغییر خط متن در عناصر جلوگیری می‌کند، مگر اینکه از یک عنصر br استفاده شود. استفاده از nowrap در CSS بسیار مشابه HTML 4 است که با استفاده از <td nowrap> یک سلول جدول را به عنوان غیر قابل تغییر خط تنظیم می‌کند، اما مقدار white-space می‌تواند به هر عنصر اعمال شود.

مثال TIY: white-space: nowrap

مقدار pre-wrap و pre-line

CSS2.1 مقدار pre-wrap و pre-line را معرفی کرده است که در نسخه‌های قبلی CSS وجود نداشتند. این مقدارها به سازندگان اجازه می‌دهند تا بهتر از پردازش سفید استفاده کنند.

اگر white-space عناصر به pre-wrap تنظیم شود، متن در آن عناصر متناسب با توالی سفید، اما خطوط متن به صورت عادی تغییر خط می‌کنند. اگر این مقدار تنظیم شود، توالی‌های جداکننده خط‌های متن اولیه و تولید شده نیز حفظ می‌شوند. pre-line برعکس pre-wrap است و مانند متن عادی توالی‌های سفید را با هم ترکیب می‌کند، اما خطوط را حفظ می‌کند.

مثال TIY: white-space: pre-wrap

مثال TIY: white-space: pre-line

توجه:ما دو مثال بالا را در مرورگرهای IE7 و FireFox2.0 تست کردیم، اما نتایج نشان داد که مقدارهای pre-wrap و pre-line به خوبی پشتیبانی نمی‌شوند.

جمع‌بندی

جدول زیر رفتار ویژگی white-space را جمع‌بندی می‌کند:

جهت متن

اگر کتاب‌های انگلیسی بخوانید، از چپ به راست و از بالا به پایین خوانده می‌شوند، این جریان انگلیسی است. اما همه زبان‌ها به این شکل نیستند. می‌دانیم که زبان قدیمی چینی از راست به چپ خوانده می‌شود، البته شامل عبری و عربی و غیره نیز می‌شود. CSS2 یک ویژگی برای توصیف جهت خود را معرفی کرده است.

ویژگی directionاین ویژگی بر جهت نوشتار متن بلوک‌های مستطیلی، ترتیب ستون‌های جدول، جهت پر کردن محتوای محدوده‌های عناصر و موقعیت سطرهای ترازبندی دو طرفین تأثیر می‌گذارد.

توجه:برای عناصر درون‌خطی، تنها زمانی که ویژگی unicode-bidiویژگی direction فقط در حالتی که به embed یا bidi-override تنظیم شود، اعمال می‌شود.

ویژگی direction دو مقدار دارد: ltr و rtl. در بیشتر موارد، مقدار پیش‌فرض ltr است که متن را از چپ به راست نمایش می‌دهد. اگر بخواهید متن را از راست به چپ نمایش دهید، باید از مقدار rtl استفاده کنید.

ویژگی‌های متن CSS

ابزارخانه

دستورالعمل‌های مرجع CSS

مثال‌های CSS

آزمون CSS

آموزش‌های CSS

لینک‌های اسپانسر