طراحی وب سایت

آشنایی با زبان CSS در طراحی وب سایت

ارسال توسط author-avatar
در دسامبر 5, 2023
0 دیدگاه
آشنایی با CSS در طراحی وب سایت

آشنایی با زبان CSS

آشنایی با زبان CSS در ابتدا با ید بدانیم از زبان CSS در طراحی وب سایت استفاده می شود برای توضیح این برنامه یک مثال ساده می زنیم اگز شما به هر زبان برنامه نویسی آشنایی داشته باشد در زبان های برنامه نویسی زیر برنامه ای وجود دارد که در برنامه اصلی برای اینکه برنامه کوتاهتر شود آن زیر برنامه را صدا می زند و به گونه دیگر نیز می توانیم این موضوع را توضیح بدهیم که درک آن برای شما ساده تر باشد مفهوم ارٍ بری توضیح می باشد که می توانیم بگویم برای مثال اگر شما بخواهید رنگ یک نوشته را در کل برنامه که با تک H2 یک رنگ مشخص داشته باشد .

به جای اینکه در کد HTML بخواهیم تمام تگ های H2 را با آن مشخصات توضیح بدهیم در یک کد کوتاه CSS آن مشخصات را وارد می کنیم و در کد اصلی HTML آن را صدا می کنیم که از آن مشخصات استفاده کند.

آشنایی با زبان CSS برای قسمت بندی وب سایت

همانطور که می دانیم یک وب سایت از قسمت های مختلف تشکیل شده است مانند منو ، هدر ، اسلایدر و … که هر کدام در طراحی وب سایت از تنظیمات مختلف استفاده می کندد .که ما برای هر قسمت کلاس هایی را به زبان CSS تعریف می کنیم و با فرا خوانی آن قسمت در کد های HTML به وب بروزرها می گویییم که این قسمت با چه تنظیماتی به نمایش در بیاید

روش نوشتن کد CSS

برای آشنایی با زبان CSS و نوشتن این کد ابتدا باید درون برنامه نوت پد یک فایل HTML ساخته شود و همینطور یک فایل با پسوند CSS و کد های اچ تی ام ال را تایپ نموده وبرای اینکه کدهای CSS بنویسیم برای هر تگی که می خواهیم در وب سایت استفاده کنیم یک کلاس تعریف کنیم و ویژگی هایی که می خواهیم به تگ مورد نظر اضافه کنیم را داخل آن کلاس قرار بدهیم و فایل CSS را ذخیره کنیم .آشنایی با زبان CSS

و درون فایل HTML آن کلاسی را که برای تگ مورد نظر تعرسف کرده این را فراخوانی کنیم . شما از این کلاس می توانید در سر تا سر فایل HTML استفاده نماید .و نکته مهم این است که در فایل HTML بین دو تگ هدر و قبل از تگBODY باید از کد HTML (link) استفاده نماییم تا هنگامی که از کلاس های تعریف شده در فایل CSS استفاده می کنیم ان کلاسها تعریف شده فراخوانی بشوند.

یک مثال ساده برای آشنایی با CSS در طراحی وب سایت

آشنایی با زبان CSS
آشنایی با زبان CSS

آشنایی با زبان CSS فایل HTML برای طراحی وب سایت

<!DOCTYPE HTML>
<html>

<head>
  <title>simplestyle_blue_trees</title>
  <meta name="description" content="website description" />
  <meta name="keywords" content="website keywords, website keywords" />
  <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
  <link rel="stylesheet" type="text/css" href="style/style.css" />
</head>

