استفاده از کد های CSS در فایل HTML: همانطور که می دانید ساختار اصلی یک سایت و در واقع front  آن را می توان با زبان برنامه نویسی html  طراحی نمود. این زبان یکی از پرکاربردترین زبان های برنامه نویسی سمت مشتری می باشد. اما این را نیز می دانیم که برخی رویدادها در سایت و پویا سازی و همچنین زیبایی و استایل دهی صفحات خود به زبان های css  و javascript نیز نیاز داریم.

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

شیوه های مختلف استفاده از کد های CSS در فایل  HTML

CSS  یا Cascade Style Sheets یک زبان برنامه نویسی پر کاربرد می باشد که مکملی بر زبان HTML است و سعی در تکمیل آن دارد CSS زبانی می باشد که توسط آن قادر خواهید بود استایل طراحی صفحات وب را یکبار تعریف و به صفحات مورد نیازتان اعمال کنید. در واقع زیبایی سازی صفحات وب بر عهده این زبان بوده و تنها با تعریف کد های HTML ممکن نمی باشد.

روش اول) استفاده از CSS در درون تگ ها (Inline)

در این روش کد های Css  و در واقع کد هایی برای تعریف استایل تگ های html  در داخل همان صفحات html و داخل همان تگ مورد نظر برای استایل دهی نوشته می شود و به این ترتیب تغییرات لازمه بر روی کد های html شما اعمال می شود. شما به راحتی با قرار دادن attribute استایل در داخل تگ های html صفحات خود می توانید از صفت های Css  استفاه کنید و آن ها را با علامت ;  از یکدیگر تفکیک نمایید.

مثال:

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

<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 در آن قرار دارد:

rotateX
rotateY
rotateZ

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

موضوعات : بازاریابی محتوا

مقالات مرتبط

۲ دیدگاه. دیدگاه تازه ای بنویسید

  • سلام ببخشید آیا شما جزوه ایی از مطالبتون دارید که معرفی کنید تا تهیه کنیم؟

    پاسخ
  • سلام
    من میخوام چند تا آیکن شبکه اجتماعی با css در قسمت فوتر سایتم قرار بدم. کد html رو خودم نوشتم، هیچ ایرادی نداره؛ اما باعث میشه درخواست های سایت زیاد بشه، توی سایت CSS Sprite Generator آیکن ها رو کنار هم قرار دادم، کد css و تصویر رو گرفتم، تصویر رو آپلود کردم، کدهای css رو توی استایل قرار میدم، ولی نمیشه؛ php رو نمی دونم باید قرار بدم یا نه؟ میشه شما راهنمایی کنید که چه مراحلی رو باید انجام بدم تا بتونم این کار رو انجام بدم؟
    این سایت نمونه:
    https:// mihanwp.com
    ممنون میشم پاسخ کامل و راهنمایی که بتونم این کار رو درست و دقیق انجام بدم، بفرمایین.
    تشکر از لطف شما

    پاسخ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

فهرست