آموزش CSS (قسمت ۱)

آموزش-css-قسمت-۱

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

× کدهای CSS‌ با استفاده از Class و Id میتوانند ویژگی های خود را بر روی کدهای HTML اعمال نمایند.Class مشخصه ای همگانی می باشد یعنی میتوان از یک Class به چندین تگ HTML اعمال کرد اما مشخصه Id فقط مختص یک تگ می باشد و نمی توان ۲ بار از آن استفاده کرد. علامت نمایشی Class (.)  و برای Id (#) می باشد. در ادامه آموزش ها، با مفهوم این علامت ها بیشتر آشنا خواهید شد.

کدهای HTML :

<h5> اعمال رنگ با CSS </h5>
<p class="dr-red"> متن به رنگ قرمز </p>
<p class="dr-blue"> متن به رنگ آبی </p>
<p class="dr-green"> متن به رنگ سبز </p>
<p class="dr-purple"> متن به رنگ بنفش </p>

کدهای CSS : 

<style>
    .dr-red{
        color: #D63031;
        font-size: 16px;
    }
    .dr-blue{
        color: #0984E3;
        font-size: 15px;
    }
    .dr-green{
        color: #27AE60;
        font-size: 14px;
    }
    .dr-purple{
        color: #8E44AD;
        font-size: 14px;
    }
</style>

توجه داشته باشید که کدهای CSS را به ۳ صورت می توان استفاده کرد.

  1. استفاده در داخل کدهای HTML (درونی) : کدهای CSS باید داخل تگ <head> کدهای HTML قرار بگیرند و نیز خود کدهای CSS داخل تگ <style>. مانند کدهای بالا.
  2. استفاده خطی : کدهای CSS در داخل تگ های HTML‌ نوشته می شوند که در ادامه مثال خواهم زد.
  3. استفاده فایل جدا (بیرونی) : در این شکل، ابتدا باید فایلی با پسوند css. ایجاد کرده و کدهای CSS خود را داخل فایل وارد کنید و آن فایل را در کدهای HTML فراخوانی کنید که مثال خواهم زد.

استفاده خطی از CSS :

کدهای HTML : 

<h5> استفاده خطی از کدهای CSS </h5>
<p style="color:#D63031;font-size:20px;"> تغییر رنگ نوشته </p>

استفاده از فایل خارجی CSS :

کدهای HTML : 

<html>
<head>
    <title>دکتر کد - مرجع آموزش هایی به سبک متفاوت</title>
    <!-- فراخوانی فایل CSS -->
    <link rel="stylesheet" href="آدرس فایل.css">
</head>
<body>
    
</body>
</html>

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


قسمت بعدی ◄
خودتان امتحان کنید

آموزش های مرتبط :



نظرات کاربران

نظر شما؟