وقتی صحبت از طراحی وب سایت به میان می آید، اولین سوال این است که html و css چیست ؟ با کمک css چه کارهایی می توان انجام داد؟ کاربرد و ویژگی های css چیست؟ صفحات HTML به تنهایی زیبایی خاصی ندارند اما با استفاده از دستورالعملها و زبانهای مختلفی که برای طراحی سایت وجود دارد میتوانید صفحه وب پویایی را ایجاد کنید و فرمت صفحه را تغییر دهید. یکی از این زبانها css میباشد که میتواند جلوههای زیبایی به سایت شما دهد.
در ابتدا باید بدانید که Css مخفف چیست؟ سی اس اس مخفف Cascading Style Sheet (CSS) است. زبان css یکی از زبان های برنامه نویسی طراحی صفحات وب برای ایجاد و ساخت مشخصات ظاهری اسناد و اطلاعات وب سایت می باشد. css یکی از رایج ترین و محبوب ترین ابزارهای طراحی صفحات وب سایت نوشته شده توسط زبان HTML و یا XHTML می باشد و همچنین از زبان های اسکریپت دیگری مانند plain XML، SVG و XUL نیز به خوبی پشتیبانی می نماید. در کدنویسی با استفاده از CSS میتوانید استایل سایت مثل رنگ، فونت، تصاویر پس زمینه و … را بصورت دلخواه تغییر دهید. اگر با این نوع از کدها آشناییت ندارید در ادامه این مقاله از ایران هاست ( ارائه دهندهی خدمات سرور مجازی خارج ) متخصصان ما به توضیحات بیشتر در زمینه کدهای css خواهند داد.
هدف از تولید css در واقع جداسازی اطلاعات محتوا (که توسط زبانی مانند HTML نوشته شده اند) از اطلاعات ظاهری مانند صفحه بندی، رنگ و سایز و نوع فونت می باشد. این جداسازی موجب افزایش سرعت در دسترسی به سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کارهای تکراری در طراحی وب سایت می گردد.
برخی از کاربردهای CSS عبارتند از:
ساختار یک کد در Css از دو قسمت تشکیل شده است:
در صورتی که بخواهید به بخشی از html استایل خاصی دهید باید یک تگ را انتخاب کنید تا بتوانید کدهای Css را روی آن اعمال کنید. عنصر انتخاب شده میتواند یک پاراگراف، یک تصویر و یا یک تیتر باشد. انتخاب کنندههای سی اس اس به چند دسته تقسیم میشود:
انتخاب کننده عنصر:
با استفاده از این انتخاب کننده میتوانید تگ خاصی را انتخاب و تغییرات استایل را بر روی آن اعمال کنید به طور مثال میتوان تگ <p> در یک صفحه وب را انتخاب کرد و رنگ آن را به قرمز تغییر داد.
انتخاب کننده id :
اگر بخواهید استایلهای CSS بر روی گروهی از تگها تعریف شود، باید از انتخاب کننده ID استفاده کنید. برای این کار باید در کدهای HTML برای تگی که قصد تغییر استایل آن را دارید یک ID تعریف کنید، سپس در بخش Css آیدی مورد نظر را انتخاب و تغیرات را بر روی آن اعمال میکنید.
دستورات فقط بر روی یک ID خاص که با با علامت # در ابتدای آن مشخص میشود اعمال میگردد.
انتخاب کننده Class :
برای این کار باید تمام تگهایی را که قصد دارید ظاهر یکسانی داشته باشند را داخل یک کلاس تعریف کنید و همانند ID به بخش CSS رفته و استایل مد نظرتان را روی آن کلاس تعریف کنید. مد نظر داشته باشید صفت کلاس با “ . “ در ابتدای آن قابل تشخیص میباشد.
با استفاده از این بخش که در بین {…} قرار میگیرد میتوانید مشخص کنید چه استایلی روی تگهای انتخاب شده اعمال گردد. این بخش از دو قسمت “ویژگی” و “مقدار” تشکیل شده است که باید مشخص کنید عنصر انتخاب شده چه ویژگی و چه مقداری داشته باشد. به طور مثال مشخص کنید تگ h1 به رنگ آبی و یا سایز فونت برابر ۱۴ پیکسل باشد.
یک stylesheet مجموعه ای از قوانین و کدهای css است که به مرورگر می گوید که چگونه tag HTML نمایش داده شود.
css با ایجاد فایل css. همچنین شما را قادر می سازد تا نمایش صفحه مورد نظر خود را در چندین حالت مختلف Rendering مانند حالت نمایش بر روی مانیتور، حالت نمایش در زمان چاپ، در زمان حالت شناسایی صدا ( برای مرورگرهای مبتنی بر قابلیت شناسایی صدا) و همچنین برای نمایش در صفحات مرورگر موبایل را به درستی تنظیم نمایید.
به شما پیشنهاد می شود برای کسب اطلاعات در حوزه تکنیک کد نویسی و کد نویسی چیست مقاله ما را مطالعه نمایید.
نحوه اتصال فایل css به فایلhtml به سه روش زیر انجام میشود:
