جلسه ی نهم : استایل های جامع CSS

استایل ها در CSSدر جلسه ی پیش با تگ های جامع HTML ونحوه ی کار با آن ها تا حدودی آشنا شدید ( برای دیدن آموزش مورد نظر کلیک کنید ). در این جلسه می خواهیم استایل های پر کاربرد در CSS را به شما دوستان عزیز آموزش دهیم. اما قبل از آن باید کد نویسی در زبان CSS را یاد بگیرید.

کد نویسی در زبان CSS

در آموزش قبلی با نحوه ی کد نوشتن در زبان HTML آشنا شدید حال اگر بخواهیم در زبان CSS کد بنویسیم کافیست از نزدیک ترین کلاس مورد نظر خود به آن تگ را آدرس دهی نماییم.

برای اینکه زبان CSS متوجه شود کلمه ای که ما می نویسیم یک تگ می باشد یا یک کلاس از نشانه ی نقطه ( . ) استفاده می کنیم. اگر بخواهیم نام یک کلاس را بنویسیم ابتدا یک نقطه می گذاریم سپس نام کلاس مورد نظر خود را می نویسیم. برای فهم بیشتر به کد زیر توجه کنید:


.classname {

style-name:value

}

نکته : نام کلاس را بدون فاصله می نویسیم زیرا اگر در فایل CSS فاصله بیاندازیم قسمت جدا شده دیگر جزء نام کلاس نخواهد بود .

اطلاعات کامل تر

آموزش بالا فقط برای نوشتن استایل یک کلاس می باشد اما اگر بخواهیم برای یک تگ درون یک کلاس استایل بنویسیم چه باید بکنیم؟؟؟

راه حل

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

برای اینکه به یک تگ که داخل یک کلاس قرار دارد بخواهیم استایل بدهیم کافیست ابتدا یک نقطه بگذاریم سپس نام کلاس مورد نظر خود را بنویسیم سپس یک فاصله می اندازیم و نام تگ مورد نظر خود را می نویسیم، برای فهم بیشتر به نمونه کد زیر توجه کنید:


.classname tag {

style-name:value

}

نکته: برای جدا سازی استایل های CSS از کاما ( ; ) استفاده می کنیم.

نکته: بعد از اینکه نام استایل مورد نظر خود را نوشتیم کافیست یک دونقطه ( : ) گذاشته سپس مقدار مورد نظر خود را در مقابل آن بنویسیم.

استایل های مهم زبان CSS

استایل Color

به جد می توان گفت مهم تریم استایل در زبان CSS استایل Color می باشد، کار این استایل تعیین رنگ متن مورد نظر ما می باشد. برای مثال می خواهیم رنگ سر فصل ( Heading 1 ) کلاس مورد نظر خود را عوض کنیم. به نمونه کد های زیر توجه کنید:

کدهای HTML:



<div class="classname">


<h1>این سر فصل به رنگ آبی می باشد</h1>


</div>


کد های CSS:


.classname h1 {

color:blue

}

خروجی کد بالا:

تگ h1به همراه متد color

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

Name: نام رنگ مورد نظر خود را می نویسیم مانند کد زیر:

color:blue

RGB: این کلمه مخفف کلمه ی red، green، blue می باشد که رنگ مورد نظر ما را با استفاده از ترکیب این رنگ ها مشخص می کند. مانند کد زیر:

color:rgb(7, 46, 135)

HEX: کد رنگ ها به صورت هگزا دسیمال (ترکیبی از اعداد و حروف به همراه #) نوشته می شوند. به کد زیر توجه کنید:

color:#01579b

معرفی سایت

شاید با خود فکر کنید که طراحان وب تمامی کد های رنگی را که به صورت HEX می باشند حفظ هستند ( درسته با رباتا کار میکنیم اما خودمون که ربات نیسیتم 🙂 ). این باوری غلط می باشد، معمولا ما از سایت های متفاوتی برای این کد های رنگی استفاده می کنیم اما من به شخصه سایت materialpalette پیشنهاد می کنم که با کلیک بر روی متن پایانی می توانید وارد آن سایت شوید. ( برای ورود به سایت کلیک کنید )

 

استایل background

از طریق استایل background می توان پس زمینه ی سایت، متن و غیره را می توان تغییر داد. این استایل دارای هشت attribute می باشد.

نام attribute های background به صورت زیر می باشد:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-size
  5. background-attachment
  6. background-position
  7. background-origin
  8. background-clip

 

ویژگی background-color­­

خب حالا که با استایل color آشنا شده اید می دانید که چگونه می توان رنگ یک نوشته را در متن عوض کرد اما اگر بخواهیم رنگ پس زمینه ی متن خود را عوض کنیم چه کار باید کرد ؟؟؟

راه حل

اگر بخواهیم که رنگ پس زمینه را تعویض نماییم کافیست از ویژگی background-color استفاده نماییم. به کد های زیر توجه کنید:

کد HTML:


<div class="classname">

<h1>این سر فصل به رنگ آبی می باشد</h1>

</div>

کد CSS:


.classname h1 {

color: blue;

background-color: #BDBDBD;

}

خروجی کد بالا:

تگ h1 به همراه متد color و background

 

ویژگی background-image

با استفاده از ویژگی background-image می توانید به صفحه ی اصلی یا به دیگر مکان های وب سایت خود یک پس زمینه به صورت عکس اضافه کنید یعنی به جای اینکه از رنگ ها استفاده کنید از عکس های مورد نظر خود استفاده کنید. به نمونه کد زیر توجه نمایید:

کد HTML:


<div class="classname">

<h1>این سر فصل به رنگ آبی می باشد</h1>

</div>

کد CSS:


.classname h1 {

color: blue;

background-image: url('image/img.jpg');

}

خروجی کد:

تگ h1 به همراه متد color و متد background-image

ویژگی background-repeat

شاید عکسی که شما برای پس زمینه ی سایت خود استفاده کرده اید از لحاظ اندازه خیلی کوچک یا خیلی بزرگ باشد، در این صورت شاید شما بخواهید این عکس تکرار نشود یا در راستای فقط عمودی یا فقط افقی تکرار شود در این صورت شما باید از ویژگی background-repeat استفاده نمایید. به نمونه کد های زیر توجه کنید:

کد زیر برای این است که عکس ما تکرار نشود:


background-repeat: no-repeat;

کد زیر برای این است که عکس ما در به صورت افقی تکرار شود:


background-repeat: repeat-x;

کد زیر برای این است که عکس ما در به صورت عمودی تکرار شود:


background-repeat: repeat-y;

شاید به این فکر کنید که اگر ما بخواهیم عکس ما از هر دو طرف تکرار شود چه باید بکنیم؟؟؟ باید بگویم که در حالت پیشفرض وقتی شما عکسی را به عنوان پس زمینه در نظر می گیرید این عکس از هر دو طرف تکرار می شود.

 

ویژگی background-size

از ویژگی background-size برای تنظیم سایز عکس مورد نظر خود استفاده می کنیم در گذشته ما باید قبل از آپلود عکس اندازه ی آن را تغییر می دادیم سپس عکس را آپلود می کردیم اما امروزه به کمک این ویژگی می توانیم اندازه ی عکس را به عکس دلخواه خود تنها با تغییر یک خط کد انجام دهیم. ( این یعنی پیشرفت ) به نمونه کد زیر توجه کنید:


background-size: 20px 15px

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

نکته: اولین عدد اندازه ی افقی عکس ( در راستای x ) می باشد و عدد دوم اندازه ی عمودی ( در راستای y ) عکس می باشد.

 

ویژگی background-attachment

از ویژگی background-attachment برای این استفاده می شود تا پس زمینه ی ما با اسکرول شدن صفحه جا به جا شود که در حالت پیشفرض بر روی اسکرول قرار دارد. ( یعنی اگر صفحه را بالا پایین کنیم عکی ما نیز بالا پایین می شود 🙂 ) به نمونه کد های زیر توجه کنید:

کد برای ثابت بودن عکس:


background-attachment: fixed;

کد برای اسکرول شدن عکس:


background-attachment: scroll;

ویژگی background-position

از ویژگی background-position برای تعیین مکان عکس در صفحه استفاده می شود معمولا بعد از اینکه از  ویژگی background-attachment استفاده می کنیم و عکس خود را ثابت می نماییم از این ویژگی استفاده می کنیم.

حال شاید شما به این بیاندیشید که چگونه می توان مکان عکس را مشخص کرد؟؟؟ برای تعیین مکان عکس سه راه وجود دارد:

راه اول

تعیین مکان عکس به کمک جهت ها به صورتی که اولین پارامتر در راستای محور Xها و پارامتر دوم در راستای محور Yها، برای فهم بیشتر به مثال زیر توجه کنید:


background-position: left top

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

Left( چپ )

Top( بالا )

Right( راست )

Bottom( پایین )

نکته: هر مقداری که مشخص نشود به صورت پیشفرض به جای آن Center ( وسط ) قرار می گیرد.

راه دوم

به صورت درصدی مکان عکس را مشخص میکنیم تا دقیق تر باشد مقدار اول مکان افقی و مقدار دوم مکان عمودی را مشخص می کند. گوشه بالا سمت چپ، ۰% ۰% است و گوشه پایین سمت راست ۱۰۰% ۱۰۰% است. اگر تنها یک مقدار را مشخص نمایید، قسمت دوم با مقدار “۵۰%” تنظیم خواهد شد و مقدار پیشفرض آن بر روی ۰% ۰% قرار دارد. به نمونه کد زیر توجه کنید:


background-position: 50% 50%

راه سوم

برای اینکه کاملا به صورت دقیق مشخص شود مکان عکس را به وسیله ی pxها تعیین می کنیم. مقدار اول مکان افقی و مقدار دوم مکان عمودی را مشخص می کند، گوشه بالا سمت چپ، px0 px0 است. واحد اعداد می تواند پیکسل یا هر واحد دیگری در CSS باشد (در زبان CSS فقط از پیکسل یا درصد استفاده نمی شود و واحد های متفاوتی وجود دارد که در آینده به آن ها اشاره می نماییم). اگر تنها یک مقدار را مشخص نمایید، قسمت دوم به صورت پیشفرض بر روی مقدار ۵۰% قرار خواهد گرفت.


background-position: 120px 100px

ویژگی background-origin

از ویژگی از ویژگی background-position برای تعیین مکان عکس در صفحه استفاده می شود برای محل قرار گرفتن پس زمینه استفاده می شود اما استفاده از این ویژگی نیاز به کد نویسی دارد و شما باید مفاهیمی مثل content-box، padding-box، border-box را بدانید و با استفاده از این مفا هیم مکان عکس مورد نظر خود را تعیین کنید.

متد background-origin

به عکس بالا توجه کنید متوجه می شوید نام هایی که در بالا نام بردیم هر یک کدام بخش از نوشته ی ما می باشند. برای فهم بیشتر به کد زیر توجه کنید:


background-origin: content-box;

ویژگی background-clip

ویژگی background-clip ناحیه رنگ آمیزی پس زمینه را مشخص می کند و نحوه ی کد نویسی آن نیز مانند ویژگی بالا (ویژگی background-origin) می باشد

 

استایل Font

فونت چیست؟؟

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

فونت ها انواع مختلفی دارند و هر کدام از آن ها دارای ویژگی های خاص خود می باشند. برای مثال در فونت نستعلیق تمامی حروف به صورت بلند، کشیده و زیبا می باشد اما در فونت تاهوما (فونت مورد استفاده در ویندوز شما) کلمات به صورت خوانا و ساده می باشند.

نام attribute های Font به صورت زیر می باشد:

  1. font-family
  2. font-style
  3. font-weight
  4. font-size
  5. font-color
  6. font-variant

 

ویژگی Font-family

از ویژگی Font-family برای تعیین فونت مورد نظر برای عناصر وب سایت خود استفاده می کنیم. این خاصیت یک حالت مانند پشتیبان دارد، در صورتی که مرورگر مورد نظر از نوع حروف (فونت) اولی پشتیبانی نکرد، در آن صورت فونت بعدی را امتحان خواهد کرد و اگر باز هم قابل پشتیبانی نبود به فونت بعدی مراجعه می نماید. (البته اگر از فونت های معروفی مانند ایران سنس استفاده کنید در همه مرورگر ها پشتیبانی خواهند شد) به نمونه کد زیر توجه کنید:


font-family: "sans-serif" ، "IRANSans، tahoma" ;

ویژگی Font-style

از ویژگی Font-style برای حالت دادن به فونت استفاده می شود که دارای سه حالت می باشد.

Normal: در این ویژگی متن به صورت عادی نمایش داده می شود. به کد زیر توجه کنید:


font-style: normal;

Italic: در این ویژگی متن به صورت خوابیده (کج) نشان داده می شود. به کد زیر توجه کنید:


font-style: italic;

Oblique: در این ویژگی نوشته و حروف درست مشابه italicا کج می شوند (از این ویژگی بیشر برای شبیه سازی حالت italic استفاده می کنیم)


font-style: oblique;

ویژگی Font-weight

برای تنظیم ضخامت متن مورد نظرمان از ویژگی Font-weight استفاده می کنیم. به مثال های زیر توجه کنید:

کد های HTML:


<h1 class="normal">این متن یک عنوان می باشد</h1>

<h1 class="thick">این متن یک عنوان می باشد</h1>

<h1 class="thicker">این متن یک عنوان می باشد</h1>

کد های CSS:


body{

background-color: #80deea

}

h1.normal {font-weight:normal;}

h1.thick {font-weight:bold;}

h1.thicker {font-weight:900;}

خروجی کد بالا:

تگ h1 تگ p متد Font-weight

 

ویژگی Font-size

از ویژگی Font-size برای تغییر اندازه ی فونت خود استفاده می کنیم. برای مثال می توانیم اندازه یک متن را بزرگ یا کوچک نماییم. البته یادتان باشد که تگ های Heading و تگ p دارای اندازه ی مشخصی می باشند و در صورت نیاز آن ها را تغییر می دهیم. به نمونه کد زیر توجه کنید:


font-size: 40px;

ویژگی Font-color

از ویژگی Font-color برای رنگ بخشیدن به متن مورد نظر خود استفاده می کنیم. البته این استایل استاندارد نمی باشد و ممکن است در بعضی از مرورگر ها با این استایل به مشکل بخورید. (بهتر است از استایل color استفاده کنید)

 

ویژگی Font-variant

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


font-variant: small-caps;

هر گاه از small-caps استفاده کنیم تمامی حروف کوچک به بزرگ تبدیل می شوند.

 

به طور کلی می توان از استایل Font مانند کد زیر استفاده کرد:

کد HTML:


<p>این یک پاراگراف با فونت ۳۰pxوبه حالت برجسته و دارای small-caps می باشد</p>

کد CSS:


body {

background-color: #80deea;

}

p {

font: 30px bold;

font-variant: small-caps;

}

خروجی کد:

small caps

خلاصه مطلب:

  1. برای استایل دادن به یک تگ داخل یک کلاس کافیست ابتدا یک نقطه بگذاریم سپس نام کلاس مورد نظر خود را بنویسیم سپس یک فاصله می اندازیم و نام تگ مورد نظر خود را می نویسیم.
  2. از استایل Color برای تعیین رنگ متن خود استفاده می کنیم.
  3. از طریق استایل background می توانیم پس زمینه ی سایت مان را تغییر دهیم.
  4. از ویژگی background-color برای تغییر رنگ پس زمینه استفاده می کنیم.
  5. از ویژگی background-image برای قرار دادن عکس در پس زمینه استفاده می کنیم.
  6. از ویژگی background-repeat برای نحوه ی تکرار عکس ها در پس زمینه استفاده می کنیم.
  7. از ویژگی background-size برای تنظیم سایز عکس مورد نظر خود استفاده می کنیم.
  8. از ویژگی background-attachment برای این استفاده می شود تا پس زمینه ی ما با اسکرول شدن صفحه جا به جا شود.
  9. از ویژگی background-position برای تعیین مکان عکس در صفحه استفاده می شود.
  10. از ویژگی از ویژگی background-position برای تعیین مکان عکس در صفحه استفاده می شود.
  11. ویژگی background-clip ناحیه رنگ آمیزی پس زمینه را مشخص می کند.
  12. به مجموعه حروفی که با رابطه‌ های گرافیکی تصویر نوشتاری یک زبان را نشان می‌دهند فونت گفته می ‌شود.
  13. از ویژگی Font-family برای تعیین فونت مورد نظر برای عناصر وب سایت خود استفاده می کنیم.
  14. ویژگی Font-family حالتی مانند یک پشتیبان دارد، در صورتی که مرورگر مورد نظر از نوع حروف (فونت) اولی پشتیبانی نکرد، در آن صورت فونت بعدی را امتحان خواهد کرد.
  15. از ویژگی Font-style برای حالت دادن به فونت استفاده می شود.
  16. برای حالت دادن به ویژگی Font-style از سه حالت normal، Italic، Oblique استفاده می کنیم.
  17. برای تنظیم ضخامت متن مورد نظرمان از ویژگی Font-weight استفاده می کنیم.
  18. از ویژگی Font-size برای تغییر اندازه ی فونت خود استفاده می کنیم.
  19. از ویژگی Font-color برای رنگ بخشیدن به متن مورد نظر خود استفاده می کنیم. البته این استایل استاندارد نمی باشد.
  20. به وسیله ی ویژگی Font-variant ما می توانیم تمام حروف کوچک موجود در متن مورد نظر خود را به صورت حرف بزرگ نمایش دهیم.

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

ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها