وارد کردن CSS در تگهای HTML با استفاده از شناسه Style
وارد کردن CSS در تگهای HTML با استفاده از شناسه Style

تصور کنیم که ما صفحه وب خود را با استفاده از یک کد HTML ساده ایجاد کرده ایم، و ما می خواهیم چیزی که بتواند صفحه ما را با فرمت صحیح ارائه دهد و به وضوح جذاب باشد. برای انجام این کار، می توانیم صفحه وب خود را با ویژگی های css در(Cascading Stylesheet) طرحی کنیم.

CSS برای اعمال استایل در صفحه وب که از عناصر HTML تشکیل شده است استفاده می شود. این توصیف ظاهر صفحه وب است.

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

هر خاصیت در CSS دارای یک جفت name-value است و هر خاصیت با یک کلمه جدا می شود (؛).

مثال:

<body style="text-align: center;">  
      <h2 style="color: red;"> به باگتو خوش آمدین</h2>  
      <p style="color: blue; font-size: 25px; font-style: italic ;">باگتو سایت آموزش برنامه نویسی است</p>  
</body>  

خروجی:

 

css in html

 

سه روش برای اعمال CSS


برای استفاده از CSS با سند HTML ، سه روش وجود دارد:

Inline CSS: خصوصیات CSS را با استفاده از ویژگی استایل در عناصر HTML تعریف می کنیم .
داخلی یا جاسازی شده CSS : CSS را با استفاده از تگ  <style> در بخش <head> تعریفمی کنیم.
External CSS: تمام ویژگی های CSS را در یک پرونده جداگانه .css تعریف می کنیم و سپس با استفاده ازتگ section ، فایل  را به  پرونده HTML وارد می کنیم.

Inline CSS:


Inline CSS برای اعمال CSS  تنها در یک عنصر  استفاده می شود.  و ویژگی های که نوشته می شود فقط در یک عنصر استفاده می شود.

برای اعمال CSS درون خطی ، باید از عنصرstyle درون عنصر HTML استفاده کنید. ما  هر تعداد ویژگی که بخواهیم میتوانیم استفاده کنیم، اما هر یک از ویژگی ها باید با یک  سیمیکالن (semicolon) از هم جدا شوند.

مثال:

<body style="text-align: center;">  
      <h2 style="color: red;"> به باگتو خوش آمدین</h2>  
      <p style="color: blue; font-size: 25px; font-style: italic ;">باگتو سایت آموزش برنامه نویسی است</p>  
</body>  

خروجی:

inline css

 

CSS داخلی:


در روش اعمال css  داخلی تمام ویژگی های CSS برای یک صفحه وب که  را در قسمت <head> سند HTMLقرار می دهیم.برای استفاده از CSS داخلی ، می توانیم از خصوصیات کلاس و id هم استفاده کنیم.

برای اعمال style  برای یک صفحه HTML می توانیم از CSS داخلی استفاده کنیم.

مثال:

<!DOCTYPE html>  
<html>  
<head>  
                  <style>  
      /*Internal CSS using element name*/  
            body{background-color:lavender;  
             text-align: center;}  
             h2{font-style: italic;  
              font-size: 30px;  
              color: #f08080;}  
            p{font-size: 20px;}  
        /*Internal CSS using class name*/  
            .blue{color: blue;}  
            .red{color: red;}  
            .green{color: green;}  
      </style>  
    </head>  
  <body>  
   <h2>Learning HTML with internal CSS</h2>  
    <p class="blue">This is a blue color paragraph</p>  
    <p class="red">This is a red color paragraph</p>  
    <p class="green">This is a green color paragraph</p>  
  </body>  

خروجی:

internal css

CSS خارجی:


CSS خارجی شامل یک پرونده CSS جداگانه است که فقط شامل کد style با استفاده از نام کلاس ، نام id ، نام تگ ، و غیره است.

اگر چندین صفحه HTML برای یک برنامه داشته باشیم و از CSS مشابه استفاده کنیم ، می توانیم از CSS خارجی استفاده کنیم.

برای اعمال CSS خارجی ،به دو فایل احتیاج داریم 

ابتدا فایل HTML را ایجاد کنید
با استفاده از پسوند css.، یک فایل CSS ایجاد کرده و آن را ذخیره کنید.
فایل CSS را در پرونده HTML خود با استفاده از تگ در بخش هدر سند HTML پیوند دهید.

مثال: فایل html

<!DOCTYPE html>  
<html>  
<head>  
    <link rel="stylesheet" type="text/css" href="style.css">  
    </head>  
  <body>  
   <h2>Learning HTML with External CSS</h2>  
    <p class="blue">This is a blue color paragraph</p>  
    <p class="red">This is a red color paragraph</p>  
    <p class="green">This is a green color paragraph</p>  
  </body>  
</html>  

فایل css:

body{
background-color:lavender;
text-align: center;
}
h2{
font-style: italic;
size: 30px;
color: #f08080;
}
p{
font-size: 20px;
}

.blue{
color: blue;
}
.red{
color: red;
}
.green{
color: green;
}

خروجی:

external css

 

خصوصیات رایجی که در  css  استفاده می شود:

نام ویژگیSyntax=روش استفادهتوضیحات
background-colorbackground-color:red;رنگ پس زمینه آن عنصر را تعریف می کند.
colorcolor: lightgreen;رنگ متن یک عنصر را تعریف می کند
paddingpadding: 20px;فضای بین محتوا و مرز را مشخص می کند.
marginmargin: 30px; margin-left:فضایی را در اطراف یک عنصر ایجاد می کند.
font-familyfont-family: cursive;خانواده فونت  برای یک عنصر خاص رامشخص میکند
Font-sizefont-size: 50px;اندازه یک قلم را برای یک عنصر خاص تعریف می کند.
text-aligntext-align: left;برای تراز کردن متن در موقعیت انتخابی استفاده می شود.

 

 

 

 

 

 

 

 

 

 

 

مقاله قبلی     مقاله بعدی

 

جدیدترین ویدئوهای آموزشی

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

0 نظرات

برای ارسال نظر باید وارد حساب کاربری خود شوید
ورود به حساب کاربری ثبت نام

بیش از 50% تخفیف به مناسبت جمعه سیاه
فقط تا پایان امروز