علاقه مندان به css

saalek110 · Jul 22, 2022

علاقه مندان به css

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

نکات ساخت سایت:

سایت خود را بسازید

سایت خود را بسازید. من وسایل تمرین در گوشی را گفتم ، ویندوز که راحت تره.... تاپیک های آموزش htlm و php و دیتابیس و css هم زدم. علاقه مندان به Html https://forum.majidonline.com/threads/%D8%B9%D9%84%D8%A7%D9%82%D9%87-%D9%85%D9%86%D8%AF%D8%A7%D9%86-%D8%A8%D9%87-html.239345/post-1414581...

forum.majidonline.com

همچنین تاپیک علاقه مندان به html
علاقه مندان به php
علاقه مندان به جاوا اسکریپت

از تاپیک های دیگر من است.

در تاپیک زیر ، کار با هاست و طرز کار با دیتابیس گفته شده:

سایت خود را بسازید ، به روش saalek110

سایت خود را بسازید ، به روش saalek110 در این روش شما فقط html و css یاد می گیرید که خیلی خیلی ساده است و در همین تاپیک مقداریش آموزش داده می شود. کدهای php کدش به شکل آماده در اختیاز شما قرار می گیرد. جاوا اسکریپت هم خیلی کم استفاده شده و کدش آماده در پست ها قرار داده می شود. طرز استفاده از...

forum.majidonline.com

saalek110 · Jul 22, 2022

ابتدا کمی در مورد html لازمه بگم ، که خواننده بدونه کدم html است که css به روی اون اضافه میشه ،
اونایی که html بلدند تحمل کنند.

saalek110 · Jul 22, 2022

Html همان ظاهر سایت را می سازد و شاید خیلی از برنامه نویسان با ان آشنا هستند ،
عناصر واقعی سایت است مثل نوشته ، عکس ، لینک

با html میشه یک سایت کامل ساخت.‌البته ظاهر کامل منظورمه.
مثلا اگر موتور یک خودرو را بردارند در ظاهرش هیچ تغییری ایجاد نمیشه ، موتور سایت php است.

Css را میشه رنگ خودرو و استیل دستگیره هایش و زه بغل و از این تریینات دونست.
.

saalek110 · Jul 22, 2022

Css مفید است.

بدون css و با html خالی میشه سایت کامل ساخت. پس عجله ای برای یادگیری css نداشته باشید.

ولی وقتی سایت شما چند صفحه میشه و می بینید اگر بخواهید ظاهر هر صفحه را یکی یکی تغییر دهید ، می فهمید که یک مشکلی هست و یک راه حل نیاز داره

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

css مثل رنگ خودرو یا لباس شخص یا سنگ نمای ساختمان است.

saalek110 · Jul 22, 2022

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

کد بالا خالص html است و css ندارد ، قبل شروع بحث css باید عناصر html را بشنایید ،
یک قسمت هد داریم یک قسمت بادی یا بدنه....
در بادی که محتویات سایت است یک h1 داریم و یک p ,

عنوان h1 بزرگتر و ضخیم تر چاپ میشه چون عنوان مطلب است و p پاراگراف است.
می دونید هر وقت مطلب عوض میشه باید یک پاراگراف جدید شروع کرد.از لحاظ قوائد انشا میگم نه کدنویسی. اینو گفتم تا بفهمید p همون پاراگراف است. عنوان هم که عنوان مطلب است و توضیح نیاز ندارد. البته h2 و h3 و ... هم داریم که ریزتر است.

در هد هم می بینید تایتل نوشته شده، تایتل متنی است که روی سربرگ در بروسر شما نمایش داده میشه.
در هد چیزهای دیگری هم میشه اضافه کرد از جمله css. در میان تگ های style.

saalek110 · Jul 22, 2022

Css شامل ۳ نوع میشه

اول در یک فایل خارجی
دوم وسط هد سایت <head> دو تگ هد بسته و باز درکد html سایت داریم که با دو تگ بیته و باز style می تونیم وسطش css بنویسیم.
سوم جلوی تگ ها مثلا جلوی p که بهش inline می گن.

saalek110 · Jul 22, 2022

......

