آموزش ساده CSS برای طراحی سایت : وقتی شما بااستفاده از زبان برنامه نویسی HTMlکدهای اصلی واسکلت یک ساختمان را ساختید نوبت به استایل دهی به این کدها می رسد به عبارتی شما با زبان css به ضاهر صفحه خود شکل وشمایل می دهید. Css مخفف یا Cascading Style Sheets می باشد.
زبان Css نشان می دهد که هر کدام از تگ هایی کهدر ساختن بدنه اصلی بااستفاده از زبان برنامه نویسی HTMl نوشید در صفحه وب چه شکلی نمایش داده شود به عبارتی به کدهای ساده رنگ ولعاب می دهیم.
چطور دستورات css رادرست بنویسیم
با نوشتن دستورات css می توانید براحتی از یک استایل در بخش های مختلف استفاده کنید وبا اینکار دز زمان هم صرفه جویی کنید اما لازمه آن اشنایی با طریقه ی نوشتن درست دستورات است.با یک مثال به بررسی کدها می پردازیم :
p{
Color:black;
}
در قسمت اول که به آن سلکتور می گویند نام تگ Htmlکه میخواهیم به آن استایل دهیم را می نویسیم.
مرحله بعد } را باز می کنیم
در این قسمت هر ویژگی که می خواید به دستورات Html اعمال کنید مانند رنگ ،سایز ، طول وعرض و… رادر این قسمت می نویسید که به این قسمت اعلان می گویند وواجب است که انتهای هر استایل را با ; به پایان رسانید.
ودر آخر { را که در ابتدا باز کردیم می بندیم.
طریقه نوشتن css در آموزش ساده CSS
Style دهی به عناصر HTML روش های گوناگونی دارد. اگر شما هم در نوشتن style عناصر خود دچار مشکل هستید و نمی دانید از کدام روش استفاده کنید با تیم وب یار از طراحی سایت اصفهان همراه باشید. به طور کلی طریقه نوشتن css به سه صورت انجام می گیرد.
Internalدر زبان css:
اولین روش به آن internal style sheet می گویند. در این روش کد های css را درون فایل html و تگ head قرار می دهیم. این روش زمان بارگذاری صفحه را افزایش می دهد. بنابراین اصلا توصیه نمی شود. تنها مزیت این روش نسبت به روش بعدی (درون خطی) این است که می تواند از خاصیت ارث بری کلاس ها استفاده کند؛ یعنی می توانید از یک style در چندین جای صفحه استفاده کنید.
در ادامه مثالی از شیوه کد نویسی این روش را برایتان قرار می دهیم:
<head>
<style>
h {color:silver;}
p {
margin-left:20px;
}
body {
background-image:url(“images/bg.gif”);
}
</style>
</head>
روش دوم inline :
روش دوم از طریقه نوشتن inline style sheet ، css است. در این روش دقیقا style را درون عنصری تعریف می کنیم که می خواهیم به آن استایل بدهیم. این روش برای سایت هایی که تعداد صفحات کمتری دارند می تواند استفاده شود اما هرگز توصیه نمی شود زیرا مانند روش قبل سرعت بارگذاری صفحه را افزایش می دهد .
مثال :
<!DOCTYPE html>
<html>
<body> <h1 style=”color:blue”>این یک عنوان است</h1> <p style=”color:red”>این یک پاراگراف است.</p> </body>
</html>
روش آخر و مرسوترین روش external از آموزش ساده CSS
روش سوم و مرسوم ترین طریقه نوشتن css روش external style sheet (ظاهر سازی به روش خارجی) است. این روش بسیار ایده ال است. و سرعت بارگذاری صفحه در آن نسبت به روش های قبل بالاتر است زیرا به طور مثال اگر شما بخواهید رنگ یا فونت تگ p درون صفحه html را تغییر دهید لازم نیست مانند روش بالا در کنار هر تگ p ،style مورد نظرتان را اضافه کنید کافی است صفحه ای جدا گانه به نام style.sheet باز کرده و style مورد نطرتان را تنها با یک بار نوشتن به کلیه تگ های p اضافه کنید
P:{
Color:red;
Font-size:12px;
}
در این طریقه نوشتن css باید دقت کنید که لینک به صفحه مربوط به css خود را در صفحه html تان به شکل زیر قرار دهید
در کد بالا قسمت rel و type را لازم نیست تغییر دهید اما باید لینک صفحه css خود را به درستی در قسمت href قرار دهید تا صفحه html شما به صفحه css لینک شود در غیر این صورت عنصر ها stlye های مورد نظر را نمی گیرند.
همان طور که می دانید کد نویسی سایت را با تگ <div> بخش بندی می کنند. حال اگر بخواهیم به div در صفحه خارجی Style دهیم می توانیم مانند کد های زیر به آن کلاس یا id دهیم و در صفحه css با نشان “.” برای کلاس و “#” برای id ،div مورد نظر را فراخوانی کنیم. تفاوت کلاس با id در این است که id یکسان فقط به یک عنصر یا div تعلق می گیرد (انحصاری) است اما می توان به چند عنصر یا div کلاس یکسان داد.
در این طریقه نوشتن css باید دقت کنید که لینک به صفحه مربوط به css خود را در صفحه html تان به شکل زیر قرار دهید
در کد بالا قسمت rel و type را لازم نیست تغییر دهید اما باید لینک صفحه css خود را به درستی در قسمت href قرار دهید تا صفحه html شما به صفحه css لینک شود در غیر این صورت عنصر ها stlye های مورد نظر را نمی گیرند.
نام گذاری تگ ها برای استایل دهی در css
همان طور که می دانید کد نویسی سایت را با تگ <div> بخش بندی می کنند. حال اگردر css بخواهیم به div در صفحه خارجی Style دهیم.
با class
با id
می توانیم مانند کد های زیر به آن class یا id دهیم و در صفحه css با نشان “.” برای و class برای id “#”،div مورد نظر را فراخوانی کنیم.
تفاوت class وid
تفاوت کلاس با id در این است که id یکسان فقط به یک عنصر یا div تعلق می گیرد (انحصاری) است اما می توان به چند عنصر یا div کلاس یکسان داد.
حال اگر بخواهیم به تگ p درون کلاس search-submit ، style دهیم باید به صورت زیر بنویسیم:
.search-submit P {
Color:red;
}
کامنت گذاری برای خوانایی بیشتر کدهای هر قسمت :
برای استایل دهی به قسمت های مختلف یک صفحه وب برای خوانایی بیشتر بهتر است که هر قسمت را دیگری جدا کنیمتا کدهای css مرتب تری داسته باشیم برای مثال بهتر است که کدهایی که برای قسمت محصولات می زنیم را از کدهایی css قسمت درباره ما به وسیله کامنت گذاری جدا کنیم .به این صورت که اسم قسمتی که به آن استایل می دهیم رابین /*—*/قرار دهیم برای نمونه : /* about us */
سخن پایانی آموزش ساده CSS برای طراحی سایت
در مطلب فوق سعی بر آن بود که شما را با روش های style دهی عناصر html آشنا کنیم تا طریقه نوشتن css را بیاموزید. تیم وب یار اصفهان پاسخ گوی سوالات شما کاربران، طراحان و مدیران عزیز می باشد و برای اطلاع از نحوه طراحی سایت حرفه ای اصفهان می توانید به دیگر بخش های وب یار مراجعه کنید.
