رفتن به نوشته‌ها

برچسب: CSS

آموزش طراحی وب – جلسه نهم

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

ID و CLASS در استایل نویسی

آیدی و کلاس دو ویژگی اصلی و کاربری در استایل نویسی می باشد که با قرار دادن آنها در برچسب های HTML می توان تغییرات ظاهری مختلفی را در آنها ایجاد کرد. یکی از مواردی که باید به آن توجه داشت این است که در سند خود مجاز به استفاده از تنها یک ID همنام و برای یک عنصر هستید. یعنی نمیتوان از یک ID برای چند برچسب استفاده کرد. اما CLASS این محدودیت را نداشته و با خیال راحت می توانید در چندین برچسب بنا به نیاز از آن استفاده کنید. یکی از ویژگی های ID استفاده از آن برای آدرس دهی می باشد که در جلسات بعدی به آن خواهم پرداخت.

تعریف ID و CLASS در برچسب

آیدی و کلاس همانطور که دارای املای منحصر به خود هستند، دارای مشخصه‌ی خاصی برای استفاده در سند CSS نیز می باشند. این مشخصه ها به ترتیب برای آیدی “#” و برای کلاس “.” می باشد. که در ادامه در مورد آنها توضیح خواهم داد.

برای اینکه بخواهید به یک برچسب با استفاده از css تغییرات دلخواه خود را اعمال کنید، ابتدا باید نحوه تعریف آیدی و کلاس را در برچسب ها بیاموزید. برای اینکار در برچسب مورد نظر (در برچسب دوطرف قسمت باز برچسب مد نظر است) با نوشتن حرف کلیدی ID یا CLASS سپس قرار دادن “=” و پس از آن قرار دادن دبل کوتیشن “” آیدی یا کلاس خود را تعریف کنید. اما برای شناسایی این برچسب و اعمال تغییرات به وسیله‌ی CSS باید نامی برای آن انتخاب کرد و آن را در دبل کوتیشنی که پس از مساوی قرار داده شده وارد کرد.

مانند:

<p class="name">
این یک پاراگراف است
</p>

همانطور که در کد بالا مشاهده می کنید. ما یک برچسب پاراگراف را ایجاد کردیم تا بتوانیم به وسیله‌ی css تغییرات خود را اعمال کنیم. چنین روشی را می توان برای تمام برچسب ها مورد استفاده قرار داد.

نکته: گاهی اوقات طراح برای صرفه جویی در وقت و همچنین کدنویسی تمیز و… به جای استفاده از روش کلاس‌دهی، از نام برچسب برای ایجاد تغییرات در CSS بهره می برد.

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

تعریف ID و CLASS در سند CSS

تعریف آیدی یا کلاس در سند CSS دارای چند نکته کلیدی است که با یادگیری آن دیگر مشکلی برای استایل نویسی حرفه‌ای نیز نخواهید داشت!

 

یک آیدی یا کلاس شامل سه قسمت:

  1. انتخابگر
  2. ویژگی
  3. مقدار

می باشد.

انتخابگر

مورد اول: همانطور که گفته شد مشخصه آیدی “#” و مشخصه کلاس “.” می باشد. این مشخصه ها در اینجا کاربرد خواهند داشت.

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

اکنون شما قسمت اول یعنی انتخابگر را درک کردید. پس برای اینکه یک آیدی یا کلاس در سند CSS تعریف شود، ابتدا “#” یا “.” قرار می گیرد سپس نامی که برای آنها در نظر گرفته اید. حال باید از کروشه باز و بسته استفاده کنید “{ }” تمام ویژگی های مربوط به یک آیدی یا کلاس درون این کروشه ها قرار می گیرند و زمانی که خارج از آنها باشد بلااستفاده و باعث ایجاد مشکلات می شود.

ویژگی و مقدار

Property یا ویژگی دارای مقدار منحصر به خود می باشند. با بکار بردن آنها در یک آیدی یا کلاس میتوان تغییراتی در برچسب های مورد نظر اعمال کرد. در تصویر بالا ما یک ویژگی با نام color داریم که مقداری برابر با green دارد. کاری که ویژگی color انجام می دهد تغییر رنگ است. برای مثال اگر برچسب پاراگراف دارای چنین ویژگی باشد، متون موجود در آن به رنگ سبز خواهند بود.

