آموزش: آموزش مرحله به مرحله CSS [بایگانی]

View Full Version : آموزش: آموزش مرحله به مرحله CSS

hossainmohammady

یک شنبه 24 اردیبهشت 1391, 18:58 عصر

سلام ,
آموزش مرحله به مرحله CSS را شروع میکنیم

از وسط شروع میکنیم
دوما :
css بر پایه selector ها بر پا ست و یعنی مثلا یه کد css می نویس و میگی این کد روی تگ <p> (پاراگراف)
مثلا کد ذیل :

<html><head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>

<body>

<h1>CSS example!</h1>
<p>This is a paragraph.</p>

</body>
</html>

اینو تو یه فایل html کپی کنید نتیجه رو ببینید
یا لینک زیر رو بزنید
http://www.w3schools.com/css/tryit.asp?filename=trycss_default
گفتم از وسط میگم دیگه حالا کد را می تحلیلیم

اولا این که کد های css که اینجا بهتون میگم همه شون به صورت اینترنال هستن و تو خود کد html توی تگ <style> توشته میشن
و کد بالا
دو تا selector توش به کار رفته
یکی <h1> , <p1>
بقیه اش رو هم بخونید سادس

hossainmohammady

یک شنبه 24 اردیبهشت 1391, 19:06 عصر

خوب تا الان دیدیم یه کد css چطور کار میکنه
راستی تو پست قبل یه selector رو یادم رفت که باعث (مقصر) آبی شدن صفحه میشه که اونم هست <body> .
اینا selector های کلی اند یعنی رو مثلا کل تگ های <p> مو جود در یک سند html کار میکنه و اگر بخوایم مثلا یه کد روی یه تگ <p> خواص عمل کنه (حمله کنه) باید از یه مدل selector دیگه استفاده کنیم که یکم فرق میکنه

<html><head>
<style type="text/css">
.intro
{
background-color:yellow;
}
</style>
</head>

<body>
<h1>Welcome to My Homepage</h1>

<div class="intro">
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

</body>
</html>

این سلکتور یعنی هر تگی که کلاسش با intro مقدار دهی شده باشه
اینم لینک
http://www.w3schools.com/cssref/tryi...ycss_sel_class

hossainmohammady

یک شنبه 24 اردیبهشت 1391, 19:10 عصر

چندتا selector دیگه واستون میگم

این پایینی یعنی همه تگ ها

<html>
<head>
<style type="text/css">
*
{
background-color:yellow;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

</body>
</html>
اینم لینکش
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_all
اینم یعنی
همه تگ های <p> , <h1>

<html>
<head>
<style type="text/css">
h1,p
{
background-color:yellow;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div>
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

</body>
</html>
اینم لینکش
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_element_comma

خوشگلشون هم که اینه
یعنی:
همه یا فقط تگهایی که id شون مساوی یه با firstname

<html>
<head>
<style type="text/css">
#firstname
{
background-color:yellow;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div class="intro">
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

</body>
</html>

اینم لینکش
http://www.w3schools.com/cssref/tryi...=trycss_sel_id

hossainmohammady

یک شنبه 24 اردیبهشت 1391, 19:12 عصر

اینم کل selector های تعریف شده در css روی هر کدوم کلیک کنید با توضیحات کاملش از سایت w3schools واستون میاد
خیییییییییلی جالبه
http://www.w3schools.com/cssref/css_selectors.asp
selector مثال توضیحات ورژنcss
راستی تو ستون آخر ورژن پشتیبانی کننده یا به عبارتی این دستور در چه ورژنی به css اضافه شده رو نوشته

hossainmohammady

یک شنبه 24 اردیبهشت 1391, 19:18 عصر

خوب حالا یکم دستور
مثلا الان من چندتا تگ <a> که برای ساختن لینک استفاده میشه رو دارم میخوام روی هر کدوم رفتم و یا کلیک کردم بر اساس
چیزی که تو css تعریف کردم تغییر کنه

<html><head>
<style type="text/css">
a.ex1:hover,a.ex1:active {
color:red;
}
a.ex2:hover,a.ex2:active {
font-size:150%;
}
a.ex3:hover,a.ex3:active {
background:red;
}
a.ex4:hover,a.ex4:active {
font-family:monospace;
}
a.ex5:visited,a.ex5:link {
text-decoration:none;
}
a.ex5:hover,a.ex5:active {
text-decoration:underline;
}
</style>
</head>

<body>
<p>Mouse over the links to see them change layout.</p>

<p><a class="ex1" href="default.asp">This link changes color</a></p>
<p><a class="ex2" href="default.asp">This link changes font-size</a></p>
<p><a class="ex3" href="default.asp">This link changes background-color</a></p>
<p><a class="ex4" href="default.asp">This link changes font-family</a></p>
<p><a class="ex5" href="default.asp">This link changes text-decoration</a></p>
</body>

</html>

اینم لینکش
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_link_more2

اون active و hover که مشخصه :
hover مثل همون mousemove خودمونه یا به عبارتی وقتی موس میره روی تگ مورد نظر عمل میکنه
active هم همون کلیک ه یعنی وقتی عمل میکنه که کلیک کنید

hossainmohammady

یک شنبه 24 اردیبهشت 1391, 19:22 عصر

حالا یکم انیمیشن سازی با css البته نسخه 3 چون تو نسخه های قبل همچین امکانی کمتر وجود داشت
راستی بعضی از کد ها ممکنه همه مرورگر ها ازشون پشتیبانی نکنه واسه همین من که ار کروم استفاده میکنم
موردی نداره ولی مثل اینکه اپرا از تقریبا تمام دستورات css پشتیبانی میکنه

حالا میریم که داشته باشیم یه کد انیمیشن ساز ساده

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:myfirst;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}

@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>

<div></div>

</body>
</html>

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

اینم لینکش
http://www.w3schools.com/css3/tryit.asp?filename=trycss3_animation4

hossainmohammady

یک شنبه 24 اردیبهشت 1391, 19:23 عصر

یه صحنه قدرت html 5 رو می خواستم بهتون نشون بدم
این چند خط کد باعث نمایش یک فیلم در صفحه وب شما می شود

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls="controls" autoplay="autoplay">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

</body>
</html>

اینم لینکش
http://www.w3schools.com/html5/tryit...ml5_video_bear

ASedJavad

شنبه 30 اردیبهشت 1391, 06:06 صبح

سلام
شما چرا این تاپیک رو اینجا ایجاد کردید؟
بهتره منتقلش کنید به بخش طراحی وب (Web Design) (http://barnamenevis.org/forumdisplay.php?31-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A8-(Web-Design))