<body>
  <div id="main">
    <div id="header">
      <div id="logo">
        <div id="logo_text">
          <!-- class="logo_colour", allows you to change the colour of the text -->
          <h1><a href="index.html">مثال<span class="logo_colour">CSS</span></a></h1>
          <h2>لینک به فایل CSS</h2>
        </div>
      </div>
      <div id="menubar">
        <ul id="menu">
          <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
          <li class="selected"><a href="index.html">خانه</a></li>
          <li><a href="examples.html">صفحه اول</a></li>
          <li><a href="page.html">صفحه دوم</a></li>
          </ul>
      </div>
    </div>
    <div id="content_header"></div>
    <div id="site_content">
      <div id="banner"></div>
	  <div id="sidebar_container">
        <div class="sidebar">
          <div class="sidebar_top"></div>
          <div class="sidebar_item">
            <!-- insert your sidebar items here -->
            <h3>موضوع جدید</h3>
            <h4>خلاصه</h4>
            <h5>تاریخ</h5>
          </div>
          <div class="sidebar_base"></div>
        </div>
        <div class="sidebar">
          <div class="sidebar_top"></div>
          <div class="sidebar_item">
            <h3>لینک ها</h3>
            <ul>
              <li><a href="#">لینک 1</a></li>
              <li><a href="#">لینک 2</a></li>
              <li><a href="#">لینک 3</a></li>
              <li><a href="#">لینک 4</a></li>
            </ul>
          </div>
          <div class="sidebar_base"></div>
        </div>
        <div class="sidebar">
          <div class="sidebar_top"></div>
          <div class="sidebar_item">
            <h3>جستجو</h3>
            <form method="post" action="#" id="search_form">
              <p>
                <input class="search" type="text" name="search_field" value="موضوع" />
                <input name="search" type="image" style="border: 0; margin: 0 0 -9px 5px;" src="style/search.png" alt="Search" title="Search" />
              </p>
            </form>
          </div>
          <div class="sidebar_base"></div>
        </div>
      </div>
      <div id="content">
        <!-- insert the page content here -->
        <h1>موضوع</h1>
        <p>آشنایی با CSS</p>
        <p
        <ul>
          <li>شماره 1</li>
          <li>شماره 2</li>
          <li>شماره 3</li>
        </ul>
      </div>
	 </div>
    <div id="content_footer"></div>
</div>
</body>
</html>
آشنایی با زبان CSS در طراحی وب سایت
آشنایی با زبان CSS در طراحی وب سایت

فایل CSS برای طراحی وب سایت

html
{ height: 100%;}

*
{ margin: 0;
  padding: 0;}

body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
  background: #FFF;
  color: #555;}

p
{ padding: 0 0 20px 0;
  line-height: 1.7em;}

img
{ border: 0;}

h1, h2, h3, h4, h5, h6 
{ color: #362C20;
  letter-spacing: 0em;
  padding: 0 0 5px 0;}

