با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی قصد داریم به آموزش ساختار کد نویسی css ، و چگونگی تعریف یک style در css برای عناصر html بپردازیم.
CSS مخفف عبارت Cascading Style Sheets می باشد.که در واقع توصیف می کند که چگونه عناصر HTML روی صفحه نمایش، کاغذ یا سایر رسانه ها نمایش داده شود.با استفاده از css می توان برای عناصر html در چندین صفحه وب، الگو یا طرح تعریف کرد. و تمام این الگوه ها و طرح ها در قالب یک فایل css ذخیره می شود.
در این آموزش چگونگی تعریف کردن این طرح ها و الگوها را در داخل css ( ساختار کد نویسی css ) مورد بررسی قرار می دهیم.
یک ساختار کد css به طور کلی شامل یک مجموعه طرح های تعریف شده در css و یک عنصر html برای اعمال طرح هاست.
مثال: تعریف کد های css برای تگ های <p> صفحه وب:
برای دسترسی به یک عنصر html و تعریف طرح در css از ویژگی های name, id, class و… که برای عناصر html تعیین شده، استفاده می کنیم.
در این روش یکی از تگ های html برای طرح دادن در css انتخاب می شود. برای مثال اگر شما بخواهید برای تگ <p> طرح تعریف کنید،باید از نام p در css استفاده کنید. و در این روش ، کدهای css تعریف شده برای تمام تگ های <p> موجود در صفحه وب ، اعمال می شود.
شما می توانید تمام عناصر <p> را بر روی یک صفحه مانند این (همه موارد <p> انتخاب کنید و با یک رنگ متن قرمز) در این مورد انتخاب کنید:
در این روش css با استفاده از شناسه id که برای عناصر html تعریف شده به آن دسترسی دارد. مقدار id در عناصر html مانند یک نام برای آن عنصر می باشد و هر عنوانی می تواند باشد. در css برای مشخص کردن id مربوطه ، قبل از عنوان id از کاراکتر “#” استفاده می شود.
مثال: تعریف css برای عنصر html با id با مقدار “para1” :
در این روش مانند روش قبلی ، css با استفاده از یک شناسه class که برای عناصر html تعریف شده به آن دسترسی دارد. مقدار class در عناصر html مانند یک نام برای آن عنصر بوده و هر عنوانی می تواند باشد. در css نیز برای مشخص کردن class مربوطه ، قبل از عنوان class ، از کاراکتر نقطه (“.“) استفاده می شود.
مثال: تعریف css برای یک عنصر html با شناسه کلاس “class=”center :
1 2 3 4 | .center { ;text-align: center ;color: red } |
در مثال زیر، تنها عناصر <p> با class = “center” در مرکز قرار دارند:
1 2 3 4 | p.center { text-align: center; color: red; } |
در مثال زیر، عنصر <p> با توجه به class = “center” و class = “large” طراحی شده است:
1 | <p class="center large">This paragraph refers to two classes.</p> |
نکته: یک نام کلاس نمی تواند با یک عدد شروع شود!
نحوه گروه بندی و مشخص کردن شروع و پایان هر css تعریف شده برای یک عنصر به این صورت است:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | h1 { ;text-align: center ;color: red } h2 { ;text-align: center ;color: red } p { ;text-align: center ;color: red } |
در css می توانید از یک طرح برای چندین عنصر html استفاده کنید، و روش استفاده به این صورت است که در قسمتی که عنوان عنصر html باید مشخص شود.تمام عناصری که می خواهید css مورد نظر روی آن ها اعمال شود را با روش های گفته شده، تایپ کنید. و فقط کافیست آن ها را با کاما (,) از هم جدا کنید.
مثال:
1 2 3 4 | h1, h2, p { ;text-align: center ;color: red } |
نظرات برای توضیح کد مورد استفاده قرار می گیرند و ممکن است هنگامی که کد منبع را بعدا ویرایش می کنید کمک کنید.
نظرات و یا توضیحات توسط مرورگرها نادیده گرفته می شوند.
یک نظر CSS با / * شروع می شود و به پایان می رسد با * /. در نظرات همچنین می توانید چندین خط را بگذارید:
1 2 3 4 5 6 7 8 9 | p { color: red; /* This is a single-line comment */ text-align: center; } /* This is a multi-line comment */ |
دربخش قبلی مقدمات و توضیحاتی را برای آشنایی با CSS و کاربرد آن در HTML ارائه کردیم ، در این بخش برای شروع کار با CSS ابتدا به معرفی سینتکس و ساختار کدنویسی CSS در HTML پرداختیم.
محسن آستانه
مرسی مرسی
پی وی لرن
خوشحالیم که مورد رضایت شما واقع شده است.