css در html

css در html

در قسمت قبل با رنگ ها در html آشنا شدیم. در این قسمت  css در html را آموزش خواهیم داد. css مخفف Cascading Style Sheets یا شیوه نامه های آبشاری است. در واقع ما در css یک الگو یا سبکی ایجاد می کنیم و از آن بارها در طراحی صفحه وب خودمان استفاده می بریم . حال این الگو می تواند یک الگو فونت یا الگو رنگ یا جدول و … و یا ترکیبی از آنها باشد. استفاده از css ها در طراحی صفحات وب علاوه بر زیبایی بخشیدن به صفحه وب زمان طراحی را نیز کوتاهتر می کند.

css ها در html به ۳ صورت تعریف می شوند :

 

  • خطی : با استفاده از ویژگی style در عناصر و تگ های html (به قسمت Html Style رجوع شود)
  • داخلی : با استفاده از تگ <style> داخل تگ <head>
  • خارجی : با استفاده از یک فایل css خارجی و معرفی لینک آن داخل تگ <head>

 

رایج ترین روش برای اضافه کردن css روش سوم یا خارجی است . ما در این قسمت روش داخلی و خارجی را بهتون توضیح می دهیم . روش اول هم در بخش های قبلی توضیح داده شده است.

اضافه کردن css بصورت داخلی (css داخلی) :

css داخلی برای تعریف سبک ها و الگوها برای یک صفحه اینترنتی است که در بخش <head> تعریف می شود .

نحوه تعریف css داخلی :

تگ های h1 , p الگوهای خود را از <style> می گیرند.

اضافه کردن css به صورت خارجی :

ابتدا css خارجی توسط شما ساخته می شود . (بنام style.css)

و در صفحه اینترنتی خود در تگ <head> لینک فایل استایل شیت را بصورت زیر قرار می دهیم.

h1 و p بصورت مستقیم الگو روی آن اعمال شده و آی دی #para1 را به h3 داده و کلاس center را به تگ h4 را داده ایم.

تفاوت id و class در css :

  • id : برای هر تگ و عنصر فقط یک id می توانِم تعریف کنیم و  هر صفحه هم فقط می تواند یک آی دی منحصر بفرد داشته باشد.
  • class : از یک  کلاس می توانیم در چندین تگ استفاده نماییم و یا اینکه می توانیم در یک تگ از چند کلاس css بهره ببریم.

 

 

 

 

این مطلب را با دوستان خود به اشتراک بگذارید :
آموزش HTML آموزش برنامه نویسی

درباره حسین رسولی

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

دیدگاه خود را بیان کنید

با عضویت در خبرنامه از تخفیفات ویژه سایت باخبر شوید

با عضویت در خبرنامه از تخفیفات ویژه سایت باخبر شوید

با موفقیت اشتراک شما ایجاد شد

از ما حمایت کنید