discord icon
سرور دیسکورد گاردایران

پست های پیشنهاد شده

با سلام خدمت دوستان عزیز گاردایران 

در این تاپیک قصد دارم زبان برنامه نویسی CSS رو به شما آموزش بدهم .

 

 

-----------------------------------------------------------------------------------------------------------------------

ابتدا کمی با css اشنا شویم :

css یک زبان برنامه نویسی تحت وب هست که بیشتر در کنار html استفاده می شود ، این زبان برای طراحی سایت از نظر ظاهری هست .

برای مثال رنگ متن ها ، پس زمینه ، نوع اسکرول و ... رو با css طراحی می کنند . 

امروزه که بیشتر افراد به طراحی وب و برنامه نویسی تحت وب روی اورده اند زبان css می تونه زبان کاربردی باشه . 

پیش نیاز css ، اشنایی با زبان html هست .

دیگه بیشتر از این سرتون رو درد نمیارم . 😄

-----------------------------------------------------------------------------------------------------------------------

سبک های اضافه کردن css به html : 

۱- خارجی و یا External

۲- داخلی و یا internal

۳- درون خطی و یا inline

که در تاپیک بعد به همراه مثال خدمتتون عرض می کنم .

-----------------------------------------------------------------------------------------------------------------------

 

 

قوانین تاپیک : 

اسپم ندید .

سوالات رو در پ.خ ارسال کنید .

کتاب و مقالات رو در اینجا ارسال نکنید . (مگر اینکه خودتون نوشته باشید)

اگر قصد گذاشتن آموزشی در رابطه با css دارید ابتدا به من پیام دهید (در غیر این صورت پست شما حذف می شود ) .

 

 

موفق و پیروز باشید . 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

بخش اول سبک های اضافه کردن css به html

همون طور که در تاپیک اول گفتم ما سه سبک برای اضافه کردن css به html داریم : 

۱- خارجی و یا External

بهترین و پر استفاده ترین سبک اضافه کردن css سبک خارجی یا External هست . 

که در این روش شما با قرار دادن استایل مورد نظر در یک فایل با فرمت css در هدر سایت اون رو فراخوانی می کنید .

که در این روش شما می توانید css خود را به چند صفحه اعمال کنید . 

کدی که باید برای فراخوانی در html استفاده کنید به این صورت هست (مثال) :

<link type="text/css" rel="stylesheet" href="styles.css">

۲- داخلی و یا internal

در این سبک تمامی کدهای css مربوط به صفحه مورد نظر در تگ <head> سایت و در داخل تگ <style> قرار می گیرد .

در این سبک کد های css فقط در یک صفحه اجرا می شوند . 

مثال

<!DOCTYPE html>
 <html>
   <!-- HEAD -->
  <head>
    	<style>
	body {background-color: black;}
	h1   {color: green;}
	#pa    {color: green;}
       .link {color:blue;}
      </style>
 </head>
   <!-- END HEAD -->
   <!-- BODY -->
	<body>
  		<h1>Guardiran</h1>
		<p id="pa">Guardiran Security Team</p>
  		<a class="link" href="https://Guardiran.org/" >Click To Guardiran !</a>
	</body>
   <!-- END BODY -->
</html>

۳- درون خطی و یا inline

در این روش استایل ها در داخل تگ مورد نظر نوشته می شوند برای مثال : 

<p style="color:Green;" >Guardiran Security Team</p>

 

----------------------------------------------------------

اگر پست های "آموزش زبان برنامه نویسی CSS - به همراه مثال" رو لایک کنید آموزش زبان های html و php هم در اینده میزارم .

موفق و پیروز باشید .

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

با بخش دوم در خدمتتون هستم 

توی این قسمت با مقدمات اشنا می شویم . 

 

نحوه کامنت گذاری در css  :

برای کامنت گذاری در css از */ استفاده می کنیم و کامنت قرار می گیرد و سپس برای بستن از /* استفاده می کنیم . 

مثل

/* yor comment */

 

استفاده از css در html :

برای اینکه بتوانید از سبک inline استفاده کنیم و در یک تگ از کد های css استفاده کنیم از style استفاده می کنیم . 

مثال : 

<p style="CSS CODE">HACK</p>

 

برای اینکه بتوانیم به صورت داخلی (internal) کد های css رو بنویسیم از تگ style در تگ head استفاده می کنیم  .

مثال : 

<html>
  <head>
    <style>
     /* css code... */
    </style>
  </head>
  <body>
    
    <!-- code... -->
    
  </body> 
</html>

 

برای اینکه به صورت خارجی (External) کد های css رو فراخوانی کنیم از این کد در قسمت head سایت استفاده می کنیم

<link rel="stylsheet" type="text/css" href="styles.css" >

به جای styles.css ادرس فایل css خودتون و رو میدید. (با فرمت css )

 

----------------------------------------------------------

اگر پست های "آموزش زبان برنامه نویسی CSS - به همراه مثال" رو لایک کنید آموزش زبان های html و php هم در اینده میزارم .

موفق و پیروز باشید .

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

با بخش سوم در خدمت شما دوستان هستم .

 

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

زمانی که شما می خواهید به صورت داخلی (internal) و یا خارجی (external) کد های css رو فراخوانی کنید از id و class استفاده می کنیم .

id : 

برای استفاده از id در یک تگ html به این صورت عمل می کنیم : 

<tag id="yor id">......<tag>

و برای اجرای کد css در id مورد نظر به این صورت : 

<html>
	<head>
    	<style>
     		 #msa 
        	 {
                    /*css code*/
        	 }
    	</style>
	</head>
	<body>
      	<p id="msa">guardiran</p>
	</body>
</html>

 

قوانین id : 

۱- در یک تگ شما فقط امکان استفاده از یک id را دارید . 

۲- اگر در یک صفحه چند بار از یک id در تگ و.. استفاده شود سایت از حالت استاندارد خارج می شود . 

۳- قوانین تعریف id : 

<p id="_s">Guardiran</p>
<p id="1">Security</p>
<p id="d">Team</p>

1 :  درست است اما بهتره که در تعریف id در حرف اول از  _ استفاده نکنیم . 

2 :  اشتباه است و نباید از اعداد در حرف اول استفاده کنیم .

3 : کاملا درست .

 

class : 

 

 برای استفاده از class در یک تگ html به این صورت عمل می کنیم : 

<tag class="yor class" >......<tag>

و برای اجرای کد css در class مورد نظر به این صورت : 

<html>
	<head>
    	<style>
     		 .msa 
        	 {
                    /*css code*/
        	 }
    	</style>
	</head>
	<body>
      	<p class="msa">guardiran</p>
	</body>
</html>

 

 قوانین class : 

۱- بر خلاف id شما می توانید در یک تگ از چند class استفاده کنید . 

۲- قوانین تعریف class : 

<p class="_s">Guardiran</p>
<p class="1">Security</p>
<p class="d">Team</p>

1 :  درست است اما بهتره که در تعریف class در حرف اول از  _ استفاده نکنیم . 

2 :  اشتباه است و نباید از اعداد در حرف اول استفاده کنیم .

3 : کاملا درست .

----------------------------------------------------------

اگر پست های "آموزش زبان برنامه نویسی CSS - به همراه مثال" رو لایک کنید آموزش زبان های html و php هم در اینده میزارم .

موفق و پیروز باشید .

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

 با بخش چهارم از آموزش در خدمت شما دوستان عزیز گارد ایران هستم . 

تا الان نحوه استفاده از css در html و نحوه فراخوانی ، قوانین فراخوانی و سبک های استفاده از css رو گفتیم . 

حالا می خواهیم خود css رو کار کنیم .

 

color : 

برای تنظیم رنگ یک متن از color استفاده می کنیم . 

مثال : 

<p style="color=green;" >Guardiran</p>

توجه : سمیکالن رو برای بستن اون استایل گذاشتیم و برای استایل بعدی به این صورت عمل می کنیم : 

<p style="1=1;2=2;" >Guardiran</p>

پس بعد از هر استایل یک ; برای جداسازی از پارامتر استایل قبلی استفاده می کنیم . 

 

 

width :

برای دادن عرض یک عکس ، باکس و ... از width استفاده می کنیم .

مثال

<img src="image address" alt="not image" style="width:100px;" >

دو مقدار اصلی که می توانید به width بدهید px و % هستند . 

 

height : 

حالا برای مشخص کردن ارتفاع مثلا یک عکس از height استفاده می کنیم .

مثال

<img src="image address" alt="Error" style="height:100px;" >

و دو مقدار اصلی که می توانیم برای height استفاده کنیم px و % هستند .

 

حالا می خواهیم یک مثال رو باهم کار کنیم 

مثلا می خوهیم سایت در خروجی این رو برای ما نمایش دهد :

 

انجمن تیم امنیتی گاردایران 

d0e70b4cbb9ab8afb1bc1065a3f8487a_header_

 

و الان یاد گرفتیم که چنین چیزی بسازیم پس کد ها به این صورت می شود : (طول عرض برای مثال است )

<p style="color:green;" >انجمن تیم امنیتی گاردایران</p>
<img style="width:200px;height:100px;" alt="ERROR" src="https://guardiran.org/uploads/set_resources_26/d0e70b4cbb9ab8afb1bc1065a3f8487a_header_logo_info.png" >

 

---------------------------------------------

اگر پست های "آموزش زبان برنامه نویسی CSS - به همراه مثال" رو لایک کنید آموزش زبان های html و php هم در اینده میزارم .

موفق و پیروز باشید .

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

با بخش ششم در خدمت شما دوستان عزیز هستیم . 

امروز می خواهیم باهم Font رو کار کنیم . 

 

Font Size

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

حالا یک مثال رو کار می کنیم

h1
{
font-size:30px;
}
a
{
font-size:20px;
}

حالا چه پارامتر های دیگه ای می تونیم برای اندازه فونت استفاده کنیم : 

پارامتر های px , pt , % ,em

مثال : 

h1
{
 font-size:50px;
/*  PX */
}
h2
{
  font-size:25pt;
/* PT */
}
h3
{
  font-size:20%;
/* % */
}
h4
{
  font-size:3em;
/* EM */
}

نکته در رابطه با em : 

برای تبدیل px به em می توانید از این فرمول استفاده کنید

 

40px / 16 = 2.5em

---------------------------------

Font  Family

ساده ترین نحوه تعریف فونت به این صورت است ‌:

font-family: tahoma;

و نام فونت خود را تایپ می کنید .

حالا شاید در یک مرورگر اون فونت وجود نداشته باشد یا به هر دلیلی در دسترس نباشد ، شما به این صورت عمل می کنید :

font-family:tahoma,erial;

می گوییم که اگر فونت tahoma نبود از erial استفاده کن و برای فونت های بعدی به همین صورت با کاما جدا می کنید . 

مثال : 

font-family: WYekan, tahoma, arial;

نکته : اگر یک زمان فونت شما چند کلمه بود از دابل کتیشل و یا کتیشن استفاده می کنیم .

مثال : 

font-family:"yor font";
font-family:'yor font';

---------------------------------

Font Style

حالا میرم سراغ استایل فونت .

چند مقداری که Font Style میگیرد :

۱-  normal :

در این مقدار متن به صورت عادی نمایش داده می شود . 

۲- italic

در این مقدار متن به صورت کج نمایش داده می شود .

۳- oblique

فونت به صورت مورب نمایش داده می شود. 

۴- initial

فونت به صورت پیش فرض و یا اولیه نمایش داده می شود .

 

مثال کامل  : 

 

<html>
  
	<head>
      <style>
        #a
        {
          font-style:normal;
        }
        #b
        {
          font-style:italic;
        }
        #c
        {
          font-style:oblique;
        }
        #d
        {
          font-style:initial;
        }
      </style>
    </head>
    <body>
      
      <p id="a" >Guardiran</p>
      <p id="b" >Security</p>
      <p id="c" >Team</p>
      <br>
      <p id="d" >Mr.MSA</p>
      
    </body>
  
</html>

مثال کلی : 

font-style:normal;
font-style:italic;
font-style:oblique;
font-style:initial;

 

----------------------------------------------------------

اگر پست های "آموزش زبان برنامه نویسی CSS - به همراه مثال" رو لایک کنید آموزش زبان های html و php هم در اینده میزارم .

موفق و پیروز باشید .

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

با بخش هفتم در خدمت شما دوستان عزیز هستم .

 امروز می خواهیم باهم Background رو کار کنیم . 

 

دستوراتی که در css مربوط به بکگراند هستند : 

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

 

 

1- background-color

رنگ پس زمینه رو به این صورت تعریف می کنیم :‌

<p style=" background-color:green;" >Guardiran Security Team</p>

چون اندازه عرض تعریف نشده به صورت پیش فرض ۱۰۰٪ است . 

که به این صورت می تونیم تعریف کنیم : 

<p style=" background-color:green; width:50px;" >Guardiran Security Team</p>

 

 

 

 

2- background-image

 عکس پس زمینه رو به این صورت تعریف می کنیم :‌

body
{
 background-image:url('image address');
}

( به جای image address ، ادرس عکس خودتون رو بزارید . )

برای تعریف اندازه به این صورت می تونیم تعریف کنیم : 

body
{
 background-image:url('/images/MSA.png');
 width:100px;
 height:200px;
}

 

 

3- Background-repeat 

برای بارگذاری زودتر صفحه سایت کم حجم باشید و شما می توانید مثلا به جای اینکه از یک پس زمینه ۱۰۰۰*۱۰۰۰ با رنک ابی استفاده کنید 

همون رو کوچک می کنید و با استفاده از Background-repeat اون تصویر کوچک رو از طرف افقی و عمودی در کنار هم می زارید تا تمام صفحه رو بگیره  .

با نوشتن دستور background-image به شکل زیر، تصویر در هر دو جهت افقی و عمودی تکرار می‌شه:

body
{
background-image:url('/img/msa.gif');
}

1- فقط به صورت افقی تکرار شود از این دستور :‌ ;background-repeat: repeat-x

2- فقط به صورت عمودی تکرار شود از این دستور :‌ ;background-repeat: repeat-y

3- فقط یک بار نشون داده شود از این دستور :‌ ;background-repeat: no-repeat

مثال : 

/* افقی */

.img1
{
     background-image: url('/images/hack.jpg') ;
     background-repeat: repeat-x;
}


/* عمودی */

.img2
{
     background-image: url('/images/msa.gif') ;
     background-repeat: repeat-y;
}

/* تکرار نشود */

.img2
{
     background-image: url('/images/guardiran.png') ;
     background-repeat: no-repeat;
}

 

4- background-position

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

که برای این کار از  background-position استفاده می کنیم .

به این صورت

#background
{
     background-image:url('/img/msa.gif';)
     background-repeat: no-repeat ;
     background-position: left top;
}

که تصویر در سمت چپ در قسمت بالا قرار می گیرد .

یه سری از مقدار هایی که می توانید به background-position بدهید : 

background-position: center;
background-position: center bottom;
background-position: center top;
background-position: center center;

background-position: left;
background-position: left bottom;
background-position: left center;
background-position: left top;

background-position: right;
background-position: right bottom;
background-position: right top;
background-position: right center;

و توجه داشته باشید که برای دقیق تر کار کردن می توانید به این صورت عمل کنید :

background-position: 100px 24%;

 

 

5- background-attachment

برای اینکه زمانی که صفحه رو اسکرول می کنید عکس ثابت باشه از این background-attachment استفاده می کنیم 

مثال : 

body 
{ 
   background-attachment:{parametr};
}

 

پارامتر اول : Fixed

برای اینکه زمان اسکرول عکس ثابت باشد . 

body
{ 
      background-attachment:fixed;
}

 

پارامتر دوم : Scroll

برای اینکه تصویر همراه با اسکرول صفحه حرکت کند . 

body 
{ 
      background-attachment:scroll;
}

----------------------------------------------------------

موفق و پیروز باشید .
 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

برای ارسال دیدگاه یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید دیدگاهی ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری