Css یک زبان برنامه نویسی برای بهبود ظاهر صفحات وب است. در واقع دستورات css بر روی تگ های HTML اعمال می شود و باعث می شود عناصر اچ اتی ام ال (مانند تیترها، متن ها، تصاویر و …) ظاهر مناسب تری از نظر رنگ و … پیدا کنند. در این مقاله به صورت کاربردی می خواهیم با Css آشنا شویم و با چند دستور مهم و ضروری آن آشنا شویم و در نهایت با همین دستورات، یک صفحه که با اچ اتی ام ال در مقاله اچ تی ام چیست، ایجاد کردیم را از نظر ظاهری کمی بهبود دهیم. هدف در این مقاله بیشتر آشنا شدن با اصول مهم و ایجاد یک صفحه سریع و کاربردی با استفاده از Css است. دقت داشته باشید که با اچ تی ام ال ساختار صفحه مشخص می شود و با css ظاهر آن ساختار و بنابراین اچ تی ام ال پایه و اساس طراحی صفحات وب است. در این مقاله با ما همراه باشید تا به صورت کاربردی با css آشنا شوید.

فهرست مطالعه این مقاله

CSS چیست؟

css چیست

کدهای CSS دستوراتی هستند که توسط آنها تمامی خصوصیات ظاهری صفحه وب سایت مشخص می شود. با HTML ساختار یا اسکلت صفحه وب سایت پیاده سازی می شود و با کدهای CSS خصوصیات ظاهری‌ آن عناصر مشخص می شود.

در واقع زمانی که با HTML تعیین می کنید که ساختار صفحه چگونه است و از چه عناصری تشکیل شده است، در CSS چگونگی نمایش طرح آن ها را مشخص می کنید. به عنوان مثال در HTML تعیین می کنید که یک متن از نوع تیتر باشد و در CSS تعیین می کنید که رنگ آن مثلا آبی باشد و … .

چرا از Css استفاده کنیم؟

علاوه بر اینکه استفاده از css برای تعیین خصوصیات ظاهری عناصر html مشخص می شود و به همین دلیل مهم است، همچنین تقریبا عمده ترین مزیت و در واقع مهمترین مزیت استفاده از Css، جلوگیری از کارهای تکراری و افزایش زمان طراحی است.

چگونه می توانیم از css استفاده کنیم؟

به طور کلی به سه صورت می توانید از css استفاده کنید و در واقع به سه صورت می توانید css به کدتان اضافه کنید.

  1. Css خارجی
  2. Css داخلی
  3. Css درون خطی

Css -1 خارجی

با استفاده از این روش یعنی تعریف کدهای css خارجی، می توانید تغییرات کل وب سایت را به یک باره در یک فایل انجام دهید. برای استفاده از این روش باید در هر صفحه html یک ارجاع به فایل css خارجی داشته باشید. برای این منظور در داخل head با استفاده از عنصر link باید به آن ارجاع دهید.

مثال:

<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” href=”mystyle.css”>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

و فایل mystyle.css به طور جداگانه باید ایجاد شود به عنوان مثال به صورت زیر:

Body {

   Background-color: lightblue;

}

H1 {

Color: navy;

Margin-left: 20px;

}

خروجی به صورت زیر خواهد بود. در اینجا همانطور که در css که به صورت خارجی تعریف شده، می بینید، h1 و background به صورت رنگی تعریف شده است اما برای پاراگراف p چیزی تعریف نشده است و لذا به حالت عادی است.

css

2- Css داخلی

از css داخلی معمولا زمانی که یک صفحه، طرح خاصی را دارد می توانید استفاده کنید. css داخلی در داخل head و توسط تگ style ایجاد می شود.

<!DOCTYPE html>

<html>

<head>

<style>

body {

  background-color: linen;

}

h1 {

  color: maroon;

  margin-left: 40px;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

خروجی به صورت زیر می شود:

Css

3- Css درون خطی

Css های درون خطی برای زمانی بکار می روند که بخواهید یک طرحی را فقط به یک یا چند عنصر اعمال کنید. برای این منظور از صفت style در درون تگ های html باید استفاده کنید.

<!DOCTYPE html>

<html>

<head>

<body>

<h1 style=”color:blue;text-align:center;”> این تیتر است</h>

<p style=”color:red;”>این پاراگراف است</p>

</body> </html>

خروجی به صورت زیر می شود:

css

سوالی که در اینجا می تواند مطرح شود این است که زمانیکه بیشتر از یک css برای یک عنصر اچ تی ام ال تعریف می شود، اولویت با کدام است؟ مثلا فرض کنید برای پاراگراف ها به صورت css خارجی رنگ قرمز را تنظیم کرده اید و به صورت css درون خطی رنگ آبی، سوال اینجاست که کدام یک اعمال می شود؟

در پاسخ به این سوال باید بگوییم که با استفاده از قانون زیر اولویت بندی صورت می گیرد:

اول Css درون خطی اولویت دارد یعنی اگر هم درون خطی بود و هم خارجی، اولویت با درون خطی است. و اگر هم درون خطی بود هم داخلی، باز هم درون خطی و حتی اگر سه مورد هم بود css درون خطی اولویت دارد.

دوم این گونه است که برعکس ترتیبی که CsS داخلی و خارجی آمده اند، اولویت می گیرند (یعنی اگر css داخلی اول آمده باشد، cssخارجی اعمال می شود و …)

در آخر هم اولویت با دیفالت مرورگر است.

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

<head>

<style>

H1 {

                Color: orange;

}

</style>

<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

</head>

از آنجایی که در این کد css داخلی و خارجی وجود دارد لذا اولویت با عکس ترتیبی که آمده اند است یعنی با Css خارجی است چون آخر آمده است. به عبارت ساده تر اولویت با آخری است.

یا مثلا در کد زیر اولویت با Css درون خطی است چون اولویت آن از همه بیشتر است.

<head>

<style>

H1 {

                Color: blue;

}

</style>

<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

</head>

<body>

<h1 style=”color:Tomato;”>Hello World</h1>

</body>

ساختار css چگونه است؟

ساختار css بستگی به اینکه از css داخلی یا درون خطی استفاده می کنید متفاوت است و فرق عمده ی آن ها این است که در css داخلی همه دستورات css را در داخل تگ style می نویسید ولی در css درون خطی هر جا که بخواهید از css استفاده کنید از style باید استفاده کنید. و البته عمدتا خروجی متفاوتی هم دریافت می کنید مثلا اگر یک دستور Css برای پاراگراف به صورت درون خطی بنویسید، این دستور فقط برای همان یک پاراگراف اعمال می شود ولی اگر به صورت داخلی یا خارجی برای پاراگراف دستور css بنویسید برای کل پاراگراف ها اعمال می شود مگر اینکه با id و … پاراگراف مد نظر را مشخص کرده باشید. اگر به مثال های بالا که در مورد css درون خطی، داخلی و خارجی زده شد توجه کنید، به طور کامل این موضوع را درک می کنید.

به عنوان مثال در css داخلی یا خارجی دستورات را معمولا به صورت زیر می نویسند:

css

Selector عنصری است که می خواهید دستورات روی آن اعمال شود. در جلوی آن می توانید چندین بلوک declaration ایجاد کنید. هر بلوک declaration شامل یک نام صفت css و مقدار آن است و اگر چند تا است با سمی کالن از هم جدا می شوند و همچنین کل declaration در داخل آکولاد قرار می گیرد.

مثال

P {

                Color: red;

                Text-align: center;

}

در این مثال selector برابر با p است به این معنی که هر پاراگرافی را شامل می شود. و در آن دو صفت رنگ و ترازبندی به ترتیب برابر با قرمز و وسط قرار گرفته است. در این مثال اگر p ما برابر با Hello world! باشد، خروجی به صورت زیر خواهد بود.

دقت داشته باشید اگر بخواهیم از css درون خطی در مثال بالا استفاده کنیم باید کد زیر را بنویسیم و البته خروجی زیر فقط برای همین پاراگراف است ولی در مثال بالا خیر.

<p style=”color:red;text-align:center;”>this is a paragraph</p>

Selector ها برای مشخص کردن عنصر اچ اتی ام الی که می خواهید دستورات برای ان ها اعمال شوند، مورد استفاده قرار می گیرند.

Selector ها به چند دسته کلی تقسیم می شوند و وظیفه ی آن ها مشخص کردن آن عنصری یا عناصری است که می خواهید دستورات روی آن ها اعمال شود است. از آنجایی که به طور کلی به چندین دسته تقسیم می شوند و مفصل هستند ما فقط به یک دسته به همراه مثال هایی بسنده می کنیم و بعد که به خوبی این ها را یاد گرفتید و کاربردشان را درک کردید می توانید بقیه را از سایت w3school به راحتی یاد بگیرید و برای کار خود استفاده کنید.

دسته ی مهم و پرکاربردی از selector ها، نوع ساده آن هستند که در اینها انتخاب عناصر با نام، آی دی و یا کلاس است. به عنوان مثال selector در مثال زیر p و در واقع نام است و کد زیر روی همه پاراگراف ها اجرا می شود.

<head>

<style>

P {

Text-align: center;

Color: red;

}

</style>

</head>

<body>

<p style=”color:Tomato;”>این یک پاراگراف است</p>

</body>

خروجی این کد به صورت زیر است:

css

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

#para {

  text-align: center;

  color: red;

}

<p id=”para1″>Hello World!</p>

<p>This paragraph is not affected by the style.</p>

الان خروجی این کد فقط برای عنصری که آی دی آن برابر para است اعمال می شود.

css

یا به عنوان مثال selector در مثال زیر برابر با کلاس خاصی (در این جا center) است و زمانی استفاده می شود که بخواهید دستورات بر روی یک گروه از عناصر اعمال شود. بنابراین کد زیر روی کلاس center اعمال می شود. این کلاس را شما باید در کد تعریف کرده باشید مانند زیر

<html>

<head>

<style>

.center {

  text-align: center;

  color: red;

}

<h1 class=”center”>Red and center-aligned heading</h1>

<p class=”center”>Red and center-aligned paragraph.</p>

الان خروجی این کد فقط برای عناصری که کلاس آنها برابر center است اعمال می شود.

css

همچنین در این مورد می توانید عنصر یک کلاس را مشخص کنید مثلا فقط بر روی پاراگراف ها از کلاس center اعمال شود.

p.center {

  text-align: center;

  color: red;

}

<h1 class=”center”>This heading will not be affected</h1>

<p class=”center”>This paragraph will be red and center-aligned.</p>

الان خروجی این کد فقط برای p که کلاس آن برابر center است اعمال می شود.

css

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

* {

  text-align: center;

  color: blue;

}

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>

<p id=”para1″>Me too!</p>

<p>And me!</p>

الان خروجی این کد فقط بر روی تمام عناصر اعمال می شود. 

css

در ادامه به چند دستور css مهم و پر کاربرد اشاره می کنیم

دستورات مهم و ضروری CSS

Css رنگ پیش زمینه

برای تنظیم رنگ پیش زمینه عناصر html از Css استفاده می شود مثلا می توانید رنگ کل صفحه یا رنگ مثلا فقط تیتر یا متن یا … را تعیین کنید.

به عنوان مثال: برای تعیین پیش زمینه کل صفحه (بصورت css داخلی)

<!DOCTYPE html>

<html>

<head>

<style>

Body {

Background-color: lightblue;

}

</style>

<body>

<p>this is a paragraph</p>

</body>

خروجی این کد بصورت زیر است:

css

یا به عنوان مثال برای تعیین پیش زمینه تیتر

<h1 style=”background-color:Blue;”>Hello World</h1>

 خروجی این کد به صورت زیر است:

css

یا به عنوان مثال برای تعیین پیش زمینه متن

<p style=”background-color:Tomato;”>this is a paragraph</p>

خروجی این کد به صورت زیر است:

css

دقت کنید همچنین می توانید بصورت زیر استفاده کنید (یعنی به صورت css داخلی) ولی خروجی این روی همه ی پارگراف های صفحه (در صورت استفاده از css داخلی) و روی همه ی پاراگراف های کل وب سایت (در صورت استفاده از css خارجی) اعمال می شود مگر اینکه با آی دی یا کلاس و یا روش های دیگر موارد خاصی را مشخص کرده باشید.

P{                                                                                  

                Background-color:yellow

}

یا به عنوان مثال برای تعیین پیش زمینه یک بخش

<div style=”background-color:lightblue;”>

<h2>به نام خدا</h2>

<p>this is a paragraph</p>

</div>

خروجی این کد به صورت زیر است:

css

Css رنگ متن

برای تعیین رنگ عنصر از صفت color استفاده می شود. برای تعیین رنگ متن به صورت درون خطی اول صفت style را می نویسید و بعد color را برابر رنگ مورد نظر می گذارید.

<p style=”color:red;”>this is a paragraph</p>

خروجی این کد به صورت زیر است:

css

همچنین به جای نام رنگ می توانید از دیگر فرمت ها مانند rgb، hex و … استفاده کنید به عنوان مثال

<p style=”color:rgb(255,99,71);”>this is a paragraph</p>

<p style=”color:#ff6347;”>this is a paragraph</p>

Css شفافیت (opacity)

برای تعیین شفافیت هم می توانید بصورت زیر از opacity استفاده کنید و هم می توانید از rgba استفاده کنید.

برای مثال برای تعیین شفافیت رنگ پیش زمینه پاراگراف از کد زیر استفاده می کنیم. شفافیت عددی بین 0 تا 1 است.

<p style=”background-color:Tomato; opacity: 0.3”>this is a paragraph</p>

خروجی این کد به صورت زیر است:

css

Css کشیدن مرز

شما می توانید با css مرز یک عنصر را به صورت رنگی مشخص کنید

به عنوان مثال

<h1 style=”border:2px solid Tomato;”>Hello World</h1>

خروجی این کد به صورت زیر است:

css

Css تراز بندی

برای تراز بندی متن از text-align استفاده می شود. به عنوان مثال برای ترازبندی زبان فارسی از کد زیر استفاده می شود:

<p style=”text-align:right;”>این یک پارگراف است</p>

خروجی این کد به صورت زیر است:

مثال کاربردی از ایجاد یک صفحه HTML و CSS

در مقاله HTML چیست، مثالی آوردیم و در آن یک صفحه را با استفاده از HTML دیدیم. در آنجا دیدیم که عناصر یک صفحه با استفاده از تگ های html نشان داده می شوند ولی طرح و رنگ جالبی نداشتند، همچنین متن ها به صورت چپ چین و … بود. در این جلسه با مواردی که از css یاد گرفتیم کمی می خواهیم همان صفحه را از نظر ظاهر بهتر کنیم. اگر آن مقاله را خوانده باشید در نهایت خروجی آن بصورت زیر بود:

css

در ادامه به همان کدی که برای اچ تی ام ال نوشتیم، کدهای css ای اضافه می کنیم که این صفحه از نظر ظاهری بهتر شود. اگر از ابتدای این مقاله مطالب را خوانده باشید، نیازی به توضیح این کد نیست و همه خط های آن کاملا واضح است و همان کد html است که دستورات css برای رنگ و … به آن اضافه شده است.

<!DOCTYPE html>

<html>

<head dir=”rtl” lang=”fa-IR”>

<meta charset=”UTF-8″>

<head>

<title>Page Title</title>

</head>

<body>

<h1 style=”text-align:center”;>لینک داخلی و تاثیر آن بر سئو سایت و نحوه لینک سازی داخلی</h1>

<img src=”https://rayatarh.com/wp-content/uploads/2021/02/1.jpg” alt=”لینک داخلی چیست”>

<p style=”text-align:right”;>استفاده از لینک داخلی، هم به کاربران و هم به الگوریتم های موتورهای جستجو کمک می کند تا محتوای سایت شما را راحت تر بفهمند. به عبارت دیگر، بکارگیری درست لینک های داخلی یکی از مواردی است که علاوه بر اینکه با بهبود درک بهتر کاربر از مطالب سایت، باعث رضایت کاربر (مهمترین فاکتور برای افزایش رتبه در موتورهای جستجو) می شود، همچنین استفاده ی درست از آنها باعث می شود که الگوریتم های موتورهای جستجو درک بهتری از سایت ما داشته باشند و به درستی ارتباط بین مطالب سایت ما را درک کنند و در نتیجه رفته رفته، رتبه های بالاتری را به سایت ما بدهند. در ادامه این مقاله با ما همراه باشید تا کاملا با لینک داخلی و تاثیر آن بر سئو سایت و همچنین با نحوه لینک سازی داخلی آشنا شوید. علاوه بر این ها، شما را با نکات حرفه ای در بکارگیری درست لینک های داخلی آشنا می کنیم.</p>

<h2 style=”color:blue;text-align:right”;>لینک داخلی چیست؟</h2>

<img src=”https://rayatarh.com/wp-content/uploads/2021/02/2.png” alt=”لینک داخلی چیست”>

<p style=”text-align:right”;>به طور کلی لینک داخلی (پیوند داخلی)، هر پیوندی است که شما در یکی از صفحات سایت، به یکی دیگر از صفحات همان سایت می زنید و از این طریق، به ارتباط بین این دو مطلب اشاره می کنید. زمانیکه این ارتباطات به درستی انجام شود کاربران و موتورهای جستجو می توانند مطالب سایت شما را به درستی بفهمند و به درستی در وب سایت شما قدم بردارند.</p>

<h2 style=”color:blue;text-align:right”;>نکات حرفه ای برای ایجاد لینک داخلی</h2>

<img src=”https://rayatarh.com/wp-content/uploads/2021/02/7.jpg” alt=”نکات حرفه ای لینک سازی داخلی “>

<p style=”text-align:right”;>تا اینجا با اینکه لینک داخلی چیست و همچنین چرا باید از آن استفاده کنیم و نحوه ی ایجاد لینک داخلی آشنا شدیم. اگر چه اگر همین مطالب را به صورت اصولی در سایتمان انجام دهیم، می توان علاوه بر اینکه به وب سایتمان نظم می دهیم، همچنین جایگاه های بهتری را در نتایج موتورهای جستجو کسب کنیم. اما در ادامه می خواهیم به نکات دیگری هم اشاره کنیم تا در کنار این مطالب، بتوانید به نحو مطلوبتری از لینک داخلی استفاده کنید.</p>

<h3 style=”color:blue;text-align:right”;>تعداد لینک های داخلی در صفحه</h3>

<p style=”text-align:right”;>یکی نکات مهم تأثیر گذار روی سئو، تعداد لینک داخلی در هر صفحه است. اما این به این معنی نیست که تعداد مشخصی در هر مقاله لینک داخلی باید داشته باشیم. در واقع بهترین فرمول برای انتخاب تعداد لینک های داخلی در صفحه، توجه به رضایت مخاطب و تعداد مقاله های مرتبط سایتتان است. به عبارت بهتر در هر جایی که تمایل به استفاده از لینک داخلی داشتید توجه کنید که آیا نیاز کاربر است یا خیر. البته در مواقعی در زمانیکه از تکنیک های کلاه سیاه استفاده می کنیم شرایط به گونه ی دیگری می شود!!!</P>

