ویدئو آموزشی آشنایی با استایل نویسی یا CSS (درس5)

 
کُد HTML چیست و چگونه نوشته می شود؟

کُد HTML چیست و چگونه نوشته می شود؟

مرور جلسات گذشته...

در درس های قبل گفته شد که یک سایت از کُد html ساخته می شود و کد html از مجموعه ای از تَگ ها شکل میگیرند.

نکات مهم:

نام هر تَگ بین علامت کوچکتر< و بزرگتر>  قرار میگیرد.

به طور استاندارد در درون تَگ html ، دو تگ head و body قرار دارند.

برای نوشتن پاراگراف یا متن از تَگ p استفاده میکنیم <p>

برای مثال کُد زیر چند متن را در یک صفحه سایت به نمایش در می آورد:

<html>

    <head>

    </head>

    <body>

          <p> اولین صفحه سایت من  </p>       

          <p> آکادمی برنامه نویسی آلپان </p>     

          <p>www.Alpan.ir </p>      

    </body>

</html>

استایل نویسی یا CSS چیست؟

استایل نویسی یا CSS چیست؟

برای زیبا سازی صفحات سایت و عناصر صفحه مانند متن،عکس و غیره ما از استایل نویسی استفاده میکنیم.

نام زبان استایل نویسی یا زیبا سازی CSS میباشد.

من نام این زبان رو خوشگلزاسیون گذاشتم .دقیقا مثل انسانها که لباسهای مختلف و زیبا میپوشند و خوش تیپ میکنند.

چگونه استایل نویسی (css نویسی) میکنیم؟

چگونه استایل نویسی (css نویسی) میکنیم؟

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

این خصوصیت استایل نویسی را به هر تَگی میتوانیم بدهیم.

کافیست درقسمت باز تَگ مورد نظر عبارت زیر را بنویسیم

   " " = style  

به طور مثال برای تَگ p به این صورت مینویسیم:

< p style=" " >   

</p>     

 

چگونه در استایل style زیبا سازی را مینویسیم؟

چگونه در استایل style زیبا سازی را مینویسیم؟

برای زیباسازی در دو علامت " " واقع در جلو style  استفاده می کنیم.

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

به طور مثال برای تغییر رنگ یک متن که با تَگ p نوشته میشود

کافیست ما همانند کُد زیر عمل کنیم:

<p style="color:blue;">   

</p>     

زیبا سازی از چه قسمت هایی تشکیل شده است؟

زیبا سازی از چه قسمت هایی تشکیل شده است؟

هر خصوصیت زیباسازی از دو قسمت تشکیل شده است:

1. عنوان خصوصیت مثلا color

2. مقدار خصوصیت مثلا رنگ آبی blue

بین این دو خصوصیت،علامت : قرار میگیرد

در انتها علامت ; قرار میگیرد.

یعنی به این صورت:

 style="color:blue;"   

یک مثال از استایل نویسی برای تغییر رنگ متن

یک مثال از استایل نویسی برای تغییر رنگ متن

برای مثال میخواهیم رنگ یک متن را آبی کنیم:

1. تَگ باز و بسته p را مینویسیم

2. درون تگ p متن خود را مینویسیم

3. در قسمت باز تَگ p مینویسیم 

  style="color:blue;" 

به کد صفحه زیر دقت کنید و خروجی را ببینید:

<html>

    <head>

    </head>

    <body>

          <p style="color:blue;" >

           آکادمی برنامه نویسی آلپان    

          </p>       

    </body>

</html>

چگونه استایل های مختلفی بنویسیم؟

چگونه استایل های مختلفی بنویسیم؟

ما میتوانیم استایل ها یا همان css ها را پشت سر هم بنویسیم.

 بین هر کدام از خصوصیت ها باید علامت سیمیکولن ; را قرار دهیم.

برای مثال کد قسمت قبل را به صورت زیر مینویسیم:

style="color:blue;background-color:yellow;"

خصوصیت background-color:yellow باعث میشود رنگ پس زمینه زرد شود.

به کد زیر توجه کنید و خروجی آن را مشاهده کنید:

<html>

    <head>

    </head>

    <body>

          <p style="color:blue;background-color:yellow;" >

           آکادمی برنامه نویسی آلپان    

          </p>       

    </body>

</html>

 

استایل نویسی برای چند پاراگراف جداگانه

استایل نویسی برای چند پاراگراف جداگانه

ما میتوانیم استایل ها یا همان کُد css (زیباسازی) را برای هر عنصری جداگانه بنویسیم.

برای مثال در کد زیر سه پاراگراف p با استایل های جداگانه نوشته شده است.

کُد را با دقت ببینید و خروجی را مشاهده کنید.

<html>

    <head>

    </head>

    <body>

          <p style="color:blue;background-color:yellow;" >

           آکادمی برنامه نویسی آلپان    

          </p>       

          <p style="color:green;" >

           www.Alpan.ir  

          </p>       

          <p style="color:white;background-color:black;" >

           09133521388    

          </p>       

    </body>

</html>

 

زبان زیباسازی سایت چیست؟




برای css نویسی از چه خصوصیتی استفاده میکنیم؟

 



در style چه تعداد کُد زیبا سازی میتوان قرار داد؟




پایان درس

لطفا در صورتی که تماما و با دقت مطالب این درس را فرا گرفتید، دکمه خواندم را کلیک کنید.

این درس نسبتا طولانی بود:

آفرین بر شما که با پشت کار و علاقه تا اینجا پیش آمدین

خوشحالیم بتوانیم آینده متفاوتی برای شما خلق کنیم.

لطفا این درس را چندین بار تکرار کنید.

مرور سریع درس آشنایی با استایل نویسی یا CSS

  • کُد HTML چیست و چگونه نوشته می شود؟

    در درس های قبل گفته شد که یک سایت از کُد html ساخته می شود و کد html از مجموعه ای از تَگ ها شکل میگیرند.

    نکات مهم:

    نام هر تَگ بین علامت کوچکتر< و بزرگتر>  قرار میگیرد.

    به طور استاندارد در درون تَگ html ، دو تگ head و body قرار دارند.

    برای نوشتن پاراگراف یا متن از تَگ p استفاده میکنیم <p>

    برای مثال کُد زیر چند متن را در یک صفحه سایت به نمایش در می آورد:

    <html>

        <head>

        </head>

        <body>

              <p> اولین صفحه سایت من  </p>       

              <p> آکادمی برنامه نویسی آلپان </p>     

              <p>www.Alpan.ir </p>      

        </body>

    </html>

  • استایل نویسی یا CSS چیست؟

    برای زیبا سازی صفحات سایت و عناصر صفحه مانند متن،عکس و غیره ما از استایل نویسی استفاده میکنیم.

    نام زبان استایل نویسی یا زیبا سازی CSS میباشد.

    من نام این زبان رو خوشگلزاسیون گذاشتم .دقیقا مثل انسانها که لباسهای مختلف و زیبا میپوشند و خوش تیپ میکنند.

  • چگونه استایل نویسی (css نویسی) میکنیم؟

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

    این خصوصیت استایل نویسی را به هر تَگی میتوانیم بدهیم.

    کافیست درقسمت باز تَگ مورد نظر عبارت زیر را بنویسیم

       " " = style  

    به طور مثال برای تَگ p به این صورت مینویسیم:

    < p style=" " >   

    </p>     

     

  • چگونه در استایل style زیبا سازی را مینویسیم؟

    برای زیباسازی در دو علامت " " واقع در جلو style  استفاده می کنیم.

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

    به طور مثال برای تغییر رنگ یک متن که با تَگ p نوشته میشود

    کافیست ما همانند کُد زیر عمل کنیم:

    <p style="color:blue;">   

    </p>     

  • زیبا سازی از چه قسمت هایی تشکیل شده است؟

    هر خصوصیت زیباسازی از دو قسمت تشکیل شده است:

    1. عنوان خصوصیت مثلا color

    2. مقدار خصوصیت مثلا رنگ آبی blue

    بین این دو خصوصیت،علامت : قرار میگیرد

    در انتها علامت ; قرار میگیرد.

    یعنی به این صورت:

     style="color:blue;"   

  • یک مثال از استایل نویسی برای تغییر رنگ متن

    برای مثال میخواهیم رنگ یک متن را آبی کنیم:

    1. تَگ باز و بسته p را مینویسیم

    2. درون تگ p متن خود را مینویسیم

    3. در قسمت باز تَگ p مینویسیم 

      style="color:blue;" 

    به کد صفحه زیر دقت کنید و خروجی را ببینید:

    <html>

        <head>

        </head>

        <body>

              <p style="color:blue;" >

               آکادمی برنامه نویسی آلپان    

              </p>       

        </body>

    </html>

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

    ما میتوانیم استایل ها یا همان css ها را پشت سر هم بنویسیم.

     بین هر کدام از خصوصیت ها باید علامت سیمیکولن ; را قرار دهیم.

    برای مثال کد قسمت قبل را به صورت زیر مینویسیم:

    style="color:blue;background-color:yellow;"

    خصوصیت background-color:yellow باعث میشود رنگ پس زمینه زرد شود.

    به کد زیر توجه کنید و خروجی آن را مشاهده کنید:

    <html>

        <head>

        </head>

        <body>

              <p style="color:blue;background-color:yellow;" >

               آکادمی برنامه نویسی آلپان    

              </p>       

        </body>

    </html>

     

  • استایل نویسی برای چند پاراگراف جداگانه

    ما میتوانیم استایل ها یا همان کُد css (زیباسازی) را برای هر عنصری جداگانه بنویسیم.

    برای مثال در کد زیر سه پاراگراف p با استایل های جداگانه نوشته شده است.

    کُد را با دقت ببینید و خروجی را مشاهده کنید.

    <html>

        <head>

        </head>

        <body>

              <p style="color:blue;background-color:yellow;" >

               آکادمی برنامه نویسی آلپان    

              </p>       

              <p style="color:green;" >

               www.Alpan.ir  

              </p>       

              <p style="color:white;background-color:black;" >

               09133521388    

              </p>       

        </body>

    </html>