آموزش CSS - به همراه مثال

MR.MSA · سِپتامبر 23 2020

با سلام خدمت دوستان عزیز گاردایران

در این تاپیک قصد دارم زبان برنامه نویسی CSS رو به شما آموزش بدهم .

-----------------------------------------------------------------------------------------------------------------------

ابتدا کمی با css اشنا شویم :‌

css یک زبان برنامه نویسی تحت وب هست که بیشتر در کنار html استفاده می شود ، این زبان برای طراحی سایت از نظر ظاهری هست .

برای مثال رنگ متن ها ، پس زمینه ، نوع اسکرول و ... رو با css طراحی می کنند .

امروزه که بیشتر افراد به طراحی وب و برنامه نویسی تحت وب روی اورده اند زبان css می تونه زبان کاربردی باشه .

پیش نیاز css ، اشنایی با زبان html هست .

دیگه بیشتر از این سرتون رو درد نمیارم . 😄

-----------------------------------------------------------------------------------------------------------------------

سبک های اضافه کردن css به html :

۱- خارجی و یا External

۲- داخلی و یا internal

۳- درون خطی و یا inline

که در تاپیک بعد به همراه مثال خدمتتون عرض می کنم .

-----------------------------------------------------------------------------------------------------------------------

قوانین تاپیک :

اسپم ندید .

سوالات رو در پ.خ ارسال کنید .

کتاب و مقالات رو در اینجا ارسال نکنید . (مگر اینکه خودتون نوشته باشید)

اگر قصد گذاشتن آموزشی در رابطه با css دارید ابتدا به من پیام دهید (در غیر این صورت پست شما حذف می شود ) .

موفق و پیروز باشید .

MR.MSA · سِپتامبر 23 2020

بخش اول سبک های اضافه کردن css به html :

همون طور که در تاپیک اول گفتم ما سه سبک برای اضافه کردن css به html داریم :

۱- خارجی و یا External

بهترین و پر استفاده ترین سبک اضافه کردن css سبک خارجی یا External هست .

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

که در این روش شما می توانید css خود را به چند صفحه اعمال کنید .

کدی که باید برای فراخوانی در html استفاده کنید به این صورت هست (مثال) :

This is the hidden content, please

۲- داخلی و یا internal

در این سبک تمامی کدهای css مربوط به صفحه مورد نظر در تگ <head> سایت و در داخل تگ <style> قرار می گیرد .

در این سبک کد های css فقط در یک صفحه اجرا می شوند .

مثال :

This is the hidden content, please

۳- درون خطی و یا inline

در این روش استایل ها در داخل تگ مورد نظر نوشته می شوند برای مثال :

This is the hidden content, please

----------------------------------------------------------

اگر پست های "آموزش زبان برنامه نویسی CSS - به همراه مثال" رو لایک کنید آموزش زبان های html و php هم در اینده میزارم .

موفق و پیروز باشید .

MR.MSA · سِپتامبر 23 2020

با بخش دوم در خدمتتون هستم

توی این قسمت با مقدمات اشنا می شویم .

نحوه کامنت گذاری در css :

