ئاکو فرجی

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

ئاکو فرجی

24 شهریور 1403

CSS چیست؟

CSS چیست؟

بازدید 1822

  نظر0

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

ئاکو فرجی

24 شهریور 1403

Selector ها در زبان CSS

Selector ها در زبان CSS

بازدید 1783

  نظر0

کار 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; &...
ادامه مطلب

ئاکو فرجی

24 شهریور 1403

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

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

بازدید 1764

  نظر0

وارد کردن کد 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...
ادامه مطلب

ئاکو فرجی

24 شهریور 1403

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

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

بازدید 1664

  نظر0

رنگ ها در 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...
ادامه مطلب

ئاکو فرجی

24 شهریور 1403

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

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

بازدید 2203

  نظر0

خصوصیات 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...
ادامه مطلب

ئاکو فرجی

24 شهریور 1403

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

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

بازدید 2521

  نظر0

حاشیه ها (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...
ادامه مطلب

ئاکو فرجی

24 شهریور 1403

Margin ها در زبان CSS

Margin ها در زبان CSS

بازدید 1639

  نظر0

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

ئاکو فرجی

24 شهریور 1403

Padding ها در CSS

Padding ها در CSS

بازدید 1671

  نظر0

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 این فضای خالی را بین محتوای داخلی عنصر و هر نوع محدوده...
ادامه مطلب

ئاکو فرجی

25 شهریور 1403

Outline ها در زبان CSS

Outline ها در زبان CSS

بازدید 1643

  نظر0

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 را مشخص کرده و می تواند ...
ادامه مطلب

ئاکو فرجی

24 شهریور 1403

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

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

بازدید 1624

  نظر0

استایل دهی به متون زبان 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...
ادامه مطلب

منو

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

ئاکو فرجی

CSS چیست؟

ئاکو فرجی

Selector ها در زبان CSS

ئاکو فرجی

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

ئاکو فرجی

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

ئاکو فرجی

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

ئاکو فرجی

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

ئاکو فرجی

Margin ها در زبان CSS

ئاکو فرجی

Padding ها در CSS

ئاکو فرجی

Outline ها در زبان CSS

ئاکو فرجی

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