آموزش 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 خود وصل کنید .


<link rel=”Stylesheet” type=”text/css” href=”mystyle.css“/>


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

در 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  چنین داریم

 

<div id="resize">

<img src="img.png" width="90" height="57" alt="" />

</div>



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

#resize img{

-webkit-transform: scale(1.5);

-moz-transform: scale(1.5);

-o-transform: scale(1.5);

transform: scale(1.5);

}



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

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

 

مرکز دروپال ايران

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

آدرس : دفتر شهریار : شهرک وائین ، بعثت 5 نبش سپیدار 10 پلاک 26

تلفن : 09370977406 - 09384363798

ایمیل : drupalcenter.ir@gmail.com

ارتباط با مدیر سایت از طریق تلگرام

logo-samandehi

مرکز دروپال ایران بزرگترین وب سایت  آموزش دروپال در کشور ، در مهر ماه سال 1388 به طور رسمی فعالیت خود را در زمینه وب و دنیای دیجیتال آغاز کرده است. مجموعه مرکز دروپال ایران شامل « آموزش های تصویری » ، « معرفی جدیدترین ماژول ها » ، « ترجمه مقالات دروپالی روز دنیا » ، « طراحی قالب دروپال» و « خبرهای دنیای دروپال» می باشد.این مجموعه به همراه گروه فنی خود و به  پشتوانه کاربران فعال و متعهد ، با  در نظر داشتن چشم اندازی برای آینده نزدیک ، قصد دارد تا به معرفی و آموزش  هرچه بیشتر و بهتر هسته قدرتمند و دوست داشتنی دروپال ،  به روش های مختلف در زمینه های گوناگون بپردازد تا در کنار کاربران خود به موفقیت های هرروز خود بیفزاید. در همین راستا قصد داریم تا بصورت تخصصی و حرفه ای مباحث مختلف دروپال را با کوچک ترین جزئیات و تکنیک ها به دروپال کاران و کسانی که قصد دارند طراحی وب سایت ،پورتال و سیستم های هوشمند را آغاز کنند ، آموزش دهیم.گستردگی مطالب ، تنوع در آموزش ها ، نگاه تخصصی و همگام بودن با کاربران در آموزش عوامل متمایز کردن مرکز دروپال ایران با سایر آموزش دهندگان می باشد.
دروپال برای انجام طراحی های شگفت انگیز !  Drupal Builds something amazing