فهرست محتوای این مقاله
خصوصیت 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"; }
نتیجه در مرورگر :
این خصوصیت را باید در فصل دوم که مربوط به فونتها بود معرفی میکردم، اما چونکه یادم رفته بود، اینجا براتون توضیحش دادم.
بسیار خب تا به اینجا شما با همه ی خصوصیات قالب بندی متون آشنا شدید، در فصل چهارم شما را با خصوصیات پس زمینه آشنا خواهیم کرد.
سجاد جان همونطور که خودت میدونی، برای font-face مروگر ie باز هم کار نمیکنه
باید از دستوری شبیه این استفاده کنیم:
یه نکته دیگه اینکه mime type فونت ها هنوز قانون خاصی نداره، و توی سایت w3school هم توی مثال هاش اصلا از mime type استفاده نکرده
ممنون
ببخشيد من ناشي هستم-مي خواستم بدونم دربالا از دو كدhtml ,ccsاستفاده كرديد هردوش روبراي وبلاگ استفاده كنيم يا فقط يكيشون رو ؟پشت سرهم باشن؟يه توضيح مختصر بديد لطفا
سلام.
باید هم کد css و هم از کد html استفاده کنید،
کد css را در یک فایل css جداگانه قرار بدین یا که در قسمت head صفحه داخل تگ
و کد html رو نیز در قسمت موردنظرتون که میخوایید نمایش داده بشه
مرسی