akofaraji.ir

در این بخش قصد داریم با هم آموزش CSS ، که برگرفته از سایت خوب روکسو است را با هم پیش ببریم



Generic placssolder image
ئاکو فرجی
30 فروردین 1403

CSS چیست؟

  یکی از مهم ترین وجهه های دنیای وب نمود و شکل ظاهری صفحات اینترنتی است. این ظاهر زیبا و دلنشین حاصل سال ها تلاش و پیشرفت تدریجی از سوی برنامه نویسان و توسعه دهندگان بوده است و طی یک شب به وجود نیامده است. واضح است که زبان های متعدد و بسیاری در دنیای وب مورد استفاده قرار می گیرند اما ظاهر هر وب سایت نهایتا به دو عنصر اصلی وابسته است که بدون آن ها هیچ صفحه ی اینترنتی در دنیا وجود نخواهد داشت: زبان HTML و زبان CSS.   پس از بیان این نکته، اولین چیزی که در ذهن خواننده شکل می گیرد یک سوال است؛ زبان JavaScript چطور؟ ما منکر نقش کلیدی و اساسی زبان جاوا اسکریپت در صفحات وب امروزی نیستیم اما هر وب سایتی از هر نوعی که باشد به HTML و CSS نیاز دارد. به عبارت دیگر می توان وب سایتی داشت که از زبان جاوا اسکریپت استفاده نکند اما امکان ندارد وب سایتی داشته باشیم که HTML و CSS نداشته باشد؛ وب سایت را مانند یک ساختمان در نظر بگیرید! HTML به منزله ی ساختار و اسکلت آهنی یک ساختمان است و CSS به منزله ی آجر ها و نمای یک ساختمان و غیره. آیا می توان ساختمانی داشت که اسکلت بندی ندارد؟!   CSS مخفف Cascading Style Sheets است که معنی «صفحات استایل آبشاری» را می دهد! ترجمه ی این عبارت نیاز به کمی توضیح دارد! در این معنی کلمات صفحات استایل ق...

ادامه مطلب
Generic placssolder image
ئاکو فرجی
30 فروردین 1403

Selector ها در زبان CSS