برای کامنت گذاری در css از */ استفاده می کنیم و کامنت قرار می گیرد و سپس برای بستن از /* استفاده می کنیم .

مثل :

This is the hidden content, please

استفاده از css در html :

برای اینکه بتوانید از سبک inline استفاده کنیم و در یک تگ از کد های css استفاده کنیم از style استفاده می کنیم .

مثال :

This is the hidden content, please

برای اینکه بتوانیم به صورت داخلی (internal) کد های css رو بنویسیم از تگ style در تگ head استفاده می کنیم .

مثال :

This is the hidden content, please

برای اینکه به صورت خارجی (External) کد های css رو فراخوانی کنیم از این کد در قسمت head سایت استفاده می کنیم :

This is the hidden content, please

به جای styles.css ادرس فایل css خودتون و رو میدید. (با فرمت css )

----------------------------------------------------------

اگر پست های "آموزش زبان برنامه نویسی CSS - به همراه مثال" رو لایک کنید آموزش زبان های html و php هم در اینده میزارم .

موفق و پیروز باشید .

MR.MSA · سِپتامبر 23 2020

با بخش سوم در خدمت شما دوستان هستم .

در تاپیک اول در یکی از کد ها از id و class استفاده کردم که می خواهم توی بخش سوم اونا رو شرح بدم .

زمانی که شما می خواهید به صورت داخلی (internal) و یا خارجی (external) کد های css رو فراخوانی کنید از id و class استفاده می کنیم .

id :

برای استفاده از id در یک تگ html به این صورت عمل می کنیم :

This is the hidden content, please

و برای اجرای کد css در id مورد نظر به این صورت :

This is the hidden content, please

قوانین id :

۱- در یک تگ شما فقط امکان استفاده از یک id را دارید .

۲- اگر در یک صفحه چند بار از یک id در تگ و.. استفاده شود سایت از حالت استاندارد خارج می شود .

۳- قوانین تعریف id :

This is the hidden content, please

1 : درست است اما بهتره که در تعریف id در حرف اول از _ استفاده نکنیم .

2 : اشتباه است و نباید از اعداد در حرف اول استفاده کنیم .

3 : کاملا درست .

class :

برای استفاده از class در یک تگ html به این صورت عمل می کنیم :

This is the hidden content, please

و برای اجرای کد css در class مورد نظر به این صورت :

This is the hidden content, please

قوانین class :

۱- بر خلاف id شما می توانید در یک تگ از چند class استفاده کنید .

۲- قوانین تعریف class :

This is the hidden content, please

1 : درست است اما بهتره که در تعریف class در حرف اول از _ استفاده نکنیم .

2 : اشتباه است و نباید از اعداد در حرف اول استفاده کنیم .

3 : کاملا درست .

----------------------------------------------------------

اگر پست های "آموزش زبان برنامه نویسی CSS - به همراه مثال" رو لایک کنید آموزش زبان های html و php هم در اینده میزارم .

موفق و پیروز باشید .

MR.MSA · سِپتامبر 23 2020

با بخش چهارم از آموزش در خدمت شما دوستان عزیز گارد ایران هستم .

تا الان نحوه استفاده از css در html و نحوه فراخوانی ، قوانین فراخوانی و سبک های استفاده از css رو گفتیم .

حالا می خواهیم خود css رو کار کنیم .

color :

برای تنظیم رنگ یک متن از color استفاده می کنیم .

مثال :

This is the hidden content, please

توجه : سمیکالن رو برای بستن اون استایل گذاشتیم و برای استایل بعدی به این صورت عمل می کنیم :

This is the hidden content, please

پس بعد از هر استایل یک ; برای جداسازی از پارامتر استایل قبلی استفاده می کنیم .

width :

برای دادن عرض یک عکس ، باکس و ... از width استفاده می کنیم .

مثال :

This is the hidden content, please

دو مقدار اصلی که می توانید به width بدهید px و % هستند .

height :

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

مثال :

This is the hidden content, please

و دو مقدار اصلی که می توانیم برای height استفاده کنیم px و % هستند .

حالا می خواهیم یک مثال رو باهم کار کنیم

مثلا می خوهیم سایت در خروجی این رو برای ما نمایش دهد :

انجمن تیم امنیتی گاردایران

This is the hidden content, please

و الان یاد گرفتیم که چنین چیزی بسازیم پس کد ها به این صورت می شود : (طول عرض برای مثال است )

This is the hidden content, please

---------------------------------------------

اگر پست های "آموزش زبان برنامه نویسی CSS - به همراه مثال" رو لایک کنید آموزش زبان های html و php هم در اینده میزارم .

موفق و پیروز باشید .

MR.MSA · سِپتامبر 26 2020

با بخش ششم در خدمت شما دوستان عزیز هستیم .

امروز می خواهیم باهم Font رو کار کنیم .

Font Size

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

حالا یک مثال رو کار می کنیم :

This is the hidden content, please

حالا چه پارامتر های دیگه ای می تونیم برای اندازه فونت استفاده کنیم :

پارامتر های px , pt , % ,em

مثال :

This is the hidden content, please

نکته در رابطه با em :

برای تبدیل px به em می توانید از این فرمول استفاده کنید :

This is the hidden content, please

---------------------------------

Font Family

ساده ترین نحوه تعریف فونت به این صورت است ‌:

This is the hidden content, please

و نام فونت خود را تایپ می کنید .

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

This is the hidden content, please

می گوییم که اگر فونت tahoma نبود از erial استفاده کن و برای فونت های بعدی به همین صورت با کاما جدا می کنید .

مثال :

This is the hidden content, please

نکته : اگر یک زمان فونت شما چند کلمه بود از دابل کتیشل و یا کتیشن استفاده می کنیم .

مثال :

This is the hidden content, please

---------------------------------

Font Style

حالا میرم سراغ استایل فونت .

چند مقداری که Font Style میگیرد :

۱- normal :

در این مقدار متن به صورت عادی نمایش داده می شود .

۲- italic

در این مقدار متن به صورت کج نمایش داده می شود .

۳- oblique

فونت به صورت مورب نمایش داده می شود.

۴- initial

فونت به صورت پیش فرض و یا اولیه نمایش داده می شود .

مثال کامل :

This is the hidden content, please

مثال کلی :

This is the hidden content, please

----------------------------------------------------------

اگر پست های "آموزش زبان برنامه نویسی CSS - به همراه مثال" رو لایک کنید آموزش زبان های html و php هم در اینده میزارم .

موفق و پیروز باشید .

MR.MSA · سِپتامبر 28 2020

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

امروز می خواهیم باهم Background رو کار کنیم .

دستوراتی که در css مربوط به بکگراند هستند :

background-color
background-image
background-repeat
background-attachment
background-position

1- background-color

رنگ پس زمینه رو به این صورت تعریف می کنیم :‌

This is the hidden content, please

چون اندازه عرض تعریف نشده به صورت پیش فرض ۱۰۰٪ است .

که به این صورت می تونیم تعریف کنیم :

This is the hidden content, please

2- background-image

عکس پس زمینه رو به این صورت تعریف می کنیم :‌

This is the hidden content, please

( به جای image address ، ادرس عکس خودتون رو بزارید . )

برای تعریف اندازه به این صورت می تونیم تعریف کنیم :

This is the hidden content, please

3- Background-repeat

برای بارگذاری زودتر صفحه سایت کم حجم باشید و شما می توانید مثلا به جای اینکه از یک پس زمینه ۱۰۰۰*۱۰۰۰ با رنک ابی استفاده کنید

همون رو کوچک می کنید و با استفاده از Background-repeat اون تصویر کوچک رو از طرف افقی و عمودی در کنار هم می زارید تا تمام صفحه رو بگیره .

با نوشتن دستور background-image به شکل زیر، تصویر در هر دو جهت افقی و عمودی تکرار می‌شه:

This is the hidden content, please

1- فقط به صورت افقی تکرار شود از این دستور :‌ ;background-repeat: repeat-x

2- فقط به صورت عمودی تکرار شود از این دستور :‌ ;background-repeat: repeat-y

3- فقط یک بار نشون داده شود از این دستور :‌ ;background-repeat: no-repeat

مثال :

This is the hidden content, please

4- background-position

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

که برای این کار از background-position استفاده می کنیم .

به این صورت :

This is the hidden content, please

که تصویر در سمت چپ در قسمت بالا قرار می گیرد .

یه سری از مقدار هایی که می توانید به background-position بدهید :

This is the hidden content, please

و توجه داشته باشید که برای دقیق تر کار کردن می توانید به این صورت عمل کنید :

This is the hidden content, please

5- background-attachment

برای اینکه زمانی که صفحه رو اسکرول می کنید عکس ثابت باشه از این background-attachment استفاده می کنیم .

مثال :

This is the hidden content, please

پارامتر اول : Fixed

برای اینکه زمان اسکرول عکس ثابت باشد .

This is the hidden content, please

پارامتر دوم : Scroll

برای اینکه تصویر همراه با اسکرول صفحه حرکت کند .

This is the hidden content, please

----------------------------------------------------------

موفق و پیروز باشید .

MR.MSA · اُکتُبر 26 2020

با بخش جدید در خدمتتون هستیم .

در این بخش می خوایم در مورد border صحبت کنیم .

دستورات border که امروز به انها می پردازیم :

‌border-style نوع حاشیه رو مشخص می‌کنه.

border-color رنگ حاشیه رو مشخص می‌کنه.

‌border-width ضخامت حاشیه رو مشخص می‌کنه.

border تمام کار ها رو یک جا انجام میده. (این خاصیت ها به خاصیت های shorthand معروفن و کار چندین خاصیت رو در یک خاصیت جا می‌دن).

border-radius توسط این خاصیت، می‌تونیم چندین انحنای مختلف رو فقط با یک دستور تعریف کنیم.

وظیفه Border در CSS، به وجود آوردن مرز برای عناصر هست یا بهتره بگیم برای ایجاد کادر استفاده می شود .

border-style :

از این دستور برای نوع هاشیه border رو مشخص کنیم که این مقادیر رو میگیره :

None: هیچ حاشیه ای نیست .

Dotted: حاشیه به شکل نقطه است .

Dashed: حاشیه به شکل خط چین است

Solid: حاشیه به شکل خط ممتد است .

Double: حاشیه به شکل دو خط موازی و روی هم قرار میگیرد .

Groove: یک خط حاشیه ی سه بعدی نمایش می‌ده که در اونن خطوط بالایی و سمت چپ پررنگ تر از خطوط دیگه هستند .

Ridge: در این حالت خطوط حاشیه به صورت سه بعدی و با طیف رنگی نمایش داده می شود .

Inset: این مقدار یک حاشیه ی داخلی سه بعدی تعریف می‌کنه که در اون معمولا خطوط بالایی و سمت چپ دارای سایه و تیره تر از خطوط دیگه هستند .

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

border-width :

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

بر حسب واحد px
به وسیله مقادیر thin, medium, thick

مثال :‌

This is the hidden content, please

border-color :‌

برای تعریف رنگ کادر مورد استفاده قرار میگیرد .

که پارامتر های rgb() و hex و نام پیش فرض رو می تونید بهش بدید (در جلسه اینده در مورد پارامتر های گفته شده صحبت می کنیم )

This is the hidden content, please

در اینجا ما در صفحه یک کادر داریم که به صورت خط معمولی و 2px ضخامت ان و رنگ قرمز است .

border یا border-shorthand :

با این دستور ما می توانیم سه دستور قبل یعنی :

border-style
border-width
border-color

رو در یک دستور استفاده کنیم .

سینتکس کلی :‌

This is the hidden content, please

$width :

border-width

$style :

border-style

$color :

border-color

یک مثال ساده :‌

This is the hidden content, please

border-radius :

توسط این خاصیت، می‌تونیم چندین انحنای مختلف رو فقط با یک دستور تعریف کنیم.مقدار دهی به این خاصیت، در چهار حالت

مختلف، می‌تونه اتفاق بیفته:

This is the hidden content, please

$1 : بالا چپ

$2 : بالا راست

$3 : پایین راست

$4 : پایین چپ

مثال :

This is the hidden content, please

زمان تعریف دو مقدار :

This is the hidden content, please

$1 : بالا چپ و پایین راست

$2 : بالا راست و پایین چپ

مثل :

This is the hidden content, please

زمان تعریف یک مقدار :

This is the hidden content, please

$ALL : تمامی طرفین

مثال :

This is the hidden content, please

================================================================

یک مثال کامل در رابطه با border :

This is the hidden content, please

که این دستور رو می تونیم به این صورت هم تعریف کنیم :

This is the hidden content, please

================================================================

موفق و پیروز باشید .

ورود

آموزش CSS - به همراه مثال

پست های پیشنهاد شده

MR.MSA

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

MR.MSA

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

MR.MSA

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

MR.MSA

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

MR.MSA

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

MR.MSA

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

MR.MSA

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

MR.MSA

لینک به دیدگاه

به اشتراک گذاری در سایت های دیگر

به گفتگو بپیوندید

فهرست‌ها

فعالیت‌ها

فروشگاه

Support