learncss

آموزش سی اس اس

0 گؤروش
یازار:‌

در دوره آموزش livewire ما سعی داریم livewire که یک فریمورک laravel به حساب می‌آید را به شکل قدم به قدم و جامع به شما آموزش دهیم . اول داستان، طراح گرافیک بودم و ۲ سالی به عنوان طراح مشغول بودم، بعد به برنامه‌نویسی علاقمند شدم و الان بیشتر از ۱۰ ساله که عاشق کدزنی و چالش‌های پروژه‌های مختلفم. به تدریس علاقه خاصی دارم و دوست دارم دانشی که در این راه بدست آوردم را در اختیار دیگران هم قرار بدم. صفحه‌نمایش‌های با اندازه‌های مختلف امروزه جز جدایی ناپذیر زندگی ما شده‌اند از موبایل‌ها گرفته تا تبلت و لپ تاپ که هر کدام در هر مدل دارای سایز صفحه نمایش متفاوت هستند.

در دوره آموزش livewire ما سعی داریم livewire که یک فریمورک laravel به حساب می‌آید را به شکل قدم به قدم و جامع به شما آموزش دهیم . اول داستان، طراح گرافیک بودم و ۲ سالی به عنوان طراح مشغول بودم، بعد به برنامه‌نویسی علاقمند شدم و الان بیشتر از ۱۰ ساله که عاشق کدزنی و چالش‌های پروژه‌های مختلفم. به تدریس علاقه خاصی دارم و دوست دارم دانشی که در این راه بدست آوردم را در اختیار دیگران هم قرار بدم. صفحه‌نمایش‌های با اندازه‌های مختلف امروزه جز جدایی ناپذیر زندگی ما شده‌اند از موبایل‌ها گرفته تا تبلت و لپ تاپ که هر کدام در هر مدل دارای سایز صفحه نمایش متفاوت هستند.

دربرای مثال، کسی که یک وبسایت خبری دارد، محتوای خبری خود را در سایتش منتشر می‌کند؛ همچنین وبسایت‌های آموزشی، سرگرمی و …. نیز بسته به موضوع خاصی که دارند، محتوای متفاوتی را بر روی وبسایت خود بارگذاری می‌کنند. این محتوا به کمک کدهای زبان برنامه‌نویسی تحت وب اچ‌تی‌ام‌ال یا HTML ایجاد می‌شوند. CSS {3|three} در 1999 معرفی شد و تحول بزرگی در بهبود نسخه‌های CSS محسوب می‌شود.برای مثال، کسی که یک وبسایت خبری دارد، محتوای خبری خود را در سایتش منتشر می‌کند؛ همچنین وبسایت‌های آموزشی، سرگرمی و …. نیز بسته به موضوع خاصی که دارند، محتوای متفاوتی را بر روی وبسایت خود بارگذاری می‌کنند. این محتوا به کمک کدهای زبان برنامه‌نویسی تحت وب اچ‌تی‌ام‌ال یا HTML ایجاد می‌شوند. CSS {3|three} در 1999 معرفی شد و تحول بزرگی در بهبود نسخه‌های CSS محسوب می‌شود.

به کمک عبارت {text|textual content}-align نیز آن را وسط چین کردیم که خروجی آن را در سمت راست تصویر می‌بینید. ۲- ما ابتدا عناصر با خواص مشابه را بر حسب id و class آنها ، در گروه های یکسان قرار می دهیم. پس از آن مرورگر Internet Explorer {3|three} شروع به پشتیبانی از کدهای CSS کرد و در سال 2008 و در هشتمین نسخه خود، توانست به طور کامل CSS 2 را پشتیبانی کند. امروزه اکثر مرورگرها از CSS پشتیبانی می‌کنند، اما هنوز هم ممکن است توسعه ی نسخه‌های CSS، مشکلاتی به همراه داشته باشد.

در این بخش به شکل کامل در مورد روش اعمال استایل‌های css بر روی متن‌ها، موارد مختلفی را به شما آموزش خواهیم داد. بنابراین قبل از آموزش CSS شما باید آموزش HTML رو دیده باشین. یادگیری HTML خیلی سخت نیست و در مدت کوتاهی می‌تونین به اون مسلط بشین. HTML زبانی هست که تمامی عناصر موجود در صفحات وب مثل جعبه های متن، دکمه ها و غیره توسط اون ساخته می‌شن و با ترکیب اون با کدهای CSS ظاهر صفحه شکل می‌گیره. سی‌اس‌اس، روش چاپ شدن، روش شنیده شدن صدا برای کاربرانی با مشکل دسترسایی، و دستورهای فراوان دیگری را برای چگونگی نمایش سایه زیر قلم‌ها و پس زمینه‌های هر صفحه وب را در خود جای می‌دهند. آخرین نسخه پیشنهاد شده از استاندارد سی‌اس‌اس، نسخه ۳ می‌باشد که هنوز در مسیر پیشنهادی قرار دارد و مرورگرهای اینترنتی، هنوز تمام دستورهایش را پشتیبانی نمی‌کنند.

زمانی که آنرا به صفحه لینک می کنید، بصورت پیش فرض، حالت واکنشگرا را پشتیبانی می کند. یادگیری و استفاده از آن نسبت به دیگر فریم ورک ها آسان تر است. W3.CSS نسبت به دیگر فریم ورک ها مثل Bootstrap از حجم کمتری برخوردار است و در نتیجه سرعت لود صفحات افزایش پیدا خواهد کرد. تفاوت کارکرد CSS در مرورگرهای مختلف که ممکن است مشکلاتی برای برنامه نویسان ایجاد کند.

این آموزش CSS آخرین استانداردهای CSS / CSS3 را به شما آموزش می دهد. قالب بندی صفحه از طرح بندی آن جدا کرده و ایجاد تغییرات در صفحه به سادگی امکان پذیر است. با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند. کپی کردن بدون لینک کردن ذکر دقیق آدرس مطالب به عنوان منبع هر چند خلاف قوانین است ولی خلاف حرفه و اخلاق هم می‌باشد و ما رضایت نداریم. مشترک نمی شومدریافت همه دیدگاه های این نوشتهفقط دریافت پاسخ دیدگاه های خودم می‌توانید بدون ارسال دیدگاه مشترک ایمیلیاین نوشته شوید. فهمیدیم CSS چیه و چیکار می کنه،‌ و اینکه چطور می‌تونه به ما کمک کنه.

البته تصور اکثر افرادی که با وب و طراحی سایت سر و کار دارند این است که CSS برای نمایش خصوصیات صفحات HTML مورد استفاده قرار می گیرد. در صورتی که علاوه بر HTML ، صفحات XHTML و همچنین داده های مربوط به XML نیز می توانند از آن استفاده کنند. فریمورک های CSS عموما یک پکیج شامل مجموعه ای از پوشه ها و فایل هایی هستند که با استفاده از کدهای پایه استاندارد (شامل HTML، CSS و جاوااسکریپت و نظایر آن) ایجاد شده است. یکی از مهمترین نکته ها برای طراحی سایت، استفاده بهینه از css میباشد در این بخش ازآموزش cssبه شرح ویژگی های اساسی و مهم در طراحی وب سایت میپردازیم و روشهای اضافه کردن CSS به صفحه را مورد بررسی قرار میدهیم. کلمه "Cascading" یا آبشاری که اولین کلمه از CSS است به این نکته اشاره می‌کند که کدهای نوشته شده با CSS به صورت پیش فرض از بالا به پایین و به ترتیب پردازش و اجرا می‌شوند.

تگِ لینک فایلی را که در نظر داریم به صفحه سایت ما ضمیمه می کند، در اینجا برای صفحات سایت ما مشخص می کند که دستورات {style|type|fashion} را از فایل {-ای که برای آن تعریف شده است بگیرد. CSS مخفف Cascading Style Sheets می باشد و زبانی است برای مشخص کردن ویژگیهای ظاهری یک وب سایت. امروزه روی این مسئله خیلی تاکید می شود که حتما برای مشخص کردن ویژگیهای ظاهری یک صفحه به جای استفاده از تگ های HTML از CSS استفاده شود. علاوه بر این CSS می تواند این امکان را به شما بدهد که برای صفحه خود در مدیاهای مختلف ویژگیهای مختلفی در نظر بگیرید.

Css مخفف Cascading Style Sheets است که در معنای لغوی به روشی گفته می شود که برای قالب بندی و طراحی اجزای صفحه وبسایت کارایی دارد. شما می توانید بدون استفاده از کدهای HTML از طریق این استایل شیت ها می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کدنویسی و همچنین کند شدن سرعت بارگزاری صفحه در اینترنت می شود جلوگیری کنیم. در گذشته طراحان سایت مجبور بودند سایت های خود را بر پایه یک صفحه یک صفحه ای بسازند، بر همین اساس مجور بودند {style|type|fashion} های خود را نیز به همین صورت به سایت خود اعمال کنند.

در ادامه میتوانید یک مثال از این انتخابگر / شبه کلاس را در زبان CSS مشاهده نمایید. علاوه بر موارد فوق، بهبود بخشیدن به سرعت وبسایت و نگه‌داری آسان کدها نیز از دیگر ویژگی‌های این زبان تحت وب هستند. W3.CSS برای یادگیری و استفاده رایگان است و نیازی به تهیه ی لایسنس نیست.

آردینی اوخو
سه شنبه 26 اسفند 1399
بؤلوملر :

css چیست ؟ نکاتی که در باره Css باید بدانید

0 گؤروش
یازار:‌

همانطور که در مقدمه می خوانیم ، کلمه CSS مخفف Cascading style sheets است و به معنی ورق های سبک آبشار است. حالا چرا یک آبشار؟ زیرا دستورات CSS اعمال شده بر روی هر عنصر بر فرزندان آن عنصر نیز تأثیر می گذارد. ما در مقاله های بعدی بیشتر در این باره خواهیم فهمید! می توان گفت که تنها پیش نیاز یادگیری مفاهیم CSS ، حسن استفاده از HTML است. مباحث زیر مهمترین مباحثی هستند که برای شروع باید CSS را یاد بگیرید:

تسلط بر والدین و فرزندان
تسلط بر مفهوم عنصر و ویژگی (عنصر ، ویژگی)
بنابراین قبل از آموزش CSS شما باید آموزش HTML را دیده باشید. یادگیری HTML کار چندان سختی نیست و می توانید در مدت زمان کوتاهی بر آن تسلط پیدا کنید. HTML زبانی است که بوسیله آن همه عناصر در صفحات وب مانند جعبه متن ، دکمه ها و غیره ایجاد می شوند و با کد CSS ترکیب می شوند تا ظاهر صفحه را ایجاد کنند.


یک صفحه وب از اجزای زیر تشکیل شده است:

محتوا این قسمت از وب توسط کد HTML ایجاد شده است.
ارائه این قسمت از وب توسط کد CSS ایجاد شده است.
رفتار این قسمت از وب توسط JavaScript ایجاد شده است. آموزش جاوا اسکریپت
CSS چیست؟
کدهای CSS دستوراتی هستند که به وسیله آنها می توانیم تمام شکل ظاهری یک صفحه وب را مشخص کنیم. بنابراین شما برای اجرای طرح بندی صفحات وب خود از کد HTML استفاده می کنید و با کد CSS مشخص می کنید که هر عنصر باید چگونه باشد. شما آن را به اصطلاح رنگ آمیزی کرده و ویژگی دیگری کاملاً به آن اضافه می کنید!
کد CSS می تواند در موارد تکراری ، زمان طراحی و اندازه کد سایت صرفه جویی کند.

خوب است بدانید که در رتبه بندی وب سایت ها ، یعنی SEO ، گوگل سرعت بارگذاری سایت و کیفیت کد را نیز در نظر می گیرد و وب سایت هایی را معرفی می کند که سرعت بارگذاری آنها برای جستجوگران مناسب نیست.

توجه: در گذشته ، طراحی سایت و طراحی عناصر صفحه وب از طریق جداول انجام می شد. جداول مشکلات زیادی دارند و بنابراین با ظهور CSS کاملاً منسوخ می شوند. از جمله مشکلات جداول می توان به حجم بالای پردازش آنها توسط مرورگر و در نتیجه کاهش سرعت اشاره کرد. این ویژگی منفی وب سایت هایی است که با صفحه گسترده اجرا می شوند.

در مقابل ، در وب سایتی که با کد CSS پیاده سازی شده است ، هنگام بارگیری یکی پس از دیگری عنصر در صفحه ظاهر می شود و کاربر می تواند از لحظه درخواست تا زمان کامل بارگیری ، وب سایت را بخواند و مشاهده کند.

ناگفته نماند که CSS می تواند در 90٪ مرورگرها به خوبی کار کند.
در این بخش شما با ساختار کد CSS آشنا می شوید. در حال حاضر نیازی به درک نوع سبک به کار رفته نیست ، زیرا بخشهای زیر انواع سبک عناصر را به تفصیل آموزش می دهد. بنابراین فقط به قسمتهای مورد استفاده در یک دستور CSS ، نحوه تفکیک دستورات ، موقعیت دستورات و به طور کلی ساختار دستور توجه کنید.

ساختار نحوی کد CSS
Selector: این بخش نام عنصر HTML است که می خواهیم سبک مورد نظر را به آن اختصاص دهیم.
اعلامیه: بخشی که در وسط {نوشته شده است. Sign را قسمت اعلامیه می نامند و در این قسمت باید ملکی را که می خواهید اعمال کنید نامگذاری کنید و مقدار آن را مشخص کنید. در این مثال ، ویژگی رنگ برابر با مقدار آبی و ویژگی اندازه قلم برابر با 12 پیکسل است.

برای اطلاعات بیشتر و مثالهایی در مورد ساختار نحوی کد CSS ، می توانید مقاله Code Code in CSS را مطالعه کنید.
id و Class در CSS
همانطور که در ساختار نحوی دستورات مشاهده می کنید ، در قسمت Selector عنصری را که می خواهیم سبک بر روی آن اعمال شود را ذکر می کنیم.
دستورات را فقط روی یک عنصر واحد با شناسه اجرا کنید
برای این منظور ، ابتدا باید به کد HTML برویم و ویژگی id را برای عنصر مورد نظر تعریف کنیم. سپس به قسمت دستورات CSS بروید و در قسمت Selector ویژگی ID را که برای عنصر تعریف کردیم تایپ کنید و قبل از آن نماد "#" اضافه کنید.

به عنوان مثال ، اگر بخواهیم دستورات را فقط روی یک پاراگراف خاص اجرا کنیم ، ابتدا یک ویژگی id را در آن کد HTML برای آن پاراگراف تعریف خواهیم کرد:

<p id = "para1"> این یک پاراگراف است. <p>
سپس در دستورات CSS در قسمت Selector مقدار صفت id تعریف شده را با علامت "#" می نویسیم:

# para1 {
     text-align: مرکز؛
     رنگ: قرمز؛
}
دستورات را بر اساس گروهی از عناصر اجرا کنید
برای این کار ابتدا باید به کد HTML برویم و ویژگی Class را برای همه عناصری که می خواهیم خصوصیات ظاهری یکسانی داشته باشند تعریف کنیم. سپس به قسمت دستورات CSS بروید و در قسمت Selector ویژگی Class را که برای عناصر تعریف کردیم بنویسید و "". سمبل. قبل از آن اضافه کنید
به عنوان مثال ، اگر می خواهیم دستورات برای تعدادی از پاراگراف های مورد نظر ما اعمال شوند ، ابتدا یک ویژگی کلاس مشترک در کد HTML برای آن پاراگراف ها تعریف می کنیم:

<p class = "center"> این یک پاراگراف است. </ p>
سپس در دستورات CSS در قسمت Selector ، مقدار ویژگی Class با یک "" تعریف می شود. یا همان نکته را می نویسیم:

. مرکز {
text-align: مرکز؛
}
بنابراین ، این دستورات فقط در پاراگرافهایی اعمال می شوند که دارای طبقه ای برابر با مرکز هستند و سایر پاراگرافهای صفحه تحت تأثیر این دستورات نیستند.

برای کسب اطلاعات بیشتر در مورد کلاس ها و شناسه ها ، ضمیمه مقاله Classes and IDs را بخوانید.

کد CSS را کجا بنویسید؟
ما می توانیم این کدها را در داخل هر ویرایشگر کدی بنویسیم ، که پیشنهاد می کنیم ابتدا با آن کار کنید ، ویرایشگرهایی مانند براکت ، متن عالی و دفترچه یادداشت.

برای نوشتن کد CSS و پیوند دادن آن به HTML سه روش وجود دارد:
صفحه سبک خارجی: اتصال خارجی
ورق سبک داخلی: اتصال داخلی
Inline Style: اتصال درون خطی
ورق سبک خارجی
سبک های خارجی فایل های css هستند که توسط برچسب <link> در یک صفحه وب قرار می گیرند و بهترین راه برای تغییر شکل ظاهری وب سایت متشکل از صفحات زیادی هستند.
کد موجود در آن پرونده ها به این شکل است:

ساعت
   رنگ: سینا؛
}
پ {
   margin-left: 20px؛
}
بدن {
   background-image: url ("images / back40.gif")؛
}
درباره این روش ، ما در مورد روش اتصال خارجی در مقاله بیشتر خواهیم آموخت.

ورق سبک داخلی
نحوه نوشتن این سبک ها مانند یک سبک خارجی است ، اما تنها تفاوت در این است که ما به جای تگ <link> از برچسب <style> استفاده می کنیم.
کد زیر مثالی از یک سبک خارجی است.
ما می توانیم بیشتر در مورد این روش در مقاله روش اتصال داخلی بیاموزیم.

سبک درون خطی یا اتصال درون خطی
با استفاده از این روش ، بسیاری از مزایا و ویژگی هایی که دستورات CSS برای آنها ایجاد می کند را از دست می دهید. زیرا برای هر عنصر باید دستورات خاص خود را بنویسید و روشن است که برای تغییر باید به سراغ هر عنصر بروید و آنها را تغییر دهید ، که بسیار وقت گیر و گاهی با خطا همراه خواهد بود.

برای استفاده از این روش ، باید ویژگی style را به عنصر مورد نظر اضافه کنید و سپس خصوصیات و مقادیر را به این ویژگی اضافه کنید. در مثال زیر ، از همین روش برای تغییر رنگ متن پاراگراف استفاده می کنیم:

<p style = "color: yellow؛"> این یک پاراگراف است. </ p>
بیشتر در مورد این روش در مقاله اتصال درون خطی خواهیم خواند.

اثربخشی روشهای اتصال کد CSS را در اولویت قرار دهید
به طور کلی ، هنگام نوشتن کد CSS برای یک عنصر HTML با هر سه روش ، اولویت اجرای آنها به شرح زیر است:
سبک های درون خطی
ورق های سبک داخلی
برگه های سبک خارجی
بنابراین دستورات CSS که به صورت درون خطی و فقط برای یک عنصر خاص نوشته می شوند ، باعث می شوند که دستورات CSS مربوط به آن عنصر با روش پیوند داخلی نوشته شده در برچسب سبک و همچنین دستورات مربوطه در روش پیوند خارجی توسط برچسب پیوند به صفحه پیوست شده فعلی را نادیده بگیرید.

توجه: اگر بعد از دستورات CSS لینک داخلی در برچسب head پیوند به یک فایل CSS خارجی قرار گیرد ، در نهایت دستورات فایل CSS خارجی اعمال می شوند.

اطلاعات بیشتر در مورد اولویت بندی تأثیر را به روش کامل و شیرین تری در مقاله اولویت تأثیر بخوانید

در این جلسه با CSS آشنا شدیم. بفهمید CSS چه کاری انجام می دهد و چه کاری انجام نمی دهد. و چگونه می تواند به ما کمک کند.

ما همچنین با مجموعه ای از ویژگی ها و قوانین اساسی CSS آشنا شدیم که در جلسات آینده به تفصیل به مطالعه آنها خواهیم پرداخت.




آردینی اوخو
دوشنبه 22 دی 1399
بؤلوملر :