کورس جدول

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 کا آپریشن استعمال نہیں کیا جاسکتا، اگر بلاک عناصر کا پہلا کیپشن میں ایک تصویر ہو تو وہ کیپشن کی باقی کیپشن کا آپریشن سنبھالا جائے گا:

提示：اگر کسی درمیانی عناصر کا پہلا کیپشن کھوجوائی کا آپریشن بنانا ہے تو اس کے لئے چپھر یا بیرونی مارجر استعمال کیا جاسکتا ہے تاکہ اس طرح کا آپریشن پیدا ہو:

منفی استعمال

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 کا id والا div عناصر کا کھوجوائی کا آپریشن سنبھالا ہے۔

水平对齐

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。

值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的的语言，text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中居中。

提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

text-align:center 与

您可能会认为 text-align:center 与

فاصلہ الفاظ

word-spacing کا حصہالفاظ (آئیٹم) کے درمیان کا معیاری فاصلہ بدل سکتا ہے۔ اس کا دفعہ normal جس کا رقمی سیٹ کردیا جائے تو مشابہ ہوتا ہے۔

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) کی تعریف کو مزید وضاحت بخوئیں، تو پریز کا دورہ کریں CSSword-spacing속یت کی مراجعہ صفحہ。

حرف کی فاصلہ بندی

letter-spacingخصوصیتword-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 عناصر کو بولی کی بنایا چاہتے ہیں تو اس خصوصیت کا فائدہ بہت زائد ہو سکتا ہے۔ آپ کو فرما نما کو نہیں تبدیل کرنا پڑتا، صرف text-transformکا استعمال کرسکتے ہیں تاکہ یہ تبدیلی آپ کیلئے انجام دی جائے:

h1 {text-transform: uppercase}

text-transformکا استعمال دو طرفہ فائدے کا حامل ہے۔ ابتدا میں، صرف ایک سادہ رجحان لکھنا ضروری ہوتا ہے، جس سے ہ1 عناصر پر مبنی تبدیلیوں کو ضروری نہیں ہوتا ہے۔ دوسرا، اگر آپ بعد میں تمام اکثریت کو اصل اکثریت کو تبدیل کرنا چاہتے ہیں تو اس تبدیلی کو آسان طریقے سے کرسکتے ہیں۔

مثال TIY: لفظ میں حروف کی اکثریت کو کنٹرول کرنا

ٹیکسٹ ڈیزائن

آئندہ، ہم بحثکرتے ہیں text-decoration속یت，这是一个很有意思的属性，它提供了很多非常有趣的行为。

text-decoration 有 5 个值：

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

不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

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;}

对于给定的规则，所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，因为 text-decoration 值会替换而不是累积起来。

处理空白符

white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。

通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：

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

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

p {white-space: normal;}

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

مثال 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 بسیار مشابه استفاده از <td nowrap> در HTML 4 است که یک سلول جدول را به صورت غیر قابل تغییر خط تنظیم می‌کند، اما مقدار 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

لینک‌های حامی