• فناوری
  • سرگرمی
همچنین در ناتیلوس بخوانید


❶CSS به جه معنا است و چگونه برنامه نویسی می شود؟ | CSS 


چگونگي اندازه گيري زمان از پیدایش تا امروز
برنامه های انرژی: سؤال های متداول سایت ناتیلوس
گلچین بهترین مداحی محرم عبدالرضا هلالی دانلود عزاداری امام حسین
نکات کلیدی سئو سایت که بایدبرای یک استارت آپ بکار ببریم
مشخصات چوب سرخدار taxus baccata
بوسیدن دست امام خمینی مانند بوسیدن دست محمدرضا شاه، شرک کفر است
«رفع‌ِ تبعیض» خواسته اصلی اعتصاب کنندگانِ صنایع نفت است.
تخم شربت لاغر می کند، خواص دارویی تخم شربت
چرا شاخص وارن بافت معیار مناسبی برای ارزیابی وضعیت بازار سرمایه ایران نیست؟
خواص شگفت انگیز چای زنجبیل + نحوه آماده کردن چای زنجبیل
آیا استعداد ذهنی ایرانیان از متوسط جهانی بیشتر است؟
با فواید و ارزش غذایی زنجفیل آشنا شوید
آمار سقط جنین در سال چقدر است؟ ۲۲۰ هزار مورد سقط غیرقانونی
دو گانگی در رفتار بن سلمان بعنوان یک رهبر اصلاح طلب
دیکتاتورها را چگونه مردمانی می‌سازند!؟
چهاردهه ناکارآمدی نظام در اداره دانشگاه
چرا باید از مدافع ویندوز استفاده کنم؟
چرا نمی توانم یک شبکه بی سیم را پیدا کنم؟
حکم فقهی انجام دادن لقاح مصنوعی (مقاله کامل)
CSS چیست؟ و چگونه کار می کند
واقعیت علمی جزر و مد چگونه است
دانلود فیلم مرد نامرئی The Invisible Man 2017
معنی فاک بوی و سافت بوی و باک فوری
دانلود مجموعه کامل چگونه گناه نکنیم سخنرانی صوتی رائفی پور قسمت 1 تا 6
پشت پرده مذاکرات وین / در چه صورتی ایران به کره شمالی تبدیل می شود؟
حذف، تغییر یا تعمیر یک برنامه (چگونه برنامه را حذف کنیم)
مغالطه معنا انگاری/تقارن/مگه میشه اتفاقی باشه
کاربرد فیزیک در فناوری و تکنولوژی مدرن (فیزیک دهم)
پیوند انگاری در سوگیری شناختی چیست/ویژگی تئوری توطئه
آیا ۸۰ درصد سود خرید و فروش سیگار به جیب شرکت‌های خارجی می‌رود/بررسی ادعا
آیا جهاد بر زنان واجب است؟ آیا زنان نیز می توانند مثل مردان جهاد کنند
معرفی 6 روش کسب درآمد از وبسایت در ایران
دانلود مجموعه کامل جنود عقل و جهل رائفی پور سخنرانی صوتی
کاربرد فیزیک در زندگی چیست (سوال کتاب فیزیک دهم)
در ایران هیچوقت تظاهرات در اعتراض به عملکرد حکومت‌ها نیستند
توضیح کامل VPN چیست VPN چگونه کار می کند
آیا ارزش تولید ناخالص داخلی ایران بیشتر از ترکیه و عربستان است؟
هنگامی که یک مشکل را گزارش می کنم، چه اطلاعاتی برای ماکرسافت ارسال می شود؟
توییت ایلان ماسک با سقوط قیمت بیت کوین همراه شد
وجود جهشی دیگر در نرخ ارز چقدر محتمل است؟
CSS یعنی چه
What CSS Namely

صفحه اصلی راهنما | مرور راهنما | تماس با واحد پشتیبانی

در این بخش آموزش CSS به طور کاملا تصویری و با مثال های مختلف برای درک بهتر آموزش داده می شود

CSS روشی است برای تغییر ظاهری اسناد HTML یا صفحات وب . به این صورت که شما به راحتی می توانید با استفاده از دستوراتی که در ادامه به طور کامل برای شما توضیح میدهم ظاهر یک صفحه وب را تغییر بدهید .


به عنوان مثال رنگ فونت ، خط دور تصاویر ، رنگ پس زمینه ، رنگ لینکها و ... را می توانید با استفاده از دستورات CSS تغییر بدهید . دستوراتی که در فایل CSS استفاده می شود می تواند به طور مستقیم در خود کدهای Html هم تایپ شوند اما به چند دلیل این روش پیشنهاد نمی شود :
1. تکرار و دوباره نویسی دستورهای CSS
2. کند شدن سرعت بارگذاری صفحه

3. مشکل شدن کد نویسی و خوانایی کدها
Css هم مانند جاوا اسکریپت این امکان را به ما می دهد که از یک فایل استایل خارجی برای تعیین ظاهر بخش های مختلف یک صفحه استفاده کنیم. به این صورت که با استفاده از یک لینک در بین تگ head فایل css را فراخوانی کرده و با توجه به دستورات مورد نظری که در فایل css وجود دارد شکل ظاهری تغییر می کند .


پس فایل css را به دو روش می توان استفاده کرد :
1. داخلی
2. خارجی

 

قالب دستوری CSS
هر دستور CSS به طور کل از سه بخش تشکیل می شود
1. انتخابگر یا فراخوان تگ وارد شده در فایل html
2. خصوصیت که دستورهای ثابت برای هر عنصر می باشد
3.مقدار که با در نظر گرفتن قالب طراحی شده متفاوت می باشد .

 

شاید این سوال برای شما پیش بیاید که چگونه هدر صفحه یا لینکهایی که در قسمت های مختلف استفاده می شود بوسیله CSS تغییر پیدا می کنند .
روش کار و فراخوانی دستورات CSS به طور به این شکل است که شما در بین کدهای html یا زبانهای برنامه نویسی دیگر بعد از مشخص کردن قسمت های مختلف سایت مثل header.logo.content.یک ID یا Class به قسمت مورد نظر بین تگ div اضافه میکنیم و بعد از اضافه کردن همان تگ را در فایل css فراخوانی کرده و تغییرات لازم را اعمال می کنیم . برای اینکه متوجه بشوید به مثال زیر توجه کنید :
فرض کنید صفحه اصلی سایت من تشکیل شده از 5 قسمت با عنوانهای

Wrapper
Header
Navigation
content
footer

حالا من اگه بخوام خصوصیات ظاهری این پنج قسمت را تغییر بدم چکار باید بکنم که فایل css متوجه بشه دستورات مربوط به کدام قسمت هست ؟
میام قسمت های اشاره شده را بین تگ div با یک صفت id یا class فراخوانی میکنم به این صورت:

<div id='wrapper'></div>
<div id='header'></div>
<div id='navigation'></div>
<div id='content'></div>
<div id='footer'></div>

 حالا فرق صفت id با class چیه ؟خیلی راحت بگم اگر بخواهید از یک عنصر یا المنت در صفحه فقط یکبار استفاده کنید مثل logo یا footer میام از صفت id استفاده می کنیم به دلیل اینکه :
1. ID حالت شاخصی داره و unique هست یعنی هر المنت فقط میتونه یک ID داشته باشه و قسمت های مختلف نداره که بخواهیم مشخصات آن را تغییر بدهیم.
ولی اگر بخواهیم از یک تگ مثل <p>هم در فوتر استفاده کنیم هم در قسمت header آن وقت باید بیایم از class استفاده کنیم.
برای اینکه متوجه بشید یک مثال میزنم تا متوجه بشید :
با استفاده از کلاس می توانیم برای تگ Html استایلهای متفاوتی را تعریف کنیم .برای نمونه فرض کنیم می خواهیم در صفحه دو نمونه پاراگراف داشته باشیم : یکی با متن قرمز و دیگری با رنگ سبز . برای مشخص کردن این دو پاراگراف می توانیم از class استفاده کنیم .

# content .p
{
color : red;
}
#footer .p
{
color : green ;
}
نکته :
برای فراخوانی class در فایل css  قبل از نام کلاس مورد نظر خودتان حتما باید نقطه بزارید . p.
برای فراخوانی id در فایل css قبل از نام id که در فایل html مشخص کردید علامت شارپ را قرار بدهید .p#
لینک به فایل css

با توجه به توضیحات بالا مهمتر از همه چی این هست که صفحات سایت خودتان را به فایل های css مشخص شده لینک بدهید
برای انجام اینکار بین تگ head لینک css را به روش زیر اضافه می کنیم .

<link rel='stylesheet'  href='css/style.css'/>

 لینک بالا دارای دو صفت مهم است :
1.صفت rel رابط بین فایل css و html برای نامگذاری فایل css می باشد.
2. صفت href مسیر فایل css را مشخص می کند.
نکات مهم :
1. هیچ وقت نام کلاس را با یک عدد شروع نکنید چون بعضی از مرورگرها از چنین خاصیتی استفاده نمی کنند.
2. حتما بین ویژگیها مثل رنگ یا سایز از علامت (:) دو نقطه استفاده شود نه مساوی
3. لازم نیست ویژگیها را بین علامت نقل قول ' قرار دهیم
4. حتما آخر هر ویژگی از علامت سیمی کالن (;) استفاده شود.

حالا به راحتی می توانید از فایل css خودتان در صفحه اصلی استفاده کنید .

ناتیلوس; مشاوره،طراحی و برنامه نویسی وب سایت های حرفه ای در رشت و استان گیلان


  • فناوری
  • سرگرمی

لطفا نظر خود را درباره مطلبی که خوانده‌اید، بنویسید...
نام شریف شما :
آدرس ایمیل:
مطلب :
کپی از مطالب این سایت تنها با ذکر فاتحه رایگان است
مجله تفریحی، سرگرمی و اطلاع رسانی   Natilos.ir © 2024 - 2015
V 9.8