آموزش CSS – اندازه و واحدها در CSS

CSS چیست؟

تکنیکی است که برای کنترل طراحی و فرمت بندی در صفحات وب از آن استفاده می شود. با css می توان قالب و فرمت (طراحی) را از محتویات آن صفحه جدا کرد.

مثلا برای فرمت بندی تگ های p که معرف پاراگراف است در صفحه وب می توان با چند خط کد، کل تگ های p را به فرمت دلخواه در آورد (مثلا رنگ آن ها را تغییر داد) .

CSS مخفف Cascading Style Sheet است به این معنا که اولویت بندی برای اثرگذاری فرمت ها به صورت آبشاری است. ترتیب آن از اولویت کم به زیاد به شرح زیر است:

۱) مقدار پیش فرض مرورگر

۲) فایل Style Sheet خارجی

۳) Style Sheetداخلی که در قسمت تعریف شده است

۴) Inline Styleکه داخل عناصر HTML تعریف شده است

(این آیتم ها در مبحث های بعدی شرح داده می شود)

EXrozblog.comEX

CSS چیست؟
تکنیکی است که برای کنترل طراحی و فرمت بندی در صفحات وب از آن استفاده می شود. با css می توان قالب و فرمت (طراحی) را از محتویات آن صفحه جدا کرد.
مثلا برای فرمت بندی تگ های p که معرف پاراگراف است در صفحه وب می توان با چند خط کد، کل تگ های p را به فرمت دلخواه در آورد (مثلا رنگ آن ها را تغییر داد) .
CSS مخفف Cascading Style Sheet است به این معنا که اولویت بندی برای اثرگذاری فرمت ها به صورت آبشاری است. ترتیب آن از اولویت کم به زیاد به شرح زیر است:
۱)مقدار پیش فرض مرورگر
۲)فایل Style Sheet خارجی
۳)Style Sheetداخلی که در قسمت تعریف شده است
۴)Inline Styleکه داخل عناصر HTML تعریف شده است
(این آیتم ها در مبحث های بعدی شرح داده می شود)
مزایای استفاده از CSS:
• تمامی قالب ها را در یک یا چند فایل CSS برای کم شدن زمان ویرایش قرار داد.
• سایت هایی که از فایل های CSS استفاده می کنند، سریع تر بارگذاری می شوند. چون این فایل یک بار توسط کلاینت دانلود شده و در حین دیدن آن وب سایت، دیگر نیازی به بارگذاری دوباره CSS نخواهد بود.
• با جداسازی لایه نمایش از محتوا، می توانید از آن قالب در سایت های دیگر هم استفاده کنید.
• ایجاد قالب های مختلف که می تواند برای موبایل ها یا دستگاه های دیگر به کار رود.
نسخه های CSS :
Css1: در سال ۱۹۹۶ توسط W3C (کنسرسیوم تعیین استانداردهای وب) منتشر شد. در این نسخه خصوصیاتی مانند تعیین رنگ، تصویر پس زمینه و رنگ متون را میشد تعیین کرد.
CSS2: در سال ۱۹۹۸ معرفی شد. امکان ایجاد کادر، تعیین مکان آن ها و selector ها در این نسخه بود.
CSS2: به دلیل مشکلاتی که مرورگرها با نسخه ۲ داشتند و همین طور خطاهای موجود در آن، این نسخه جهت سازگاری با مرورگرها ارائه شد. در حال حاضر هم وقتی صحبت از css2 می شود، منظور همان نسخه ۲٫۱ است.
CSS3: در سال ۲۰۱۱ معرفی شد و به قسمت های مختلفی تقسیم می شود. در این نسخه ایجاد متن های چند ستونی، حاشیه های گرد، میزان شفافیت (opacity)، استفاده از رنگ های RGBA, HSL, HSLA و … اضافه شده است. ضمنا مرورگرها از نسخه css3 به صورت کامل پشتیبانی نمی کنند(منهای دو مرورگر chrome و safari که به طور کامل آن را پشتیبانی می کنند. این نسخه و البته نسخه های قبلی CSS، بدترین سازگاری را با inteet explorer دارد). در جدول زیر آیتم هایی که مرورگرها از آن پشتیبانی می کند آمده است.

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

Notepad++، Microsoft expression ،Adobe dream weaver، Komodo و …

CSSها را به سه صورت می توان به کار برد.( در هر سه حالتی که در زیر گفته می شود، هدف ما این است که نوشته های پاراگراف را به رنگ آبی درآوریم.)
۱) inline:در این حالت، فرمت یا همان CSS ما در خطی که قرار است بر آن فرمتی اعمال شود، قرار دارد.

کد PHP:

<pstyle="text-align:right;"><pstyle=”color:blue;”>thisisasamplep>p>

2) document: برای تعریف CSS در این حالت، باید یک تگ مانند مثال زیر مابین دو تگ بنویسید.

کد PHP:

<styletype=”text/css”>p{
color:blue;
}
style>

در این مثال ابتدا نام تگی که قرار است فرمت جدید (در اینجا رنگ نوشته) روی آن اعمال شود را می نویسیم، سپس در آکولاد باز و بسته ابتدا متغیر (color) و سپس مقدار (blue)آن را می نویسیم.
۳) exteal:برای این حالت، باید یک فایل با پسوند CSS ایجاد کنیم، در آن فایل فرمت ها را بنویسیم، سپس آدرس این فایل را از طریق تگ زیر که بین دو تگ است، به صفحه ها نسبت دهیم.

کد PHP:

<linkrel=”stylesheet”type=”text/css”href=”example.css”/>

محتویات فایل example.css می تواند مطابق زیر باشد:

کد PHP:

{color:blue;
}

برای اینکه متوجه شوید CSS چقدر در طراحی یک سایت تاثیر دارد، می توانید مثال زیر را تمرین کنید(در این مثال می خواهیم یک سایت را بدون CSS ببینیم).
یک سایت را در مرورگرتان باز کنید( به دلیل سازگاری مناسب و امکانات بیشتر از مرورگر firefox استفاده می کنم). من برای نمونه سایت yahoo.com را باز می کنم. سپس در منوی اصلی، view / page style را از Basic Page Style به No Style تغییر دهید. می توانید ببینید که چگونه کل سایت به هم می ریزد و جذابیتش را از دست می دهد. به غیر از این به دلیل جابجایی متن ها، لینک ها و مطالب را به سختی پیدا می کنیم.
کار با CSS
سینتکس یا کدهای CSS خیلی پیچیده نیستند ولی باید دقت کرد که در جای مناسب به کار گرفته شوند. همچنین اولویت بندی آن ها مهم است. به حروف بزرگ و کوچک حساس نیست ولی برای یک دست شدن کدها، بهتر است همه را با حروف کوچک بنویسیم. البته هنگامی که شما با برنامه هایی نظیر Microsoft expression یا … کار می کنید، این امکان را به شما می دهند که با وارد کردن اولین حرف کد، بقیه کد را به شما نمایش دهد و شما از میان آیتم هایی که نشان داده شده، کد مورد نظرتان را انتخاب کنید(مانند شکل زیر).

همانطور که در جلسه قبل گفتم، می توان CSS را در سه حالت به کار برد:inline، document و exteal. به دلیل خوانایی، تفکیک و کار منطقی بهتر است از CSS های exteal استفاده کرد. پس ابتدا یک صفحه html ایجاد کنید (نام این فایل مهم نیست، ولی اسمهایی که برای صفحه اصلی سایت در نظر می گیرید، بهتر است یکی از اسامی زیر باشد: index.html، default.html، main.html) این صفحه شامل کدهای زیر است:

کد PHP:

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metacontent="text/html;charset=utf-8"http-equiv="Content-Type"/>
<title>myfirstpagetitle>
<linkrel=”stylesheet”type=”text/css”href=”first.css”/>
head>
<body>
<p>firstparagraphp>
<p>secondparagraphp>
body>
html>

حال باید یک فایل CSS هم بسازیم تا در آن کدهای CSS را بنویسیم. درون این فایل فرمت ها به شکل زیر تعریف می شوند:

کد PHP:

p{color:red;font-size:12px;
}

می دانیم در html، p مخفف پاراگراف است. به p و مانند آن مثل h1 تا h6 و … selector می گویند. با این تعریف selector، هر جایی که در فایل html، تگ p به کار رفته باشد، فرمتی که ما برایش در اینجا تعریف می کنیم اعمال می شود. بعد از هر selector، یک { } داریم. داخل این آکولاد، فرمتمان را می نویسیم. ابتدا ویژگی) property (را می نویسیم سپس یک : می نویسیم و حال مقدار (value) را می نویسیم. در اینجا ویژگی همان color (رنگ) بوده و در مقدار red (رنگ قرمز) را نوشتیم. در انتهای هر دستور، یک ; نوشته و دستور بعدی را شروع می کنیم.
مانند دیگر زبان ها، می توان برای CSS توضیحات (comment)نوشت. متنی که داخل /* */ قرار می گیرد، از دید مرورگر حذف می شود. می توانیم برای خوانایی بهتر کدهای CSS، از آن استفاده کنیم.

کد PHP:

p{/*برایاعمالرنگواندازهفونت*/color:red;font-size:12px;
}

بعد از save فایل بالا (باز هم نام فایل مهم نیست، من آن را با نام first.css ذخیره می کنم)، باید این فایل را به html لینک بدهیم. پس در index.html بعد از تگ meta این خط را می نویسیم.

کد PHP:

<linkrel=”stylesheet”type=”text/css”href=”first.css”/>

روبروی آیتم href، باید مسیر فایل CSS را بدهیم. چون در اینجا هر دو فایل index.html و first.css در یک پوشه بودند، پس مستقیم آدرس فایل را نوشتیم.
حال باید فایل index.html را در مرورگر ببینید. اگر مراحل را درست اجرا کرده باشید، دو متن first paragraph و second paragraph را با فونت ۱۲ پیکسل و رنگ قرمز خواهید دید که شکل زیر خروجی خواهد بود.

اندازه و واحدها در CSS

در CSS برای اینکه بتوانیم اندازه را مشخص کنیم (مانند مشخص کردن اندازه یک فونت)، از آیتم های زیر می توانیم استفاده کنیم:
%درصد
inاینچ
cmسانتیمتر
mmمیلیمتر
emهر واحد آن برابر با فونت جاری است، مثلا اگر بنویسیم ۲em، اندازه آن ۲ برابر فونت جاری خواهد شد
exاندازه حرف x
ptمعادل ۱/۷۲ اینچ
pcپیکا معادل ۱۲pt
pxمعادل هر پیکسل
رابطه های زیر برای واحدهای بالا وجود دارد:
۱۲pt = 16px = 1em = 100%

به غیر از واحدهای بالا، یک واحد دیگر هم وجود دارد که مانند سایز بندی لباس است.
xx-small, x-small, small, medium, large, x-large, xx-large
اگر بخواهیم کاربرد بیشتر واحدهای بالا را بگوییم، می توانیم این گونه بیان کنیم که:
% برای عرض و ارتفاع ( width و height) کاربرد دارد.
em، برای سایت هایی که نوشته زیاد دارند (تگ font-size)، چون با زوم کردن روی آن ها نوشته ها راحت خوانده می شود.
ضمنا واحدهای % و em، نسبی هستند و اندازه خودشان را به ارث می برند. (به همین دلیل ممکن است مشکلاتی را برای طراحی سایت ایجاد کنند، پس باید آگاهانه از آنها استفاده کرد)
px، قابلیت این را دارد که هم برای width و height و هم برای font-size از آن استفاده شود و معمولا در طراحی صفحات وب، بیشتر از px استفاده می شود و یک واحد اندازه مطلق است.
برای این که تفاوت واحد نسبی و مطلق را متوجه شوید، می توانید مثال زیر را ببینید. (البته شاید درک این مثال مقداری سخت باشد، ولی همین که متوجه شوید واحدهای مطلق و نسبی چگونه در طراحی سایت عمل می کنند کافی است)

کد PHP:

<divstyle="font-size:30px">
<divstyle="font-size:1em">1em(child)div>
<divstyle="font-size:30px">30px(child)div>
div>
<divstyle="font-size:30px">30pxdiv>
<divstyle="font-size:1em">1emdiv>

کافی است تگ های بالا را بین دو تگ و بنویسید و نتیجه را که مانند شکل زیر خواهد بود ببینید.

دو خط اول، از تگ پدر font-size را به ارث می برند و با (child) نشان داده شده اند.
ولی خط سوم، ۳۰px دیگر child نیست، ولی چون واحد مطلق است همان ۳۰px نشان داده می شود ولی خط چهارم ۱em به دلیل این که واحد نسبی است از تگ بالاتر خود یعنی اندازه خود را به ارث می برد.

آموزش CSS – اندازه و واحدها در CSS13|341391|06|24|5hotnethotnet10000home101134

برچسب: نویسنده: jamshid تاريخ: جمعه 24 شهريور 1391 ساعت: 13:34

درباره سایت

آخرین مطالب

امکانات وب

آموزش CSS – اندازه و واحدها در CSS

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه