dragged border

درباره وبلاگ

dragged border
dragged border

درج تصویر در صفحات وب بخش اول

درج تصویر در صفحات وب بخش اول

بعداز فایل تصویری شما با فرمت GIF یا JPEG آماده شد، زمان درج آن در وب سایتفرا رسیده است. این کار توسط تگ IMG در html امکان پذیر می باشد. تگ img به صورت زیر نوشته می شود:

<IMG SRC="some_image.gif">

تگimg  تگ پایانی ندارد و لازم نیست که به صورت زیر نوشته شود:

<IMG SRC="some_image.gif"></IMG>

 img از کلمه image و src از کلمه source بر گرفته شده است که محل فایل عکس را معرفی می کند.

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

آدرس دهی مطلق

به آدرس زیر توجه کنید:

(0) نظر
dragged border

انواع تصاویر

همانطورکه به خاطر دارید، درباره پسوندهای فایل در ابتدای دوره توضیحاتی داده شد.حال می خواهیم با دو پسوند جدید آشنا شویم: JPEG و GIF.

همانطور که صفحات وب و فایل های متنی دارای پسوند فایل می باشند، تصاویرپسوند مخصوص خود را دارند. پسوندهای بسیار زیادی برای تصاویر وجود دارند، دو تا از مهمترین پسوندها که در صفحات وب استفاده می شوند، JPEG و GIF هستند. (PNG نیز یکی دیگر از فرمت های معروف می باشد که مشابه GIF است. بنابراین به صورت مجزا راجع به آن بحث نمی کنیم).

تصاویر GIF

فایل های  GIF از الگوریتم هایی برای کاهش حجم فایل استفاده می کند. حجمتصاویر در یک صفحه وب به خصوص در زمانهایی که سرعت اینترنت پایئن است، عامل بسیار مهمی را ایفا می کند. چنانچه یک عکس با حجم 1 مگابایت داشته باشیم و سرعت اینترنت برابر با 2mb باشد، حدود 4 ثانیه طول می کشد تا عکس بارگذاری شود که زمان طولانی به نظر نمی رسد.

اما اگر سرعت اینترنت برابر با 500 کیلو بیت بر ثانیه باشد، حدود 16 ثانیه طول می کشد تا عکس بارگذاری شود و کسی تمایل به انتظار طولانی برای بارگذاری یک عکس ندارد.

بنابراین مقایسه حجم یک عکس به سرعت اینترنت بستگی دارد. اگر عکسی در کامپیوترتان دارید نگاهی به پسوند آن بیندازید. نرم افزار هایی وجود دارند که امکان تغییر فرمت عکس را فراهم می کنند. تغییر فرمت عکس به GIF به طرز چشمگیری حجم عکس را کاهش می دهد. اما در این روش نقطه ضعفی وجود دارد. تعداد رنگهایی که در یک فایل GIF وجود دارد حداکثر 256 رنگ می باشد که برایتصاویر واقعی کفایت نمی کند و همچنین ابعاد عکس نیز به همین میزان کاهش پیدا می کند.

JPEG

JPEG نیز یکی دیگر از فرمت های رایج تصاویر در صفحات وب می باشد و به شما امکان داشتن تصاویری با بیش از 256 رنگ را می دهد. در حقیقت میلیون ها رنگ و بیشتر.

هنگام تبدیل یک عکس به فرمت " JPEG"، فایل فشرده می شود و بنابراین کاهش کیفیت تصویر غیر قابل اجتناب می باشد.

اگر می خواهید عکسی با بهترین وضوح داشته باشید، تبدیل آن به JPEG بسیاربهتر از GIF می باشد. اگر چه حجم آن بیشتر است، ولی از کیفیت بهتری برخوردار است. نقطه ضعف فایل های JPEG اینست که هنگام فشرده کردن آن کیفیت از بین می رود و کیفیت قبلی دیگر قابل بازگشت نیست.

در حالیکه در فایل های GIF می توان کیفیت قبلی را بازیابی کرد. مشکل دیگری که در فایل های JPEG  وجود دارد ایجاد پشت زمینه شفاف است. بنابراین اگر عکسی مشابه تصویر زیر داشته باشید:





و بخواهید از رنگ مشکی پشت زمینه خلاص شوید، می بایست پشت زمینه را شفافکرده و فایل را با پسوند GIF ذخیره نمایید. با فرمت GPEG این کار امکان پذیر نیست. (همچنین می توانید تصاویر متحرک با فرمت GIF ایجاد کنید که با فرمت JPEG قابل انجام نیست).

به طور کلی چنانچه تعداد رنگ ها در عکس شما کمتر از 256 رنگ باشد، آنرا به فرمت GIF تنبدیل کنید. ولی اگر تعداد رنگها بیشتر از 256 باشد و کیفیت نیز مهم باشد، عکس را با فرمت JPEG ذخیره نمایید. (دوربینها و موبایل های جدید، عکس ها را با فرمت JPEG ذخیره می کنند).

در درس بعدی آموزش طراحی سایت، نحوه درج تصاویر در صفحه وب را خواهیم آموخت.

(0) نظر
dragged border

سایر تنظیمات قلم

سبک قلم

سه نوع سبک قلم وجود دارد:normal (معمولی)، italic (مورب)، oblique (کج)، سبک قلم پیش فرض، سبک معمولی می باشد و در حالت عادی احتیاجی به تعیین سبک قلم نمی باشد. فقط در مواردی که می خواهید متن به صورت مورب یا کج باشد از این ویژگی به صورت زیر استفاده کنید.

نکته:در حقیقت تفاوت چندانی مابین سبک های italic و oblique وجود ندارد وتفاوت آنها در برخی از فونت های خاص مانند sans-serif نمایان می شود.

