رفتن به مطلب

اختصاصی آموزش 0 تا ... Css با laruz


laruz

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

سلام

امیدوارم بتونم یه سری آموزش css ( که لازم داره html بلد باشین ) براتون بذارم.

در کل هر زبان برنامه نویسی که کار می کنید اولش بایدالفباشو بلد باشید بعدش باهاش کلمه و جمله بسازید

کارمون رو شروع می کنیم. nerd

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

در زبان سی اس اس ما 3 نوع آدرس دهی ( سطحی و کلی) رو داریم.

1 - بصورت کلاس : که با گذاشتن یه نقطه قبل از کلاس دلخواه تعریف می شود.

 

.classname

 

2- بصورت آی دی : با گذاشتن علامت ( شارپ یا مربع ) # قبل از آی دی دلخواه بیان می شود

 

#idname

 

3- عنصری : تغییر عناصر پیشفرض Html

 

p

 

 

* توجه داشته باشید با اعداد و علامت ها آی دی ها و کلاس ها رو تعریف نکنین

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

مثال ها به ترتیب

کلاس

 

<!DOCTYPE html><html><head><style>.center {   text-align: center;   color: red;}</style></head><body><h1 class="center">تیتر قرمز رنگ و وسط چین</h1><p class="center">پاراگراف قرمز زنگ و وسط چین</p></body></html>

 

 

آی دی

 

<!DOCTYPE html><html><head><style>#para1 {   text-align: center;   color: red;}</style></head><body><p id="para1">سلام یه همه</p><p>این پاراگراف هیچ استایلی ندارد</p></body></html>عنصری

 

 

<!DOCTYPE html><html><head><style>p {   text-align: center;   color: red;}</style></head><body><p>همه پاراگراف ها این شکلین</p><p id="para1">منم هم </p><p>و البته من</p></body></html>

 

 

* برای مشاهده نمونه ها از notepad++ و... استفاده کنید

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

شما می توانید هم زمان برای چند کلاس، ایدی یا عنصر استایل هایی رو تعریف کنید. اونا رو با , ( کاما ) از هم جدا کنید.

 

h1, h2, p {   text-align: center;   color: red;}

 

 

<!DOCTYPE html><html><head><style>h1, h2, p {   text-align: center;   color: red;}</style></head><body><h1>سلام به همه</h1><h2>هدینگ کوچکتر</h2><p>و یه پاراگراف</p></body></html>

 

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

البته تو همه ی زبان های برنامه نویسی شما می توانید برای خودتون راهنما بذارید

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

 

/* inam az karo bare header */

 

ینی راهنما را بین /* */ بنویسید. این اطلاعات نمایش داده نمی شوند

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

اما برای فراخونی css چند راه هست

1- نوشتن کدهای طراحی در یک فایل با فرمت css و فرخوانی در تگ head بصورت زیر

 

<head><link rel="stylesheet" type="text/css" href="https://go.20script.ir/index.php?url=mystyle.css"></head>

 

 

2- نوشتن بین دو تگ <style> </style> بین تگ head

 

<head><style> body{background-color:red;}p{margin-right:20px;}</head>

 

 

*** مهم *** عبارت 20px رو پشت سر هم بنویسید. نه این شکلی 20 px

 

3- بصورت خطی یا inline

 

<h1 style="color:green;background-color:lightblue"> salam man sabzam </h1>

 

 

نکته:

ترتیب نمایش استایل ها

1- inline

2- استایل فراخوانی شده بین تگ head

3- پیشفرض مرورگر

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

رنگ ها در سی اس اس

نحوه استفاده از رنگ ها به سه صورت

1- نوشتن عبارت درست در زبان انگلیسی: red,lightblue,navy,...

2- کد شش جایگاهی : #000000 ( سیاه ) , #fffff (سفید ) , .... *** رنگ هایی که 6 جایگاه برابر دارند رو می تونین بصورت 3 تایی هم بنویسید

3- قرمز، سبز، ابی یا rgb : (255,255,255) سفید و (0,0,0) سیاه *** فقط از 0 تا 255 در هز جایگاه قرار میگیرد

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

بایگانی شده

این موضوع بایگانی و قفل شده و دیگر امکان ارسال پاسخ نیست.

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