با ما همراه باشید

منتشر شده

در

آموزش طراحی وب صفرتاده (css – قسمت سوم)
5 (100%) 1

با سلام در خدمت شما هستیم با آموزش طراحی صفحات وب صفرتاده قسمت سوم با ما همراه باشید.

این قسمت و قسمت بعد میخوایم درباره Css صحبت کنیم. Css در کنار  html  اولین قدم برای آموزش طراحی وب سایته.

 

مقاله‌های مرتبط:

 

 

Css اصلی ترین بخش برای زیبا کردن سایته.

سی اس اس

Css به عبارت ساده برای زیبایی صفحات وب درطراحی سایت به کار میره.

با استفاده از CSS میشه تگ های html را به راحتی به استایل های مختلف در آورد. رنگ بندی و تعیین پس زمینه ، تعیین مکان و عرض و طول ، فرمت دهی font و … همگی کارهاایه که باآموزش Css می توان به راحتی آنها را برای صفحات وب سایتمون انجام بدیم.

میشه یک صفحه اینترنتی رو تو ۳ لایه دید.

۱_لایه ساختار:

باتگ ها یک ساختار ایجاد میکنیم،برای مثال میگیم که  <body> صفحمون یکسری هدر داره،یکسری پاراگراف داره،یکسری <div> و…
اینهارو به یه شکلی مشخص میکنیم.

۲_لایه محتوا:

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

مثل ویکی‌پدیا که ساختار تمام صفحاتش یکسانه ولی محتوای مختلفی داره.

۳_لایه ظاهر:

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

ساختار و محتوا درواقع همون HTML هستتد که باهاشون کار کردیم،ظاهر صفحه رو <style> های توی صفحه مشخص میکنند.ظاهری که توی Word Wide Web استفاده میشه، Css هستش که درواقع یه استانداردیه برای استایل یک صفحه.

هرتگ ساختاری توی HTML میتونه یک خواص مربوط به استایل داشته باشه.

مثلاً قبلا دیدیم که تگ <img> ما خاصیت src داشت،و تگ <a> ما خاصیت href داشت که برای لینک به کار میرفت.

یکسری مجموعه خواص وجود داره،به نام خواص استایل که میشه به هرکدوم از تگ های HTML نسبت داد.

مثل:رنگش،اندازش

کلا Css اومد برای ما این استایل هارو پیاده سازی کرده.

خواص Css یا property

من یه تگ <h1> تعریف کردم که رنگش قرمزه

}h1

;color:red
{

این یه رول یا قانون Css,یه بخش مشخص داره،که مشخص می‌کنه که من دارم درباره چی صحبت میکنم،الان من دارم درباره h1 صحبت میکنم که قراره استایلشو تغییر بدم،یعنی یه قانونی براش تعریف کنم که از اون به بعد باید با اون قانون نمایش داده بشه،به این بخش selector میگن.

حالا selector یعنی چی:یعنی اینکه روی کدوم یک از تگ های ساختاری قانون رو اعمال کنم.یه بخش تعریف داره که میگه چه چیزی رو اعمال کنم،فرضا گفتم رنگش قرمز باشه.
الان توی Css قانونی که گذاشتیم به این صورته که تمام <h1> ها رنگشون قرمز باشه.

Css(1 قسمت)

Css(cascading style sheet)

  • وراثت
  • بازنویسی آبشاری
  • نسخه ها
  • تعریف قانون
  • قانون
  • تعریف خاصیت ها

وراثت:

به این معناست که بیاییم یه تگ <h1> تعریف کنیم،بعد بیاییم توش از
تگ <p> پاراگراف استفاده کنیم،این کار معمولاً اتفاق نمی افته ولی بسته به قانون وراثت تگ <style>که برای پدرش، یعنی <h1>تعریف کنیم تگ <p> هم اون استایل رو به ارث میبره.

برای اینکه <style> رو تعریف کنیم کافیه توی قسمت <head> تگ <style> رو باز کنیم،و قانون هامونو توش بنویسیم.

<style>
h1(color:red;)
</style>

خروجی:

برای فهمیدن مفهوم وراثت توی تگ <h1> یه span مینویسیم،به این صورت:

خروجی:

بعد از اجرا تغییر رو میبیند، بازم قرمزه در صورتی که span بود و ما قانون رو برای h1 گذاشتیم و خاصیت style رو به ارث برد.

بازنویسی آبشاری:

ممکنه که شما چند تا خاصیت رو هم‌زمان به تگ ها بدید،کدوم خاصیت مورد قبول واقع میشه؟در واقع اون خاصیتی مورد قبول واقع میشه که خاص ترین شرایط رو داشته باشه.

به هرکدوم از تگ ها میشه خاصیت ID رو نسبت داد،که یه چیز یکتایه توی کل صفحه html که میتونیم با اون شناسایش کنیم.

میخوام به تگ<h1> ای دی بدم و توی<style> از ای دی برای اشاره کردن به تگ استفاده کنم.
برای این کار یه شارپ(#)اولش میزارم،اسم ای دی رو مینویسم و بهش خاصیت میدم:

#first_h1{
Color:blue;
}

الان رنگ<h1> ما آبی میشه چون اشاره کردن با ای دی خاص تر از استفاده کردن از تگ <h1> به صورت خالیه.

نسخه های css:
Css2,Css3

Css(2 قسمت )

نحوه تعریف :

  • inline

<h1 style= “color:red”>

  • internal

<style>
</style>

  • external

<link href= “page.css” rel= “stylesheet”>

مدل اول:

ما اومدیم توی<head> تگ style تعریف کردیم و شروع کردیم به استایل دادن به دو مدل دیگه میتونیم استایل هارو نسبت بدیم.
مدل اول میشه گفت ربطی به css نداره

مدل بعدی inline که توی خود تگ تعریف میشه و اولویت داره به این صورت

<h1 id:”first_h1″ style= “color:green;”>html</h1>

خروجی:

مدل internal رو که قبلا دیدیم توی <head>تعریف میکنیم و با id یاخود تگ بهش استایل میدیم.

مدلexternal یعنی یه فایلی کنار html بذاریم و css رو توی اون تعریف کنم.

یه فایل جداگانه به اسم page.css ساختم،و استایل هارو توش نوشتم و با استفاده از لینک این دو فایل رو به هم وصل کردم.

<Link href=”page.css rel=”stylesheet””/>

یه لینک از نوعstylesheet با نام page.css👆👆

خروجی ما همونه و هیچ تغییری نمیکنه.

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

css(3 قسمت)

انتخاب کننده ها:

به این شکل بودن که قانون ها  روی چه چیزهایی اعمال بشه به طور کلی میشه ۳ نوع انتخاب کننده نوشت.

  • انتخاب کننده های تگ
  • انتخاب کننده id
  • انتخاب کننده کلاس

h1,.bh#post_head{
color:red;
}

ما میتونیم برای هر element یه‌کلاس تعریف کنیم مثلا:

<h1 id:”first_h1″ style= “color:green;”>html</h1>

و توی css به این شکل بهش استایل بدید.

.green{
color:green;
}

خروجی:

فرق کلاس با ای دی:از هر ای دی توی کل وب پیجتون فقط یدونه ممکنه وجود داشته باشه،ولی از هرکلاس ممکنه چند تا توی وب پیجتون وجود داشته باشه.

انتخاب کننده های Disendent: تمام پاراگراف هایی که توی <h1> هستند فرضا رنگشون سبز باشه.

P.green{color:green;}

پاراگراف هایی که کلاس green دارن رنگشون سبز بشه.

h1.green{color:green;}

<h1> هایی که کلاس green دارند رنگشون سبز بشه.

خروجی:

سبک نوشتار (قسمت ۱)

میخوام یه استایلی به فونت های توی نوشته بدم،و کاری به ساختار نداشته باشم مثلا می‌خوام فونت نوشته هامو عوض کنم،رنگشو،سایزشو.

  • فونت

Font- family:monospace

Font-size:Larg,xsmall

Font-weight:bold,bolder

Font-style:italic

Font-decoration: روی متن خط داشته باشد

  • Color

یه نکته درباره انتخاب فونت بگم اینه که همیشه سعی کنید از فونت های استاندارد استفاده کنید،چون ممکنه فونت هایی که استفاده میکنید سمت کلاینت(کاربر)مرورگرش اون فونت رو پشتیبانی نکنه،اینطور نیست که اونو نشون نده ولی اگه اون فونت موردنظررو نداشته باشه از default استفاده میکنه.

Font-family:

خروجی:

خب میبینید که  فونت پاراگراف ما  با استفاده از فونت فامیلی تغییر کرد.

Font-size:

خروجی:

خب میبیند که با استفاده از فونت سایز،سایز پاراگراف ما تغییر کرد.

Font-weight:

خروجی:

با استفاده از Font-weight ما پاراگرافون رو بولد کردیم ویا به عبارتی درشت تر شد.

Font-style:

خروجی:

با استفاده فونت استایل،میتونیم مطالب خودمون رو ایتالیکو یا کج کنیم.

واحد های اندازه گیری در Css

  • نسبی (درصد،em،…)
  • مطلق(پیکسل،میلیمتر،…)

مرورگرها یک اندازه ی پیش فرض برای تمامی فونت ها در نظر میگیرند ، تا در زمانی که برای صفحه ی وب اندازه فونت تعیین نشده بود ، بدون مشکل فونت ها نمایش داده بشه .

در طراحی واحدهای مختلفی وجود داره اما واحدهایی که در وب بصورت استاندارد استفاده میشه px ,  em و % هست .

PX : پیکسل (pixel) واحد اندازه گیری معمول در طراحی وب هست که اکثر کدنویسان از این واحد اندازه گیری استفاده می کنند .

: Percentage واحد درصدی هست که در طراحی رسپانسیو و واکنشگرا به شدت استفاده میشه .

em : واحدی هست که اندازه آن به اندازه ی فونت پدر تگ جاری بستگی داره . به عنوان مثال اگر اندازه ی فونت یک تگ برابر با ۱۰ پیکسل باشه و اندازه فونت تگی که درون این تگ قرار داره به اندازه ی ۲em تعیین شده باشه ، اندازه ی فونت تگ فرزند دو برابر تگ پدر میشه ، یعنی ۲۰ پیکسل .

rem : مشکلی که واحد em داره اینکه سایزش نسبت به عنصر والد تعیین میشه و ممکنه دچار مشکل بشید ، برای حل این مشکل میتونید در کنار em از rem هم استفاده کنید . واحد rem هم مثل em عمل میکنه با این تفاوت که سایز فونت نسبت به سایز تعیین شده برای عنصر root مشخص میشه (مثل html , body) .

نکته : علاوه بر فونت شما میتونید از این واحد ها برای width , height , padding , margin و سایر اندازه گیری ها در css استفاده کنید .

 واحدهای اندازه گیری در وب با واحدهای اندازه گیری در چاپ متفاوت هست ، به جدول زیر دقت کنید ، در این جدول واحدهای مناسب برای هر محیط توضیح داده شده :

پیشنهاد میشه پیشنهاد نمیشه !
استفاده برای نمایش در وب em, px, % pt, cm, mm, in
استفاده برای چاپ روی کاغذ em, cm, mm, in, pt, %

در جدول زیر میتونید واحدهای اندازه گیری رو ببینید :

واحد توضیحات
% درصد
in اینچ
cm سانتی متر
mm میلی متر
em یک em یعنی اندازه کنونی سایز (که از تگ پدر ارث برده). ۲em یعنی دو برابر اندازه به ارث برده شده از تگ پدر و …
pt point ، هر ۱pt برابر است با ۱/۷۲ اینچ
px پیکسل ، یک پیکسل یک نقطه روی صفحه نمایش مانیتور محسوب میشه

قواعد نوشتن واحدها

به کد زیر دقت کنید :

در این کد ما برای فونت عنصر h1 سایز ۱۲ پیسکل رو در نظر گرفتیم . عدد و واحد اندازه گیری بدون فاصله در کنار یکدیگر قرار میگیرند .

em:عرض کاراکتر برای زمانی که اندازه فونت مورد نظر رو میدونیم

بهتره که لایه های اولیهhtml با اندازه های مطلق تعریف بشه فرضا عرض صفحه ۱۰۰۰px باشه و قسمت های درونی رو با اندازه های نسبی مقداردهی کنیم.

دلیلشم اینه که توی اندازه های مختلف نمایش html همه چیز یکسان بزرگ و کوچک بشن و نسب ها به هم نریزن.

سبک نوشتار( قسمت ۲)

دیگرخاصیت ها:

  • Text-align:جهت متن ها(سمت راست،یا چپ)
  • Line-height:ارتفاع خط ها
  • Texy-indent:مقدار عقب نشینی متن

سبک لیست ها:

در css3 ما میتونیم سبک های لیست رو تغییر بدیم یعنی،تغییرشکلشون بدیم.

انتخاب رنگ:

Color

Background color

رنگ ها در Css

  • رنگ های استاندارد
  • قرمز،سبز،آبی
  • دیگرروش ها

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

رنگ های توی مانیتور (صفحه نمایش) رواز ۳رنگ اصلی قرمز،سبز،آبی(RGB) میسازند.ورنج عددی رنگ ها ۰تا ۲۵۵ هستند .و بقیه رنگ هارو با هگزادسیمال مشخص میکنند:

#۰۰۰۰ff این عدد معرف رنگ آبی هستش.

یه فرمت دیگه ای وجود داره به اسم HSB

  • H: خود رنگ(سبز،زرد)درواقع یه طیف رنگی رو مشخص می‌کنه
  • S:چه مقدار از این رنگ وجود داشته باشه
  • B: چقدر روشن باشه مقدار صفر سیاه و مقدار ۱۰۰سفید
    (نور رنگ رو مشخص میکنه)

انتخاب کننده های سودوکلاس

  • Link
  • Visited
  • Hover

یه لینک تعریف میکنیم تو هم صفحه واین لینک ما به صورت پیش فرض رنگش آبیه
برای تغییر رنگ لینک به این صورت عمل میکنیم:

خروجی:

می‌بینید که رنگ لینک ما به قرمز تغییر کرد.

خب حالا می‌خوایم لینک پیش فرض ولینک بعد از کلیک کردن رو ببینیم به این صورت:

خروجی:

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

میم لند

برای افزودن دیدگاه کلیک کنید

یک پاسخ بگذارید

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