آموزش جامع css

آموزش جامع css به صورت کاملا ساده رو در مطلب زیر اورده ایم تا شما استفاده کنید و لذت ببرید
CSS  مخفف ” Cascading Style Sheet” است. این آموزش هر دو نسخه CSS1، CSS2 و CSS3 را پوشش می دهد و شما را کامل با  css اشنا میکند

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

مرور اینترنت با استفاده از مرورگرهای محبوب مانند اینترنت اکسپلورر یا فایرفاکس.
توسعه وب صفحات ساده با استفاده از HTML یا XHTML.

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

سینتکس و ساختار css

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

Selector – انتخاب یک تگ HTML است که در آن یک شیء اعمال خواهد شد. این می تواند هر تگ <h1> یا <table> و غیره باشد

Property – اموال یک نوع صفت تگ HTML است. به سادگی، تمام ویژگی های HTML به خواص CSS تبدیل می شوند. آنها می توانند رنگ، مرز و غیره باشند

value – ارزش ها به خواص اختصاص داده می شوند. به عنوان مثال، اموال رنگ می تواند ارزش یا قرمز یا # F1F1F1 و غیره

شما می توانید ساختار css  را به صورت زیر قرار دهید .

 

 

https://www.tutorialspoint.com/css/images/syntax.png

روش های پیوند زدن css  با html

در اولین روش در اموزش جامع css  شما می توانید ساختار  CSS خود را در یک سند HTML با استفاده از عنصر <style> قرار دهید. این تگ در داخل برچسب <head> … </ head> قرار دارد. قوانین تعریف شده با استفاده از این نحو به تمام عناصر موجود در سند اعمال می شود. در اینجا نحو عمومی است –

در دومین روش عنصر <link> می تواند مورد استفاده قرار گیرد برای افزودن یک فایل سبک جداگانه در سند HTML شما.

ورق سبک خارجی یک فایل متنی جداگانه با پسوند .css است. شما تمام قوانین سبک را در این فایل متنی تعریف می کنید و سپس می توانید این فایل را در هر سند HTML با استفاده از المان <link> قرار دهید.

در اینجا نحو عمومی شامل فایل خارجی CSS است –

<head>

<link type = “text/css” href = “…” media = “…” />

</head>

 

رنگ پس زمینه با css

این فصل به شما یاد می دهد چگونه زمینه های مختلف عناصر HTML را تنظیم کنید. شما می توانید خواص پس زمینه زیر یک عنصر را تنظیم کنید –

خصوصیات background-color برای تعیین رنگ پس زمینه یک عنصر استفاده می شود.

خصوصیت background-image برای تعیین تصویر پس زمینه یک عنصر استفاده می شود.

ویژگی background-repeat برای کنترل تکرار یک تصویر در پس زمینه استفاده می شود.

خصوصیات background-position برای کنترل موقعیت یک تصویر در پس زمینه استفاده می شود.

خصوصیت background-attachment برای کنترل پیمایش یک تصویر در پس زمینه استفاده می شود.

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

تنظیم رنگ پس زمینه

در زیر نمونه ای است که نشان می دهد چگونه برای تنظیم رنگ پس زمینه یک عنصر.

<html>   <head>   <body>      <p style = backgroundcolor:yellow;>      This text has a yellow background color.</p>   </body>   </head><html>

 

خصوصیت font

شما می توانید ویژگی های فونت زیر یک عنصر را تنظیم کنید –

خصوصیات font-family برای تغییر چهره یک فونت استفاده می شود.

ویژگی font-style برای ایجاد فونت کج و یا تقلبی استفاده می شود.

ویژگی font-variant برای ایجاد یک اثر کوچکی استفاده می شود.

خصوصیات font-weight برای افزایش یا کاهش فونت جسورانه یا نور یک فونت ظاهر می شود.

ویژگی font-size برای افزایش یا کاهش اندازه فونت استفاده می شود.

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

خانواده فونت را تنظیم کنید

در زیر نمونه ای است که نشان می دهد نحوه تنظیم خانواده فونت یک عنصر را نشان می دهد. مقدار ممکن است می تواند هر نام خانوادگی فونت باشد.

<html>   <head>   </head>   <body>      <p style=fontfamily:georgia,garamond,serif;>      This text is rendered in either georgia, garamond, or the default serif font       depending on which font  you have at your system.      </p>   </body></html>

 

لینک ها در css

این فصل به شما می آموزد که چگونه با استفاده از CSS خواص مختلف یک پیوند فوق را تنظیم کنید. شما می توانید خواص زیر یک پیوند فوق را تنظیم کنید –

ما خواص مشابهی را دوباره خواهیم دید که ما در مورد کلاسهای شبیه سازی CSS بحث خواهیم کرد.

link: نشان دهنده پیوندهای غیرمجاز است.

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

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

active: فعال عنصری را نشان می دهد که در حال حاضر کاربر آن را کلیک می کند.

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

به یاد داشته باشید: شناور باید بعد از: لینک و a: در تعریف CSS بازدید کرد تا موثر باشد. همچنین، A: فعال باید بعد از: شناور در تعریف CSS به شرح زیر باشد:

<style type=”text/css”>   a:link {color: #000000}   a:visited {color: #006600}   a:hover {color: #FFCC00}   a:active {color: #FF00CC}</style>

Table  ها در css

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

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

border-spacingعرض را مشخص می کند که باید بین سلول های جدول ظاهر شود.

caption-side ر سمت چپ در عنصر <caption> ارائه شده است. به طور پیشفرض، اینها در بالای جدول در سند قرار می گیرند. شما از اموال سمت چپ برای کنترل قرار دادن عنوان جدول استفاده می کنید.

empty-cells مشخص می کنند که اگر یک سلول خالی باشد، مرز باید نشان داده شود.
table-layoutاجازه می دهد تا مرورگرها با استفاده از خواص عرض اول آن برای بقیه ستون به سرعت از طرح جدول

استفاده کنند، نه اینکه بارگذاری کل جدول قبل از رندر کردن آن.

در حال حاضر، ما خواهیم دید که چگونه از این خواص با نمونه استفاده کنید.
مرز سقوط املاک:

Margin

عنصر حاشیه فضای اطراف یک عنصر HTML را تعریف می کند. امکان استفاده از مقادیر منفی برای همپوش شدن با محتوا وجود دارد.

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

ما دارای خواص زیر برای تنظیم حاشیه عنصر.

margin یک مشخصه کوتاه برای تنظیم خصوصیات حاشیه در یک اعلامیه مشخص می کند.

margin-bottom مشخص حاشیه پایین یک عنصر را مشخص می کند.

margin-top حاشیه بالا یک عنصر را مشخص می کند.

margin-left حاشیه چپ عنصر را مشخص می کند.

margin-right حاشیه سمت راست یک عنصر را مشخص می کند

 

Padding  در css

خصوصیت padding به شما اجازه می دهد تا مشخص کنید چقدر فضای بین محتوای یک عنصر و مرز آن ظاهر می شود –

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

خواص CSS زیر می تواند برای کنترل لیست ها استفاده شود. شما همچنین می توانید مقادیر مختلف برای padding در هر طرف جعبه را با استفاده از خواص زیر تنظیم کنید –

زیرپوشش-پایین مشخصی از لایه پایین یک عنصر را مشخص می کند.

padding-top پدینگ بالا یک عنصر را مشخص می کند.

padding-leftچپ حاشیه چپ یک عنصر را مشخص می کند.

padding-right مشخص padding سمت راست یک عنصر را مشخص می کند.

Padding به عنوان مقدمه برای خواص قبلی عمل می کند.

همچنین برای کامل شدن اطلاعات شما در css   پی دی اف زیر راه تهیه کردیم

آموزش جامع css

پاسخ دهید

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