آموزش CSS (فصل سوم - جلسه 2) : قالب بندی متون

خصوصیت text transform

با استفاده از این خاصیت می‌توان کلمات (انگلیسی) را به حروف بزرگ یا حروف کوچک تبدیل کرد، و یکی از چهار مقدار زیر را می‌گیرد:

• Capitalize : اولین کاراکتر از هر کلمه را با حروف بزرگ نمایش می‌دهد.
• Uppercase: تمامی کاراکترهای یک کلمه را با حروف بزرگ نمایش می‌دهد.
• Lowercase :تمامی کاراکترهای یک کلمه را با حروف کوچک نمایش می‌دهد.
• None : مقدار پیشفرض را برای کاراکتر‌ها در نظر می‌گیرد.

مثال :

<h2 class="capitalize"> 7Learn.com </h2>
<h2 class="uppercase"> 7Learn.com </h2>
<h2 class="lowercase"> 7Learn.com </h2>

و کد css زیر :

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

خصوصیت white space

مقدار پیشفرض: normal

• Pre : از این مقدار برای نمایش متن به همان شکلی که در عنصر مورد نظر نوشته شده با در نظر گرفتن تمامی فضاهای خالی و شکست‌های خط استفاده می‌شود. از مقدار pre معمولا برای عنصر <code> استفاده می‌شود. مقدار pre معادل تگ pre در HTML می‌باشد.
• Nowrap :استفاده از مقدار nowrap از شکست خط در متن جلوگیری می‌کند می‌کند، مگر اینکه از تگ <br> استفاده شده باشد. این مقدار تقریبا هیچ وقت استفاده نمی‌شود زیرا استفاده از این مقدار آرایش صفحه را به هم می‌زند.

مثال:

<code class="code1">
<script type="text/javascript">
document.documentElement.className = 'js';
</script>
</code>
<code class="code2">
<script type="text/javascript">
document.documentElement.className = 'js';
</script>
</code>

و کد CSS :

.code1 { white-space: nowrap; }
.code2 { white-space: pre; }

خصوصیت text-shadow

این خاصیت که در css3 اضافه شده است با استفاده از آن می‌توان به متن سایه داد، که چهار مقدار را همزمان می‌پذیرد:

• مقدار اول : مقداری عددی (هم مثبت و هم منفی) که سایه متن را روی محور افقی یا همان محور x تنظیم می‌کند

• مقدار دوم : مقداری عددی (هم مثبت و هم منفی) که سایه متن را روی محور عمودی یا همان محور y تنظیم می‌کند
• مقدار سوم : مقداری عددی (فقط مثبت) که مقدار محو بودن سایه را مشخص می‌کند.
• مقدار چهارم : از این مقدار برای تعیین رنگ سایه استفاده می‌شود، و مقداری بر حسب rgb، هگزادسیمال و یا کلمات کلیدی رنگ‌ها را می‌پذیرد.

مثال :

<h2> 7Learn.com </h2>
<p> Javascript and Web Design Tutorials </p>

  و کد css :

h2 { text-shadow: 1px 1px 2px red; }
p { text-shadow: 0 0 5px #00f; }

خصوصیت Column

این خاصیت که در css3 اضافه شده است با استفاده از آن می‌توان متن را چند ستونه کرد، و به طور زیر باید به آن مقدار دهی کرد:

 در اول یک مثال میزنیم سپس به توضیح کد می‌پردازیم فرض کنید که متن طولانی زیر را داریم:

<h2> 7Learn.com </h2>
<p> Javascript and Web Design Tutorials * Javascript and Web Design Tutorials * Javascript and Web Design Tutorials * Javascript and Web Design Tutorials * … </p>

و کد سی اس اس

P {
column-count: 3;
column-width: 150px;
column-rule: 10px solid black;
column-gap: 100px;
}

نتیجه در مرورگر :

• column-count : تعداد ستون‌ها را مشخص می‌کند.
• column-width : پهنای هر ستون را تنظیم می‌کند . با افزایش پهنا ، تعداد ستونها کاهش پیدا خواهد کرد.
• column-gap : دستور gap فاصله ی بین متن ستون و خط جدا کننده ستونها را تنظیم میکند.
•  column-rule: این دستور همزمان سه مقدار را میگیرد که مقدار اول ضخامت، مقدار دوم طرح و مقدار سوم رنگ خط جدا کننده را مشخص می‌کند.

P {
text-shadow: 2px 2px 2px blue;
-webkit-text-shadow: 2px 2px 2px green;
-moz-text-shadow: 2px 2px 2px black;
-o-text-shadow: 2px 2px 2px yellow;
-ms-text-shadow: 2px 2px 2px red;
}

خصوصیت @font-face

در بعضی از مواقع دلمان می‌خواهد از فونت‌های مورد نظرمان استفاده کنیم، اما به دلیل اینکه شاید این فونت بر روی سیستم کاربر نصب نشده باشد، از آن فونت صرف نظر می‌کنیم و باز به دنبال انتخاب فونتی از میان فونت‌های پیشفرض می‌رویم. اما با آمدن css3 و معرفی خصوصیت font-face  شما می‌توانید از هر فونتی حتی اگر بر روی سیستم کاربر نصب نشده باشد نیز استفاده کنید.

استفاده از این خاصیت به صورت زیر است :

@font-face {
font-family: FONT NAME;
src: url("FONT ADDRESS") format("FONT TYPE");

به طور مثال

<h2> 7Learn.com </h2>
<p> Javascript and Web Design Tutorials </p>

و کد css :

@font-face {
font-family: "douglas adams hand";
src: url(fonts/dnahand.ttf) format("truetype");
}
@font-face {
font-family: "typographer rotunda";
src: url(fonts/typographerrotunda.otf) format(opentype");
}
h2 { font: 40px "typographer rotunda"; }
p { font: 20px "douglas adams hand"; }

نتیجه در مرورگر :

بسیار خب تا به اینجا شما با همه ی خصوصیات قالب بندی متون آشنا شدید، در فصل چهارم شما را با خصوصیات پس زمینه آشنا خواهیم کرد.

نویسنده

طاها دریس