آموزش html5 و css3 از صفر تا 100-بخش چهارم

Css مخفف کلمات cascading style sheet است، یک زبان نشانه گذاری تحت وب که برای توصیف ظاهر و شکل یک و سایت در صفحات html استفاده می شود. Css3 در واقع آخرین ورژن css است که توسعه وب را تحت تاثیر فرار داده است. ویژگی های جدیدی به css اضافه شده است که بسیار کار طراحان را راحت تر کرده است. در این بخش پس از معرفی تگ video-audio در html5 به آموزش css3 پرداخته ایم .

آشنایی با تگ Audio – Video

بسیاری از صفحات وب به پخش و اجرای فایل های ویدئویی و فلش می پردازند. HTML5 استاندارد خاصی برای نمایش فایل های ویدئویی در صفحات وب ارائه کرد تا قبل از html5 طراحان برای نمایش ای گونه فایل ها از ابزارهای جانبی مثل flash player استفاده میکردند که این مسئله چند اشکال عمده دارد به طور مثال باید plug-in ، flash player روی مرورگر شما نصب شده باشد و نسخه آن به روز باشد تا فایل ویدئویی را نمایش دهد. اما html5 استانداردی تعیین کزده است که به وسیله آن دیگر نیازی به استفاده و نصب نرم افزارجانبی خاصی وجود ندارد.

تگ جدید <video> ، برای نمایش فایل های ویدئویی در صفحات وب به کار می رود و نحوه استفاده از تگ <video> در میان سایر کدهای html5 به شکل زیر است :

<video width=”310” height=”240” controls=”controls”>

<source src=”movie.mp4” type=”video/mp4” />

<source src=”movie.ogg” type=”video/ogg” />

Your browser does not support the video tag.

</video>

خواص width و height ابعاد فریم نمایش ویدئو را تعیین میکنند این پارامترها اجباری نیست اما تعیین آن ها از قبل این امکان را به مرورگر و طراح صفحه می دهد تا قبل از اجرای صفحه میزان فضای لازم را برای این تگ در نظر بگیرند. مقدار دهی خاصیت controls باعث میشود تا مرورگر دکمه های پخش ، توقف و تنظیم صدا را به کاربر نمایش دهد در حالت پیش فرض این کنترل ها نمایش داده نمی شوند .

همانطور که مشاهده میکنید دو فرمت از یک فایل یکسان را به وسیله تگ <source> درون تگ <video> قرار داده ایم . این کار به این دلیل است که مرورگرهای مختلف از فرمت های خاص ویدئویی پشتیبانی می کنند در واقع این کار برای سازگاری با مرورگرهای مختلف است.

تگ جدید <audio> برای پخش فایل های صوتی در صفحات وب به کار می رود و نحوه استفاده از تگ <video> در میان سایر کدهای html5 به شکل زیر است :

<audio controls>

<source src=”horse.ogg” type=”audio/ogg”>

<source src=”horse.mp3 type=”audio/mpeg”>

Your browser does not support the audio element.

</audio>

در این بخش هدف هدف معرفی و نحوه استفاده از چند ویژگی css3 است که طراحان وب با استفاده از آنها کارهای خود را حرفه ای تر و جذاب تر کنند . css3 قابلیت های گرافیکی فراوانی را به محیط وب افزوده است . به جهت عدم پشتیبانی همه مرورگرها از css3 در این بخش به بررسی ویژگی هایی می پردازیم که فعلا در تمام مرورگرها قابل نمایش هستند .

به 3 روش میتوان از css در صفحات وب استفاده نمود :

استفاده از CSS به روش inline

در روش inline برای هر تگ به جای آنکه صفات آن تگ در HTML را مقدار دهی کنیم، از صفات معادل CSS در صفت style از همان تگ بهره می بریم. مانند مثال زیر :

<td width=”100″ bgcolor=”silver” bordercolor=”blue”> salam </td>

استفاده از CSS به روش internal

در این روش با استفاده از تگ <style> به تعریف کلاس های مورد نظر خود درون یک فایل وب و داخل تگ <head> می پردازیم.

<td style=”width:100;background-color:lightblue;border-color:red;“> salam </td>

سپس می توانیم هرجای همان صفحه وب که لازم باشد از این کلاس ها به دفعات استفاده کنیم. به این ترتیب ممکن است حجم فایل وب تولید شده و در نتیجه مدت دانلود صفحه به شدت کاهش یابد و انجام تغییرات ساده تر شود.

استفاده از CSS به روش external

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

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

بنابراین یک کلاس تعریف شده به ترتیب فوق، می تواند در همه صفحات سایت استفاده شود و با تغییر این کلاس، می توان به راحتی کل صفحات را دستخوش تغییر نمود. کافیست با استفاده از link استایل مورد نظر خود را به صفحه Html خود وصل کنید .

پشوند اختصاصی مروگرها

در css3 بیشتر روي حالت نمایشی تاکید شده و بر طبق همین روال مرورگرهاي مختلف ، تعبیري متفاوت از یک ویژگی را ارائهمیدهند . بطور مثال مروگر سافاري از کد

div.classname{

box-shadow: 1px 1px 1px 1px #000000 inset;

}

پشتیبانی نمیکند ،در واقع ما انتظار دارم که این کد (ویژگی) سایه اي را براي div مورد نظر ایجاد کند اما اینطور نیست . راه حل استفاده از پیشوند اختصاصی است .

بطور مثال کد بالا براي اینکه در مروگر سافاری کار کند باید بصورت

div.classname{

box-shadow: 1px 1px 1px 1px #000000 inset;

-webkit-box-shadow: 1px 1px 1px 1px #000000 inset;

}

گرد کردن گوشه اجزا بوسیله border-radius

دیگر زمان آن منسوخ شده که همه ما براي یک گرد کردن ساده از انواع روشها استفاده میکردیم و تقریباً همه ي آنها شامل افزودنعکسهاي متعدد به گوشه ها میشد! حال با استفاده از این ویژگی به راحتی میتوان گوشه هاي اجزا را گرد کرد.

فرض کنید ما در صفحه html خود چنین داریم

<div class="use-border-radius">

salam

</div>

و در استایل خود چنین

div.use-border-radius{

width : 300px;

height : 300px;

background : gray;

}

پس در مروگر مربعی به رنگ طوسی مشاهده خواهیم کرد .

مربع طوسی

اکنون برای گرد کردن گوشه های مربع ویژگی border-radius را اضافه کنیم.

div.use-border-radius{

width : 300px;

height : 300px;

background : gray;

border-radius:15px;

}

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

div.use-border-radius{

width : 300px;

height : 300px;

background : gray;

border-radius:15px;

-moz-border-radius:15px; /* mozilla */

-o-border-radius:15px; /* opera */

-webkit-border-radius:15px; /* chrome and safari */

{

نکته جالب دیگر اینکه اگر border-radius زیاد مقدار بدهیم شکل اگر مربع باشد به دایره تبدیل خواهد شد !

اکنون شایدشمانیازداشته باشیدکه فقط گوشه اي خاص راگردکنید border radius قابل تجزیه شدن به ویژگیهایکوچکتری است که میتواند نیازشمارابرآورده کند.

border-top-left-radius:15px; / بالاچپ/

border-top-right-radius:10px ;بالا راست/

border-bottom-left-radius:8px ;/پایین چپ/

border-bottom-right-radius:20 px; /پایین راست/

نکته فابل توجه اینکه هریک از این ویژگی ها میتوانیم تک تک یه کار ببریم

سایه متنی برای نوشته ها

ساخت سایه برای نوشته متن و لینک وText-shadow

پیشنهاد میکنم از این ویژگی برای نوشته های ثابت استفاده نکنید چون چشم خواننده سایت را اذیت میکند از رنگ های ملایم هم استفاده کنید مثلا نارنجی با سایه زرد !

فرض کنید در صفحه html چنین داریم :

<div id="use-text-shadow">

salam man text-shadow hastam <br>

RezaOnline.net

</div>

و استایل را به صورت زیر داریم :

#use-text-shadow{

text-shadow:1px 5px 7px #006600;

}

ویژگی text-shadow سه مقدار عددی و یک کد رنگ می گیرد.

که به ترتیب به شکل زیراست text-shadow

1px فاصله متن اصلی از چپ (یک پیکسل به راست )

5px فاصله از متن از بالا (5 پیکسل به پایین )

7pxمیزانتارکردنسایهساختهشده

#006600 کد رنگ سایه ایجاد شده .

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

مثلا استایل زیر :

#use-text-shadow{

font-family:tahoma;

text-shadow: 0 0 5px #006600;

}

Box-shadow هم به نوعی مشابه text-shadow است با این تفاوت که سایه را برای اجزای دیگری مثل li ، span، table div و... ایجاد میکند .

فرض کنید در صفحه html چنین داریم :

<div class="use-box-shadow">

salam <br>

man dakhele box shadow hastam

</div>

و استایل را به صورت زیر داریم :

.use-box-shadow{

width:250px;

height:150px;

border-radius: 12px;

background: #EBEBEB;

box-shadow: 2px 5px 8px 6px #82A701;

}

4 box-shadowویژگی میگرد و یک کد رنگ

2px فاصله از چپ

5px فاصله ار بالا

8px میزان تار شدن سایه

6px میزان وسعت سایه

#82A701 کد رنگ سایه

بزرگنمایی عکس

فرض کنید در Html چنین داریم

براحتی با استفاده از ویژگی زیر میتوانیم عکس را بزرگتر کنیم .

#resize img{

-webkit-transform: scale(1.5);

-moz-transform: scale(1.5);

-o-transform: scale(1.5);

transform: scale(1.5);

}

با ما همراه باشید ...

در آموزش بعدی به معرفی سایر ویژگی های Css3 خواهیم پرداخت . گرچه مبحث Css3 بسیار گسترده است و این زبان نشانه گذاری برای وب خصوصیات و ویژگی های فوق العاده و بسیار زیادی دارد اما همان طور که گفته شد ما تنها به قابلیت هایی اشاره نموده ایم که توسط مرورگرها پشتیبانی می شوند.

nazanin-k

راه آسان‌تری برای ارتباط با کاربران‌مان پیدا کرده‌ایم :) کانال تلگرام مرکز دروپال ایران

طراحی سایت

آموزش طراحی سایت

با عضويت در خبرنامه از جديدترين محصولات و تخفيف هاي ما با خبر شويد

فرم جستجو

آموزش html5 و css3 از صفر تا 100-بخش چهارم

آشنایی با تگ Audio – Video

راه های ارتباط با ما