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

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

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

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

آموزش Html 5

آموزشHtml 5

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

من معتقدم HTML5 دستاورد بزرگی خواهد بود (بسیاری از مردم هم چنین اعتقادی دارند.). این برنامه ممکن است روش لباس پوشیدن و غذا خوردن ما را تغییر ندهد، اما مطمئنا روش توسعه ی برنامه های وب و طراحی صفحات وب را در 10 سال آینده تغییر خواهد داد. به هرحال این صفحه آموزش HTML نمی باشد. HTML5 چیز کاملا جدیدی نمی باشد. بسیاری از ویژگی های HTML5 از HTML4 یا HTML1.0 گرفته شده اند. با زمان و انرژی محدودم می توانم فقط آنچه را در HTML5 جدید است و تمرینات قدیمی که دیگر مورد استفاده نیستند را پوشش دهم.

این یک سایت HTML5 می باشد. هنگامی که در حال کشف و یادگیری HTML5 هستم، امیدوارم بتوانم آنچه را که یاد گرفته ام با شما به اشتراک بگذارم.

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

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

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

برتراند راسل (1872 –1970)

با توجه به این نوشته HTML5 یک نسخه ی در حال کار می باشد. به عبارت دیگر HTML5 هنوز یک کار در حال پیشروی می باشد. ویژگی های آن در W3C منتشر شده و روز به روز تغییر می کند.

چرا HTML5 مهم است؟

احتمالا تاکنون در مورد HTML5 شنیده اید، فکر می کنم محبوب ترین برنامه ای که فیلم را بدون Adobe Flash اجرا می کند، باید از آقای استیو جابز برای تبدیل آن به یک فن آوری معروف تشکر کرد.

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

چه وقت؟

WC3 در فوریه ی 2011 اعلام کرد که جولای 2014 تاریخی است که HTML5 پیشنهاد رسمی برای استاندارد وب می شود.

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

زمان را فراموش کنید:

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

اولین گروه کمپانی های مرورگر معروفی مانند Mozilla، مایکروسافت، اپل، گوگل و اپرا می باشند. گروه دوم نیز طراحان و توسعه دهندگان وب در این زمینه می باشند. ضعفHTML1.1 و HTML 2 خیلی ساده است، کمپانی های مرورگر فکر می کردند که ایده ی احمقانه است، بنابراین درهای خود را به روی آن بستند.

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

از آنجایی که مایکروسافت اعلام کرده که هیچ طرحی برای آزاد کردن IE9 برای یوزرهای ویندوز XP ندارد، اگر تمایل دارید از IE9 استفاده کنید، باید از ویندوز vista sp2 یا 7 استفاده کنید.

هیچ دلیلی وجود ندارد که طراحان تحت تاثیر HTML5 قرار نگیرند، زیرا که زندگی را از همیشه برای ما آسانتر کرده است.

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

آموزش Html5

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

آموزش DocType

اعلام نوع داکیومنت در HTML5 هم ساده و هم جالب می باشد. این کار به سادگی زیر میباشد:

<!DOCTYPE html>

‎بر خلاف doctype در HTML1 و HTML4 که با آن آشنا هستیم:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">‎

‎<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ‎‎"HTTP>

/www.w3.org/TR/html4/loose.dtd">‎

‎<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" ‎‎"HTTP>

/www.w3.org/TR/html4/frameset.dtd">‎

‎<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ‎‎"HTTP>

/www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">‎

‎<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ‎‎"HTTP>

/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">‎

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

<!DOCTYPE html>‎

<html>‎

<head> ‎

<title>HTML5 is rocks!</title> ‎

</head>‎

<body>

‎ <h1>HTML5 Rocks!</h1> ‎

</body>‎

</html>‎

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

آموزش صدا در HTML 5

اجازه بدهید در شروع یک سرگرمی داشته باشیم. قرار است در مورد مرورگری صحبت کنیم که فایل صدا را در حالت طبیعی خود پشتیبانی می کند، درست همانطور که برچسب<img> از 1994 پشتیبانی می شود. HTML 5 قرار است به صدای پلاگین(plug-in) مانند مدیاپلیر، سیلورلایت، اپل کویک تایم، و Adobe Flash بد نام خاتمه دهد.

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

در بالا یک گالری از پخش کننده های صدا را، توسط مرورگرهای مهم می بینید. همانطور که می بینید اندازه کنترل پخش کننده ها با یکدیگر متفاوت هستند. پخش کننده ی IE9 در مقایسه با پخش کننده ی safari بسیار بزرگ می باشد. این مسئله برای طراح وب می تواند یک مشکل بزرگ باشد.

اگر برای ویندوز از safari استفاده می کنید، اما بدون Quick Time، برنامه ی Safari شما قرار نیست از برچسب مدیا (هم در حالت صوتی و هم در حالت تصویری) پشتیبانی کند. تصور می کنم که برنامه ی Safari برای اجرای فایل های مدیا، به کدک Quick Time اتکا دارد.

چگونه؟

برای اینکه صفحه ی وب شما موسیقی اجرا کند، کد html شما می تواند به سادگی زیر باشد:

متاسفانه محبوب ترین فرمت صدا MPEG3 (mp3) یک استاندارد باز نیست، بلکه یک اختلال عمومی است، و این بدین معنا که مرورگرها برای رمزگشایی آن باید مقداری پول پرداخت کنند و این ممکن است از لحاظ اقتصادی برای شرکت ها و سازمان های کوچکتر عملی نباشد. همانطور که در جدول زیر مشاهده می کنند تنها سران بزرگ ثروت کافی برای رمزگشایی MP3 را دارند. Opera و firefox تنها فرمت vorbis (ogg) را پشتیبانی می کنند که یک استاندارد باز می باشد.

از طرف دیگر Vorbis توسط Safari و IE9 پشتیبانی نمی شود، در حالیکه همیشه داشتن ogg و MP3 در کنار هم خوب است.

امتحان کنید که مرورگر شما تا چه حد صدا را پشتیبانی می کند.

آنچه که می توانید انجام دهید در زیر ارائه شده است:‎

‎ <source src="vincent.mp3" type="audio/mpeg" />

‎ <source src="vincent.ogg" type="audio/ogg" />

‎</audio>‎

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

ارائه کردن یا نکردن نوع MIME (type="audio/mpeg")برای مرورگر انتخابی می باشد. مدرنترین مرورگرها به اندازه ی کافی هوشمند هستند تا نوع محتوا را از طریق خود آن مشخص کنند. به هرحال کمک کننده بودن برای مرور گر همیشه خوب است، چرا که باعث می شود مرورگر شما سریعتر و بهتر کار کند.

ویژگی های <audio>

ویژگی Boolean ویژگی می باشد که یا در برچسب نمایش داده می شود یا نه. ویژگی Boolean فقط نام خود را دارد و دارای مقدار نیست. شما می توانید آن را از این طریق نیز به کار ببرید، هر مقداری که شما به ویژگی Boolean اختصاص دادید، فقط یک معنا دارد –TRUE.

این ترکیب کاملا غیرضروری است

و این آن چیزی است که شما لازم دارید.

HTML 5 در واقع تکاملی از وب می باشد، نه انقلابی که فقط گذشته را نابود می کند. به هرحال اجازه دهید کمی به جلوتر برویم.

برای پشتیبانی مرورگری که اصلا نمی داند <audio> چیست، از قبیل IE8 وپایین تر، با استفاده از برچسب <object> باید اجازه دهیم در همان روزهای قدیمی خود باقی بمانند.

‎ <source src="vincent.mp3" type="audio/mpeg" />

‎ <source src="vincent.ogg" type="audio/ogg" />

‎ <object type="application/x-shockwave-flash" data="media/OriginalMusicPlayer.swf" width="225" ‎height="86">

‎ <param name="movie" value="media/OriginalMusicPlayer.swf" />

‎ <param name="FlashVars" value="mediaPath=vincent.mp3" />

‎ </object>

‎</audio>

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

‎

من در مثال بالا از یک اجرا کننده ی flash mp3 از PremiumBeat.com استفاده می کنم.

اگر مرورگر شما از HTML5 پشتیبانی نمی کند اما شما فلش پلاگین را دارید، احتمالا چیزی را از دست نداده اید.

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

<source src="vincent.mp3" type="audio/mpeg" />‎

‎ <param name="movie" value="media/OriginalMusicPlayer.swf" />

‎ <param name="FlashVars" value="mediaPath=vincent.mp3" />

</object>

<a href="vincent.mp3">Download this lovely song and wish you all the best!</a>

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

‎<div>

‎<button onclick="document.getElementById('player').play()">Play</button>

‎<button onclick="document.getElementById('player').pause()">Pause</button>

‎<button onclick="document.getElementById('player').volume += 0.1">Vol+ </button>

‎<button onclick="document.getElementById('player').volume -= 0.1">Vol- </button>

</div>‎

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

آموزش Video در HTML 5

جریان ویدئو در اینترنت چیز تازه ای نیست، تلاش برای انجام چنین کاری به نیمه ی قرن بیستم برمی گردد. به خاطر پایین بودن پهنای باند شبکه ها و قدرت پایین CPU، هیچ موفقیتی حاصل نشد، تا اینکه Youtube در سال 2005 آغاز به کار کرد.

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

چگونه؟

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

در واقع زندگی آنطوری نیست که ما فکر می کردیم باید باشد، خط ساده ی کد بالا تنها در google chrome و apple safari کار می کند و حتی برای اجرای فیلم درapple safari باید مطمئن شوید که quick time در کامپیوتر شما نصب شده است.

مشابه گرفتاری صوتی، یک فرمت جهانی برای ویدئو نداریم که همه ی مرورگرهای وب از آن پشتیبانی کنند، حداقل در زمان نگارش آن (13 دسامبر 2010).

در اینجا دوباره بازی پول مطرح می شود. H.264 یک مشکل همگانی است، فایرفاکس و اپرا خرید امتیاز آزاد یک کدک را پذیرفتند که Theora و WebM می باشد (کدکVP8).

گوگل در ژانویه ی 2011 اعلام کرد که در ورژن آینده ی گوگل کروم از H.264 پشتیبانی نمی کند. به طور خلاصه کد تک خطی ساده، همانطور که در بالا توضیح دادم، عملی نمی باشد. شما حداقل باید دو منبع برای یک ویدئو تامین کنید.

‎</video>‎

نکات

برای اینکه فایل ویدئوی خود را در H.264 رمزگشایی کنید، ممکن است تمایل داشته باشید HandBrake را امتحان کنید، که یک GPL مناسب ویک ابزار منبع باز می باشد. اگرمی خواهید تنها یک ویدئو را رمزگشایی کنید و تمایلی به نصب برنامه ای دیگر روی OS تقریبا بسته ی خود ندارید، می توانید فیلم خود را روی Youtube آپلود کنید. سپس Youtube برنامه ی شما را به فرمت H.264 آپلود کرده و شما می توانید آن را از Youtube دانلود کنید.

همانطور که برای فرمت های WEBM و Theora ممکن است Firefogg را (یک فایرفاکس پلاگین است که حداقل دانلود را لازم دارد.) امتحان کنید.

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

ویژگی های ویدئو

مرورگرهایی که در مورد HTML5 دارای معلومات کمتری هستند چطور؟

اگر فکر می کنید که اجرای ویدئو برای سه دفعه سخت است، به مدت کمی طولانی تر نفس خود را نگه دارید، زیرا قرار است برای تامین یوزرهای بیشتر که از مرورگرهای قدیمی تری مانند internet explorer 8 و یا پایین تراستفاده می کنند، بیشتر اذیت شوید.

مایکروسافت internet explorer 9 Beta را در نوامبر 2010 آزاد کرد که HTML5 را نیز پشتیبانی می کند. اما برچسب <video> به عنوان نگارش هنوز پشتیبانی می شود. به هرحال شما مجبورید برای قرار دادن یک فلش پلیر در <object> به جلوتر بروید زیرا بیشتر یوزرها فلش پلاگین را نصب کرده اند. من معتقدم که مایکروسافت در نهایت <video> را پشتیبانی می کند، چرا که همیشه برای اکثر یوزرها رسیدن به آخرین ورژن مرورگر زمان بر است.

‎ <param name="movie" value="media/flowplayer-3.2.5.swf" />

‎ <param name="allowfullscreen" value="false" />

‎ <param name="flashvars"

value='config={"clip": {"url": "html5iscool.mp4", "autoPlay":false, "autoBuffering":true}}' />

</object>

</video>‎

آموزش ایجاد ویدیو در صفحات وب با HTML5

در گذشته و شماره های قدیم HTML استفاده از ویدیو کار بسیار دشواری بود ولی در HTML5 افزودن یک ویدیو به لطف بروز رسانی از طرف مایکروسافت با سهولت بسیار قابل دسترس است .

به گونه ای که شما می توانید حتی تغییرات مورد دلخواه بر روی ویدیوی مورد نظر را اعمال نمایید .

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

آموزش نحوه اعمال ویدیو در صفحات وب

برای این کار می توانید از تگ ویدیو < Video > استفاده نمایید و آدرس ویدیوی مورد نظر را در تگ به صورت زیر کپی کنید :

</video>

توضیح کد:

در تگ ویدیو خصیصه Controls به شما امکان استفاده از ابزارهای کنترل ویدیو در مرورگر را می دهد ، به گونه ای که بتوانید همانند یک Player در مرورگر خود با ویدیو برخورد نمایید و از امکان هدایت زمانی یا seeking ویدیو را دشته باشید تا بتوانید زمان مورد نظر خود را بیابید و از دیگر امکانات این ویدیو پلیر افزایش و کاهش میزان صدا است و در آخر امکان نمایش به صورت تمام صفحه و یا اندازه ی اصلی ویدیو را دارا می باشید .

نکته :در صورت عدم تنظیم ابعاد ویدیو های بارگذاری شده در صفحه HTML5 هر ویدیو با ابعاد پیش فرض خود فایل در صفحه پخش خواهد شد .

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

شما کافیست از property های height و width را استفاده نمایید .

به کد زیر دقت نمایید :

</video>

نکته :باید همواره به یاد داشته باشید که فرمت های ویدیویی قابل پشتیبانی در HTML5 سه فرمت Mp4 ، Ogg و Webm می باشد ، در غیر این صورت باید با استفاده از یک Converter به یکی از فرمت یاد شده تغییر داده شود .

آموزش استفاده از پوستر برای پیش نمایش ویدیو در صفحات وب در HTML5:

برای استفاده از یک پوستر برای پیش نمایش در فایل ویدیویی کافیست شما از property به نام poster در تگ < video > همانند زیر استفاده نمایید :

</video>

در زمانی که ویدیوی شما هنوز اجرا نشده است عکس انتخابی شما به عنوان یک پوستر به نمایش گذاشته می شود .

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

آموزشHtml 5 آموزش طراحی سایت آموزش html دوره آموزش طراحی سایت آموزش طراحی وب

افشین سه‌شنبه 23 مهر 1398 ساعت 13:36

0 نظر

آموزش CSS

سلام در این دوره سعی می کنم CSS را آموزش دهم با بخش اول این آموزش همراه باشید.

سی اس اس CSS چیست

در این جا، شما چگونگی استفاده از CSS جهت کنترل style و layout چندین صفحه وب بطور همزمان را یاد خواهید گرفت. برای یادگیری CSS، شما باید درکی پایه ای از مفاهیم HTML و XHTML داشته باشید

body {

background-color: #d0e4fe;

}

h1 {

color: orange;

text-align: center;

}

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

سی اس اس CSS مخفف Cascading Style Sheets است .
style ها چگونگی نمایش عناصر HTML را تعریف می کنند .
Style ها برای حل یک مشکل به HTML 4.0 اضافه شدند .
External Style Sheets می تواند در در انجام کار صرفه جویی کند .
External Style Sheets در فایل های CSS ذخیره می شوند .

نمایش CSS

سند HTML را می توان با style های مختلف نمایش داد. .
Style ها مشکل بزرگی را حل کردند .
span style="line-height: 18pt;" mce_style="line-height: 18pt;" dir="ltr"> HTML هرگز به قصد در برگرفتن tag برای فرمت کردن یک سند ایجاد نشد.
HTML هرگز به قصد تعریف محتوای یک سند ایجاد نشد.
وقتی tag ها و attribute های رنگ به HTML 3.2 اضافه شد، کابوسی برای برنامه نویسان بود. develop کردن وب سایت های بزرگ، که فونت ها و اطلاعات رنگ در هر صفحه مجزا بودند، فرآیندی طولانی و پرهزینه ای شد.

برای حل این مشکل، کنسرسیوم World Wide Web ، تصمیم گرفت CSS را ایجاد کند.
در HTML 4.0 ، می توان کل قالب بندی را از سند HTML حذف کرد، و در فایل CSS جداگانه ای ذخیره کرد.
امروزه، همه مرورگرها CSS را ساپورت می کنند.
CSS ، در انجام مقدار زیادی کار صرفه جویی می کند
CSS ، تعریف می کند عناصر HTML چگونه نمایش داده می شوند.
معمولاً Style ها در فایلهای . css ذخیره می شوند. style sheet های خارجی شما راتنها با ویرایش یک فایل قادر به تغییر ظاهر و layout همه صفحات موجود در یک وبسایت می کند.

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

مثال

فایل HTML زیر، لینکی به یک style sheet خارجی با تگ است:

< head >

< title >< /title >

< link href="ex1.css" mce_href="/Administrator/ex1.css" type="text/css" rel="stylesheet" / >

< /head>

این، فایل style sheet است:

< style>

body {

background-color: yellow;

}

h1 {

font-size: 36pt;

}

< /style>

آموزش سینتکس CSS

دستور نحوی CSS

یک rule set (یک حکم یا دستور است که نحوه ی پردازش المان ها را روی یک صفحه ی HTML برای مرورگر مورد نظر تعریف می کند) همان طور که در تصویر زیر مشاهده می کنید متشکل است از یک selector (انتخاب گر) و declaration block (بلوک یا ساختمان اعلان) است .

سلکتور Selector به آن عنصر HTML ی اشاره دارد که طراح وب مایل است سبک دهی کند .

یک declaration block دربردارنده ی یک یا چند تعریف (declaration) است که توسط نقطه ویرگول (semicolon) از هم جدا می شوند .

هر تعریف نیز خود شامل یک اسم خصوصیت (property name) و همچنین یک مقدار (value) است که توسط یک دو نقطه (colon) از هم جدا سازی می شوند .

مثال:

همیشه یک تعریف CSS به نقطه ویرگول ختم می شود، گروه های تعریفی (declaration group) نیز داخل کاراکترهای {} محصور می شوند

p {color:red;text-align:center;}

به منظور افزایش قابلیت خوانایی CSS، شما می توانید هر بخش یک تعریف را روی خط مجزا قرار دهید . مثال :

p {

color: red;

text-align: center;

}

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

توضیحات یا comment ها در CSS

کامنت comment به منظور ارائه ی توضیح درباره ی کد مورد نظر استفاده می شود ، در صورت لزوم همچنین به شما کمک می کند متن برنامه (source code) را در آینده اصلاح کنید . توضیحات (comments) کاملا توسط مرورگرها نادیده گرفته می شوند .

یک توضیح CSS با علامت /* آغاز گردیده و با کاراکتر */ پایان می یابد . توضیحات نیز ممکن است چندین خط را به خود تخصیص دهد.

مثال:

p {

color: red;

/* This is a single-line comment */

text-align: center;

}

/* This is

a multi-line

comment */

آموزش Selectorهای id و class

انتخاب گرهای CSS

انتخاب گرهای CSS به شما این امکان را می دهد که المان های html را انتخاب کرده و متناسب با نیاز خود آن ها را تنظیم و دستکاری (manipulate) کنید .

با استفاده از انتخاب گرهای CSS می توان المان های دلخواه و مورد نظر HTML را بر اساس شناسه (ID)، کلاس، نوع (type)، خصیصه (attribute) پیدا ( و یا انتخاب و گزینش) کرد .

انتخاب گر المان (the element selector)

انتخاب گر عنصر در واقع المان ها را بر اساس اسم المان مربوطه انتخاب می کند . می توانید کلیه ی المان های p را روی صفحه درست بدین ترتیب انتخاب کنید : (کلیه ی عناصر p وسط چین (align- center) شده و متن آن با رنگ قرمز نشان داده می شود) .

نمونه یک :

<style>

p {

text-align: center;

color: red;

}

</style>

انتخاب گر شناسه (id selector)

سلکتور id selector از خصیصه ی شناسه (id attribute) HTML برای انتخاب یک المان معین بهره می گیرد .

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

جهت انتخاب یک المان با شناسه ی ویژه (مشخص)، باید یک کاراکتر hash (#( را تایپ کرده و بدنبال این کاراکتر شناسه ی المان را قرار دهید .

قانون سبک دهی (style rule) زیر با شناسه ی "para1" به المان HTML اضافه می شوند :

نمونه دو :

#para1 {

text-align: center;

color: green;

}

انتخاب گر کلاس (class selector)

انتخاب گر کلاس المان ها را با یک خصیصه ی کلاس / class attribute ویژه آغاز می کند .

به منظور انتخاب المان ها با کلاسی معین، یک کاراکتر نقطه و به دنبال آن اسم کلاس را تایپ کنید :

در مثال زیر، کلیه ی عناصر HTMLبا کلاس "center"، وسط چین (align- center) خواهند بود :

نمونه سه

.center {

text-align: center;

color: red;

}

همچنین می توان مشخص کرد که تنها عناصر خاصی از HTML دست خوش تغییر یک کلاس معین قرار گیرند (به عبارتی دیگر می توانید تعیین کنید که فقط المان های مدنظر شما توسط یک کلاس کنترل شده و تحت تاثیر آن قرار گیرند) :

در مثالی که زیر ارائه شده، تمامی المان های p با کلاس "center" وسط چین (center -align) می شوند.

نمونه چهار

p.center {

text-align: center;

color: red;

}

ادغام گروه ها / گروه بندی انتخاب گرها (grouping selectors)

چنانچه المان هایی با تعاریف سبک (style definition) مشابه به مثال ذیل دارید، در آن صورت می توانید با گروه بندی کدها آنها را سامان دهی کرده و در عین حال اندازه ی کدهای ذکر شده را به حداقل برساند.

نمونه پنج

h1 {

text-align: center;

color: red;

}

h2 {

text-align: center;

color: red;

}

p {

text-align: center;

color: red;

}

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

نمونه ی زیر در حقیقت همان تکه کد فوق است که در آن سه گروه مزبور با هم در یک گروه ادغام شده اند و هر گروه با بهره گیری از ویرگول از گروه دیگر متمایز شده است :

نمونه شش

h1,h2,p{

text-align: center;

color: red;

}

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

آموزش Style Sheet ها

Style Sheet خارجی (external)

استایل Style Sheet خارجی، هنگامی که style به صفحات زیادی اعمال می شود، مناسب است. با یک Style Sheet خارجی، می توانید ظاهر کل یک سایت ر با تغییر دادن یک فایل عوض کنید. هر صفحه باید با استفاده از تگ link به style sheet لینک شود. تگ link، درون بخش head قرار می گیرد.

< head>

< link rel="stylesheet" type="text/css" href="mystyle.css" />

< /head>

استایل Style Sheet خارجی، را می توان در یک text editor نوشت. این فایل نباید حاوی هیچ تگ html باشد. style sheet شما باید با پسوند .css ذخیره شود. نمونه ای از یک style sheet در زیر نشان داده شده است.

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

فضاهای بین مقدار صفت و واحدها را خالی نگذارید!

استایل Style Sheet داخلی (internal)

استایل Style Sheet داخلی باید هنگامی مورد استفاده قرار گیرد که یک سند واحد، style منحصر به فردی دارد. Style های داخلی با استفاده از تگstyle در بخش head صفحه HTML تعریف می شود، مانند مثال زیر:

نمونه یک

hr {<br>

color: sienna;<br>

}</p>

margin-left: 20px;<br>

}</p>

background-image: url("images/back40.gif");<br>

}<br>

</style></p>

استایل Style های Inline

استایل inline، با ترکیب کردن contentبا presentation، بسیاری از مزایای style sheetها را از دست می دهد. از این متد باید به ندرت استفاده کرد.

برای استفاده از استایل های inline، باید از اتریبیوت استایل در تگ مربوط استفاده کرد. اتریبیوت استایل ممکن است هر نوع خصوصیت CSS را در بر گیرد. این مثال چگونگی تغییر دادن رنگ و حاشیه چپ یک پاراگراف را نشان می دهد:

نمونه دو

<p style="color:sienna;margin-left:20px">This is a paragraph</p>

استایل Style Sheetهای چندگانه

اگر بعضی از صفت ها برای یک selector در style sheet های مختلف تعیین شده باشد، valueها از style sheet معینی به ارث برده خواهند شد.

مثلاً، یک style sheet خارجی دارای صفت های زیر برای سلکتور h3 است:

‎{

color:red;

text-align:left;

font-size:8pt;

‎}

و یک style sheet داخلی دارای صفت های زیر برای سلکتور h3 است:

‎{

text-align:right;

font-size:20pt;

‎}

اگر صفحه ای با style sheet داخلی به یک style sheet خارجی لینک شود، صفت های h3 اینگونه خواهد بود:

color:red;

text-align:right;

font-size:20pt;

رنگ، از style sheet خارجی ارث می برد و text-alignment و اندازه فونت با style sheet داخلی جایگزین می شود.

استایل Style های چندگانه به یک استایل cascade می شوند .

استایل Style ها را می توان به طریق زیر معین کرد:

درون یک عنصر HTML
درون بخش head صفحه HTML
در یک فایل CSS خارجی

نکته:

حتی style sheet های خارجی چندگانه را نیز می توان درون یک سند HTML واحد reference کرد.

ترتیب cascade کردن:

هنگامی که بیش از یک style که برای عنصر HTML تعیین شده، وجود داشته باشد، از کدام style استفاده می شود؟
معمولاً می توان گفت که همه style ها، با قوانین زیر به یک style sheet مجازی cascade می شود، و قانون چهارم بالاترین اولویت را دارد:

پبش فرض مرورگر

استایل style sheet خارجی

استایل style sheet داخلی (در بخش head)

استایل inline (درون عنصر HTML)

بنابراین، یک استایل inline، بالاترین اولوین را دارد.

نکته:

اگر لینک به style sheet خارجی بعد از style sheet داخلی درheadHTML داخلی قرار داده شود، style sheet خارجی، style sheet داخلی را override می کند

با آموزش css بخش دوم همراه ما باشید

آموزش طراحی سایت دوره آموزش طراحی سایت آموزش html آموزش html 5 آموزش css آموزش طراحی وب

افشین سه‌شنبه 23 مهر 1398 ساعت 13:11

0 نظر

72
1
...
11
12
13
14
صفحه 15

پیوندها

دسته‌ها

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

جدیدترین یادداشت‌ها

بایگانی

جستجو

آموزشHtml 5

چرا HTML5 مهم است؟

آموزش Html5

ویژگی های <audio>

چگونه؟

نکات

ویژگی های ویدئو

آموزش نحوه اعمال ویدیو در صفحات وب

توضیح کد:

آموزش CSS

مثال