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

دسته بندی: آموزش
زمان مطالعه: 6 دقیقه
۱۷ آبان ۱۳۹۱

فهرست محتوای این مقاله

خصوصیت 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; }

نکته :

هنگامی که می‌خواهییم از مقدار عددی 0 استفاده کنیم نیازی به تعیین واحد نیست.

خصوصیت 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: این دستور همزمان سه مقدار را میگیرد که مقدار اول ضخامت، مقدار دوم طرح و مقدار سوم رنگ خط جدا کننده را مشخص می‌کند.

نکته :

با اینکه این خصوصیت در css3 معرفی شده است در مرورگرهای قدیمی پشتیبانی نمیشود، در ضمن در مرورگر ie از نسخه 10 به بعد می‌توان از خصوصیات css3 استفاده کرد.

نکته :

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

پیشوند مرورگرها

پیشوند مرورگرها را می‌توانید در تصویر زیر مشاهده کنید. :

::. طبق تجربیات، مرورگر گوگل کروم نیز با افزودن پیشوند   -webkit- خصوصیت مورد نظر را تاثیر می‌دهد.

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

مثال:

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

کد بالا به این معناس که سایه متن تگ p را در همه ی مرورگرها به رنگ آبی  (خط 2 ) اما در مرورگر گوگل کروم و سافاری، به رنگ سبز (خط 3) ، در مرورگر فایرفاکس به رنگ سیاه (خط 4 )، در مرورگر اوپرا به رنگ زرد (خط 5) و در مرورگر اینترنت اکسپلورر به رنگ قرمز (خط 6) نشان دهد.

خصوصیت @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"; }

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

نکته :

همه ی مرورگرها از همه ی فرمت‌های فونت پشتیبانی نمی‌کنند. به تصویر زیر دقت کنید تا با پشتیبانی مرورگرها از فرمت‌های فونت‌ها آشنا شوید :

نکته :

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

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

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

Abbas412

سجاد جان همونطور که خودت میدونی، برای font-face مروگر ie باز هم کار نمیکنه
باید از دستوری شبیه این استفاده کنیم:

 src:url(&#8216;fonts/yekan.eot?#’) format(‘eot’), 

یه نکته دیگه اینکه mime type فونت ها هنوز قانون خاصی نداره، و توی سایت w3school هم توی مثال هاش اصلا از mime type استفاده نکرده
ممنون

مهدي lvhnd

ببخشيد من ناشي هستم-مي خواستم بدونم دربالا از دو كدhtml ,ccsاستفاده كرديد هردوش روبراي وبلاگ استفاده كنيم يا فقط يكيشون رو ؟پشت سرهم باشن؟يه توضيح مختصر بديد لطفا

سجاد دریس

سلام.
باید هم کد css و هم از کد html استفاده کنید،
کد css را در یک فایل css جداگانه قرار بدین یا که در قسمت head صفحه داخل تگ

&lt;style type=&quot;text/css&quot;&gt;
&lt;/style&gt;

و کد html رو نیز در قسمت موردنظرتون که میخوایید نمایش داده بشه

psdk

مرسی