وزن قلم

 وزن قلم در واقع صفحات قلم را مشخص می کند. مقادیر مختلفی برای این ویژگی وجود دارد که رایج ترین آنها Bold است، اما می توانید از Bolder و lighter هم استفاده کنید. همچنین همان طور که از نام آن پیداست، می توانید از اعداد بین 100 تا 900 برای تعیین وزن قلم استفاده نمایید. بهتر است که از اعداد رند (مضرب 100 برای وزن قلم استفاده شود و تفاوت وزن قلم 100 با 150 به سختی قابل تشخیص است. نحوه استفاده از وزن قلم:





پاراگراف دیگری در بخش Body برنامه خود ایجاد کنید و تغییرات را مشابه تصویر زیر اعمال نمایید:


در اینجا وزن تمام پاراگراف ها را به صورت Bold تنظیم کرده ایم. سپس یک کلاس به نام Chang-Font-Weight که وزن قلم آن برروی lighter تنظیم شده است،ایجاد کرده ایم و از این کلاس در پاراگراف دوم استفاده کرده ایم.

تغییرات را ذخیره و نتیجه را در مرورگر مشاهده نمایید.

تمرین: وزن قلم های مختلف ما بین 100 الی 900 را امتحان کنید و تفاوت آن ها را مشاهده نمایید.

در اینجا توقفی در قسمت آموزش CSS خواهیم داشت و بعدا مجددا به این بخش باز خواهیم گشت. در بخش بعدی آموزش طراحی سایت، درج تصاویر در صفحه وب را فرا می گیریم.




(0) نظر
dragged border

اندازه قلم در CSS

روشهای بسیاری برای تغییر اندازه قلم در css وجود دارد. می توانید از ویژگی font-size برای تغییر اندازه قلم استفاده نمایید. مقدار این ویژگی، کمی دقتبرانگیز است. به مقادیر زیر برای ویژگی font-size  توجه داشته باشید:

 font-size: 200%;
font-size: 32px;
font-size: 2em;
font-size: xx-large;

تمام مقادیر بالا با هم یکسان هستند. می توانید آن ها را در کد خود بیازمایید. Css مشخص شده در تصویر زیر را به کده های خود اضافه کنید:



















تغییرات را ذخیره کنید و صفحه مرورگر را به روزرسانی نمایید. می بایست تغییر اندازه پاراگراف را مشاهده نمایید. حال سایر اندازه ها را امتحان نمایید: 200%, 32px, and 2em مشاهده خواهید کرد که تمام آنها یک اندازه خواهند بود.

اینکه از کدام فرمت استفاده کنید، بستگی به خودتان دارد. بهتر است که اندازه قلم Body را با %100 تنظیم کرده و اندازه سایر عناصر را با em یا px تنظیم نمایید. به صورت زیر:










تنضیمات فوق به این معنی است که تمام متن داخل تگ Body،  به اندازه سایزپیش فرض مرورگر که برابر با px16 می باشد، تنظیم شوند. Px16 برابر با 1em می باشد. در مثال فوق اندازه تگ p، یک و نیم برابر اندازه پیش فرض خواهد بود و اندازه قلم در کلاس change font، دو برابر مقدار پیش فرض خواهد بود.





-اندازه های دیگری استفاده می شوند، ولی عبارتند از:

xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger

اندازه های فوق را امتحان کنید و نتیجه را مشاهده نمایید. در درس بعدی آموزش طراحی سایت، سایر تنظیمات قلم را فرا می گیرید.

(0) نظر
dragged border

رنگ قلم

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

تقریبا هر رنگ دلخواهی را می توانید برای متن خود انتخاب نمایید. برای تنظیم رنگ، از سه فرمت مختلف استفاده می شود:

-نام رنگ به صورتی که خوانده می شود.

-نام رنگ به صورت مقدار هگزادسیمال

-نام رنگ با مقدار RGB

لیست بلند بالایی از نام رنگ ها در CSS وجود دارد، مانند لیمویی کمرنگ و یا سبز یشمی. ولی شما می توانید از یکی از رنگ های ساده مثلا آبی یا قرمز استفاده نمایید. که CSS تنظیمات قلم به شکل زیر می باشد:

H1 {

text-align: center;
font-family: Courier New, Courier, Mono;
color: red;

}

بنابراین برای تنظیم کردن رنگ از کلمه "color" به همراه علامت نقل قول ( ; )  استفاده می کینم.

تعداد 17 رنگ رایج و 130 رنگ غیر رایج وجود دارد.

رنگهای رایج عبارتند از:

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

مقادیر هگزا دسیمال:

مقادیر هگزا دسیمال در طراحی وب بسیار پرکاربرد هستند. اگر تا بحال اسم آن به گوشتان نخورده است، باید بدانید که در یک مقدار هگزادسیمال از اعداد 0 تا 9 و حروف A تا F استفاده می شود. (پایه 16). در پایه 16، از حروف  A  تا F به جای اعداد 10 تا 16 استفاده می شود. بنابراین A=10 و B=11 و C=12 و... می باشد.

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

#FF0000رنگ قرمز

#00FF00رنگ سبز

#0000FFرنگ آبی

نکته: به علامت # قبل از کد رنگ توجه نمایید:

مثال:

H1 {

text-align: center;
font-family: Courier New, Courier, Mono;
color: #2F0B99;

}

مثال: رنگهای زیر را امتحان نمایید:

color: #1BAA12;

color: #1087AC;

color: #451DE2;

مقادیر RGB

روش دیگری برای تنظیم رنگ، استفاده از مقادیر RGB می باشد. RGB از بر گرفته از کلمات Red (قرمز)، Green (سبز) و Blue (آبی) می باشد. مشابه روش قبل، هر رنگ دارای جایگاه مخصوص می باشد، این بار از اعداد 0 تا 255 استفاده می شود. فرمت استفاده از مقادیر RGB به شکل زیر می باشد:

color: RGB(255, 0, 0);

نکته: اعداد ما بین یک جفت پرانتز که توسط کاما از هم جدا شده اند قرار می گیرند.

تمرین: رنگهای RGB زیر را امتحان کنید:

color: RGB(0, 255, 0);

color: RGB(125, 125, 0);

color: RGB(255, 255, 10);


" را در یک موتور جستجو مانند گوگل وارد کنید. color picker نکته: برای یافتن کد رنگ مورد نظر خود، "  

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





(0) نظر
dragged border

تنظیمات قلم در css

تنظیماتقلم مانند نوع قلم، اندازه قلم، رنگ قلم و... در صفحات استایل دهی تعیین می شوند. برای تغییر نوع قلم، از ویژگی font-family استفاده می کنیم.

مثال:

<FONT face="Arial, Helvetica, san-serif">Some text here</FONT>

علت اینکه برای نوع قلم، چندین مقدار تنظیم می شود اینست که ممکن است بازدید کننده سایت، فونت اول را بر روی سیستم خود نداشته باشد، در این حالتفونت دوم اعمال می شود و به همین ترتیب فونت سوم. (شما می توانید به تعداددلخواه نوع قلم تعیین نمایید).

چنانچه تنها یک نوع قلم مورد علاقه تان را انتخاب نمایید و بازدید کنندهآن فونت را در سیستم خود نداشته باشد، فونت پیش فرض نمایش داده می شود که برای فونت های فارسی  معمولا Tahoma و برای فونت های انگلیسی، Time New Roman می باشد.

(0) نظر
dragged border

استایل های خطی و جاسازی شده

استایل های خطی

فایل متنی html که در ابتدای دوره ایجاد کرده بودید را باز کنید.

بر روی منوی File->Seve As کلیک کنید. فایل را با عنوان جدید newpage.html ذخیره کنید. فراموش نکنید که قبل از کلیک روی دکمه ذخیره، آیتم Save As Type را به All Files تغییر دهید.

متن را برای عنوان صفحه در تگ Title وارد کنید. یک تگ عنوان H1 اضافه کرده و عبارتی را درون آن تایپ نمایید.

حال یک پاراگراف بعد از تگ عنوان وارد نمایید. برای ایجاد استایل خطی بعد از اولین H1 کلیک کنید. کلید فاصله (space)

را یکبار فشرده و عبارت زیر را تایپ نمایید:

<H1 style=text-align:center>

توجه کنید که هیچ فاصله ای بعد از علامت : و قبل از کلمه center وجود نداشته باشد. کدهای html شما باید شبیه تصویر زیر باشد:


بعد از تکمیل کد نویسی، نتیجه را در مرورگر مشاهده نمایید. همانطور که ملاحظه می کنید، عنوان وارد شده، در وسط صفحه قرار گرفته است:


بنابراین برای وسط چین کردن عناصر روی صفحه، می بایست از ویژگی text-aligh استفاده کنید. بعد از علامت : مقدار ویژگی را وارد نمایید که درمثال فوق کلمه center می باشد.

تمرین: مشابه کلمه center که برای وسط چین کردن عناصر استفاده می شود، می توانید از مقادیر left و  right برای چپ چین و راست چین کردن عناصر در صفحه استفاده نمایید. آنها را امتحان نمایید.

استایل های جاسازی شده

همانطور که قبلا نیز اشاره شد استایل های جاسازی شده، داخل بخش HEAD در کد قرار می گیرند. برای تمرین، کدهای CSS زیرا را به فایل خود اضافه کنید:


بنابراین، چیدمان متن به "راست چین" تنظیم شده است. اگر چه استایل خطی، آنرا به صورت "وسط چین" تنظیم کرده است. حال این سئوال پیش می آید که کدام یک از آنها اجرا خواهد شد؟

تغییرات را ذخیره کرده و مرورگر خود را مجددا بار گذاری نمایید. تغییری مشاهده نمی شود. علت اینست که استایل های خطی برای استایل های جاسازی که درقسمت HEAD قرار داده شده ارجعیت دارند.

استایل خطی که برای تگ عنوان وارد کرده بودید را حذف نمایید. تگ عنوان باید مشابه زیر باشد:


تگ عنوان، راست چین شده است.

تمرین: مقدار ویژگی text-align را به مرکز تغییر دهید. تغییرات را ذخیره و نتیجه آنرا در مرورگر مشاهده کنید.

در درس بعدی آموزش طراحی سایت، نحوه تنظیمات قلم با استفاده از css را خواهید آموخت.

(0) نظر
dragged border

استفاده از انتخاب گرهای CSS

نحوه استفاده از کلاس های CSS و انتخاب گرهای ID

تا اینجا طریقه تنظیم کردن صفحات استایل دهی را یاد گرفته اید و می دانید که اگر یک انتخاب گر html تنظیم کنید، تمام تگهای html از آن نوع به مقدار ویژگی که شما تعیین کرده اید، تغییر می یابند. بعنوان مثال اگر html به صورت زیر داشته باشید:


در این صورت متن تمام عنوان های H1 که در میان تگ BODY استفاده کرده اید به رنگ قرمز خواهند شد.

به عبارتی دیگر، برای استفاده از انتخاب گرهای جدید، لازم نیست که چیزی به کدهای html اضافه شود و تگها به طور معمول نوشته می شوند. اگر چه کلاس وانتخاب گرهای شناسه کمی متفاوت هستند.

انتخاب گر کلاس

برای تنظیم یک انتخاب گر کلاس، کد نویسی به صورت زیر بود:

class selector{property:value}.

.نام انتخاب گر کلاس{ویژگی:مقدار}

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

مثال:

Fontone. در مثال فوق یک انتخاب گر کلاس است. عنوانی است که ما خودمان انتخاب کرده ایم. آنچه که داخل آکولاد قرار دارد می گوید که "هر زمانی که این قاعده استفاده می شود، متن رنگ قرمز شود".

شما می توانید این قاعده جدید را برای تمام تگهای html بکار ببرید. مانند زیر:

<H1 Class = "FontOne">My Heading</H1>

زمانی که از انتخاب گر کلاس استفاده می کنید، ولی کلمه "class" استفاده می شود. بعد از آن یک علامت مساوی (=) و بعد از آن عنوانی که برای کلاس انتخاب کرده اید تایپ می شود که در مثال ما Fontone است. اما دقت کنید که در اینجا از قرار دادن نقطه در ابتدای نام کلاس خودداری می کنیم. اگر نقطه را در ابتدای نام کلاس قرار دهید، قاعده شما کار نمی کند. توجه کنید که اگرچه ما از علامت نقل قول در دو طرف نام کلاس استفاده کرده ایم، ولی استفادهاز آن ضروری نمی باشد ولی توصیه می شود که به این صورت استفاده شود.

استفاده از انتخاب گر ID

انتخاب گر ID دقیقا مشابه انتخاب گر کلاس استفاده می شود. تنها تفاوت آنها در کلمه ای است که در هنگام استفاده از قاعده بکار برده می شود. به جای کلمه class، از کلمه ID استفاده می کنیم.


نتیجه کد بالا در مرورگر به صورت زیر خواهد بود:


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

(0) نظر
dragged border

استایل ها را کجا قرار دهیم؟

استایل ها در سه محل می توانند قرار بگیرند: خطی، جاسازی شده در فایل html و در فایل خارجی.

استایل دهی خطی:

می توانید یک تک استایل را مستقیما در تگ های html قرار دهید. این روش استایل دهی خطی نام دارد. استایل های خطی بر سایر خط ها اولویت دارند.

مثال:

<H1 STYLE = 'Color: Red'>My Heading</H1>

برای جایگذاری استایل در تگ html، به روش زیر عمل کنید:

  • تگی که می خواهید تغییر کند را بنویسید.
  • یک فاصله دار و کلمه style را تایپ کنید.
  • یک علامت مساوی (=) وارد کنید.
  • علامت نقل قول را تایپ کنید.
  • نام ویژگی را به همراه دو نقطه وارد کنید.
  • مقدار را وارد کنید.
  • علامت نقل قول را مجددا وارد کنید.
  • علامت بزرگتری را برای تگ html وارد کنید.

استایل دهی جاسازی شده:

استایل دهی جاسازی شده، در قسمت HEAD فایل html قرار داده می شوند. زمانی که استایلی را در قسمت HEAD قرار می دهید، برای شناسایی استایل ها بهمرورگر می بایست از دو تگ آغازی و پایانی استایلها استفاده نمایید.

<HTML>

<HEAD>

</TITLE>CSS<TITLE>

<STYLE TYPE="text/css">

<STYLE/>

</HEAD>

<BODY>


ما بین دو تگ <style>، قواعد css نوشته می شوند.

استایل دهی در فایل خارجی:

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

برای شناسایی فایل استایل، از تگ Link استفاده می کنیم. صفت REL به مروگر می فهماند که مقصد معرفی یک فایل استایل دهی را دارید.

صفت TYPE نوع فایل را به مرورگر شناسایی می کند. صفت HREF نام و محل فایل را به مرورگر معرفی می کند. (هنوز با نحوه ارجاع دهی آشنا نشده اید. بنابراین اکنون راجع به HREF نگران نباشید).

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

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

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

دقت کنید که از هیچ تگی در این فایل استفاده نشده است. هیچ تگ <style> یا تگ html دیده نمی شود. تنها انتخاب گرها و جفت های ویژگی ومقدار وجود دارند همچنین دقت داشته باشید که سه استایل نوشته شده است. در روش جاسازی شده هم می توانید به همین تربیت داشته باشید و هر تعداد دلخواه استایل را می توانید ما بین جفت تگ <style> و <style/> قرار دهید.

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

زمان ذخیره فایل استایل دهی، لازم نیست که حتما پسوند css. را وارد کنید. می توانید با همان پسوند txt. فایل را ذخیره نمایید و سپس در قسمت HREF تگ Link، نام فایل را وارد کنید:

HREF = style1.txt

به جای

HREF = style1.css

در درس بعدی آموزش طراحی سایت، نحوه استفاده از انتخاب گرهای css را آموزش می دهیم.


(0) نظر
dragged border

قواعد CSS

قواعدCSS به مرورگر می فهماند که ظاهر یک صفحه html چگونه باشد و چه کاری انجامدهد. یک قاعده css، مشخص می کند که یک تگ html چه شکلی داشته باشد و یا میتوانید قواعد خود را برای بکار بردن در قسمتهای مختلف ایجاد کنید.

به عنوان مثال، می توان قاعده ای تنظیم کرد که به مرورگر بگوید که تمام تگهای <p> چگونه تنظیم شوند و اولین خط آنها فرو رفته باشد، یا می توانید قاعده پاراگراف خود را ایجاد نمایید و آنرا برای یک پاراگراف بکار برید و نه برای تمام پارگرافها.

یک قاعده سه قسمت دارد:

انتخاب گر، ویژگی و مقدار.

انتخاب گر ID مشابه انتخاب گر کلاس است، اما برای شناسایی یک عنصر خاص در صفحه استفاده می شود. مثلا یک عنصر جعبه متنی در صفحه.

مثال زیر، نحوه استفاده انتخاب گر را نشان می دهد:

<style>

  H1 {Color:Red}

    NewFont{Font-Size:16pt}.

                            NewTextboxColour{color:yellow}#

<styel/>

در فرمت اول، H1 یک انتخاب گر html است. توجه کنید که علامتهای کوچکتری وبزرگتری از تگ حذف شده اند. با نوشتن یک انتخاب گر html، تمام تگهای html از آن نوع در صفحه به فرمتی که تنظیم کرده اید تغییر می یابند. بنابراین برای فرمت H1 که در بالا تنظیم شده است، تمام متنهایی که داخل تگ H1 نوشته شده اند، به رنگ قرمز تغییر خواهند کرد.

استایل دوم، NewFont. یک انتخاب گر کلاس است. دقت کنید که انتخاب گر کلاس با یک نقطه آغاز می شود. سپس نام کلاس نوشته می شود (هر عنوان که بخواهید). بین نقطه و عنوان کلاس و همچنین بین کلمات در عنوان کلاس فاصله ای وجود ندارد.

استایل سوم،NewTextboxColour#، یک انخاب گر ID است. انتخاب گر ID با یک علامت # آغاز می شود و سپس عنوانی دلخواه برای انتخاب گر ID نوشته می شود. هیچ فاصله ای بین علامت # و عنوان انتخاب گر وجود ندارد.

انتخاب گر:

سه نوع انتخاب گر CSS وجود دارد: انتخاب گر html، انتخاب گر کلاس و انتخاب گر ID.

یک انتخاب گر html، قسمت متن تگ html است. تگ کامل پاراگراف، <p> است. بنابراین انتخاب گر آن فقط p می باشد. به عبارت دیگر، با حذف علامتهایکوچکتری و بزرگتری از تگ، انتخاب گر html به دست می آید.

انتخاب گر کلاس، توسط خودتان ایجاد می شود و در تمام قسمت های دلخواه درصفحه می توان آنرا استفاده کرد. در مثال قبلی استایل دهی Font1 یک انتخاب گر کلاس است. ما عنوان کلاس را خودمان انتخاب کردیم و آنرا در برخی از قسمتهای صفحه بکار بردیم.

ویژگی و مقدار

بعد از تنظیم انتخاب گرها، برای آنها ویژگی و مقدار تعیین می کنیم.

ویژگی، چیزی است که می خواهید آنرا تغییر دهید. مانند فونت، رنگ، پشت زمینه، فاصله افقی و عمودی، متن و...

مقدار، تنظیمات جدید برای ویژگی انتخاب شده است. بعنوان مثال برای ویژگیرنگ، می توانیم از رنگهای واقعی مانند زرد، سبز، قرمز و یا از کد رنگها (#000000 و #FFF000) برای مقدار آنها استفاده نماییم.

ویژگی و مقدار آن داخل آکولاد قرار می گیرند. فرمت کلی به صورت زیر خواهد بود:

selector {property:value}

مثال:

H1 {COLOR:RED}

H1 یک انتخاب گر، Color یک ویژگی و Red مقدار ویژگی می باشد.

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

مثال:

H1 {Color: Red; Font-weight: Bold; Font-Size: 16pt;}

نسخه چند خطی مشابه زیر است:

<STYLE>

H1

{

    Color:Red;

    Font-weight:Bold;

    Font-Size:16pt;

{

<STYLE/>

نسخه چند خطی، خوانایی بهتری دارد.

جمع بندی:

  • یک قاعده css سه بخش دارد: یک انتخاب گر، یک ویژگی و یک مقدار.
  • یک انتخاب گر می تواند انتخاب گر html، انتخاب گر کلاس و انتخاب گر ID باشد.
  • ویژگی و مقدار توسط یک جفت آکولاد از انتخاب گر متمایز می شوند.
  • یک ویژگی توسط دو نقطه (:) از مقدار جدا می شود.
  • اگر مایل به استفاده چندین ویژگی هستید، آنها را با سمی کولن (; ) از هم جدا نمایید.

در درس بعدی طراحی سایت ، یاد می گیرید که استایل ها را در کجا قرار دهید.

 

(0) نظر
X