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

    عضویت در

    کانال تلگرام

    توسینسو

    اطلاعات مطلب
      مدرس/نویسنده
      پارسا صفوی
      امتیاز: 17244
      رتبه:33
      20
      30
      10
      135
      طراح و برنامه نویس وب و ویندوز با استفاده از C# و ASP.NET MVC پروفایل کاربر

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

      تاریخ 41 ماه قبل
      نظرات 2
      بازدیدها 1009
      سلام به دوستان 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 ها
      دورهمجموعه کل دوره
      مطالب مرتبط

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

      نظرات
      • kheili mokhtasar tozih midid...makhsusan ye taze vared aslan nemifahme
      • چون آموزش در قالب متن هست توضیح زیاد باعث سر درگمی و گاه خستگی خواننده می شود. در صورت داشتن سوال توی انجمن مطرح کنید من و دوستان به سرعت جواب میدیم.

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