درخواست های ارتباط
جستجو
لیست دوستان من
صندوق پیام
همه را دیدم
  • در حال دریافت لیست پیام ها
صندوق پیام
رویدادها
همه را دیدم
  • در حال دریافت لیست رویدادها
همه رویدادهای من

طراحی وب سایت با کمک HTML و CSS - بخش دوم:: Style ها و متن ها

2 نظرات
172 بازدیدها
سلام به دوستان ITPRO !
در قسمت قبل با HTML و تگ های مقدماتی آن آشنا شدیم. در این جلسه با هم با Attribute ها ، Style ها ، Heading ها ، عنوان ها و متن ها آشنا می شویم.

Attribute ها


Attribute ها خواص اضافی برای هستند که دارای اطلاعات اضافی درباره ی یک تگ HTML می باشند. از مهم ترین Attribute ها می توان id را نام برد که تگ ها را متمایز و class که تگ ها را گروه گروه می کند.
attribute

خب حالا ما با تگ ها و attrinute های html آشنا هستیم و میخوهیم صفحه ای درست کنیم که داخل اون یک عنوان و یک پاراگراف نمایش داده شود.
<!DOCTYPE html>
<html>
<body>
   <h1>عنوان صفحه</h1>
   <p>  این یک پاراگراف جهت نمایش در وبسایت انجمن تخصصی فناوری اطلاعات ایران است</p>
</body>
</html>
تگ p برای نمایش بند ها استفاده می شود و تگ های h1,h2,h3,h4,h5,h6 به ترتیب از کوچک به بزرگ عنوان های صفحه های HTML هستند.(سعی کنید در صفحات وب برای نوشتن عنوان ها از ترتیب کوچک به بزرگ استفاده کنید)
توجه داشته باشید که تگ h1 بزرگترین و تگh6 کوچکترین تگ های عنوان هستند.
حالا می خواهیم با توجه به ترتیب تگ های عنوان همه ی آن ها را بنویسیم و خروجی را ببینیم:
<!DOCTYPE html>
<html>
<body>
   <h1>This is a h1 tag</h1>
   <h2>This is a h2 tag</h2>
   <h3>This is a h3 tag</h3>
   <h4>This is a h4 tag</h4>
   <h5>This is a h5 tag</h5>
   <h6>This is a h6 tag</h6>
</body>
</html>
خروجی:
attribute\


تگ های Self-Closing


بعضی از تگ ها در HTML به شکلی نیستند که باز شوند و سپس بسته ! این تگ ها با Attribute ها مقدار لاظم خود را میگیرند و همانجا بسته می شوند!!
self closer

در اینجا لیست بعضی از این تگها آورده شده است:
  • <br>
  • <img>
  • <meta>
  • <link>
  • <input>
به مرور با این تگ آشنا خواهیم شد.

تگ Head


این تگ در قبل از body باز و بسته می شود و تگ هایی برای تنظیمات صفحه را در بر می گیرد. نمونه ای از این تگ ها title است که عنوان صفحه ی شما است و در قسمت Tab مرورگر نوشته می شود.
<!DOCTYPE html>
<html>
<head>
	<title>انجمن تخصصی فناوری اطلاعت ایران</title>
</head>
<body>
   <p>This is a text</p>
</body>
</html>
خروجی:
head


آشنایی با style های CSS


CSS یا Cascade Style Sheets توسط سازمان جهانی وب برای شکل بخشیدن به صفحات HTML معرفی شد و آخرین نسخه ی آن CSS3 است که تغیرات اساسی در طراحی صفحات وب بوجود آورد. در حقیقت CSS خواصی را به تگ های HTML نسبت می دهد تا صفحه ی HTML از حالت خشک در آمده و شکل زیبایی به خود بگیرد.
من برای شروع فولدر project2 را در فولدر Workspace که در جلسه ی قبل درست کردیم درست می کنم و با روشی که در جلسه ی قبل گفتیم یک فایل با نام index و با پسوند HTML ایجاد میکنم. در ابتدا تگ های پایه ی صفحه ام که با آنها آشنا شدیم رو داخل فایل قرار می دهم.

سپس یک عنوان و یک پاراگراف برای آن می گذارم:
<!DOCTYPE html>
<html>
<head>
	<title>First Css projects</title>
</head>
<body>
	<h1>This is my first Css project heading</h1>
	<p>This is my first Css project text!</p>

</body>
</html>
headign

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

َشیوه های دادن Style به تگ های HTML

  • با استفاده از Style که یک Attribute است.
شما می توانید با استفاده از Attribute که html در اختیار شما گذاسته به تگ مورد نظرتون style اعمال کنید.
  • با استفاده از تگ style دخل تگ head .
شما می توانید تگ Style را داخل Head باز و بسته کنید و داخل آن شروع به نوشتن دستورات CSS کنید.
  • با استفاده از فایل جدا با پسوند css.
شما می توانید با ستفاده از درست کردن فایلی با پسوند CSS و لینک کردن آن به صفحه ی خود با استفاده از تگ link که در Header باز و بسته می شود Style های خودتون رو به صفحه اعمال کنید.
ما فعلا از نوع دوم استفاده خواهیم کرد و در جلسات بعد از نوع سوم بهره میگیریم.(نوع اول اصلا پیشنهاد نمی شود.)
<!DOCTYPE html>
<html>
<head>
	<title>First Css projects</title>
	<style>
		
	</style>
</head>
<body>
	<h1>This is my first Css project heading</h1>
	<p>This is my first Css project text!</p>

</body>
</html>
به این شکل میتوانیم از تگ style بهره ببریم.
حالا باید با دستورات CSS آشنا شویم.

CSS Selectors

ما برای دسترسی به تگ های HTML از طریق CSS نیاز به دستورات CSS داریم که بتوانیم دقیقا تگ یا تگ های مورد نظر خودمان رو Style دهی بکنیم . به دستوراتی که برای دسترسی به تگ های HTML نوشته می شوند Selector می گوییم.
حالت کلی دستورات CSS به شکل زیر است:

<style>
    selector{
        /* needed styles*/
    }
</style>

انواع Selector ها

  • نسبت دادن به تگ خاصی:
  • p{
    
    }
    
کد بالا تمام تگ های p استفاده شده در فایل html را انتخاب و آماده ی دادن style در داخل {,} می کند.
  • نسبت دادن به یک Id
  • #tag-id{
    
    }
    
"#" مشخص می کند که ما می خواهیم به یک تگ با یک آیدی دسترسی داشته باشیم و در جای tag- id نام Id قرار می گیرد.(راجع به Attribute های id وclass در جلسه ی قبل توضیح دادیم.)
  • نسبت دادن به تگ های دارای یک Class
  • .class-name{
    
    }
    
. مشخص می کند که مقصود ما تگ های دارای کلاس با نام class-name خواهد بود.
راجع به Selector های پیشرفته تر در جلسات بعد توضیح خواهیم داد.
ممنون از همراهی شما!
ITPRO باشید!!
محمد پارسا صفوی
انجمن تخصصی فناوری اطلاعات ایران
برچسب ها
ردیف عنوان قیمت
1 طراحی وب سایت با کمک HTML و CSS - بخش اول :: مقدمه رایگان
2 طراحی وب سایت با کمک HTML و CSS - بخش دوم:: Style ها و متن ها رایگان
3 طراحی وب سایت با کمک HTML و CSS - بخش سوم::لینک ها و Css property ها رایگان
4 طراحی وب سایت با کمک HTML و CSS - بخش چهارم :: تگ های ساختاری و CSS Selector های پیشرفته رایگان
5 طراحی وب سایت با کمک HTML و CSS - بخش پنجم :: Box Model رایگان
6 طراحی وب سایت با کمک HTML و CSS - بخش ششم :: Float ها رایگان
7 طراحی وب سایت با کمک HTML و CSS - بخش هفتم :: Position ها رایگان
8 طراحی وب سایت با کمک HTML و CSS - بخش هشتم :: لیست ها ، Background ها و عکس ها رایگان
9 طراحی وب سایت با کمک HTML و CSS - بخش نهم :: فرم ها و جداول رایگان
10 طراحی وب سایت با کمک HTML و CSS - بخش دهم :: کد نویسی اصولی و Transition ها رایگان
11 طراحی وب سایت با کمک HTML و CSS - بخش یازدهم :: Animation ها رایگان
12 طراحی وب سایت با کمک HTML و CSS - بخش دوازدهم (پایانی) :: طراحی واکنشگرا و IFrame ها رایگان
مطالب مرتبط

در حال دریافت اطلاعات

نظرات

برای ارسال نظر ابتدا به سایت وارد شوید

arrow