قبل از شروع مطلب اصلی, بد نیست اگر کمی بیشتر با خود زبان CSS و کاربرد آن طراحی وب آشنا شویم. ابتدا نگاهی به سی‌اس‌اس و نحوه تعامل آن با اچ‌تی‌ام‌ال نگاهی خواهیم انداخت و سپس روش‌های اضافه کردن سی‌اس‌اس به صفحات وب را به شما آموزش خواهیم داد. CSS یا Cascading Style Sheets چیست؟ برای درک بهتر اهمیت سی‌اس‌اس، فرض کنید قصد طراحی صفحه وبی دارید که بیش از ۱۰۰ پاراگراف متن دارد. اگر روزی بخواهید […]
اگر زبان HTML را به خوبی به یاد داشته باشید، حتما پی برده‌اید که کار طراحی وب و کدنویسی با اچ تی ام ال از آب خوردن هم چند درجه آسان‌تر است. حالا رفته رفته پی خواهید برد که استفاده از سی اس اس نیز، چندان کار سختی نیست. نوشتن در سی اس اس سه مرحله کلی دارد: مرحله‌ی اول: با روش‌هایی که در جلسه بعدی مفصل به آنها خواهیم پرداخت، المان های اچ تی […]
در جلسه‌ی سوم از مجموعه‌ی آموزش CSS، نحوه‌ی انتخاب المان‌های HTML را می‌آموزیم. CSS Selector چیست؟ انتخاب کردن یک المان HTML، یکی از مهمترین قواعد سی‌اس‌اس است. در واقع شما برای اینکه یک المان اچ تی ام ال را در سی اس اس تغییر دهید اول باید آن را فراخوانی کنید. یعنی به نوعی آن را صدا بزنید! به این کار انتخاب کردن سی اس اس می‌گویند و شما با کمک انتخابگر، المان اچ تی […]
در جلسه‌ی چهارم از سری مقالات آموزش CSS چگونگی انتخاب صفحه یا رنگ برای پس‌زمینه را می‌آموزیم، با لاراولیستا همراه باشید. پشت زمینه در CSS یکی از موارد بسیار پر استفاده در CSS استفاده از پشت زمینه‌های متنوع است. در واقع شما در این زبان می‌توانید به هر المانی، عکس یا رنگ یا کادر دلخواه بدهید. قبل از آموزش رنگ‌آمیزی یا قرار دادن عکس در پشت زمینه المان‌های اچ‌تی‌ام‌ال، نحوه‌ی انتخاب رنگ‌ها را برای المان‌ها […]
اکثر افراد حوصله یا زمان کافی برای یادگیری یک مهارت جدید را ندارند. یادگیری یک زبان برنامه‌نویسی هم از جمله مهارت‌های نسبتاً دشوار و زمان‌گیر است. علاوه بر آن، انتخاب اینکه چه زبان برنامه‌نویسی را چه موقع و چگونه یاد بگیرید، خود فرآیندی زمان‌بر است. با وجود تنوع کلاس‌ها، کارگاه‌های آموزشی، ویدئوها، نرم افزارهای آموزشی و کتاب‌هایی که برای انتخاب وجود دارند، و از طرفی وجود زبان‌های مختلف و متفاوت، تصمیم گیری درباره‌ی اینکه کدام […]
فرمت کردن متن‌ها در اچ‌تی‌ام‌ال را در دوره آموزش اچ‌تی‌ام‌ال از طریق اتریبیبوت استایل آموخته‌ایم. این روش که در واقع همان اینلاین سی‌اس‌اس است شاید برای بعضی موارد چندان اشکالی نداشته باشد؛ ولی در کل استفاده از این روش توصیه نمی‌شود. حالا قصد داریم تا کارهای قبلی را با کمک سی‌اس‌اس و با سرعت بیشتری انجام دهیم. نکته‌ی خوشایند در این موضوع آن است که در این حالت نیازی به تغییر قواعد نوشتن نیست و […]
در قدم اول برای تغییر فونت در CSS به هر یک از سه روشی که دوست داریم و مناسب‌تر به نظر می‌رسد المان مورد نظر را انتخاب می‌کنیم. مثلا ما در این مثال می‌خواهیم المان‌های پاراگراف دارای کلاس text را با اندازه فونت بزرگ نشان دهیم. برای این کار مرحله‌ی زیر را طی می‌کنیم. نام: font-size این ویژگی چه کاری انجام می‌دهد؟ تغییر اندازه فونت چه چیزهایی را در مقابلش بنویسیم؟ اندازه فونت بر اساس […]
یکی ازمفاهیم ابتدایی ولی مهم سی اس اس و اچ تی ام ال مدل جعبه‌ای است. در واقع می‌توان هر المان اچ تی ام ال را به صورت چند لایه تصور کرد. یک لایه‌ی اصلی در این المان‌ها محتوایی است که وجود دارد. لایه بعدی بردار یا قابی است که دور تا دور این المان کشیده شده است و در حالت پیش‌فرض نامرئی است، ولی شما می‌توانید با کمک دستور border آن را ظاهر کنید. […]
فرض کنید که دو المان در صفحه دارید که می‌خواهید فاصله ۵۰ پیکسلی بین آنها بیندازید. مثلا دو div با ابعاد طول و عرض ۱۰۰ در ۱۰۰ پیکسل داریم که می خواهیم از هم فاصله ۵۰ پیکسلی داشته باشند. در این جور مواقع است که مارجین به کمک می‌آید. مارجین در واقع فاصله بین دو المان است. اگر بخواهیم تعریف علمی‌تری از مارجین داشته باشیم باید بگوییم که مارجین، فاصله‌ای است که بین بیرونی‌ترین سطح […]
فرض کنید یک دیویژن رنگی دارید که در آن یک پاراگراف گذاشته‌اید! فاصله‌ای که بین پاراگراف (المان فرزند) و پدرش (المان دیویژین) قرار می‌گیرد توسط padding مشخص می‌شود. در واقع از بردار المان تا محتوای داخلی آن فضای خالی وجود دارد که از آن به عنوان padding یاد می‌شود. نکته: اگر مفهوم پدر فرزندی را به یاد نمی‌آورید یک مرور کوتاه برایتان می‌کنیم. همانطور که قبلا توضیح مختصری داده‌ایم، در اچ تی ام ال رابطه […]