saalek110 · Jul 22, 2022

......

saalek110 · Jul 22, 2022

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

منبع :

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

در خود سایت نتیجه اجرا قابل مشاهده است.

این css از نوع دوم است یعنی در هد سایت.وسط تگهای style باز و style بسته.

شرح کد ، در هد که با تگهای هد باز و هد بسته محدود میشه <head> و <head/> اومده
اولا رنگ بدنه سایت را لایت بلو کرده
و دوما h1 و p را هم، تعریف خاصی کرده.
h1 عنوان است و p متن معمولی. البته h2 تا h3 و .... هم داریم.
در اینجا h1 و p را از لحاظ رنگ ، محل قرارگیری ، نوع فونت و سایز تعریف کرده.محل قرارگیری راست و چپ و وسط داریم.
خوب نتیجه اجرا در اون سایت هست و می بینید رنگ صفحه چه رنگی شده. h1 هم به رنگ سفید و وسط چین شده. اگر می بینی بزرگ است چون h1 است و با css سایزش تغییر داده نشده. اما سایز p تعیین شده و نوع فونتش.

من در نرم افزار هاپ وب هم کد بالا را درج کردم ، نتیجه اجرا همین بود.

saalek110 · Jul 25, 2022

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

saalek110 · Jul 25, 2022

........

saalek110 · Jul 25, 2022

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>

در بالا یک نوع p بدون دستکاری داریم و یک نوع p جدید هم ساختیم.
نتیجه اجرا را در سایت منبع ببینید:

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

این را Id می گویند ، یعنی یک نوع p جدید ساختیم.
اگر خود p را دستکاری می کردیم دیگه هر جا p می خواستیم دستکاری شده بود ولی با id اجازه دادیم خود p بدون تغییر باقی بمونه.

می بینید که css بسیار ساده است ، اگر دوست داشتید کل بحث css سایت w3 اسکول را بخوانید.

saalek110 · Apr 4, 2023

......

saalek110 · Apr 4, 2023

......

saalek110 · Apr 4, 2023

ادامه مباحث css :

یکی دیگر از صفات به جز رنگ و محل قرار گیری ، بوردر است ،

border یعنی یک کادر دور نوشته بیاید
بوردر می تونه دورش کمی گرد بشه.

و هر نوشته می تواند رنگ بک گراند هم داشته باشه.
و دیگه هر عمصر سایت می تونه مارجین داشته باشه از ۴ طرف.مارجین فاصله از کناره هاست.
Pading هم داریم. پدینگ داخل بوردر است ولی مارجین بیرون بوردر.

کدهای اینها همه در سایت w3 اسکول هست. من مرور کردم و در چند خط بالا خلاصه اش را گفتم.

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

مثلا کد زیر را ببینید:

CSS:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

یک قسمت تعریف شده که بوردر داره و پدینگ و مارجین هم داره
نتیجه اجرایش را در لینک زیر ببینید:

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

saalek110 · Apr 4, 2023

saalek110 · Apr 4, 2023

CSS:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

در بالا یک قسمت دارین با ابعاد تعیین شده و رنگ پشت مشخص شده.

کل کد سایت این طوری میشه:

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of an element</h2>

<div>This div element has a height of 200px and a width of 50%.</div>

</body>
</html>

نتیجه اجرا را اینجا ببینید:

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

یک مربع با ابعاد مشخص شده و رنگ پس زمینه مشخص شده در css داریم و نوشته داخل بدنه هم داخلش نوشته شده.

saalek110 · Apr 4, 2023

......

saalek110 · Apr 4, 2023

outline هم اطراف بوردر میاد انواعش را اینجا ببینید:

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

اینها دیگه تزییناتی است که شاید خیلی ها استفاده نکنن.

saalek110 · Apr 4, 2023

Outline می تواند ضخامتهای مختلف داشته باشه ، در لینک زیر ببینید:

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

و رنگهای مختلف که دیگه لازم نیست لینک بدهم

Css شده یک چیزی مثل طراحی . با این کدها باید کار کنید تا اون سایتی که لازم دارید ساخته بشه
سایتهای آماده هم هست ، می توانید دانلود و نصب کنید.