مشاوره رایگان
دریافت لینک های دانلود
دریافت پستی درب منزل
مبلغ کل:
تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید
آموزش Style Sheet در HTML - افزودن استایل به صفحه وب
Cascading Style Sheets (CSS) بیان می کنند، اسناد در صفحات و در نسخه چاپی چگونه نشان داده می شوند و یا اینکه چگونه تلفظ می شوند. از زمان ایجاد کنسرسیوم در سال 1994، W3C به طور فعال، از style sheet ها در صفحات وب، استفاده کرده است.
Cascading Style Sheets (CSS) برای جایگزین کردن ویژگی ها یا attribute هایِ مختلفِ تگ های HTML ، گزینه های آسان و موثری را در خود تعبیه کرده است. با استفاده از CSS، می توانید تعدادی از خواص style را برای یک عنصر HTML تعیین کنید. هر property دارای یک نام و یک مقدار است، که با یک colon (:) جدا شده است. هر property با یک semi-colon (؛) از property دیگر جدا می شود.
مثال
ابتدا اجازه دهید نمونه ای از سند HTML را مشاهده کنیم که در آن از برچسب <font> و ویژگی های مربوط به آن، برای مشخص کردن رنگ متن و اندازه قلم استفاده شده است.
توجه داشته باشید - برچسب <font> منسوخ شده و قرار است در نسخه های آینده از HTML حذف شود. بنابراین نباید مورد استفاده قرار گیرند، پیشنهاد می شود از style های CSS برای دستکاری فونت های خود استفاده کنید. اما برای یادگیری بیشتر، در این آموزش با ارائه ی مثال هایی، طرز استفاده از برچسب <font> را می آموزیم.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color = "green" size = "5">Hello, World!</font></p>
</body>
</html>
ما می توانیم با استفاده از Style Sheet مثال بالا را به صورت زیر، دوباره بنویسیم -
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style = "color:green; font-size:24px;" >Hello, World!</p>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند -
شما می توانید به سه روش از CSS در سند HTML خود استفاده کنید -
Style Sheet خارجی - قوانین style sheet را در یک فایل جداگانه .css تعریف کرده و سپس آن فایل را در سند HTML خود با استفاده از برچسب <link> قرار دهید.
Style Sheet داخلی - قوانین style sheet را در بخش هدر سند HTML ، با استفاده از برچسب <style> تعریف می کنیم.
Sheet Style Inline - قوانین style sheet را مستقیما همراه با عناصر HTML با استفاده از ویژگی style مشخص می کنیم.
بگذارید همه ی این سه مورد را با کمک مثال هایی مناسب، یک به یک، ببینیم.
Style Sheet خارجی (External Style Sheet)
اگر شما برای صفحات مختلف وب سایت تان، نیاز به استفاده از style sheet ها دارید، توصیه می شود که هر style sheet را در یک فایل جداگانه تعریف کنید. فایل های cascading style sheet دارای پسوندی به نام .css است و با استفاده از برچسب <link> به فایلهای HTML اضافه می شوند.
مثال
در مثال زیر، ما یک فایل style sheet به نام style.css را که دارای قوانین زیر است تعریف می کنیم.
در مثال بالا ما سه قانون CSS را تعریف کردیم و آنها را در سه کلاس مختلف قرار دادیم تا از آنها، در تگ های HTML استفاده کنیم. من پیشنهاد می کنم که در مورد چگونگی تعریف این قواعد نگران نباشید زیرا شما در هنگام مطالعه CSS آنها را یاد خواهید گرفت. اکنون اجازه دهید، نحوه یِ استفاده از فایل هایِ خارجی CSS را در داخل سند HTML بیاموزیم -
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = "/html/style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
کد فوق، نتیجه زیر را تولید می کند -
Style Sheet داخلی (Internal Style Sheet)
اگر می خواهید قوانین Style Sheet را فقط به یک سند یا فقط به یک صفحه از وب سایتتان اعمال کنید، میتوانید آن قوانین را در بخش Header سند HTML ، با استفاده از برچسب <style> قرار دهید.
قوانین تعریف شده در internal style sheet ، قواعدی را که در یک فایل CSS خارجی تعریف شده، overrid یا بازنویسی می کنند.
مثال
اجازه دهید مثال بالا را ، یک بار دیگر بازنویسی کنیم، اما در اینجا دستورات style sheet را در همان سند HTML با استفاده از برچسب <style> به سند مان اضافه می کنیم.
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type = "text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
کد فوق، نتیجه زیر را تولید می کند -
Style Sheet درونی (Inline Style Sheet)
شما می توانید قوانین style sheet را مستقیما به هر عنصر از HTML اعمال کنید. این کار با استفاده از ویژگی style که در برچسب های HTML وجود دارند، محقق می شود. از این روش، زمانی می توانید استفاده کنید که قصد داشته باشید یک تغییر خاص در هر عنصر HTML اعمال نمایید.
قوانین تعریف شده به صورت درون خطی (Inline Style Sheet)، قوانینی را که در یک فایل CSS خارجی تعریف شده است و همچنین قوانین تعریف شده در عنصر <style> را override یا بازنویسی می کند، یعنی از لحاظ اولویت بندی بر دو حالت دیگر مقدم تر هستند.
مثال
اجازه دهید مثال بالا را بار دیگر بازنویسی کنیم ، اما در اینجا ما قوانین style sheet را برای هر عنصر HTML می نویسیم. این کار با استفاده از ویژگی style که در هر عنصر HTML وجود دارد، محقق می شود.
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>
</html>
کد فوق، نتیجه زیر را تولید می کند -
فصلِ:
5
,
تعداد قسمت ها:
177
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML
آموزش HTML5
این فصل در یک نگاه:
در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…
HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می…
فصلِ:
3
,
تعداد قسمت ها:
25
,
سطح:
صفر تا صد
این فصل در یک نگاه:
فصل سوم…
آموزش طراحی ریسپانسیو مدرن و جذابتر نسبت به بوتسرپ (همراه با ساخت صفحه اصلی و پنل یک آژانس مسافربری) آموزش پروژه محور فریمورک متریالایز برای اولین بار بین وب سایت های آموزشی آموزش تمامی …
فصلِ:
5
,
تعداد قسمت ها:
77
,
سطح:
متوسط
این فصل در یک نگاه:
ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…
این مجموعه با تلفیقی از فریمورک bootstrap و کد های html و css ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ:
11
,
تعداد قسمت ها:
162
,
سطح:
صفر تا صد
این فصل در یک نگاه:
در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…
در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ:
4
,
تعداد قسمت ها:
240
,
سطح:
صفر تا صد
موضوعات:
آموزش PHP
آموزش Bootstrap
آموزش CSS
آموزش JQUERY
آموزش HTML
آموزش PHP MVC
آموزش Ajax
آموزش HTML5
این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ:
4
,
تعداد قسمت ها:
368
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش ساخت فروشگاه اینترنتی
آموزش Bootstrap
آموزش Laravel
این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ:
1
,
تعداد قسمت ها:
155
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش NodeJs
آموزش Bootstrap
آموزش Laravel
آموزش Symphony
این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ:
1
,
تعداد قسمت ها:
15
,
سطح:
متوسط
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش ASP.NET
آموزش ASP.NET MVC
آموزش PHP MVC
آموزش Phyton
آموزش سئو
آموزش ساخت فروشگاه اینترنتی
آموزش HTML
آموزش ایمیل مارکتینگ
آموزش وردپرس
آموزش فروشگاه ساز اپن کارت
آموزش جوملا
آموزش Virtual Freer
آموزش WHMCS
این فصل در یک نگاه:
رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…
اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …
