لاراولیستا

آموزش CSS Archives - لاراول یستا

- بار
آغاز دوره آموزشی CSS زومیت

آغاز دوره آموزشی CSS زومیت

 دوره آموزشی اچ تی  ام ال، از پانزدهمین روز مرداد آغاز و طی پانزده جلسه پایان یافت. در دوره قبلی تلاش کردیم تا با ساده ترین نحو ممکن و ارائه‌ی مثال‌های متعدد، آموزشی ساده و قابل فهم را برای سطوح مبتدی و متوسط ارائه کنیم. بعد از گذشت مدتی از پایان این دوره، کار بر روی شروع دوره آموزشی سی‌اس‌اس را آغاز کردیم و اکنون با گذشت کمتر از دو ماه، تمامی همت خود را برای […]

- بار
زنگ CSS: جلسه اول – آشنایی کلی با زبان CSS و نحوه اضافه کردن CSS به صفحه

زنگ CSS: جلسه اول – آشنایی کلی با زبان CSS و نحوه اضافه کردن CSS به صفحه

قبل از شروع مطلب اصلی, بد نیست اگر کمی بیشتر با خود زبان CSS و کاربرد آن طراحی وب آشنا شویم. ابتدا نگاهی به سی‌اس‌اس و نحوه تعامل آن با اچ‌تی‌ام‌ال نگاهی خواهیم انداخت و سپس روش‌های اضافه کردن سی‌اس‌اس به صفحات وب را به شما آموزش خواهیم داد. CSS یا Cascading Style Sheets چیست؟  برای درک بهتر اهمیت سی‌اس‌اس، فرض کنید قصد طراحی صفحه وبی دارید که بیش از ۱۰۰ پاراگراف متن دارد. اگر روزی بخواهید […]

- بار
زنگ CSS: جلسه دوم – قواعد اولیه نوشتن به زبان CSS

زنگ CSS: جلسه دوم – قواعد اولیه نوشتن به زبان CSS

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

- بار
زنگ CSS: جلسه سوم – نحوه انتخاب المان‌های HTML

زنگ CSS: جلسه سوم – نحوه انتخاب المان‌های HTML

در جلسه‌ی سوم از مجموعه‌ی آموزش CSS، نحوه‌ی انتخاب المان‌های HTML را می‌آموزیم. CSS Selector چیست؟ انتخاب‌ کردن یک المان HTML، یکی از مهمترین قواعد سی‌اس‌اس است. در واقع شما برای اینکه یک المان اچ تی ام ال را در سی اس اس تغییر دهید اول باید  آن را فراخوانی کنید. یعنی به نوعی آن را صدا بزنید! به این کار انتخاب کردن سی اس اس می‌گویند و شما با کمک انتخابگر، المان اچ تی […]

- بار
زنگ CSS: جلسه چهارم – پشت زمینه در CSS

زنگ CSS: جلسه چهارم – پشت زمینه در CSS

در جلسه‌ی چهارم از سری مقالات آموزش CSS چگونگی انتخاب صفحه یا رنگ برای پس‌زمینه را می‌آموزیم، با لاراولیستا همراه باشید. پشت زمینه در CSS یکی از موارد بسیار پر استفاده در CSS استفاده از پشت زمینه‌های متنوع است. در واقع شما در این زبان می‌توانید به هر المانی، عکس یا رنگ یا کادر دلخواه بدهید. قبل از آموزش رنگ‌آمیزی یا قرار دادن عکس در پشت زمینه المان‌های اچ‌تی‌ام‌ال، نحوه‌ی انتخاب رنگ‌ها را برای المان‌ها […]

- بار
زنگ CSS: جلسه پنجم – تغییر استایل متون HTML

زنگ CSS: جلسه پنجم – تغییر استایل متون HTML

فرمت کردن متن‌ها در اچ‌تی‌ام‌ال را در دوره آموزش اچ‌تی‌ام‌ال از طریق اتریبیبوت استایل آموخته‌ایم. این روش  که در واقع همان اینلاین سی‌اس‌اس است شاید برای بعضی موارد چندان اشکالی نداشته باشد؛ ولی در کل استفاده از این روش توصیه نمی‌شود. حالا  قصد داریم تا کارهای قبلی را با کمک سی‌اس‌اس و با سرعت بیشتری انجام دهیم. نکته‌ی خوشایند در این موضوع آن است که در این حالت نیازی به تغییر قواعد نوشتن نیست و […]

- بار
زنگ CSS: جلسه ششم – تغییرات فونت در CSS

زنگ CSS: جلسه ششم – تغییرات فونت در CSS

در قدم اول برای تغییر فونت در CSS به هر یک از سه روشی که دوست داریم و مناسب‌تر به نظر می‌رسد المان مورد نظر را انتخاب می‌کنیم. مثلا ما در این مثال می‌خواهیم المان‌های پاراگراف دارای کلاس text را با اندازه فونت بزرگ نشان دهیم. برای این کار مرحله‌ی زیر را طی می‌کنیم. نام:‌ font-size این ویژگی چه کاری انجام می‌دهد؟‌  تغییر اندازه فونت چه چیزهایی را در مقابلش بنویسیم؟  اندازه فونت بر اساس […]

- بار
زنگ CSS: جلسه هفتم – جعبه‌ها و قاب‌ها

زنگ CSS: جلسه هفتم – جعبه‌ها و قاب‌ها

یکی ازمفاهیم ابتدایی ولی مهم سی اس اس و اچ تی ام ال مدل جعبه‌ای است. در واقع می‌توان هر المان اچ تی ام ال را به صورت چند لایه تصور کرد. یک لایه‌ی اصلی در این المان‌ها محتوایی است که وجود دارد. لایه بعدی بردار یا قابی است که دور تا دور این المان کشیده شده است و در حالت پیش‌فرض نامرئی است، ولی شما می‌توانید با کمک دستور border آن را ظاهر کنید. […]

- بار
زنگ CSS: جلسه هشتم – مارجین (margin)

زنگ CSS: جلسه هشتم – مارجین (margin)

فرض کنید که دو المان در صفحه دارید که می‌خواهید فاصله ۵۰ پیکسلی بین آن‌ها بیندازید. مثلا دو div با ابعاد طول و عرض ۱۰۰  در ۱۰۰ پیکسل داریم که می خواهیم از هم فاصله ۵۰ پیکسلی داشته باشند.  در این جور مواقع است که مارجین به کمک می‌آید. مارجین در واقع فاصله بین دو المان است. اگر بخواهیم تعریف علمی‌تری از مارجین داشته باشیم باید بگوییم که مارجین، فاصله‌ای است که بین بیرونی‌ترین سطح […]

- بار
زنگ CSS: جلسه نهم – padding

زنگ CSS: جلسه نهم – padding

فرض کنید یک دیویژن رنگی دارید که در آن یک پاراگراف گذاشته‌اید! فاصله‌ای که بین پاراگراف (المان فرزند) و پدرش (المان دیویژین)‌ قرار می‌گیرد توسط padding مشخص می‌شود. در واقع از بردار المان تا محتوای داخلی آن فضای خالی وجود دارد که از آن به عنوان padding یاد می‌شود. نکته: اگر مفهوم پدر فرزندی را به یاد نمی‌آورید یک مرور کوتاه برایتان می‌کنیم. همانطور که قبلا توضیح مختصری داده‌ایم، در اچ تی ام ال رابطه […]