Summarize this content to 400 words in Persian Lang حال، بیایید ببینیم چگونه می توانیم از CSS برای بهبود ظاهر و احساس این صفحه استفاده کنیم.
به عنصر سر ما نگاه کنید:
<head>
<title>My First Web Page</title>
</head>
در حال حاضر، ما یک عنصر واحد در داخل عنصر سر داریم. این عنصر عنوان ما است.
حال پس از عنوان، عنصر دیگری به نام style را اضافه می کنیم. اینجا جایی است که قصد داریم کد CSS خود را بنویسیم.
بنابراین، در بین تگ‌های سبک، می‌خواهیم دسته‌ای از قوانین CSS را بنویسیم.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<img src=”Images/altumcode.jpg”>
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
ابتدا قرار است روی این تصویر کار کنیم. تصویر ما در حال حاضر خیلی بزرگ است.
بنابراین، اجازه دهید آن را کمی کوچکتر کنیم.
بازگشت به VS Code. در داخل تگ های استایل، موارد زیر را تایپ می کنیم:
<style>
img {
}
</style>
img به عنصر تصویر ما ارجاع می دهد. سپس یک جفت بریس مجعد تایپ می کنیم {} و در داخل آنها یک یا چند اعلان CSS می نویسیم. هر اعلان حاوی یک ویژگی و یک مقدار است.
در اینجا می توانیم ویژگی width را مثلاً 100 پیکسل تنظیم کنیم.
<style>
img {
width: 100px;
}
</style>
بنابراین، ویژگی را تایپ می کنیم، یک نقطه ویرگول و سپس مقدار را اضافه می کنیم. سپس این خط را با استفاده از نقطه ویرگول خاتمه می دهیم تا بتوانیم چندین اعلان CSS بنویسیم.
width: 100px;
در اینجا چگونه در VS Code به نظر می رسد:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
}
</style>
</head>
<body>
<img src=”Images/altumcode.jpg”>
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
<html>
حالا بیایید تغییرات را ذخیره کنیم.
در مرورگر، تصویر ما کوچکتر به نظر می رسد. خیلی بهتره
اما به لبه ها نگاه کنید. لبه ها خیلی تیز هستند من می خواهم آنها را کمی گرد کنم تا نرم تر به نظر برسند.
به قانون خود بازگردیم – در اینجا ما شعاع مرزی را روی 10 پیکسل قرار می دهیم.
<style>
img {
width: 100px;
border-radius: 10px;
}
</style>
نگران حفظ هیچ یک از این خواص نباشید. ما در طول آموزش چندین بار آنها را مرور خواهیم کرد. در این بخش، فقط می‌خواهم درک کنید که استفاده از CSS چگونه است.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 10px;
}
</style>
</head>
<body>
<img src=”Images/altumcode.jpg”>
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
حالا تغییرات را ذخیره کنید.
نگاه کنید – لبه ها گرد هستند و نرم تر به نظر می رسند. حالا بگذارید یک ترفند به شما نشان دهم.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
}
</style>
</head>
<body>
<img src=”Images/altumcode.jpg”>
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
اگر با border-radius باشد، برای اضافه کردن مقداری که نصف عرض است، یک تصویر گرد می گیریم. بنابراین، من می‌خواهم شعاع مرزی را روی 50 پیکسل تنظیم کنم که نصف عرض ما است.
<style>
img {
width: 100px;
border-radius: 50px;
}
</style>
در VS Code اینگونه به نظر می رسد:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
}
</style>
</head>
<body>
<img src=”Images/altumcode.jpg”>
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
و این هم نتیجه:
این خیلی بهتر است.
اکنون عناصر ما به صورت عمودی روی هم چیده شده اند. اما من می خواهم تصویر به سمت چپ فشار داده شود.
بنابراین، اجازه دهید ویژگی float را روی آن قرار دهیم left.
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
}
</style>
این عنصر تصویر را به سمت چپ عناصر متنی ما فشار می دهد. نگاهی بیندازید:
این خیلی بهتر است، اما تصویر ما بسیار به متن نزدیک است. من می خواهم کمی فاصله بعد از تصویر اضافه کنم. در اینجا از ویژگی دیگری به نام استفاده خواهیم کرد margin-right. ما می توانیم آن را تنظیم کنیم 10px.
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
</style>
در اینجا چگونه در VS Code به نظر می رسد:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<img src=”Images/altumcode.jpg”>
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
تغییرات را ذخیره کنید.
این خیلی بهتر است. حالا بیایید نام کاربری را پررنگ کنیم. ما یک بار دیگر این روند را تکرار می کنیم.
این بار، می‌خواهیم یک قانون را برای عنصر پاراگراف خود اعمال کنیم. را تنظیم کنید font-weight دارایی به پررنگ.
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
p {
font-weight: bold;
}
</style>
این کد در VS Code است:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
float:left;
margin-right: 10px;
}
p {
font-weight: bold;
}
</style>
</head>
<body>
<img src=”Images/altumcode.jpg”>
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
<html>
نگاهی بیندازید.
ببین چی شد؟ هر دو عنصر متن ما پررنگ هستند. اما، اگر بخواهید این سبک را فقط برای نام کاربری اعمال کنید، چه؟
خوب، ما باید این دو عنصر پاراگراف را از هم جدا کنیم.
<body>
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
بنابراین، من قصد دارم به اولین عنصر یک ویژگی به نام بدهم class مانند این:
<body>
<p class=””>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
Class مخفف طبقه بندی است و ما می توانیم از این ویژگی برای قرار دادن این عنصر در یک کلاس یا دسته متفاوت استفاده کنیم. درست مانند محصولات موجود در یک سوپرمارکت.
در یک سوپرمارکت، ما محصولاتی در دسته های مختلف داریم، درست است؟
بنابراین، من قصد دارم این عنصر پاراگراف را در یک کلاس یا داخل یک دسته به نام قرار دهم username:
<body>
<p class=”username”>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
و سپس این قانون را تغییر می دهم:
<style>
p {
font-weight: bold;
}
</style>
که در حال حاضر برای همه عناصر پاراگراف اعمال می شود – اما من می خواهم فقط برای عناصر پاراگراف با a اعمال شود username کلاس
بنابراین، بلافاصله پس از آن p تایپ می کنیم p.username:
p.username {
font-weight: bold;
}
در حال حاضر، ما همچنین می توانیم حذف کنیم p و این قانون برای تمام عناصری که دارای این هستند اعمال خواهد شد username کلاس، چه عناصر پاراگراف باشند و چه دیگر انواع عناصر.
.username {
font-weight: bold;
}
حال، تغییرات را ذخیره کنید.
در VS Code اینگونه به نظر می رسد:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img{
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
.username{
font-weight: bold;
}
</style>
</head>
<body>
<img src=”Images/altumcode.jpg”>
<p class=”username”>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
حالا یه نگاهی بنداز
این خیلی بهتر است.
این CSS در عمل است. همانطور که می بینید، CSS دارای نحو متفاوتی نسبت به HTML است.
در طول بقیه آموزش، شما قرار است این زبان ها را با جزئیات یاد بگیرید.
در مرحله بعد، من به شما نشان خواهم داد که چگونه کد خود را با استفاده از Prettier فرمت کنید.
در قسمت بعدی می بینمت!
PS 🚀 آماده اید تا حرفه خود را در توسعه وب شروع کنید؟ برای تسلط بر HTML، CSS، JavaScript، React و موارد دیگر به دوره ما بپیوندید! پروژه های دنیای واقعی بسازید، از کارشناسان صنعت بیاموزید و با یک جامعه حامی ارتباط برقرار کنید. همین الان ثبت نام کنید
حال، بیایید ببینیم چگونه می توانیم از CSS برای بهبود ظاهر و احساس این صفحه استفاده کنیم.
به عنصر سر ما نگاه کنید:
<head>
<title>My First Web Page</title>
</head>
در حال حاضر، ما یک عنصر واحد در داخل عنصر سر داریم. این عنصر عنوان ما است.
حال پس از عنوان، عنصر دیگری به نام style را اضافه می کنیم. اینجا جایی است که قصد داریم کد CSS خود را بنویسیم.
بنابراین، در بین تگ‌های سبک، می‌خواهیم دسته‌ای از قوانین CSS را بنویسیم.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<img src="Images/altumcode.jpg">
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
ابتدا قرار است روی این تصویر کار کنیم. تصویر ما در حال حاضر خیلی بزرگ است.
بنابراین، اجازه دهید آن را کمی کوچکتر کنیم.
بازگشت به VS Code. در داخل تگ های استایل، موارد زیر را تایپ می کنیم:
<style>
img {
}
</style>
img به عنصر تصویر ما ارجاع می دهد. سپس یک جفت بریس مجعد تایپ می کنیم {} و در داخل آنها یک یا چند اعلان CSS می نویسیم. هر اعلان حاوی یک ویژگی و یک مقدار است.
در اینجا می توانیم ویژگی width را مثلاً 100 پیکسل تنظیم کنیم.
<style>
img {
width: 100px;
}
</style>
بنابراین، ویژگی را تایپ می کنیم، یک نقطه ویرگول و سپس مقدار را اضافه می کنیم. سپس این خط را با استفاده از نقطه ویرگول خاتمه می دهیم تا بتوانیم چندین اعلان CSS بنویسیم.
width: 100px;
در اینجا چگونه در VS Code به نظر می رسد:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg">
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
<html>
حالا بیایید تغییرات را ذخیره کنیم.
در مرورگر، تصویر ما کوچکتر به نظر می رسد. خیلی بهتره
اما به لبه ها نگاه کنید. لبه ها خیلی تیز هستند من می خواهم آنها را کمی گرد کنم تا نرم تر به نظر برسند.
به قانون خود بازگردیم – در اینجا ما شعاع مرزی را روی 10 پیکسل قرار می دهیم.
<style>
img {
width: 100px;
border-radius: 10px;
}
</style>
نگران حفظ هیچ یک از این خواص نباشید. ما در طول آموزش چندین بار آنها را مرور خواهیم کرد. در این بخش، فقط می‌خواهم درک کنید که استفاده از CSS چگونه است.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 10px;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg">
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
حالا تغییرات را ذخیره کنید.
نگاه کنید – لبه ها گرد هستند و نرم تر به نظر می رسند. حالا بگذارید یک ترفند به شما نشان دهم.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg">
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
اگر با border-radius باشد، برای اضافه کردن مقداری که نصف عرض است، یک تصویر گرد می گیریم. بنابراین، من می‌خواهم شعاع مرزی را روی 50 پیکسل تنظیم کنم که نصف عرض ما است.
<style>
img {
width: 100px;
border-radius: 50px;
}
</style>
در VS Code اینگونه به نظر می رسد:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg">
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
و این هم نتیجه:
این خیلی بهتر است.
اکنون عناصر ما به صورت عمودی روی هم چیده شده اند. اما من می خواهم تصویر به سمت چپ فشار داده شود.
بنابراین، اجازه دهید ویژگی float را روی آن قرار دهیم left.
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
}
</style>
این عنصر تصویر را به سمت چپ عناصر متنی ما فشار می دهد. نگاهی بیندازید:
این خیلی بهتر است، اما تصویر ما بسیار به متن نزدیک است. من می خواهم کمی فاصله بعد از تصویر اضافه کنم. در اینجا از ویژگی دیگری به نام استفاده خواهیم کرد margin-right. ما می توانیم آن را تنظیم کنیم 10px.
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
</style>
در اینجا چگونه در VS Code به نظر می رسد:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg">
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
تغییرات را ذخیره کنید.
این خیلی بهتر است. حالا بیایید نام کاربری را پررنگ کنیم. ما یک بار دیگر این روند را تکرار می کنیم.
این بار، می‌خواهیم یک قانون را برای عنصر پاراگراف خود اعمال کنیم. را تنظیم کنید font-weight دارایی به پررنگ.
<style>
img {
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
p {
font-weight: bold;
}
</style>
این کد در VS Code است:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img {
width: 100px;
border-radius: 50px;
float:left;
margin-right: 10px;
}
p {
font-weight: bold;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg">
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
<html>
نگاهی بیندازید.
ببین چی شد؟ هر دو عنصر متن ما پررنگ هستند. اما، اگر بخواهید این سبک را فقط برای نام کاربری اعمال کنید، چه؟
خوب، ما باید این دو عنصر پاراگراف را از هم جدا کنیم.
<body>
<p>@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
بنابراین، من قصد دارم به اولین عنصر یک ویژگی به نام بدهم class مانند این:
<body>
<p class="">@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
Class مخفف طبقه بندی است و ما می توانیم از این ویژگی برای قرار دادن این عنصر در یک کلاس یا دسته متفاوت استفاده کنیم. درست مانند محصولات موجود در یک سوپرمارکت.
در یک سوپرمارکت، ما محصولاتی در دسته های مختلف داریم، درست است؟
بنابراین، من قصد دارم این عنصر پاراگراف را در یک کلاس یا داخل یک دسته به نام قرار دهم username:
<body>
<p class="username">@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
و سپس این قانون را تغییر می دهم:
<style>
p {
font-weight: bold;
}
</style>
که در حال حاضر برای همه عناصر پاراگراف اعمال می شود – اما من می خواهم فقط برای عناصر پاراگراف با a اعمال شود username کلاس
بنابراین، بلافاصله پس از آن p تایپ می کنیم p.username:
p.username {
font-weight: bold;
}
در حال حاضر، ما همچنین می توانیم حذف کنیم p و این قانون برای تمام عناصری که دارای این هستند اعمال خواهد شد username کلاس، چه عناصر پاراگراف باشند و چه دیگر انواع عناصر.
.username {
font-weight: bold;
}
حال، تغییرات را ذخیره کنید.
در VS Code اینگونه به نظر می رسد:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
img{
width: 100px;
border-radius: 50px;
float: left;
margin-right: 10px;
}
.username{
font-weight: bold;
}
</style>
</head>
<body>
<img src="Images/altumcode.jpg">
<p class="username">@KarlgustaAnnoh</p>
<p>I love to teach you HTML!</p>
</body>
</html>
حالا یه نگاهی بنداز
این خیلی بهتر است.
این CSS در عمل است. همانطور که می بینید، CSS دارای نحو متفاوتی نسبت به HTML است.
در طول بقیه آموزش، شما قرار است این زبان ها را با جزئیات یاد بگیرید.
در مرحله بعد، من به شما نشان خواهم داد که چگونه کد خود را با استفاده از Prettier فرمت کنید.
در قسمت بعدی می بینمت!
PS 🚀 آماده اید تا حرفه خود را در توسعه وب شروع کنید؟ برای تسلط بر HTML، CSS، JavaScript، React و موارد دیگر به دوره ما بپیوندید! پروژه های دنیای واقعی بسازید، از کارشناسان صنعت بیاموزید و با یک جامعه حامی ارتباط برقرار کنید. همین الان ثبت نام کنید