h1, h2, h3
{ font: normal 170% 'century gothic', arial;
  margin: 0 0 15px 0;
  padding: 15px 0 5px 0;
  color: #000;}

h2
{ font-size: 160%;
  padding: 9px 0 5px 0;
  color: #009FBC;}

h3
{ font-size: 140%;
  padding: 5px 0 0 0;}

h4, h6
{ color: #009FBC;
  padding: 0 0 5px 0;
  font: normal 110% arial;
  text-transform: uppercase;}

h5, h6
{ color: #888;
  font: normal 95% arial;
  letter-spacing: normal;
  padding: 0 0 15px 0;}

a, a:hover
{ outline: none;
  text-decoration: underline;
  color: #00C6F0;}

a:hover
{ text-decoration: none;}

blockquote
{ margin: 20px 0; 
  padding: 10px 20px 0 20px;
  border: 1px solid #E5E5DB;
  background: #FFF;}

ul
{ margin: 2px 0 22px 17px;}

ul li
{ list-style-type: circle;
  margin: 0 0 6px 0; 
  padding: 0 0 4px 5px;
  line-height: 1.5em;}

ol
{ margin: 8px 0 22px 20px;}

ol li
{ margin: 0 0 11px 0;}

.left
{ float: left;
  width: auto;
  margin-right: 10px;}

.right
{ float: right; 
  width: auto;
  margin-left: 10px;}

.center
{ display: block;
  text-align: center;
  margin: 20px auto;}

#main, #logo, #menubar, #site_content, #footer
{ margin-left: auto; 
  margin-right: auto;}

#header
{ background: #CCC;
  border-bottom: 1px solid #CCC;
  height: 186px;}
  
#banner
{  background: transparent url(banner.jpg) no-repeat;
  width: 860px;
  height: 180px;
  margin-bottom: 20px;
  border: 10px solid #DDD;}

#logo
{ width: 880px;
  position: relative;
  height: 140px;
  background: #F5F5F5;}

#logo #logo_text 
{ position: absolute; 
  top: 10px;
  left: 0;}

#logo h1, #logo h2
{ font: normal 300% 'century gothic', arial, sans-serif;
  border-bottom: 0;
  text-transform: none;
  margin: 0 0 0 9px;}

#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover 
{ padding: 22px 0 0 0;
  color: #323232;
  letter-spacing: 0.1em;
  text-decoration: none;}

#logo_text h1 a .logo_colour
{ color: #00C6F0;}

#logo_text a:hover .logo_colour
{ color: #DDD;}

#logo_text h2
{ font-size: 120%;
  padding: 4px 0 0 0;
  color: #999;}

#menubar
{ width: 872px;
  height: 45px;
  padding-right: 8px;
  background: #DDD;
  border-top: 1px solid #CCC;} 

ul#menu
{ float: right;
  margin: 0;}

ul#menu li
{ float: left;
  padding: 0 0 0 9px;
  list-style: none;
  margin: 8px 4px 0 4px;}

ul#menu li a
{ font: normal 100% 'trebuchet ms', sans-serif;
  display: block; 
  float: left; 
  height: 20px;
  padding: 6px 20px 5px 20px;
  text-align: center;
  color: #FFF;
  text-decoration: none;
  background: #BBB;} 

ul#menu li.selected a
{ height: 20px;
  padding: 6px 20px 5px 11px;}

ul#menu li.selected
{ margin: 8px 4px 0 13px;
  background: #00C6F0;}

ul#menu li.selected a, ul#menu li.selected a:hover
{ background: #00C6F0;
  color: #FFF;}

ul#menu li a:hover
{ color: #323232;}

#site_content
{ width: 880px;
  overflow: hidden;
  margin: 20px auto 0 auto;
  padding: 0 0 10px 0;} 

#sidebar_container
{ float: left;
  width: 224px;}

.sidebar_top
{ width: 222px;
  height: 14px;
  background: transparent url(side_top.png) no-repeat;}

.sidebar_base
{ width: 222px;
  height: 14px;
  background: url(side_base.png) no-repeat;}

.sidebar
{ float: right;
  width: 222px;
  padding: 0;
  margin: 0 0 16px 0;}

.sidebar_item
{ background: url(side_back.png) repeat-y;
  padding: 0 15px;
  width: 192px;}

.sidebar li a.selected
{ color: #444;} 

.sidebar ul
{ margin: 0;} 

#content
{ text-align: left;
  width: 620px;
  padding: 0 0 0 5px;
  float: right;}
  
#content ul
{ margin: 2px 0 22px 0px;}

#content ul li, .sidebar ul li
{ list-style-type: none;
  background: url(bullet.png) no-repeat;
  margin: 0 0 0 0; 
  padding: 0 0 4px 25px;
  line-height: 1.5em;}

#footer
{ width: 100%;
  font-family: 'trebuchet ms', sans-serif;
  font-size: 100%;
  height: 80px;
  padding: 28px 0 5px 0;
  text-align: center; 
  background: #CCC;
  border-top: 1px solid #AAA;
  color: #FFF;}

#footer p
{ line-height: 1.7em;
  padding: 0 0 10px 0;}

#footer a
{ color: #FFF;
  text-decoration: none;}

#footer a:hover
{ color: #00C6F0;
  text-decoration: none;}

.search
{ color: #5D5D5D; 
  border: 1px solid #BBB; 
  width: 134px; 
  padding: 4px; 
  font: 100% arial, sans-serif;}

.form_settings
{ margin: 15px 0 0 0;}

.form_settings p
{ padding: 0 0 4px 0;}

.form_settings span
{ float: left; 
  width: 200px; 
  text-align: left;}
  
.form_settings input, .form_settings textarea
{ padding: 5px; 
  width: 299px; 
  font: 100% arial; 
  border: 1px solid #E5E5DB; 
  background: #FFF; 
  color: #47433F;}
  
.form_settings .submit
{ font: 100% arial; 
  border: 0; 
  width: 99px; 
  margin: 0 0 0 212px; 
  height: 33px;
  padding: 2px 0 3px 0;
  cursor: pointer; 
  background: #3B3B3B; 
  color: #FFF;}

.form_settings textarea, .form_settings select
{ font: 100% arial; 
  width: 299px;}

.form_settings select
{ width: 310px;}

.form_settings .checkbox
{ margin: 4px 0; 
  padding: 0; 
  width: 14px;
  border: 0;
  background: none;}

.separator
{ width: 100%;
  height: 0;
  border-top: 1px solid #D9D5CF;
  border-bottom: 1px solid #FFF;
  margin: 0 0 20px 0;}
  
table
{ margin: 10px 0 30px 0;}

table tr th, table tr td
{ background: #3B3B3B;
  color: #FFF;
  padding: 7px 4px;
  text-align: left;}
  
table tr td
{ background: #E5E5DB;
  color: #47433F;
  border-top: 1px solid #FFF;}

آشنایی با زبان CSS روشهای استفاده از CSS

از زبان CSS به چند طریق می توانیم اسفاده کنیم که عبارتند از روشهای زیر

  • خارجی
  • داخلی
  • درون خطی
  • آشنایی با زبان CSS

در روش خارجی ما همانگونه کا در ابتدا توضیح دادیم یک فایل CSS طراحی می کنیم و در یک فایل HTML آن را فراخوانی می منیم

روش داخلی ما کد های CSS را در همان صفحه کد نویسی HTML کد نویسی می کنیم و فرا خوانی را انجام می دهیم آشنایی با زبان CSS

برنامه نویسی درون خطی نیر در کد های CSS مختص به همان خط می باشد

آشنایی با زبان CSS مزایایی برنامه نویسی CSS

  • بالا بردن سرعت وب سایت
  • نگهداری و تعقیر دادن کد ها در این روش بسیار آسان می باشد
  • طراحی سازگار
  • صرفه جویی در زمان
  • تعیین موقعیت عناصری که در وب سایت استفاده کرده ایم
  • سازگاری بهتر با تمامی دیوایس ها
  • معایب برنامه نویسی CSS
  • آشنایی با زبان CSS

با CSS علاوه بر اینکه کدنویسی تمیزتری نیز خواهید داشت، از یک قطعه کد می‌توانید برای صفحات مختلف HTML استفاده کرده و در زمان صرفه جویی کنید. CSS همچنین به بهبود سئو سایت نیز کمک می‌کند و به اصطلاح SEO Friendly است. زیرا استفاده از این کدها می‌تواند تاثیر بسیار خوبی در زیبایی و دسترسی پذیری صفحات وب، پشتیبانی از صفحات وب در دستگاه‌ها و مرورگرهای مختلف و در نهایت بهبود تجربه کاربری داشته باشد. برخی دیگر از مزایای این زبان به صورت زیر می‌باشند:

جدیدتر طراحی وب سایت وتولید محتوا با هوش مصنوعی
بازگشت به لیست
قدیمی تر ساخت اسلایدر با زبان جاوا در طراحی وب سایت

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *