استفاده از کد های CSS در فایل HTML: همانطور که می دانید ساختار اصلی یک سایت و در واقع front آن را می توان با زبان برنامه نویسی html طراحی نمود. این زبان یکی از پرکاربردترین زبان های برنامه نویسی سمت مشتری می باشد. اما این را نیز می دانیم که برخی رویدادها در سایت و پویا سازی و همچنین زیبایی و استایل دهی صفحات خود به زبان های css و javascript نیز نیاز داریم.
برای استفاده از این زبان ها در
طراحی سایت در یک فایلhtml روش های مختلفی وجود دارد که در این قسمت به معرفی و اموزش هر کدام از آن ها می پردازیم و به شما بهترین روش را معرفی خواهیم نمود.
استفاده از کد های CSS در فایل HTML
شیوه های مختلف استفاده از کد های CSS در فایل HTML
CSS یا Cascade Style Sheets یک زبان برنامه نویسی پر کاربرد می باشد که مکملی بر زبان HTML است و سعی در تکمیل آن دارد CSS زبانی می باشد که توسط آن قادر خواهید بود استایل طراحی صفحات وب را یکبار تعریف و به صفحات مورد نیازتان اعمال کنید. در واقع زیبایی سازی صفحات وب بر عهده این زبان بوده و تنها با تعریف کد های HTML ممکن نمی باشد.
روش اول) استفاده از CSS در درون تگ ها (Inline)
در این روش کد های Css و در واقع کد هایی برای تعریف استایل تگ های html در داخل همان صفحات html و داخل همان تگ مورد نظر برای استایل دهی نوشته می شود و به این ترتیب تغییرات لازمه بر روی کد های html شما اعمال می شود. شما به راحتی با قرار دادن attribute استایل در داخل تگ های html صفحات خود می توانید از صفت های Css استفاه کنید و آن ها را با علامت ; از یکدیگر تفکیک نمایید.
استفاده از کد های css در فایل html
شیوه های مختلف استفاده از کد های CSS در فایل HTML
مثال:
فرض کنید می خواهید به متنی که در داخل پاراگرافی در صفحه سایت شما قرار دارد استایل رنگ و اندازه فونت بدهید:
<DOCTYPE html!>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>avinaweb.com</p>
</body>
</html>
به این ترتیب می توانید ویژگی استایل را به تگ P خود اضافه نمایید:
<DOCTYPE html!>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p style="color:red; font-size:12px;">avinaweb.com</p>
</body>
</html>
به این ترتیب رنگ فونت شما به رنگ قرمز و سایز آن نیز برابر با ۱۲px خواهد شد. اما عیبی که این روش نسبت به روش های دیگر دارد این است که میزان کد ها افزایش پیدا کرده و با استفاده مکرر آن حجم صفحه بالا رفته و بسیار زمان بر نیز است. همین طور هنگام ویرایش کردن آن نیز با مشکل مواجه می شویم. بنابراین بهتر است برای مدیریت زمان برای طراحی سایت روش های دیگر را امتحان نماییم.
روش دوم) تنظیمات CSS درون تگ Style در بخش header فایل html
در این روش از تگ style در داخل تگ head صفحه html خود استفاده می کنیم. و سلکتورهای CSS را در تگ <style> تعریف می نماییم. در این روش باید برای هر تگ html که می خواهیم استایل مورد نظر را بگیرد ویژگی کلاس و یا id منحصر به فرد تعریف نماییم.
مثال: مثال بالا را در این روش ببینیم:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
}p1.
;color:red
;font-size:12px
}
</style>
</head>
<body>
<p class="p1">avinaweb.com</p>
</body>
</html>
همان طور که می بینید سلکتور p1 رو در تگ <style> تعریف نمودیم و با استفاده از ویژگی class گفتیم که تنظیمات p1 روی پاراگرافی که کلاس p1 را دارد اعمال بشود.
حال فرض کنید می خواهیم تنظیمات استایل یک کلاس دیگر هم بر روی این تگ پاراگراف اعمال شود. در قسمتی که در تگ html برای تگ p کلاس تعریف می کنیم می توانیم به صورت ترکیبی هر دو را وارد نماییم:
<DOCTYPE html!>
<html>
<head>
<title>Page Title</title>
<style>
}p1.
;color:red
;font-size:12px
{
}p2.
;background-color:yellow
}
</style>
</head>
<body>
<p class="p1 p2">avinaweb.com</p>
</body>
</html>
روش سوم) نوشتن سلکتورهای CSS در فایل جداگانه stylesheet و فراخوانی آن به صفحه HTML
این روش مشابه روش قبلی می باشد با این تفاوت که به جای نوشتن سلکتورهای CSS در داخل تگ style تمام آن ها را در یک فایل با پسوند .css مینویسیم و این فایل رو با تگی که در این قسمت برای شما می آوریم به صفحه html فراخوانی می کنیم .
برای صدا زدن یک فایل CSS جهت استفاده از سلکتورهای اون در یک صفحه html باید تگ زیر را در قسممت header صفحهhtml در قسمت تگ <head> قرار دهیم:
<link rel=”stylesheet” type=”text/css” href=”cssfile.css”>
مثال: فرض کنید مثال بالا را با این روش انجام دهیم. باید تمامی ویژگی های css که در داخل تگ استایل گذاشته بودیم به صورت جدا گانه در یک فایل stylesheetدر این مثال نام فایل cssfile.css می باشد. که برای نوشتن کد های css است می نویسیم و آن را با کد بالا فراخوانی می کنیم.
کد آن در فایلhtml به صورت زیر می شود:
<DOCTYPE html!>
<html>
<head>
<title>Page Title</title>
<"link rel="stylesheet" type="text/css" href="cssfile.css>
</head>
<body>
<p class="p1">avinaweb.com</p>
</body>
</html>
کد های css در صفحه stylesheet :
}p1.
;color:red
;font-size:12px
}
نکته: می توانیم در قسمت href به جای نام فایل css به صورت کامل لینک را قرار دهیم:
<link rel=”stylesheet” type=”text/css” href=”http://www.avinaweb.com/css/cssfile.css”>
در ادامه می خواهیم تبدیل سه بعدی در Css3 را با هم بررسی کنیم:
با تبدیل سه بعدی یا (3D transforms) در Css3 می توانید کارهای جالب و زیبایی را روی عناصر سایتتان انجام دهید که یک نمونه را به عنوان مثال برای شما قرار می دهیم:
برای این کار با دو متد زیر سروکار داریم :
;()rotateX
;()rotateY
دو مرورگر Firefox و internet explorer بدون نیاز به پیشوند تبدیل سه بعدی را پشتیبانی می کنند اما برای مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارید و مرورگر opera فقط تبدیل دوبعدی را پشتیبانی می کند.
استفاده از متد ()rotateX در css3 :
شما با استفاده از متد ()rotateX و دادن یک درجه به آن ،می توانید عنصر موردنظرتان را حول محور X به چرخش درآورید.
}element.
;(transform: rotateX (120deg
/*webkit-transform: rotateX(120deg); /* Safari and Chrome
{
استفاده از متد ()rotateY در css3 :
}element.
;(transform: rotateY (120deg
/*webkit-transform: rotateY(120deg); /* Safari and Chrome
{
در این قسمت یک مثال برای شما قرار می دهیم که rotateX ، rotateY و rotateZ در آن قرار دارد:
rotateXrotateYrotateZ
امیدواریم مطلب امروز، استفاده از کد های CSS در فایل HTML و تبدیل سه بعدی برای شما عزیزان دانشپذیر زبان های
سئو و
طراحی سایت مفید بوده باشد. در قسمت بعد استفاده از کد های javascript در فایل HTML را آموزش خواهیم داد.
ویرایش بوسیله کاربر 1396/12/03 12:33:33 ق.ظ
| دلیل ویرایش: مشخص نشده است