<h3 style=”color:blue;text-align:right”;>جایگاه لینک در صفحه</h3>

<p text-align:right”;>یکی از نکاتی که میتواند ارزش لینک شما را مشخص کند، جایگاه قرار گرفتن آن در صفحه است. این یعنی لینک داخلی که در اول مقاله قرار داده میدهید، ارزش بیشتری به صفحه مقصد منتقل میکند تا لینک های داخلی اواسط یا انتهای صفحه.</p>

<h2 style=”color:red;text-align:right”;>نتیجه گیری</h2>

<p style=”text-align:right;background-color:#e8e8e8″;>لینک های داخلی به عنوان یکی از مهمترین عواملی است که بکارگیری درست آنها می تواند ارتباط بین مفاهیم سایت را مشخص کند و در نتیجه به رفع نیاز کاربر کمک کند. به علاوه الگوریتم های موتورهای جستجو با استفاده از آنها می توانند محتوای سایت شما را بفهمند. بنابراین بکارگیری درست لینک های داخلی بر سئو سایت بسیار تاثیر گذار است. اگر سایت شما از لینک های داخلی خوبی برخوردار نیست پیشنهاد می کنیم از امروز شروع به این کار بکنید و از نتایج آن استفاده کنید.</p>

</body>

</html>

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

css
نتیجه گیری :

Css یک زبان برنامه نویسی برای بهبود ظاهر صفحات وب است و بر روی تگ های html اعمال می شود و باعث بهبود ظاهر آن ها می شود. در این مقاله به اینکه css چیست و چه مزایایی دارد پرداختیم و با دستورات ضروری آن آشنا شدیم و یک صفحه که قبلا با اچ تی ام ایجاد کرده بودیم، را با css بهبود دادیم. امیدواریم با بکارگیری درست این موارد بتوانید در کسب و کار خود بهتر عمل کنید.

CSS چیست؟

کدهای CSS دستوراتی هستند که توسط آنها تمامی خصوصیات ظاهری صفحه وب سایت مشخص می شود. با HTML ساختار یا اسکلت صفحه وب سایت پیاده سازی می شود و با کدهای CSS خصوصیات ظاهری‌ آن عناصر مشخص می شود. در واقع زمانی که با HTML تعیین می کنید که ساختار صفحه چگونه است و از چه عناصری تشکیل شده است، در CSS چگونگی نمایش طرح آن ها را مشخص می کنید. به عنوان مثال در HTML تعیین می کنید که یک متن از نوع تیتر باشد و در CSS تعیین می کنید که رنگ آن مثلا آبی باشد و …

چرا از Css استفاده کنیم؟

علاوه بر اینکه استفاده از css برای تعیین خصوصیات ظاهری عناصر html مشخص می شود و به همین دلیل مهم است، همچنین تقریبا عمده ترین مزیت و در واقع مهمترین مزیت استفاده از Css، جلوگیری از کارهای تکراری و افزایش زمان طراحی است.

چگونه می توانیم از css استفاده کنیم؟

به طور کلی به سه صورت می توانید از css استفاده کنید و در واقع به سه صورت می توانید css به کدتان اضافه کنید. 1- Css خارجی 2- Css داخلی 3- Css درون خطی

با عضویت در خبرنامه ایمیلی ما میتوانید در رشد کسب و کار خود قدم موثری بردارید!

برچسب :

مهرداد محمدیAuthor posts

Avatar for مهرداد محمدی

محمدی هستم مدیریت دکو وب متخصص در برنامه ریزی برای طراحی سایت و سئو وب سایت 17 سال زندگی فریلنسری تجربه ای عالی برای من ایجاد کرده که تو بیش از چندین الگو فعالیت کنم . همیشه به یاد داشته باشید که در دنیای خود زندگی خواهد کرد ولی در دنیای ما تجارت

بدون دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *