آموزش مقدماتی HTML و CSS (جلسه 2: آشنایی با HTML و CSS - بخش ۲)
1398/02/04 14:58 , میلاد صاحب نظر

آموزش مقدماتی HTML و CSS (جلسه 2: آشنایی با HTML و CSS - بخش ۲)

در جلسه قبل مقدمه‌ای در مورد HTML و CSS گفته شد. در ادامه بیشتر در مورد CSS و کار با ویژگی‌های آن صحبت خواهیم کرد. با MUG همراه باشید!

۱- ساختن اولین صفحه وب قسمت اول ۷-باز کردن Box Model قسمت اول ۱۳-تنظیمات پشت زمینه قسمت اول ۱۹-ایجاد فرم‌ها قسمت اول
۲-ساختن اولین صفحه وب قسمت دوم ۸-باز کردن Box Model قسمت دوم ۱۴-تنظیمات پشت زمینه قسمت دوم ۲۰-ایجاد فرم‌ها قسمت دوم
۳-آشنایی با HTML  قسمت اول ۹-تنظیم موقعیت محتوا قسمت اول ۱۵-ایجاد لیست‌ها قسمت اول ۲۱-سازماندهی اطلاعات با جداول قسمت اول
۴-آشنایی با HTML قسمت دوم ۱۰-تنظیم موقعیت محتوا قسمت دوم ۱۶-ایجاد لیست‌ها قسمت دوم ۲۲-سازماندهی اطلاعات با جداول قسمت دوم
۵-آشنایی با CSS قسمت اول ۱۱-کار با Typography قسمت اول ۱۷-افزودن رسانه قسمت اول ۲۳-نوشتن بهترین کد
۶-آشنایی با CSS قسمت دوم ۱۲-کار با Typography قسمت دوم ۱۸-افزودن رسانه قسمت دوم  

کار با selectorها در CSS

در جلسه قبل در مورد واژه‌های مرسوم HTML و CSS صحبت کردیم و نمونه‌ کدهایی هم برای آشنایی بیشتر شما با آن‌ها ارائه شدند. اما کار با ویژگی‌ها و واژه‌های CSS در این جلسه مورد بحث قرار می‌گیرند با ما همراه باشید.

همان‌طور که قبلاً گفته شد، Selectorها مشخص می‌کنند که کدام عنصرهای HTML مد نظر یا هدف استایل‌گذاری هستند. درک کامل چگونگی استفاده از Selectorها و اینکه چگونه می‌توان آن‌ها را کنترل کرد امر بسیار مهمی است. اولین قدم این است که با انواع مختلف Selector آشنا شوید. با مرسوم‌ترین Selectorها شروع می‌کنیم: نوع، class و ID.

Selectorهای نوع

Selectorهای نوع عنصرها را با استفاده از نوع عنصر هدف قرار می‌دهند. برای مثال، اگر بخواهیم همه عنصرهای division(یا <div>) را هدف قرار دهیم، از یک Selector نوع برای div استفاده می‌کنیم. کد زیر یک Selector نوع برای عنصرهای division و همچنین عنصرهای مشابهی که در HTML انتخاب می‌شوند را نیز نشان می‌دهد.

CSS

div { ... }

HTML

<div>...</div>          
<div>...</div>

Selectorهای class

Selectorهای Class این امکان را به ما می‌دهند تا یک عنصر را بر اساس مقدار اتریبیوت class آن انتخاب کنیم. Selectorهای Class کمی دقیق‌تر از Selectorهای نوع عمل می‌کنند، چون یک گروه خاص از عنصرها را انتخاب می‌کنند، نه همه عنصرهای از یک نوع را.

Selectorهای class با استفاده از یک مقدار اتریبیوت class یکسان در چندین عنصر، به ما امکان می‌دهند از استایل‌های یکسان برای عنصرهای مختلف استفاده کنیم.

در CSS، کلاس‌ها با یک نقطه (.) که به دنبال آن مقدار اتریبیوت کلاس قرار می‌گیرد، مشخص می‌شوند. در اینجا class Selector هر عنصری که حاوی مقدار اتریبیوت کلاس awesome باشد را انتخاب می‌کند، که در مثال زیر هر دو عنصرهای division و پاراگراف دارای این مقدار هستند.

CSS

.awesome { ... }

HTML

<div class="awesome">...</div>
<p class="awesome">...</p>

Selectorهای ID

Selectorهای ID حتی  از Selectorهای class نیز دقیق‌تر هستند، چون آن‌ها هر دفعه فقط یک عنصر منحصر به فرد را هدف قرار می‌دهند.

درست همانند Selectorهای class که از یک مقدار اتریبیوت class در عنصر به عنوان Selector استفاده می‌کردند، Selectorهای ID نیز از یک مقدار اتریبیوت id از عنصر به عنوان Selector استفاده می‌کنند.

در CSS، Selectorهای ID با یک علامت هشتگ (#) که در ادامه آن مقدار اتریبیوت id قرار دارد، مشخص می‌شوند. در اینجا، ID Selector فقط عنصری که حاوی مقدار اتریبیوت ID برابر با MUG باشد را انتخاب می‌کند.

CSS

#mug { ... }

HTML

<div id="mug">...</div>

Selectorهای اضافی

Selectorها بسیار قدرتمند هستند و Selectorهایی که ما در اینجا نام بردیم، مرسوم‌ترین Selectorهایی هستند که ممکن است با آن‌ها مواجه شوید. این Selectorها همچنین فقط شروع کار هستند. Selectorهای بسیار پیچیده‌تر و بیشتری نیز وجود دارند و می‌توانید از آن‌ها استفاده کنید.

وقتی در کار با این Selectorها ماهر و راحت شدید، آنگاه می‌توانید به سراغ Selectorهای دیگر بروید.

بسیار خب، کم‌کم همه نکات اولیه را بیان کردیم. در حال حاضر ما عنصرهایی به یک صفحه داخل فایل HTML خود اضافه کردیم و می‌توانیم آن عنصرها را انتخاب کرده و با استفاده از CSS به آن‌ها استایل اضافه کنیم. حالا اجازه دهید همه نقاط بین HTML و CSS را به هم وصل کنیم و کاری کنیم این دو زبان با یکدیگر کار کنند.

رفرنس یا اشاره کردن به CSS

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

با استفاده از یک صفحه استایل خارجی، می‌توانیم از استایل‌های مشابه در کل یک وبسایت استفاده کنیم و سریعاً در کل سایت تغییرات ایجاد کنیم.

گزینه‌های دیگر برای افزودن CSS

گزینه‌های دیگر رفرنس کردن به CSS عبارت‌اند از : استفاده از استایل‌های داخلی و درون خطی (inline). ممکن است قبلاً با این گزینه‌ها آشنا شده باشید، اما معمولاً این دو روش زیاد مرسوم و محبوب نیستند، چون باعث می‌شوند به روز رسانی وبسایت‌ها بسیار خسته‌کننده و طولانی و سخت شود.

برای ایجاد صفحه استایل CSS خارجی خودمان، باید از ویراستار متن منتخب خود برای ایجاد یک فایل متنی ساده جدید با پسوند فایل css. استفاده کنیم. فایل CSS ما باید درون همان فولدر (یا یک فولدر داخل آن فولدر اصلی) که فایل HTML قرار دارد، ذخیره شود.

درون عنصر <head> از سند HTML، عنصر <link> قرار دارد که برای تعریف رابطه بین فایل HTML و فایل CSS استفاده شده است. چون قصد داریم به CSS لینک کنیم، پس از اتریبیوت rel با مقدار stylesheet استفاده می‌کنیم تا رابطه بین آن‌ها را مشخص کنیم.

علاوه بر این، اتریبیوت href (یا رفرنس هایپرلینک) نیز برای شناسایی موقعیت، یا مسیر فایل CSS استفاده شده است.

کد زیر، عنصر <head> از سند HTML را نشان می‌دهد که به یک صفحه استایل خارجی اشاره کرده‌ است.

<head>
  <link rel="stylesheet" href="main.css">
</head>

برای اینکه CSS به درستی رندر شود، مسیر مقدار اتریبیوت href باید دقیقه با محلی که فایل CSS ما ذخیره شده است، یکسان و دقیق باشد. در مثال قبل،‌فایل main.css درون همان محلی که فایل HTML قرار داشت ذخیره شده است، که به این محل مسیر root یا ریشه نیز گفته می‌شود.

اگر فایل CSS ما داخل یک زیر مسیر یا فولدر فرعی (داخل فولدر اصلی) قرار داشته باشد، آنگاه مقدار اتریبیوت href باید دقیقه با این مسیر منطبق باشد.

برای مثال، اگر فایل main.css ما درون یک مسیر فرعی به نام stylesheets ذخیره شده بود، آنگاه مقدار اتریبیوت href باید stylesheets/main.css می‌بود، از یک forward slash برای نشان دادن مسیر فرعی استفاده می‌شود.

در این مرحله، صفحات ما کم‌کم زنده می‌شوند، آرام ولی پیوسته. زیاد وارد مباحث CSS نشدیم، اما ممکن است متوجه شده باشید که برخی عنصرها دارای استایل‌های پیش‌فرضی هستند که ما درون CSS تعریفشان نکردیم. خوشبختانه می‌توانیم این استایل‌ها را به آسانی بازنویسی کنیم، که این کار از طریق Reset CSSها انجام می‌شود.

استفاده از  CSS Resetها

هر مرورگر وب، برای عنصرهای مختلف دارای استایل‌های پیش‌فرض مخصوص به خودش است. نحوه رندر کردن هدینگ‌ها، پاراگراف‌ها، لیست‌ها و غیره توسط گوگل کروم ممکن است با نحوه رندر شدن آن‌ها توسط اینترنت اکسپلورر متفاوت باشد. برای اطمینان از سازگار بودن فایل در مرورگرهای مختلف، به وفور از CSS Resetها استفاده می‌شود.

CSS Resetها تمام عنصرهای مرسوم HTML که دارای استایل پیش‌فرض هستند را گرفته، و یک استایل مشترک و یکسان برای تمام مرورگرها ایجاد می‌کنند. این resetها در کل هر گونه سایز، حاشیه، padding یا استایل‌های اضافی را حذف کرده و مقادیر آن‌ها را در تمام مرورگرها یکسان می‌کنند.

چون CSS به صورت آبشاری از بالا به پایین صفحه را رندر می‌کند (در جلسات بعدی در این مورد بیشتر صحبت می‌کنیم)، پس reset ما باید در بالاترین نقطه صفحه استایل قرار بگیرد. با انجام این کار، اطمینان حاصل خواهد شد که آن استایل‌ها در ابتدای کار خوانده می‌شوند و اینکه همه مرورگرهای وب مختلف فایل ما را به صورت مشابه و یکسان اجرا می‌کنند.

Resetهای مختلفی وجود دارند که می‌توانید استفاده کنید و هر کدام قابلیت‌ها و ویژگی‌های خاص خودشان را دارند. یکی از مرسوم‌ترین resetها، reset متعلق به Eric Meyer است که ایجاد شده است تا استایل‌ها را در عنصرهای جدید HTML5 درج کند.

اگر حس می‌کنید ماجراجویی بیشتری نیاز دارید، Normalize.css را بررسی کنید. Normalize.css توسط نیکولاس گالاقر ایجاد شده است و هدفش استفاده از یک reset قوی برای تمام عنصرهای مرسوم نیست، بلکه هدفش تنظیم استایل‌های مرسوم برای این عنصرها است. البته استفاده از آن به درک قوی‌تر و بهتری از CSS و همچنین آگاهی نسبت به استایل‌هایی که می‌خواهید استفاده کنید نیاز دارد، پس فعلاً این بحث را همین‌جا تمام می‌کنیم.

سازگاری در همه مرورگرها و تست

همان‌طور که قبلاً اشاره شد، مرورگرهای مختلف عنصرها را به روش‌های مختلفی رندر می‌کنند. درک ارزش قابلیت سازگاری در همه مرورگرها و تست بسیار مهم است. وبسایت‌ها لازم نیست در تمام مرورگرها ظاهر یکسان داشته باشند، اما خیلی هم نباید فرق کنند. اینکه قصد دارید از کدام مرورگرهای پشتیبانی کنید و تا چه حدی، تصمیمی است که باید بر اساس صلاح وبسایت خود اتخاذ کنید.

در کل، ویژگی‌ها و نکات خیلی جالبی وجود دارند که می‌توانید در نوشتن با زبان CSS از آن‌ها بهره ببرید. خبر خوب این است که همه چیز ممکن است و با کمی صبر می‌توانیم همه کاری انجام دهیم.

تمرین

دوباره به سراغ تمرین وبسایت کنفرانس که در جلسه پیش شروع کردیم برمی‌گردیم، اجازه دهید کمی CSS به آن اضافه کنیم.

  1. درون فولدر “styles-conference”، یک فولدر جدید به نام “assets” ایجاد می‌کنیم. در این فولدر، تمام ابزارها برای وبسایتمان (مانند صفحات استایل، تصاویر، ویدئوها و غیره) را ذخیره می‌کنیم. برای صفحات استایلمان، بیایید یک فولدر دیگر به نام “stylesheets” درون فولدر “assetes” ایجاد کنیم.

  2. با استفاده از ویراستار متنمان، یک فایل جدید به نام css ایجاد می‌کنیم و آن را درون فولدر “stylesheets” که تازه ایجاد کردیم قرار می‌دهیم.

  3. وقتی به فایل html خود در یک مرورگر وب نگاه می‌کنیم، مشاهده می‌کنیم که عنصرهای <h1> و <p> هر کدام دارای استایل‌های CSS پیش‌فرض هستند.
    به طور دقیق‌تر، آن‌ها هر کدام دارای یک فونت و فضای منحصر به فرد هستند. با استفاده از Eric Meyer’s Reset، می‌توانیم این استایل‌ها را تغییر دهیم، این کار باعث می‌شود همه آن‌ها در مرورگرهای مختلف استایل یکسان داشته باشند.
    برای این منظور به وبسایت Eric می‌رویم، reset او را کپی می‌کنیم و آن را در بالای فایل main.css خود پیست می‌کنیم.
/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126
  License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
  1. حالا که فایل css ما شکل گرفت، بیایید آن را به فایل index.html متصل کنیم. برای این منظور، فایل index.html را در ویراستار متنمان باز کرده و عنصر <link> را داخل عنصر <head>، دقیقه بعد از عنصر <title> اضافه می‌کنیم.

  2. چون قرار است در داخل عنصر <link> به یک صفحه استایل رفرنس کنیم، یک اتریبیوت ارتباط (rel) با مقدار stylesheet اضافه می‌کنیم.

  3. همچنین می‌خواهیم با استفاده از اتریبیوت href، یک رفرنس هایپرلینک به فایل css خود اضافه کنیم. به یاد داشته باشید، فایل main.css ما درون فولدر “stylesheets” ذخیره شده است، که درون فولدر “assets” قرار دارد. از این رو، مقدار اتریبیوت href (که مسیر به سمت فایل main.css است)، باید به این شکل باشد: assets/stylesheets/main.css.
<head>
  <meta charset="utf-8">
  <title>Styles Conference</title>
  <link rel="stylesheet" href="assets/stylesheets/main.css">
</head>

وقت آن رسید که کارمان را بررسی کنیم و ببینیم آیا فایل‌های HTML و CSS ما با هم کار می‌کنند یا خیر. بنابراین وقتی فایل index.html را درون یک مرورگر وب باز می‌کنیم، باید نتیجه نسبت به قبل کمی متفاوت‌تر باشد.

شکل 2.1: وبسایت Styles Conference با یک CSS reset

شکل 2.1: وبسایت Styles Conference با یک CSS reset

دمو و کد منبع

در زیر، می‌توانید وبسایت Styles Conference را در وضعیت فعلی‌اش مشاهده کنید و همچنین می‌توانید کد منبع وضعیت فعلی وبسایت را نیز دانلود کنید.

لینک مشاهده وبسایت Styles Conference                    کد منبع وبسایت Styles Conference

خلاصه

تا اینجای کار خیلی خوب پیش آمدیم! در این جلسه چند قدم بزرگ برداشتیم.

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

برای یک یادآوری سریع، موضوعاتی که در این دو جلسه پوشش داده‌ایم را بیان می‌کنیم:

  • تفاوت بین HTML و CSS
  • آشنایی با عنصرها، تگ‌ها و اتریبیوت‌های HTML
  • تنظیم ساختار اولین صفحه وب خودمان
  • آشنایی با Selectorها، ویژگی‌ها و مقادیر CSS
  • کار با Selectorهای CSS
  • رفرنس کردن به CSS در فایل HTML
  • ارزش CSS resetها

در جلسه بعدی بیشتر در مورد HTML و دیگر واژه‌های آن صحبت خواهیم کرد.

منبع: learn.shayhowe

جلسه بعد                                                     جلسه قبل

 مطالب مرتبط

تعامل با فایل‌ها در HTML5
ایجاد یک فرم HTML و قابلیت تکمیل خودکار فرم‌ها
 بهترین قالب‌های رایگان HTML5 و CSS3
۹ چیز که باید در مورد HTML5 بدانید
آموزش گام به گام #C
برنامه نویسی شیءگرا چیست؟

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

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

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

فرم ارسال نظرات