دو نکته در نوشتن ویژگی ها وجود دارد و آن استفاده از نقطه نقل و قول:” پس از نام ویژگی و نقطه ویرگول;” در انتهای دستور می باشد. همیشه باید پس از نوشتن نام ویژگی نقطه نقل و قول قرار گیرد. سپس مقدار نوشته می شود. اما قرارگیری نقطه ویرگول در انتها وابسته به دو نکته بوده، آن هم وجود بیش از یک ویزگی در یک آیدی یا کلاس. یعنی اگر تنها یک ویژگی در آیدیی یا کلاس نوشته شده باشد قرار دادن نقطه ویرگول در انتهای دستور الزامی نیست. اما اگر بیش از یک ویزگی داشته باشیم الزامی می باشد.

آموزش طراحی وب – جلسه هشتم – CSS

با جلسه هشتم از سری آموزش های طراحی تحت وب در خدمت شما دوستان هستیم. در این جلسه با بُعد دیگری از طراحی تحت وب آشنا می شوید که برای ایجاد قابلیت های مختلف از جمله زیباسازی استفاده می شود.

CSS چیست

Cascading Style Sheet یا CSS زبانی است که بصورت مستقل برای سبک دهی و ایجاد جلوه های مختلف بر روی عناصر موجود در html مورد استفاده قرار می گیرد.

حال برای اینکه بدانیم چگونه می توان از CSS برای زیباسازی سند خود استفاده کرد ابتدا باید با چگونگی فراخوانی آن در سند html آشنا شد. فراخوانی css به ۳ صورت انجام می پذیرد:

  1. سبک در خط (inline)
  2. سبک داخلی CSS
  3. سبک خارجی CSS

سبک در خط (Inline style)

ساده ترین راه برای استفاده از CSS قرار دادن آنها بصورت مستقیم در درون برچسب هاست. برای همین از این راه به عنوان درخط  یا  Inline یاد می شود. زیرا می توان تمام ویژگی های CSS را در درون خطوط HTML و برچسب ها مورد استفاده قرار داد. ساختار نوشتاری CSS در خط بصورت زیر است:

<p style="محل قرارگیری ویزگی های css">این یک پاراگراف است</p>

همانطور که در قطعه کد بالا مشاهده می کنید ما از یک برچسب p برای ایجاد پاراگراف استفاده کردیم. حال برای اینکه یک سری از ویژگی ها را با استفاده از CSS به آن اضافه کنیم، پس از نوشتن قسمت ابتدایی برچسب و ایجاد یک فاصله، از کلمه کلیدی style استفاده کردیم. این کلمه به این معنی است که ویزگی های مربوط به CSS در درون آن نوشته شده و مرورگر ملزم به اجرای آن در برچسب مورد نظر خواهد بود.

سبک داخلی  (Internal style sheet)

این راهکار حرفه ای تر از راهکار قبلی یعنی استفاده از CSS درخط می باشد. در این راه برای استفاده از ویژگی های CSS کافیست برچسب style درون برچسب head قرار گیرد تا بتوان از ویژگی های آن در سند HTML بهره برد.

<html>
<head>
<style>
محل قرار گیری ویژگی های css
</style>
</head>
<body>
</body>
</html>

تمام ویژگی های CSS با قرار گیری در برچسب style در مرورگر اجرا خواهد شد.

سبک خارجی (External style sheet)

این راهکار نسبت به راه هایی که توضیحات آن گذشت حرفه‌ای‌تر بوده و بیشتر مورد استفاده قرار می گیرد. شما نیز برای اینکه بصورت حرفه ای بتوانید کدنویسی کنید از این راه برای ایجاد ویزگی های CSS استفاده کنید.

برچسب یکطرفه link

یکی از موارد استفاده از این برچسب فراخوانی فایل CSS‌خارجی می باشد. برای اینکه بتوان یک فایل CSS را در سند HTML فراخوانی کرد به صورت زیر عمل می کنیم.

<html>
<head>
<link rel="stylesheet" type="text/css" href="filename.css">
</head>
</html>
  • rel : این کلمه مخفف relationship می باشد. از آن برای مشخص کردن ارتباط بین سند فعلی و سند لینک شده استفاده می شود.
  • type : مشخص کننده نوع فایل لینک شده می باشد.
  • href : نشانی فایل لینک شده را مشخص می کند.

ساخت سند CSS

برای این کار (در نرم افزار Notepad++) از قسمت نوار ابزار بر روی گزینه new کلیک کرده تا یک صفحه جدید گشوده شود.

سپس بدون آنکه محتوایی در آن قرار دهید از منو گزینه File و بعد بر روی Save As کلیک و در پنجره باز شده مکان ذخیره سازی سند خود را انتخاب کنید. (در اینجا من نام project را انتخاب می کنم که ار قبل ساخته بودیم) و فایل را در پوشه ذخیره کنید. نکته ای که باید به آن در زمان ذخیره سازی توجه کنید پسوند سند CSS شما می باشد. برای این کار پس از انتخاب نام برای سند خود (در اینجا من نام style را انتخاب می کنم) با قرار دادن یک نقطه “.” پس از نام، style را تایپ کرده و بر روی Save کلیک کرده تا ذخیره شود.

پس از ساخت سند، آماده می شویم برای یادگیری چگونگی کار با ویژگی های CSS که در جلسه بعدی شرح داده خواهد شد.

طراحی وب چیست

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

طراحی وب چیست

ایجاد ظاهر وبسایت (نرم‌افزار تحت وب) با بهره گیری از طراحی گرافیک که معمولا پیاده سازی آن در نرم افزارهای طراحی انجام می‌پذیرد؛ و به وسیله زبان های طراحی تحت وب یعنی HTML, CSS به فرمتی برای اجرا در مرورگر تبدیل می شود.

در تعریف بالا چند نکته مشخص شد:

  1. طراحی وب، ظاهر یک نرم‌افزار تحت وب است.
  2. طراحی وب، زبان های مخصوص به خود را دارد.
  3. طراحی وب، دو مرحله اصلی دارد.

۱- طراحی وب، ظاهر نرم‌افزار تحت وب است

آنچه بصورت بصری (دیداری) در یک نرم‌افزار تحت وب قابل مشاهده است ظاهر آن تلقی می شود. از همین رو طراحی وب، عملی برای ایجاد پوسته ظاهری نرم‌افزار تحت وب می باشد.

۲- طراحی وب، زبان های مخصوص به خود را دارد

برای یادگیری طراحی تحت وب باید زبان های مخصوص به آن را فرا گرفت. زیرا در محیط کدنویسی ایجاد می شوند. این زبان ها HTML, CSS ,JavaScript می باشند.

۳- طراحی وب، دو مرحله اصلی دارد

  • مرحله اول: طراحی گرافیک:

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

  • مرحله دوم: کدنویسی:

در این مرحله استفاده از کدنویسی برای تبدیل طرح گرافیکی به فرمت مورد نظر برای اجرا در مرورگر الزامی است.

اچ تی ام ال چیست

Hyper Text Markup Language که به اختصار HTML نامیده می شود؛ به معنی زبان نشانه گذاری ابر متن است. یک فایل متنی ساده است که به این زبان نوشته (کدنویسی) می شود و با پسوند .html ذخیره شده و برای مرورگر قابل مشاهده است. HTML ساختار و بدنه اصلی طراحی تحت وب به حساب می آید. این زبان بر اساس وجود تگ هایی از پیش تعیین شده، نوشته شده و هر یک از تگ ها معرف عملکردی خاص است.

سی اس اس چیست

Cascading Style Sheet که به اختصار CSS نامیده می شود؛ به معنی برگه سبک آبشاری است. زبانی است که بصورت مستقل برای سبک دهی و ایجاد جلوه های مختلف بر روی عناصر موجود در HTML مورد استفاده قرار می گیرد. در واقع CSS کار زیباسازی را در طراحی وب برعهده دارد.

جاوااسکریپت چیست

JavaScript که به اختصار JS نامیده می شود؛ زبانی شبه برنامه نویسی است که پویاسازی یک وبسایت را با استفاده از تغییر در عناصر بر عهده می گیرد. به این دلیل آن را یک زبان شبه برنامه نویسی می نامند چون این زبان در سمت کاربر و در مرورگر قابلیت اجرا داشته و نیازی به پایگاه داده برای ذخیره سازی، یا یک سرور برای اجرا ندارد.