اگر تازه شروع به برنامه نویسی وب کرده‌اید حتما سروکار شما به آموزش css و html افتاده است. HTML ،مخفف (Hypertext Markup Language) ، یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری است. به عبارت ساده‌تر شما با کمک html مشخص می‌کنید در کدام بخش وبسایت شما چه چیزی(element/ tag) نمایش داده‌شود.
پس css این وسط چه کاره است؟ باید بگویم همانطور که گفته‌اند و شنیده‌اید، عقل آمیزاد به چشم‌اش است. پس برنامه نویس ها با کمک css صفحات وبسایت خود را زیبا و مرتب میکنند. به طور خلاصه، چشم‌نوازی یک صفحه وب را مدیون css و نوادگانش هستیم!
در ادامه میخوانید:
- css چیست و چه ارتباطی با html دارد
- css چطور کار میکند؟
- انوع selector
- اتصال css به html
- css syntax
- مزایای استفاده از css
Css چیست و چه ارتباطی با html دارد؟
در واقع html معادل پی، آجر، بتن، تیر آهن و اجزای اصلی یک ساختمان است در حالی که css را میتوان معادل دکوراسیون داخلی و خارجی ساختمان دانست.
شما با کمک html میتوانید مشخص کنید یک پاراگراف، تیتر، عکس، ویدئو و … در کجای صفحه قرار بگیرد. در حالیکه با کمک (css(Cascading Style Sheets، که زبانی برای طراحی است، میتوانید رنگ هر بخش، قلم آن و این جزئیات زیبایی شناسانه را مشخص کنید.
Css چطور کار میکند؟
قبل از هر چیزی لازم است یادآوری کنم هدف این مقاله آموزش css و html نیست. بلکه صرفا میخواهیم شما با کلیت مفاهیم html و css و کاربردآن‌ها، آشنا شوید.
قبل از دیدن مثال این بخش لازم است بدانید در html برای هر عضو یک تگ داریم. مثلا اگر بخواهیم یک پاراگراف در صفحه داشته باشیم باید از تگ <p></p> که نماینده پاراگراف است استفاده کنیم.
در کد html زیر، میخواهیم یک پاراگراف در صفحه نمایش دهیم.
<!--html-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>hi guys. welcome to this tutorial</p>
</body>
</html>
همانطور که در تصویر پایین میبینید، خروجی یک پاراگراف ساده است.
حالا به کمک کد css که در ادامه آمده است، سعی میکنیم کمی رنگ و لعاب به پاراگراف بدهیم. همچنین کدهای html و css را که رد دو فایل مجزا نوشته شده‌اند را با یک خط کدی که در تگ <link> نوشته شده‌است، به هم متصل کرده‌ایم.
p {
font-weight: bold;
color: cadetblue;
font-size: xx-large;
padding-left: 400px;
}کدهای css تقریبا خوانایی بالایی دارند. به عبارت دیگر، اگر کمی به زبان انگلیسی مسلط باشید، تا حدود زیادی کار شما در آموزش css و استفاده از آن آسان میشود. در کد بالا فونت، رنگ، مقدار فاصله از سمت چپ صفحه را برای پاراگراف مورد نظر مشخص کرده‌ایم و البته نوشته‌های پاراگراف را bold هم کرده‌ایم. شما را به دیدن خروجی دعوت میکنم:
در واقع کارکرد کلی css به این ترتیب است که با کمک یک انتخاب‌کننده(selector) چندین تگ در متن را انتخاب میکند و یکسری ویژگی(property) را در آن‌ها تغییر می‌دهد.
انواع selector
اسم تگ:
مثل کدی که در بالا آورده شده است، میتوانید از اسم تگ‌ها به عنوان انتخاب کننده استفاده کنید. در این نوع انتخاب کننده‌ها کدهای css روی تمام تگ‌هایی که آن اسم را دارند اعمال میشود. به عبارتی اگر ما ۲ پاراگراف در صفحه داشتیم(مثل کد پایین)، کد css روی هر دو آن‌ها اعمال میشد و در نهایت خروجی به شکل زیر میشد:
<!--html-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>hi guys. welcome to this tutorial</p>
<p>hi guys. welcome to this tutorial</p>
</body>
</html>
p {
font-weight: bold;
color: cadetblue;
font-size: xx-large;
padding-left: 400px;
}
class:
در تگ‌ها میتوانیم یک ویژگی به اسم کلاس تعریف کنیم و آن را نام‌گذاری کنیم. با کمک کلاس‌ها میتوانیم روی چند تگ غیر هم‌نام، به صورت همزمان یک کد css اعمال کنیم. با کمک dot و اسم کلاس، به آن کلاس دسترسی پیدا میکنیم. مثلا p.center در کد css پاراگرافی را انتخاب میکند که نام کلاس آن center است.
<!DOCTYPE html> <html> <head> </head> <body> <link rel="stylesheet" type="text/css" href="style.css"> <h1 class="center">This heading will not be affected</h1> <p class="center">This paragraph will be red and center-aligned.</p> <p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p> </body> </html>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
Id :
در تگ‌ها میتوانیم یک ویژگی به اسم id تعریف کنیم و آن را نام‌گذاری کنیم. ویژگی که این انتخاب کننده‌ها دارند، منحصربه‌فرد بودن آن‌ها است. به عبارتی id هیچ تگی نمیتواند با id تگ دیگری برابر باشد. از این Selector برای اعمال ویژگی‌هایی استفاده میکنیم که میخواهیم فقط روی تگ خاصی اعمال شود.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Welcome to Homepage</h1>
<div class="intro">
<p id="firstname">My name is elham.</p>
<p id="hometown">I live in tehran.</p>
</div>
<p>My fimly is bigdeli.</p>
</body>
#firstname {
background-color: yellow;
}
این انتخاب کننده‌ها تقریبا هیچ برتری نسبت به هم ندارند و صرفا با توجه به نیازی که داریم، از آن‌ها استفاده میکنیم.
اتصال css به html
در واقع سه راه برای نوشتن کدهای css داریم.
Internal
در این روش شما ابتدا یا انتهای فایل html خود، یک تگ <style></style> ایجاد کرده و کدهای css خود را در آن تگ مینویسید. در این روش امکان شلوغ شدن کد زیاد است.
مثال:
<!DOCTYPE html>
<html>
<head>
<style>
#firstname {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class="intro">
<p id="firstname">My name is Elham.</p>
<p id="hometown">I live in Tehran.</p>
</div>
</body>
</html>
Inline
در این روش در هر تگ کدهای css مربوط به آن را مینویسیم. این روش برای نوشتن کدهای css با حجم زیاد، اصلا پیشنهاد نمیشود.
مثال:
<!DOCTYPE html> <html> <body> <h1 style="color:blue;text-align:center;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> </body> </html>
External
روشی است که در ابتدای این مقاله توضیح دادیم. برای html و css دو فایل جدا از هم ایجاد میکنیم و این ۲ فایل را با کمک تگ لینک به هم متصل میکنیم.
این روش بهترین راه اعمال css روی html است. چون ممکن است خط‌های کد شما خیلی زیاد باشد، این روش از شلوغ شدن کد شما جلوگیری میکند و صدالبته که خطایابی در کدهای خلوت و مرتب، کار آسان‌تری است.
Css syntax
Css نحو یا سینتکس آسانی دارد. تنها پیچیدگی که در آموزش css به آن برمیخورید، شاید تعداد زیاد property ها باشد. لازم نیست همه آن‌ها را از حفظ باشید. به مرور زمان و با توجه به نیازی که در هر مسئله دارید، نکات جدید را یاد می‌گیرید.
selector {property: value; property: value; property: value; }پس برای شروع صرفا به یادگیری نکات پایه‌ای بسنده کنید و دست به کد شوید. در هر پروژه، با مشکلات متفاوتی روبه‌رو می‌شوید که حل کردن هر کدام از آن‌ها معادل یک کلاس درس است.
مزایای استفاده از css
- صرفه‌جویی در زمان: میتوانید یکبار کد css را بنویسید و در تمام صفحات html که میخواهید، از آن استفاده کنید.
- نگهداری آسان: فرض کنید شما در تمام تگ‌های پاراگراف، font size:12px را اعمال کردید. حالا اگر قرار باشد این مقدار به ۱۴px تغییر کند، شما مجبور هستید مقدار این property را در تمام فایل‌های html و تمام تگ‌های پاراگراف تغییر دهید. این کار واقعا طاقت‌فرسا است! اما اگر شما این کد css را در یک فایل جدا نوشته باشید، و آن فایل را به html ها لینک کرده باشید، کافی است به فایل css بروید و در تکه کد مربوط به پاراگراف، یک عدد ۱۲ را به ۱۴ تغییر دهید.
- موتورهای جستجوگر: css یک تکنیک استاندارد برای طراحی صفحات است و به هیچ‌وجه موتورهای جستجوگر را به زحمت نمی‌اندازد.
- برتری نسبت به html : خود html ویژگی‌های دارد که میتوانید از آن‌ها برای زیباسازی تگ‌ها استفاده کنید. اما این ویژگی‌ها به هیچ‌وجه به گستردگی Css نیستند و در خیلی از موارد اصلا نیاز شما را برآورده نمی‌کنند.
- همیشه در دسترس: css در بار اولی که شما به وب‌سایتی سر می‌زنید، در cache مرورگر شما ذخیره میشود. در نتیجه اگر شما در ادامه به صورت آفلاین هم وبسایت را مشاهده کنید، css صفحات در دسترس است.
در این مقاله تمام سعی‌ام بر این بود که بتوانید با کاربرد css آشنا شوید تا هر چه سریعتر و راحت‌تر آموزش css و html را شروع کنید. امیدوارم این مقاله به شما کمک کرده باشد.
اگر سوال یا مشکلی درباره css یا مسائل مربوط به طراحی وب دارید، در بخش نظرات مطرح کنید. حتما من یا سایر دوستان، در حد توان پاسخگو سوالات و مشکلات شما هستیم. تا یادم نرفته، بنظر شما مقاله‌ی بعدی درباره‌ی چه موضوعی باشد؟
برای اطلاع از آخرین اخبار و آموزش‌های ما می‌تونید در کانال تلگرام چ یاب عضو شید.
منابع:
