
این مقاله جامع آموزش CSS رایگان برای دید پیدا کردن شما عزیزان به دنیای طراحی وب و شروع یادگیری CSS است. اما اگر می خواهید در طراحی وب بی رقیب شوید و نیاز به منبعی رایگان و کامل برای آموزش HTML یا آموزش CSS داشتید می توانید از لینک های زیر نیز استفاده کنید :
خوشبختانه تا حالا تونستم دوره آموزش گام به گام HTML رو بخوبی تکمیل کنم. امیدوارم تا آخر با این آموزش در خدمت شما باشم. پیش نیاز های این دوره، آموزش گام به گام HTML می باشد. خب حرف زدن کافیه، بریم سر اصل مطلب.CSS یک زبان برنامه نویسی طراحی وب برای تشریح و تولید استایل یک فایل HTML است.
توسط این قابلیت می توانید که تعیین کنید یک جز در HTML به چه شکلی به نمایش گذاشته شود.CSS مخفف کلمات Cascading Style Sheets به معنی شیوه نامه آبشاری است. CSS از تکرار کارهای بسیاری جلوگیری می کند. مثلا توسط CSS شما فقط یکبار تعیین می کنید مقدار عناوین چه رنگی و یا با چه اندازه ای باشد.
اجزای استاندارد یک دستور CSS:
یک مثال کلی:
H1 { color:red font-size=12px; }
H1 در نقش Selector | Color:red; در نقش Delecration – Color | 12px در نقش Value
Selector های CSS به دو صورت Element Selector , ID – Class Selector هستند:
/* --------- */
قرار دهیم.
برای آنکه کدهای CSS را به یک فایل HTML ارتباط دهیم سه راه متفاوت وجود دارد:
External Style Sheet: اولین و استانداردترین راه استفاده از CSS استفاده از فایل CSS خارجی است. معمولا وقتی پروژه طراحی سایت بزرگ باشد از این راه استفاده می کنند. فایل CSS معمولا style.css نام گذاری می شود و در همان پوشه ای قرار می گیرد که فایلهای HTML قرار دارند. شیوه اتصال فایل CSS خارجی به یک فایل HTML استفاده از تگ link درون تگ Head می باشد. این تگ به صورت زیر استفاده می شود:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
Internal Style Sheet: یکی دیگر از راههای استفاده از دستورات CSS در فایل HTML به صورت تگ داخلی است. بدین صورت که هر دستوری که در CSS می خواهید اعمال شود را بین تگ style قرار دهید. این تگ به صورت زیر استفاده می شود:
<head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head>
Inline Style: اگر بخواهیم صرفا به یک تگ خاص در بین تگ های مشابه استایل دهیم از این حالت استفاده می کنیم. تمام المنت ها در HTML دارای خاصیت style است که مقدار آن برابر دستورهای CSS است. این تگ به صورت زیر استفاده می شود:
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
این سه راه تنها راههای موجود برای ارتباط فایل CSS با HTML است.
رنگ ها : در CSS سه راه متفاوت برای تعیین رنگ یک المنت وجود دارد:
نام رنگ: آسانترین راه برای تعیین رنگ یک المنت استفاده از نام رنگ است، البته طراحان حرفه ای هیچوقت دست به همچنین کاری نمی زنند زیرا که تعداد رنگ ها محدود بوده و تنها 140 رنگ استاندارد برای اینکار وجود دارد. در دستور زیر هر متنی که مطعلق به تگ p باشد به رنگ قرمز درآمده است.
p { color:red; }
کد RGB: این کد تلفیقی از رنگ های قرمز، سبز و آبی را به ما نشان می دهد. مقدار هر رنگ می تواند بین 0 تا 255 باشد. برای مثال اگر مقدار اولی برابر 255 ، دومی برابر 0 و سومی برابر 0 باشد رنگ خروجی قرمز است.
p { color:rgb(255,0,0); }
کد HEX: این کدها نیز تلفیقی از رنگ های قرمز، سبز و آبی است با این تفاوت که عددگذاری مربوط به این کد از نوع هگزادسیمال است. از 0 شروع و به f خاتمه می یابد. اگر مقدار اولی برابر f و مقدار دومی و سومی برابر 0 باشد رنگ خروجی قرمز است.
p { color:#ff0000; }
پشت زمینه ها : توسط خواص پشت زمینه، می توانید برای یک المنت از صفحه وب پشت زمینه تعریف کنید. پشت زمینه ها به چند نوع تقسیم می شود:
background-color: یکی از مهمترین خاصیت ها در CSS استفاده از رنگ در پشت زمینه است. همانطور که گفتم برای استفاده از رنگ در CSS سه راه متفاوت وجود دارد، هر کدام از این مقادیر را می توانید به background-color تخصیص بدید.
body { background-color:red; } h1 { background-color:rgb(255,0,0); } p { background-color:#ff0000; }
background-image: جدای از رنگ می توانید تصویری را به عنوان پشت زمینه نسبت داد. برای اینکار معمولا از تصاویر موسوم به Pattern استفاده می کنند.
body { background-image: url(1.jpg); }
url یکی از خاصیت های background-image است که مشخص می کند تصویر در چه آدرسی قرار دارد.
body { background-position:right top; }
زمانی که طول صفحه را مجبور باشید اسکرول کنید بعضی اوقات تصویر پیش زمینه محو می شود. این بدلیل آنست که تصویر پیش زمینه به صورت ثابت در جای خود قرار نگرفته، در واقع این تصویر فقط در یک مکان قرار دارد. برای آنکه مکان یک تصویر را ثابت نگه داریم باید دستور زیر را به المنت مورد نظر اعمال کنیم.
background-attachment:fixed;
یک ویژگی بسیار جالب : دستورات مبتنی بر background را می توانید به صورت کوتاه بنویسید. به مثال زیر توجه کنید:
body { background: #ffffff url("img_tree.png") no-repeat right top; }
بجای نوشتن دستور background-color , image , repeat , position می توانید از این شیوه دستور نویسی استفاده کنید.
در جلسات پیش تا حدی با شیوه نوشتن دستورات CSS آشنا شدید و با رنگ ها و پشت زمینه ها نیز آشنایی پیدا کردید، در جلسه امروز می خواهیم شیوه استفاده از Border و حاشیه ها در CSS را فرا بگیریم. حاشیه از جمله مهمترین المنت ها و اجزای یک صفحه وب است، توسط یک حاشیه می توانید حیطه فعالیت یک متن، تصویر و... را مشخص کنید.
همچنین برای جلوگیری از شلوغ شدن یک صفحه وب باید از حاشیه ها استفاده کنیم، توضیحات کافی است بریم سروقت دستورات:به صورت کلی حاشیه ها می توانند از چهار جهت وجود داشته باشند، همچنین می توان فقط از یک طرف باشند. کنترل چگونگی نمایش حاشیه ها نیز در دستان شماست.
روش استفاده از این مقادیر بسیار آسان است، کافی است مقدار border-style مربوط به یک المنت را برابر مقادیر بالا در نظر بگیرید. به این دستور توجه کنید:
p { border-style:outset; }
آخرین حالت و در عین حال جالبترین حالت حاشیه ها از نوع mix است، این حالت باعث می شود کنترل کاملی روی تمام جهت های حاشیه داشته باشید.
p { border-style: double dashed solid dotted; }
مقادیر به ترتیب، بالا، راست، پایین و چپ می باشد.
p { width:auto; height:100px; border-style:solid; border-width: 2px; }
p { width:auto; height:100px; border-style:solid; border-width: 2px 2px 2px 10px; }
p { border-style:solid; border-color: blue red green black; }
کوتاه کردن اجزای دستور border: اگر بخواهیم حاشیه ای از نوع نقطه ای، با رنگ سبز و اندازه 5 پیکسل سه دستور جداگانه برای هر کدام از آنها بنویسید اما یکی راه دیگر همیشه وجود دارد، به تفاوت دو دستور زیر توجه کنید:
p { border-style: dotted; border-color: #00ff00; border-width: 5px; }
p { border: dotted #00ff00 5px; }
اگر توجه داشته باشید در درس قبل هم این قضیه برای دستور background وجود داشت. اعمال محدودیت در حاشیه ها: وقتی برای المنتی حاشیه می سازید، این حاشیه در چهار طرف اعمال می شود. اما اگر بخواهیم صرفا یک طرف المنت حاشیه داشته باشد چه؟ کافی است بجای استفاده از border-style از border - left right top bottom استفاده کنید. به مثال زیر توجه کنید.
p { border-left:solid 5px #ff00ff; }
یک اشتباه بزرگ: بعضی از دوستان بجای استفاده از حالت mix در broder-style به هر کدام از جهت های حاشیه به جدای استایل می دهند، مثال زیر اشتباه است:
p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; }
مثال زیر درست است:
p{ border-style: dotted dashed solid double; }
p { border: 2px solid red; border-radius: 5px; }
در قسمت قبل به صورت کامل راجب به حاشیه ها صحبت کردیم؛ در این آموزش می خواهیم کنترل فواصل المنت ها در یک صفحه وب را با margin , padding فرا بگیریم.
برای استفاده از این دستور باید به المنت مورد نظر استایل زیر را داد:
p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; }
همچنین مانند بقیه دستورها می توانید مقادیر را فشرده تر بنویسید، به مثال زیر توجه کنید:
p { margin: 100px 150px 100px 80px; }
div.container { border: 1px solid red; margin-left: 100px; } p.one { margin-left: inherit; }
توجه کنید یکی از بلاک های داخل div توسط دستور margin-left 100 پیکسل مقداردهی شده منظورم بلاک container است، حال اگر یکی دیگر از بخش های div توسط دستور margin-left با inherit مقداردهی شود مقدار عددی آن 100 پیکسل خواهد بود.
مقدار دهی این دستور هم کاملا شبیه دستور margin است، هم می شود به صورت جدا به هر یک از جهات فاصله داد هم می توانید توسط دستور padding چهار مقدار بالا، راست، پایین و چپ را بدهید. به مثال های زیر توجه کنید:
p { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; }
و
p { padding: 50px 30px 50px 80px; }
p { width:400px; height:100px; background:#ffff00; }
و
p { width:50%; height:100px; background:#ffff00; }
مقدار auto برابر همان 100% است، در صورتی کهwidth با این دو مقدار، مقداردهی شود، عرض المنت تمام صفحه مرورگر را در بر می گیرد.
div { max-width: 500px; height: 100px; background-color: powderblue; }
پس از کار با حاشیه ها و تعیین فاصله یکی دیگر از دستورهای مهم، دستورات مربوط به متون است، چگونه می توان متون را کنترل کرد، رنگ، فونت و... . پس بریم سروقت آموزش!
p { color: #ffaaee }
h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; } h4 { text-align: justify; }
نکته: حالت justify باعث می شود که متون دقیقا هم تراز باشند.
h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; }
حالت اول خطی در بالای متن نمایش داده می شود، حالت دوم خط روی متن قرار می گیرد و حالت آخر، خط زیر متن.
p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; }
Text Indentation: برای تعیین فاصله اولین خط با گوشه صفحه استفاده می شود. فاصله آن معمولا 50 پیکسل است اما شما می توانید هر مقدار دوست دارید به آن بدهید، برای آنکه پاراگراف هایتان بهتر دیده شود حتما از این امکان استفاده کنید.
p { text-indent: 50px; }
h1{ letter-spacing: 3px; } h2{ letter-spacing: -3px; }
h1 { word-spacing: 10px; } h2 { word-spacing: -5px; }
div { direction: rtl; }
در جلسه قبل در رابطه با استایل های متون در CSS صحبت کردیم دانستیم که چگونه میتوان به راحتی یک متن را آنچنان که دوست داریم نمایش دهیم. ولی یکی از مهمترین استایل های متن فونت مربوط به متن است. فونت از اجزای کلیدی یک صفحه وب محسوب می شود. در HTML ورژن ۵ به پایین اینکار توسط خود HTML امکانپذیر بود اما با ظهور HTML5 این امکان حذف شد.حال برای آنکه بهتر با این خاصیت ها در CSS آشنا شویدبا ما همراه باشید:
p { font-family: "Times New Roman", Times, serif; }
نکته مهم: در صورتی که نام فونت بیشتر از یک کلمه باشد باید آن فونت را در میان کوتیشن "” قرار دهید. مثل Times New Roman .
اگر تعداد فونت ها از یک عدد بیشتر بود با , کاما از همدیگر باید جدا شوند.
p{ font-style: normal; } p{ font-style: italic; } p{ font-style: oblique; }
واحد مقدار دهی این خاصیت px , em است. اما چه مواقعی بهتر است از کدام واحد استفاده کنیم!؟
h1 { font-size: 16px; }
h1 { font-size: 2.5em; /* 40px/16=2.5em */ }
h1 { font-weight: bold; } h2 { font-weight: 800; }
لینک ها : در جلسه گذشته به طور کامل درباره خاصیت font در CSS ورژن ۲ آموختیم. امروز می خواهیم در رابطه به لینک ها , حالت های لینک و استایل های لینک مطالبی بیاموزیم. خب به صورت کلی تمام خاصیت هایی که در CSS برای متون قابل استفاده است (مثل رنگ, سایز و..)در اینجا نیز کاربرد دارد. اما مهمترین نکته این تگ حالت های آنست. برای مثال می توانید کنترل کنید که اگر ماوس روی لینک کلیک کرد چه اتفاقی بیفتد یا اگر ماوس hover شد. به طور کلی چهار رویداد وجود دارد که می توانید در زیر هر کدام از آنها را مشاهده کنید:
/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; }
برای آنکه متن از حالت زیرخط دار خارج شود باید مقدار خاصیت را برابر none قرار دهید.
a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; }
لیست ها: لیست ها از جمله مهمترین اجزای یک صفحه وب به منظور لیست بندی چندین آیتم به کار می رود. برای مثال فهرست مربوط به یک وبسایت را لیست ها می سازند.
یاددآوری: به صورت کلی دو نوع لیست وجود دارد:
List-Style-type: یکی از استایلهایی که یک لیست می تواند بگیرد نوع نمایش لیست هاست. این مقادیر در لیست های مرتب و نامرتب متفاوت است. مثال زیر مربوط به مقادیر این خاصیت برای لیست مرتب است:
ol { list-style-type:lower-roman; list-style-type:upper-roman; list-style-type:upper-alpha; list-style-type:lower-alpha; list-style-type:upper-armenian; }
مثال زیر مربوط به مقادیر این خاصیت برای لیست نامرتب است:
ul { list-style-type: square; list-style-type: circle; list-style-type:none; }
ul { list-style-image: url(Music_Flat1.png); }
ul.h { list-style-type: circle; list-style-position: outside; } ul.hi { list-style-type: square; list-style-position:inside; }
کوتاه کردن دستورات مربوط به لیست: تمام دستوراتی را که در این بخش فرا گرفتید را می توانید فقط در یک دستور قرار دهید. این کار دستور را کوتاه تر می کند. به مثال زیر توجه کنید:
list-style: square inside url("sqpurple.gif");
در قسمت قبلی از این سری آموزش به استایل های موجود برای لینک ها و لیست ها پرداختیم. در این جلسه می خواهیم به چگونگی استایل دادن به جداول بپردازیم. همانطور که در سری آموزش HTML مشاهده کردید، جداول از مهمترین عنصرهای یک صفحه وب است. می توانید توسط این عنصر داده های مورد نظرتان را به صورت مرتب جدول بندی کنید. تگ های اصلی این عنصر table , tr, th, td است.
table , th, td { border:solid 1px ; }
به موقعیت خطوط حاشیه توجه کنید. اگر توجه کنید در این حالت چندین حاشیه داخل هم قرار گرفته است که کمی محیط داخل جدول را شلوغ کرده است. برای جلوگیری از این حالت باید استایل border-collapse: collapse; را به table نسبت دهید. به مثال زیر توجه کنید.
table { border-collapse: collapse; } table, th, td { border: 1px solid black; }
table { background: #ff00ff; color:#ffff00; }
برای اینکار کافی است از آرگومن nth-child() برای المنت tr استفاده کنید. به مثال زیر توجه کنید:
tr:nth-child(even) { background-color: #f2f2f2 }
tr:hover { background-color: #f5f5f5 }
اگر زمانی مقادیر جدول از طرف عرض صفحه خارج شد چگونه می توان به آن دسترسی داشت؟ کافی است استایل overflow-x:auto; را به بلاک نسبت دهید. به مثال زیر توجه کنید:
<div style="overflow-x:auto;"> <table> ... table content ... </table> </div>
نکته مهم: از آنجا که تعداد استایل ها برای هر المنت بسیار زیاد است به همین خاطر متاسفانه نمی توانیم تمام آن ها را برای المنت ها بررسی کنیم. در این مثال خودتان سعی کنید که از خاصیت های padding , margin بهره ببرید.
در جلسه گذشته درباره استایل های جداول نکاتی آموختیم امروز می خواهیم با دو خاصیت پرکاربرد دیگر آشنا شویم پس با من همراه باشید! حالت های نمایش یا Display: قالب نمایشی عناصر وب عمدتا یکسان هستند, اما گاهی اوقات باید تغییر کنند. پیش از اینکه وارد دستورات مورد نظر شوم می خواهم چند تعریف از شیوه های نمایش عنصر در صفحه وب را به شما بیاموزم.
• حالت اول block: خیلی اوقات یک عنصر وب بدون باقی گذاشتن فضا یک خط را کاملا اشغال می کنند. تصویر زیر می تواند بهتر نمایانگر این قضیه باشد.
بعضی از عناصر وب به صورت پیشفرض در این حالت نمایش داده می شوند مثل:
• حالت دوم inline: در این حالت عنصر مورد نظر فقط به بخشی از خط مورد نظر دسترسی پیدا می کند. تصویر زیر می تواند بهتر نمایانگر این قضیه باشد.
بعضی از عناصر وب به صورت پیشفرض در این حالت نمایش داده می شوند مثل:
نکته: تگ هایی که معرفی کردم صرفا به صورت پیش فرض اینگونه هستند اما این بدان معنا نیست که نتوان مقدارهایشان را تغییر داد. خیلی راحت می توان توسط خاصیت display مقدار block یا inline آنها را تغییر دهید.
a { display: block; }
مخفی کردن عناصر وب: برای آنکه عنصری در صفحه وب مخفی شود می توانید از این عنصر استفاده کنید. یک مثال از این کاربرد, زیر منوها هیچوقت در حالت عادی نباید نمایش یابند, تا زمانی که روی منوی اصلی hover کرد. برای اینکار باید ابتدا زیر منوها را مخفی کنید. برای مخفی کردن می توانید از خاصیت display و یا visibility استفاده کنید. به دو مثال زیر توجه کنید.
p { visibility:hidden; }
یا
p { display:none; }
اگر مقدار خاصیت visibility را برابر visible قرار دهید عنصر مورد نظر به حالت پیشفرض باز می گردد.
p { visibility:visible; }
تعیین بیشترین عرض با Max-width: در درس های قبلی اشاره کردم که زمانی بخواهید یک عنصر به صورت دقیق در هر صورتی وسط صفحه قرار بگیرد باید از خاصیت margin:auto استفاده کند. در شرایطی هم که اندازه صفحه مرورگر تغییر کند عنصر مورد نظر باز هم در وسط صفحه جایی می گیرد.
اما این خاصیت زمانی کار ساز خواهد بود که عنصر مورد نظر دارای عرض مشخصی باشد. اما باز هم به مشکل برخواهیم خورد, در صورتی که عرض مشخص باشد دیگر حالت واکنشگرا مفهومی ندارد. اینجاست که باید بجای خاصیت width باید از max-width استفاده کنید. در واقع این خاصیت به اندازه مرورگر تا اندازه مشخصی اجازه تغییر می دهد. مثال زیر را اجرا کنید و سپس اندازه مرورگر را تغییر دهید:
<!doctype html> <html> <head> <title>Example ITPRO</title> <style> .Box { border:solid 1px #22dd33; max-width: 400px; margin:auto; } </style> </head> <body> <div class="Box"> <p>Hello, People. I am Arastoo. A user from earth! :) </div> </body> </html>
گاهی اوقات میتوان موقعیت یک المنت را تعیین کرد برای مثال موقعیت یک المنت را به صورت ثابت در یک مکان قرار داد, طوری که حتی با اسکرول کردن هم موقعیت خود را از دست ندهد. خب این یکی از موقعیت هاست. به صورت کلی ۴ گونه موقعیت وجود دارد:
بعضی از موقعیت ها دارای مقادیر top , right , bottom , left است. این مقادیر برای کنترل موقعیت المنت ها استفاده می شود. برای تعیین موقعیت از خاصیت position استفاده می شود.
p { position:static; }
p { border:solid 1px #22dd33; width: 500px; position: relative; left:30px; top:20px; }
img { position:absolute; left:0px; top:0px; z-index:-1; }
برای اینکه بهتر از این قضایا متوجه بشید, می توانید که پروژه های زیر را تک به تک اجرا کنید و نتیجه را مشاهده نمایید.
قالب اصلی پروژه:
<!DOCTYPE html> <html> <head> <title>ITPRO</title> </head> <body> <div class="over"> Hello This is a sample test! Hello This is a sample test! Hello This is a sample test! Hello This is a sample test! Hello This is a sample test! Hello This is a sample test! </div> </body> </html>
قالب 1 CSS:
<style type="text/css"> .over { width:100px; height: 100px; background: #aaaaaa; overflow: visible; } </style>
قالب 2 CSS:
<style type="text/css"> .over { width:100px; height: 100px; background: #aaaaaa; overflow: hidden; } </style>
قالب 3 CSS:
<style type="text/css"> .over { width:100px; height: 100px; background: #aaaaaa; overflow: scroll; } </style>
قالب4 CSS:
<style type="text/css"> .over { width:100px; height: 100px; background: #aaaaaa; overflow: auto; } </style>
نکته: تفاوت مقدار scroll و auto در این است که در حالت اول یعنی scroll اسکرول بار در هر دو سمت افقی و عمودی فراهم می شود اما در حالت دوم یعنی auto تنها به صورت عمودی اسکرول بار ظاهر می شود.
در یک صفحه وب همه المنت ها نباید در جهت یا تراز پیشفرض مرورگر باشد, شما میتوانید متن ها, تصاویر و… را به هر سمتی که دوست دارید ببرید. البته برای المنت های مختلف باید راههای متفاوتی را امتحان کرد. تراز بندی متون: برای آنکه جهت گیری متون را تغییر دهید به صورت منحصر به فرد میتوانید از خاصیت text-align استفاده کنید. به مثال زیر توجه کنید:
p { text-align: center; }
البته توجه کنید برای اینکه متن را به صورت راست به چپ یا چپ به راست قرار دهید نباید از این خاصیت استفاده کنید بلکه باید به خاصیتهای تگ body برگردید. یکی از مهمترین خاصیتهای تگbody خاصیت dir بود که مقادیر ltr , rtl را دریافت می کرد. مثال زیر برای یک متن راست به چپ اشتباه است:
<p style="text-align:right;"> این یک متن راست به چپ است. </p>
راه درست برای نمایش یک متن راست به چپ به دو صورت است :
۱- از خاصیت dir در تگ body استفاده کنید. در این صورت تمامی متون از طرف راست به چپ قرار می گیرند. به مثال زیر توجه کنید:
<body dir="rtl"> </body>
۲- از خاصیت direction در CSS بهره ببرید. برای مثال زمانی که میخواهید فقط یک متن مشخص به صورت راست به چپ باشد باید از این حالت استفاده کنید.
p { direction: ltr; }
جهت تصویر و کادر ها: علاوه بر متون دیگر اجزای یک صفحه وب هم می توانند که در مکان های مختلف قرار بگیرند.
جهت وسط: اگر می خواهید یک تصویر و یا هر چیز دیگر بغیر از متن در وسط صفحه قرار بگیرد می توانید به دو روش اینکار را انجام دهید.
۱- روش استاندارد: اگر یک المنت در صفحه وب دارای مقدار عرض باشد می توان با مقدار دهی margin:auto در هر شرایطی المنت را در وسط صفحه قرار دهید. حتی اگر مرورگرتان را کوچک یا بزرگ کنید. مثال زیر را اجرا کنید:
.box { width: 500px; height: 100px; background: #000000; margin: auto; }
۲- روش غیر اصولی: می توانید مقدار صفحه وب را اندازه گیری کرده و سپس مقدار margin-left یا margin-right را برابر یک دوم اندازه صفحه قرار دهید. البته این روش کاملا اشتباه است.
جهت راست و چپ: برای اینکه جهت یک تصویر را به سمت راست یا چپ ببرید می توانید از روش دوم که در بالا ذکر کردم استفاده کنید اما باز هم این روش کاملا غیر اصولی می باشد. روش استاندارد این است که از مقادیر position:absolute استفاده کنید.همانطور که می دانید در این روش می توانید از مقادیر right,left,top , bottom استفاده کنید.برای مثال اگر مقدار right:0; باشد تصویر مورد نظر به سمت راست تغییر مکان می دهد. به این مثال توجه کنید:
.box { width: 500px; height: 100px; background: #000000; position: absolute; right: 0px; }
جهت گیری عمودی: اگر یک کادر را در نظر بگیرید می توانید متن خود را در هر کجای این کادر قرار دهید البته نه با position و یا margin بلکه با padding اگر یادتان باشد گفتیم اگر بخواهیم المنت داخلی را تراز بندی کنیم باید از padding استفاده کنیم. به مثال زیر توجه کنید:
.center { padding: 70px 0; border: 3px solid green; }
اگر تا به حال با فوتوشاپ کار کرده باشید، مطمئنا با حالت opacity لایه ها آشنایی دارید، این حالت برای کم رنگ کردن یک لایه استفاده می شود. در CSS نیز ما با چنین حالتی روبرو هستیم. برای مثال می توانید تصویری را کم رنگ کرده و تا زمانی که ماوس روی تصویر hover می شود در همان حالت باقی بماند. برای اینکار باید از خاصیت opacity با مقادیر 0.1 تا 1 استفاده کنید. به مثال زیر توجه داشته باشید:
img { Opacity:0.5; }
در این حالت تمامی تصاویر با شفافیت 0.5 قرار می گیرند. حالت دیگر مقدار دهی این خاصیت استفاده از rgba است. اگر یادتان باشد یکی از روشهای مقداردهی رنگ rgb بود. حال در این حالت می توانید نه تنها رنگ مورد نظر را انتخاب کنید بلکه شفافیت المنت را هم مقداردهی کنید.
p { color: rgba(100, 200, 50, 0.5); }
امروز میخواهیم در ادامه آموزش های CSS سراغ بحث Responsive Layout بریم و با هم یاد بگیریم. Responsive یا واکنشگرا چیست؟ در ابتدای پیدایش صفحات وب، صفحات ساده و دارای یک اندازه ثابت بودند، صفحات با توجه به بزرگ بودن یا کوچک بودن هیچ واکنش خاصی را انجام نمی دادند. اما از زمانی که وبگردی با موبایل و تبلت مرسوم شد این مشکل واقعا خودش را نشان داد. با پیدایش نسخه جدید CSS3 این مشکل تا حد زیادی رفع گردید.
اصول واکنشگرایی چیست؟
المنت های صفحات وب با توجه به اندازه صفحه اندازه خودشان را به صورت درصدی افزایش یا کاهش می دهند. برای مثال اندازه عرض یک تگ اگر ١٠٪ باشد در نمایشگرهای مختلف نمی تواند یک عدد ثابت باشد. برای مثال اگر همین تگ را در یک نمایشگر با عرض 100px مشاهده کنیم اندازه 10px از صفحه نمایش را اشغال کند اما در یک نمایشگر با عرض 1000px اندازه به 100px تغییر می کند. در این چند قسمت می خواهیم با مفاهیمی چون:
آشنا می شویم. با من همراه باشید.
ViewPort به قسمت قابل مشاهده کاربر می گویند. مقادیر ViewPort متغیر است برای مثال در موبایل های هوشمند کوچکتر از کامپیوتر ها می باشد. همانطور که قبلا توضیح دادم، در ابتدای ساخت صفحات وب، صفحات مطابق با دستگاه تغییر سایز یا در واقع تغییر اندازه (ViewPort) نمی دادند. با آمدن تکنولوژی HTML5 توانایی در اختیار گرفتن ViewPort برای ما بسیار ساده تر شده است. برای اینکار از تگ meta استفاده می شود.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
در مثال بالا از تگ meta با نام viewport استفاده شده است، این دستور باعث می شود که صفحه وب ما کنترل دستورالعمل های مرورگر را در اختیار بگیرد. در قسمت دیگر از ویژگی content استفاده شده که برابر width=device-width قرار گرفته است، این ویژگی باعث می شود که عرض صفحه وب ما مطابق با عرض دستگاهی که در اختیار داریم واکنش نشان دهد.قسمت آخر که جزو همان content است اولین سطح زوم کردن صفحه وب را در زمان لود صفحه قرار می دهد.
<!doctype html> <html> <head> <title> js </title> <style> img { width: 80%; } p { width: 80%; } </style> </head> <body> <img src="logo.png"/> <p> hello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITProhello ITPro </p> </body> </html>
زمان پاسخ گویی روز های شنبه الی چهارشنبه ساعت 9 الی 18
فقط به موضوعات مربوط به محصولات آموزشی و فروش پاسخ داده می شود