بازی با رنگ2

دسته بندی :دسته‌بندی نشده 3 دسامبر 2022 علیرضا بابامرادی 329

: بازی با رنگ2

2. کد زیر را در پنجره ویرایشگر وارد کنید:

<!DOCTYPE html>

<html>

<head>

<title>Testing colors in CSS3</title>

<style>

p {

font-family: Arial, Helvetica, sans-serif;

color: #ff0000;

background-color: cyan;

}

h1 {

color: rgb(255, 165, 0);

background-color: green;

}

</style>

</head>

<body>

<h1>Testing the color scheme</h1>

<p>

The quick brown fox jumps over the lazy dog.

</p>

<h1>This is the end of the color test</h1>

</body>

</html>

3. برنامه را به عنوان colortest ذخیره کنید.

html در پوشه DocumentRoot شما وب سرور اگر از XAMPP استفاده می کنید، c:\xampp\htdocs برای ویندوز یا /Applications/ است.

XAMPP/htdocs برای macOS.

4. وب سرور را راه اندازی کنید. اگر از XAMPP استفاده می کنید، کنترل پنل XAMPP را اجرا کنید و سپس روی دکمه Start برای وب سرور آپاچی کلیک کنید.

5. مرورگر خود را باز کنید و به آدرس فایل جدید بروید:

http://localhost:8080/colortest.html

توجه: ممکن است لازم باشد پورت URL را به آنچه وب سرور شما استفاده می کند تغییر دهید.

6. وب سرور را متوقف کرده و مرورگر را ببندید. شما باید در خروجی صفحه وب خود ببینید که مرورگر از موارد متفاوتی استفاده می کند رنگ برای عناصر h1 و عناصر p. با این حال، توجه داشته باشید که برخی وجود دارد فضای خالی بین عناصر، همانطور که در شکل 2-2 نشان داده شده است. شما هیچ فاصله ای بین عناصر p و h1 در کد HTML5 تعریف نکردید، بنابراین چرا آنجاست؟ ممکن است فکر کنید مشکلی با مرورگر پیش آمده است، اما در واقع، این یکی از ویژگی های CSS است که در ادامه به آن می پردازم.

کار با مدل جعبه

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

»» محتوا: متن یا تصویری که عنصر حاوی آن است.

پدینگ (padding): فضای اطراف محتوا

بوردر (border) : نشان دادن حالتی مانند قاب دور عنصر

مارجین (margin) : فضای خارج از مرز عنصر، بین عناصر

با CSS3، می توانید padding، حاشیه و حاشیه اطراف یک عنصر را تغییر دهید به برجسته شدن آن در صفحه وب کمک کنید. شما این کار را با استفاده از padding، margin، و ویژگی های سبک حاشیه. بیایید رنگ ترین را تصحیح کنیم.

کد html برای حذف حاشیه اطراف عناصر و مقداری بالشتک اضافی اضافه کنید تا ببینید چگونه چیزها را تغییر می دهد:

1. فایل colortest.html را که در «بازی با رنگ» ایجاد کرده‌اید باز کنید. بخش در ویرایشگر متن، ویرایشگر برنامه یا بسته IDE مورد علاقه شما.

2. سبک عنصر p و h1 را تغییر دهید تا حاشیه عنصر را روی 0px تنظیم کنید و 10 پیکسل بالشتک اضافه کنید. اکنون سبک ها باید به شکل زیر باشند:

<style>

p {

font-family: Arial, Helvetica, sans-serif;

color: #ff0000;

background-color: cyan;

margin: 0px;

padding: 10px;

}

h1 {

color: rgb(255, 165, 0);

background-color: green;

margin: 0px;

padding: 10px;

}

</style>

3. فایل colortest.html به روز شده را ذخیره کنید.

4. وب سرور را راه اندازی کنید. اگر از XAMPP استفاده می کنید، کنترل پنل XAMPP را راه اندازی کنید و سپس روی Start کلیک کنید دکمه برای وب سرور آپاچی.

5. مرورگر خود را باز کنید و به آدرس فایل جدید بروید:

http://localhost:8080/colortest.html

توجه: ممکن است لازم باشد پورت URL را به آنچه وب سرور شما استفاده می کند تغییر دهید.

6. وب سرور را متوقف کرده و مرورگر را ببندید.

توجه داشته باشید که فضای سفید از بین رفته است و فضای پس زمینه اطراف متن در عنوان و پاراگراف بزرگتر است.

به راحتی با اعداد حاشیه و بالشتک در کد HTML5 بازی کنید و ببینید که چگونه نمایشگر را تغییر می دهد.

علیرضا بابامرادی

تاریخ عضویت:19 سپتامبر 2022

راه آسان‌تری برای ارتباط با کاربران‌مان پیدا کرده‌ایم :) عضویت در کانال

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

چنانچه دیدگاهی توهین آمیز باشد تایید نخواهد شد.
چنانچه دیدگاه شما جنبه ی تبلیغاتی داشته باشد تایید نخواهد شد.
چنانچه از لینک سایر وبسایت ها و یا وبسایت خود در دیدگاه استفاده کرده باشید تایید نخواهد شد.
چنانچه در دیدگاه خود از شماره تماس، ایمیل و آیدی تلگرام استفاده کرده باشید تایید نخواهد شد.
چنانچه دیدگاهی بی ارتباط با موضوع آموزش مطرح شود تایید نخواهد شد.

دیدگاهتان را بنویسید لغو پاسخ

لینک کوتاه:

بازی با رنگ2

مطالب زیر را حتما بخوانید:

قوانین ارسال دیدگاه در سایت

دیدگاهتان را بنویسید لغو پاسخ

مزایای عضویت در سیگما:

نوشته‌های تازه

آخرین دیدگاه‌ها

دسته بندی مطالب

لینک های کمکی

خدمات اداری

خدمات تیم نهال آی تی

خدمات تیم نهال آی تی

نماد اعتماد الکترونیکی