آموزش CSS

زبان CSS چیست؟

زبان استایل نویسی یا سی اس اس Cascading Style Sheets : دومین هسته طراحی وب می باشد که زیر نظر کنسرسیوم جهانی وب؛ به اختصار ( W3C ) است.

Cascading Style Sheets در لغت یعنی شیوه نامه های آبشاری ، که منظور از آبشاری یعنی دستورات CSS بصورت آبشاری بروی عناصر اعمال میشن ، یعنی اگه یه باکس داشته باشیم و داخلش چنتا تگ P باشه، و به باکس رنگ متن مثلا قرمز بدیم تمامی تگ های P هم که داخل باکس هستن رنگ متنشون قرمز میشه، پس از این نظر میگن آبشاری.

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

زبان CSS زبانی هست که میتونیم طراحی ظاهر سایت، شکل شمایل و کلا هرچیزی که در ظاهر میتونه وجود داشته باشه رو انجام بدید.

برنامه مورد نیاز css

با برنامه NotePad می توانید یک فایل CSS بسازید. ( اگر از سیستم عامل Mac استفاده میکنید با برنامه TextEdit اینکار را انجام دهید. )

در CSS ما باید نحوه نوشتاری که سینتکس Syntax نامیده می شود را رعایت کنیم.

شکل کلی نوشتن CSS به اینصورت است :

دستور بالا میگه : انتخاب کن تگ H1 رو از صفحه ، سپس با استفاده از ویژگی color رنگ متنش رو آبی کن و بعدش با ویژگی font-size اندازه فونتش رو ۱۲ پیکسل کن.

انتخابگر : یعنی انتخاب کن تگ نوشته شده ( یا Class یا ID نوشته شده ) از صفحه html ی که لینکش کردیم

ویژگی : اون دستور CSS است که روی تگ اعمال می شه

مقدار : مقدار اون ویژگی که روی تگ اعمال می شه.

سه روش برای نوشتن css وجود دارد (برای استفاده از دستورات CSS در صفحات وب 3 راه وجود دارد):

روش 1-نوشتن دستورات CSS بصورت Inline.

روش 2-نوشتن دستورات CSS بصورت Internal.

روش3-نوشتن دستورات CSS بصورت External

روش اول) نوشتن دستورات بصورت Inline

در این روش ویژگی‌های CSS را در یک عنصر HTML می نویسیم. مثال:

<p style=”color:blue; font-family:tahoma;”> content </p>

برای نسبت‌دادن چند ویژگی CSS به یک عنصر خاص از طریق روش Inline : از خصیصه style برای یک عنصر استفاده کنید. همانطور که در مثال می بینید، ویژگی‌های color و font-family را از طریق خصیصه style به عنصر p نسبت داده شده است.

روش دوم) نوشتن کد به روش Internal

از تگ style استفاده می شود. این تگ فقط می‌تواند درون تگ head نوشته شود. مثال:

<!DOCTYPE html>

<html>

<head>

<title> amozeshgah tarahi sayt va seo</title>

<style>

p { color: blue;

font-family: tahoma; }

</style>

</head>

<body>

<p> fijvdk Hl,ca’hi xvhpd shdj nv yvf jivhk , seo </p>

</body>

</html>

روش سوم) اکسترنال نوشتن css:

ایجاد یک فایل style.css

و سپس پیوست فایل embed.css

1-برنامه NotePad و بازش کن و دستورات css زیر را تایپ کنید:

body{ background-color: blue;

color: white;}

p{ color: yellow;}

2- باید فایل رو ذخیره Save کنید، در NotePad : از منوی File بروی گزینه Save یا Save as کلیک نمایید ( اگر از برنامه های دیگری هم استفاده میکنید، در این مرحله باید فایل رو ذخیره کنید )

3-در NotePad: باید خودتون بصورت دستی پسوند فایل رو css. بزارید.

4- فایل CSS ما ایجاد شد و حالا باید به فایل HTML مون وصلش کنیم، برای اینکار از کدهای زیر را در تگ head صفحه HTML مون می نویسیم :

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>آموزشگاه طراحی سایت و سئو در غرب تهران</h2>

</body>

</html>

نحوه راست چین در HTML چگونه انجام می شود؟

استفاده از ویژگی dir :

می‌توان ویژگی dir را به عناصر خاص HTML اعمال کرد که نشان می‌دهد محتوای داخل باید از چپ به راست یا راست به چپ نمایش داده شود.

استفاده از ویژگی جهت CSS:

این ویژگی به کاربر امکان می‌دهد جهت متن را برای عناصر با استفاده از شیوه‌نامه‌های CSS تنظیم کند. می‌توان ویژگی ltr را برای چپ به راست یا ویژگی rtl را برای راست به چپ در کدهای CSS تنظیم کرد.

<“html dir=”rtl” lang=”fa-IR>

<head>

<“meta charset=”utf-8>

<“meta name=”viewport>

</head>

ویژگی dir در HTML چیست؟

برای تعیین جهت متن استفاده می‌شود. می‌توان آن را بر عناصر ، برای راست‌چین کردن در HTML اعمال کرد. مثال: سینتکس راست چین کردن عنصر :

در کد زیر جهت متن عنصر textarea را با استفاده از مقدار rtl در ویژگی dir، راستچین کرده ایم :

به طور پیش‌فرض، جهت متن از عناصر والد به ارث می‌رسد. بنابراین، اگر جهت متن روی عنصر HTML تنظیم شود، برای کل سند HTML اعمال خواهد شد. سینتکس ویژگی dir به شرح زیر است:

در اینجا مقادیر ممکن برای ویژگی dir آمده است:

ltr : پیش‌فرض چپ چین است پس بنویسیم یا نه فرقی نمی کند.

rtl : راستچین می کند.

auto : به مرورگر اجازه می‌دهد تا جهت متن را بر اساس محتوا تعیین کند. فقط زمانی توصیه می‌شود که جهت متن نامشخص باشد.

صفت: خود کار اسم: خود رو

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

دیدگاهتان را بنویسید لغو پاسخ

راهنما