آموزش کامل Css

آموزش کامل CSS قسمت هشتم

در این جلسه از آموزش های CSS به ادامه باکس مدل ها می‌ پردازیم.

باکس مدل ها و تصویر در وب سایت

در آموزش CSS جلسه قبل، انواع باکس مدل ها را در ارتباط با متن در وب سایت بررسی کردیم در این جلسه با اضافه کردن تصویر به وب سایت دوباره قوانین border، padding وmargin را برای تصویر نیز بررسی می‌کنیم.

ابتدا قوانینی که جلسه قبل در عنصر body ایجاد کردیم را پاک کنید. ابعاد تصویر مورد نظرتان را می‌توانید در نرم افزار Microsoft Paint یا هر نرم افزار طراحی دیگری به دلخواه و متناسب با وب سایتتان تغییر دهید؛ تصویر را در پوشه وبسایت که در جلسه های قبل ایجاد کردیم قرار دهید و قانون <img class=”imagec” src=”pishrosystem.jpg>را برای ارجاع دادن، در سند HTML بنویسید. در این عبارت img نشان دهنده آن است که در این بخش قرار است تصویر آپلود شود، عبارت imagec کلاسی است که به آن احتیاج داریم و عبارت src نیز مخفف source attribute است و در آخر به جای عبارت pishrosystem باید نام عکس موردنظرتان را وارد کنید.

<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body dir="rtl">
    <h1>پیشرو سیستم</h1>
    <p class="para1">به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.</p>
    <h2>شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.</h2>
    <img class="imagec" src="pishrosystem.jpg">
    <p class="para2">می توانید این متن را در ویرایشگر خود تغییر دهید. </p>
</body>
</html>

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

باکس حاشیه (margin box)

همانطور که مشاهده می‌کنید تصویر در سمت راست وب سایت قرار گرفته است برای این که تصویر را وسط چین یا چپ چین بنا به خواسته خودتان تغییر دهید باید از margin box استفاده کنید. برای این کار کافیست به صفحه استایل رفته و قوانین زیر را برای تصویر موردنظرتان ایجاد کنید. در قوانین زیر ویژگی display (در جلسات آینده به آن می‌پردازیم) و مقدار auto جدید هستند در این نمونه محتوا تصویر است؛ پس با مقدار auto در حاشیه چپ و راست بصورت خودکار تصویر وسط چین می‌شود و حاشیه را در هر دو طرف تصویر بصورت مساوی تقسیم می‌کند.

        body    { color:green; font-family:Arial black; font-weight:normal; font-size:15px; }
        h1      { text-decoration: underline; font-size:150% }
        h2      { text-decoration: underline; font-size:1.2em }
        p.para1 { color:blue;}
        p.para2 { color:blue;}
        .imagec { display:block; margin-left:auto; margin-right:auto; }

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

باکس مرز(border box) و باکس لایه گذاری(padding box)

در این مرحله ویژگی های border و padding را بر روی تصویر اعمال می‌کنیم. 

        body    { color:green; font-family:Arial black; font-weight:normal; font-size:15px; }
        h1      { text-decoration: underline; font-size:150% }
        h2      { text-decoration: underline; font-size:1.2em }
        p.para1 { color:blue;}
        p.para2 { color:blue;}
        .imagec { display:block; margin-left:auto; margin-right:auto; padding:3px; 
                  border-color:orange;
                  border-width:2px;
                  border-style:solid;
                  background-color:silver; }

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

می توانید این متن را در ویرایشگر خود تغییر دهید.

همانطور که از قبل به خاطر دارید؛ با نوشتن padding:20px برای عنصری، مقدار20 پیکسل در تمام جهات آن عنصر اعمال می‌شود اما در این مرحله یاد می‌گیریم چگونه با نوشتن یک ویژگی مقادیر متفاوت را برای جهات متفاوت بر روی آن اعمال کنیم. ابتدا قوانین مربوط به تصویر را برای جلوگیری از شلوغی پاک کنید و دوباره مقداری متن به پاراگراف دوم اضافه کنید و قوانین CSS را مانند مثال زیر بر روی عنصرتان اعمال کنید.

        body    { color:green; font-family:Arial black; font-weight:normal; font-size:15px; }
        h1      { text-decoration: underline; font-size:150% }
        h2      { text-decoration: underline; font-size:1.2em }
        p.para1 { color:blue;}
        p.para2 { color:blue;
                  padding:20px 20px 20px 70px;}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

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

همانطورکه در بالا مشاهده می‌کنید سمت چپ پاراگراف فضای خالی بیشتری وجود دارد زیرا اولین مقدار برای لایه بالا، دومین مقدار برای لایه راست، سومین مقدار برای لایه پایین و آخرین مقدار که 70px است برای لایه چپ اعمال می‌شود. همین قانون برای margin box هم کاربرد دارد همچنین برای border box هم می‌توان از این قانون استفاده کرد که در مثال زیر به آن پرداخته ایم.

        body    { color:green; font-family:Arial black; font-weight:normal; font-size:15px; }
        h1      { text-decoration: underline; font-size:150% }
        h2      { text-decoration: underline; font-size:1.2em }
        p.para1 { color:blue;}
        p.para2 { color:blue;
                  padding:20px 20px 20px 70px;
                  border: green 2px solid;}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

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

همانطور که در نتیجه بالا مشاهده می‌کنید اولین مقدار برای رنگ، دومین مقدار برای ضخامت و سومین مقدار برای استایل بردار اعمال می‌شود. برای از بین بردن حداقل فاصله بین دو عنصر کافیست به هردو عنصر، ویژگی margin:0 را اختصاص دهید.

        body    { color:green; font-family:Arial black; font-weight:normal; font-size:15px; }
        h1      { text-decoration: underline; font-size:150% }
        h2      { text-decoration: underline; font-size:1.2em;margin:0; }
        p.para1 { color:blue;}
        p.para2 { color:blue;
                  padding:20px 20px 20px 70px;
                  border: green 2px solid;
                  margin:0;}

پیشرو سیستم

به وب سایت ما خوش آمدید، ما یک شرکت توسعه نرم افزار و طراحی سایت هستیم.

شما در حال مشاهده یکی از قسمتهای آموزش CSS هستید.

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

همانطور که در بالا مشاهده می‌کنید بین دو عنصر تیتر دوم و پاراگراف دوم هیچ فاصله ای وجود ندارد.

دیدگاهتان را بنویسید