کار Selector چیست؟ احتمالا از قسمت قبل این تصویر را به یاد دارید:   ساختار کلی یک دستور CSS   در آن قسمت به طور کلی در مورد این تصویر صحبت کردیم و موارد استفاده شده اش را به این شکل توضیح دادیم: selector به «معنی انتخاب کننده» است. همانطور که از نامش مشخص است، کارش انتخاب عنصر یا عناصری است که می خواهید دستورات CSS را روی آن‌ها اعمال کنید. به طور مثال در تصویر بالا گفته ایم تگ های h1 را انتخاب کن (تمام تگ های h1). declaration به معنی «اعلان» است؛ به عبارت دیگر در این قسمت چیزی را که می خواهید، اعلام می کنید. هر اعلان خود از دو قسمت property و value تشکیل شده است. به طور مثال color که رنگ متن را تعیین می کند یک property یا خصوصیتِ متن است و blue (آبی) مقدار یا value آن است. در تصویر بالا پس از انتخاب عنصر مورد نظر (تگ های h1) گفته ایم رنگ متنشان آبی (blue) باشد و سپس اندازه ی فونت شان را نیز 12 پیکسل قرار داده ایم. بعد از هر declaration از علامت نقطه ویرگول استفاده می کنیم. فضای خالی (white space) در این نوع دستورات اهمیتی ندارد. مثال:   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> <html> <head> <style> p {   color: red; &...

ادامه مطلب
Generic placssolder image
ئاکو فرجی
30 فروردین 1403

افزودن کدهای CSS به سند HTML

وارد کردن کد CSS به سند HTML سه روش اصلی برای وارد وارد کردن کدهای CSS به HTML وجود دارد: External (کدهای خارجی) Internal (کدهای داخلی) Inline (کدهای درون‌خطی) بیایید هر کدام را بررسی کرده و برایش یک مثال بیاوریم… کدهای CSS خارجی مزیت های استفاده از CSS به صورت فایل خارجی بسیار زیاد است که در موردشان صحبت می کنیم اما ابتدا باید با نحوه ی کارشان آشنا شویم. در این روش، کدهای CSS خود را در یک فایل متنی جداگانه می نویسیم و سپس آن فایل را وارد سند HTML می کنیم اما سوالی که پیش می آید این است: چطور فایل CSS را به کدهای HTML خود اضافه کنیم؟ ابتدا به چند نکته ی زیر توجه کنید: پسوند فایل هایی که حاوی کد HTML شما هستند، html. و یا htm. است (مثال index.html). پسوند فایل هایی که حاوی کد CSS شما هستند، css. خواهد بود (مثال styles.css). وارد کردن فایل حاوی کدهای CSS با استفاده از تگ <link> انجام می شود. تگ <link> باید داخل تگ <head> قرار بگیرد. بنابراین کدی که برای الصاق فایل CSS نیاز داریم به این شکل خواهد بود:   1 2 3 <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> به مثال زیر توجه کنید: &nb...

ادامه مطلب
Generic placssolder image
ئاکو فرجی
30 فروردین 1403

قالب های رنگی در CSS

  رنگ ها در CSS زمانی که می گوییم «رنگ ها در CSS» منظورمان «رنگ ها در CSS و HTML» است چرا که رنگ هایی که در زبان CSS استفاده می کنیم در سند HTML نمایان می شوند. رنگ ها را در CSS می توان در قالب های زیر نوشت: رنگ های اسمی (با اسم رنگ) بر اساس RGB بر اساس HEX بر اساس HSL بر اساس RGBA بر اساس HSLA   رنگ های اسمی   حدود 140 رنگ استاندارد در زبان CSS وجود دارد که دارای نام خاص هستند و می توانیم در کدهای CSS به جای استفاده از کد رنگی‌شان از نام‌شان استفاده کنیم. برای مثال در کد زیر از رنگ هایی مانند Tomato (گوجه ای)، MediumSeaGreen (سبز دریایی ملایم)، Violet (بنفشه – نوعی رنگ بنفش)، LightGray (خاکستری کم رنگ) و … استفاده کرده ایم:     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <body>   <h1 style="background-color:Tomato;">Tomato</h1> <h1 style="background-color:Orange;">Orange</h1> <h1 style="background-color:DodgerBlue;">DodgerBlue</h1> <h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1> <h1 style="backg...

ادامه مطلب
Generic placssolder image
ئاکو فرجی
30 فروردین 1403

Background (پس زمینه) در CSS

  خصوصیات Background   خصوصیات مختلف Background یا پس زمینه در CSS، همانطور که از نامشان مشخص است، مربوط به تعیین ویژگی های پس زمینه ی عناصر در صفحه ی وب ما هستند. به طور مثال background-color رنگ پس زمینه را برای عناصر صفحه ی وب ما تغییر می دهد و background-image به جای رنگ، تصویری در پس زمینه قرار می دهد. امروز به بررسی موارد زیر می پردازیم: background-color background-image background-repeat background-attachment background-position   Background Color   background-color در لغت به معنی «رنگ پس زمینه» می‌باشد و مشخصا برای پس زمینه ی ما رنگ خاصی را تعیین می کند. به طور مثال اگر بخواهیم رنگ پس زمینه ی صفحه ی وب خود را به رنگ آبی روشن دربیاوریم می توانیم کدهایمان را به این شکل بنویسیم:     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> <html> <head> <style> body {   background-color: lightblue; } </style> </head> <body>   <h1>Hello World!</h1>   <p>This page has a light blue background color!</p>   </body> </h...

ادامه مطلب
Generic placssolder image
ئاکو فرجی
30 فروردین 1403

حاشیه ها (Borders) در زبان CSS

    حاشیه ها (Borders)   با سلام و عرض ادب خدمت شما همراهان گرامی روکسو، در این جلسه می خواهیم در رابطه با ایجاد حاشیه در زبان CSS صحبت کنیم. کارایی حاشیه یا قاب یا مرز بندی یا هر چه که شما به گفتنش عادت دارید برای همه ی ما مشخص است. برای ایجاد یک حاشیه باید از خصوصیت   border استفاده کنیم.   اما بحث اصلی ما شکل دادن و استایل دهی به این حاشیه است. شاید باور نکنید که با یک حاشیه ی ساده چقدر می توان ظاهر عناصر HTML را تغییر داد!   به طور مثال:   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 <!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width">   <title>JS Bin</title> </head>   <style>     /* CUSTOM PROPERTIES */ &n...

ادامه مطلب
Generic placssolder image
ئاکو فرجی
30 فروردین 1403

Margin ها در زبان CSS

      Margin چیست؟   خصوصیت margin در زبان CSS سعی می کند تا در اطراف یک عنصر فضای خالی ایجاد کند. زمانی که می گوییم اطراف یک عنصر یعنی هر چیزی که وابسته به این عنصر باشد کنارش می ماند (مانند حاشیه ها و …) اما بقیه ی عناصر مجاور کنار می روند. به زبان ساده تر margin یعنی فاصله ی بین یک عنصر و عناصر دور و برش (مانند تصاویر، متن ها و …).   در زبان CSS برای تعیین margin دستتان باز است و می توانید آن را از چهار طرف به صورت جداگانه تعیین کنید: margin-top margin-right margin-bottom margin-left   مقادیر قابل قبول برای margin ها عبارت اند از: auto: اگر این مقدار را به margin بدهید، خود مرورگر مقدارش را تعیین می کند. واحد طول: در این حالت باید مقدار margin را در یکی از واحد های طول پذیرفته شده مانند px یا pt یا cm و … تعیین کنید. درصد: در این حالت margin بر اساس درصدی از عرض عنصر تعیین می شود. inherit: در لغت به معنی «به ارث بردن» است. در این حالت margin مقدار خود را از عنصر پدرش به ارث می برد.   نکته: مقادیر منفی نیز مجاز هستند! مقادیر منفی به جای ایجاد فضای خالی، آن را کم می کنند و عناصر را به هم نزدیک تر می نمایند.   در مثال ز...

ادامه مطلب
Generic placssolder image
ئاکو فرجی
30 فروردین 1403

Padding ها در CSS

          padding چیست؟   خصوصیت padding در زبان CSS برای ایجاد فضای خالی بین محتوای درونی یک عنصر و محدوده اش (مانند حاشیه و …) استفاده می شود.   شما با استفاده از کدهای CSS بر تمام جوانب padding مسلط هستید از جمله: padding-top (به معنای padding بالا) padding-right (به معنای padding  سمت راست) padding-bottom (به معنای padding پایین) padding-left (به معنای padding سمت چپ)   برای مقداردهی به این خصوصیت ها می توانید از موارد زیر استفاده کنید: مشخص کردن padding به صورت دقیق در واحد های px یا pt یا cm و … مشخص کردن padding به درصدی از عرض عنصر پدر مشخص کردن padding با کلیدواژه ی inherit. در این حالت مقدار padding از عنصر پدر به ارث برده می شود   نکته: برخلاف margin، مقادیر منفی مجاز نیستند.   سوال: تفاوت padding با Margin چیست؟   پاسخ: هر دو فضای خالی ایجاد می کنند اما Margin این فضای خالی را بین عنصر و عناصر دیگر (خارج از هر نوع محدوده ای که عنصر داشته باشد؛ مثل حاشیه ها) اضافه کرده در حالی که Padding این فضای خالی را بین محتوای داخلی عنصر و هر نوع محدوده...

ادامه مطلب
Generic placssolder image
ئاکو فرجی
30 فروردین 1403

Outline ها در زبان CSS

      Outline چیست؟   Outline در زبان CSS به خطی گفته می شود که دور تا دور عنصر (البته خارج از هر نوع مرزی مانند حاشیه هایش) کشیده می شود تا عنصر مورد نظر از نظر ظاهری جلب توجه کند. به تصویر زیر نگاه کنید: تصویر شماره 1 – جایگاه outline نسبت به حاشیه ها و margin ها و …   نکته ی مهم این تصویر آن است که شما متوجه شوید outline ها کاملا بیرون از مرز ها و حاشیه های یک عنصر قرار می گیرند.   زبان CSS برای کار با outline ها دارای دستورات زیر است: outline-style outline-color outline-width outline-offset outline   سوال: با این توصیفات تفاوت outline و border چیست؟   پاسخ: تفاوت outline و border هر چند جزئی است اما مهم است. حاشیه و outline از دو جهت اصلی با هم تفاوت دارند: outline ها خارج از border های یک عنصر کشیده می شوند و ممکن است با عناصر خارجی دیگر تداخل داشته باشند و روی آن ها قرار بگیرند اما در border ها چنین مسئله ای صحیح نیست. outline به هیچ عنوان جزو ابعاد (طول و عرض) یک عنصر حساب نمی شود و برخلاف border ها با تغییر دادن outline اندازه ی کلی عنصر ما تغییری نمی کند.   خصوصیت outline-style   خصوصیت outline-style استایل و ظاهر outline را مشخص کرده و می تواند ...

ادامه مطلب
Generic placssolder image
ئاکو فرجی
30 فروردین 1403

استایل دهی به متن ها

          استایل دهی به متون   زبان CSS قادر است متون صفحات شما در HTML را با قدرت بسیار عالی ویرایش کند و به آن ها استایل خاصی بدهد. به طور مثال می توانید رنگ، جهت نوشتاری، اشکال نوشتاری، تغییر ساختار و تبدیل متن به اشکال و … را پیاده سازی کنید. در ادامه برخی از مهم ترین این موارد را بررسی خواهیم کرد.   رنگ متون   خصوصیت color وظیفه ی تغییر رنگ متون را بر عهده دارد.   مانند اکثر خصوصیات CSS که با رنگ عناصر سر و کار دارند، می توانید از قالب های زیر استفاده کنید: با استفاده از نام های از پیش تعریف شده در CSS مانند orange یا blue یا red و … در قالب Hex در قالب RGB   اگر بخواهید یک عنصر خاص را تغییر رنگ بدهید، باید در قسمت CSS فقط آن را هدف قرار دهید اما اگر می خواهید عموم متن های صفحه ی شما رنگ خاصی داشته باشند معمولا body را هدف می گیرند:   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html> <html> <head> <style> body {   color: blue; }   h1 {   color: green; } </style> </head> <body>   <h1>This is heading...

ادامه مطلب