آموزش CSS

[NOOB]

منطق کار بدین صورت است که با جاوا اسکریپت می توان فهمید که صفحه کامل لود شده و بعد از آن تگی که لودینگ در آن است را نمایش نمیدهیم .یعنی زمانی که لود صفحه تمام شد آن را پنهان می کنیم .به همین راحتی!
این کد ها را در فایل css خود قرار دهید:

.loading-invisible{
; display:none
{
}loading-visible.
; display:block
position:absolute;
; top:75px
; left: 0px
; width:100%
; text-align:center
; background:#fff
; border-top:1px solid #ddd
; border-bottom:1px solid #ddd
; z-index: 100
{

کلاس اول برای عدم نمایش و کلاس دوم برای نمایش لودینگ می باشد.
این کد را در ابتدای تگ body قرار دهید :

<div   id=“loading” class=“loading-invisible”>
<img  src=“loading.gif” width=“97″ height=“44″ alt=“loading” />
</div>

همانطوری که می بینید از یک gif برای لودینگ استفاده شده است که در داخل یک div با کلاس loading-invisible می باشد . این کلاس در ابتدا باعث می شود که div نمایش پیدا نکند ! بله یعنی اگر از این کد ها بدون جاوا استفاده بشود شما چیزی نخواهید دید.
دقت کنید از id برای فراخوانی جاوا اسکریپت استفاده می شود.
خوب حالا نوبت جاوااسکرپت می باشد کد زیر را درست بعد از تگ div قرار دهید:

<“script type=”text/javascript>
document.getElementById(“loading”).className = “loading-visible” ; window.onload=function(){
; ” document.getElementById(”loading“).className = “loading-invisible
}
</script>

خط اول بدین معنی است که نام کلاس جایی که id آن loading است را به loading-visible تغییر بده .با این تغییر کلاس ، تگ div که شامل gif است نمایش می یابد.
خط بعد بدین معنی است که زمانی که صفحه ما لود شد آنگاه نام کلاس جایی که id آن loading است را به loading-invisible تغییر بده. با این تغییر کلاس ، تگ div که شامل gif است دیگر نمایش نمی یابد.
به همین سادگی با کمک css توانستیم یک loading با کمترین حجم بسازیم.

 

[NOOB]

پاسخ : آموزش css

سلام ، امروز میخواهیم طریقه ایجاد یک منوی یازشو را با هم یاد بگیریم. می دانیم که امروزه منوهای بازشو در طراحی صفحات وب بسیار کاربرد دارند و می توانیم از آنها در زیبایی سایت خود و دسترسی آسان به صفحات دیگر استفاده کنیم.در ابتدا ما از کدهای html که در ایجاد منو به ما کمک می کنند و کاربرد دارند استفاده می کنیم.
برای اینکار ابتدا یک تگ div ساخته و id= nav قرار می دهیم. سپس شروع به ساخت منو با استفاده از تگ ( ul ) می کنیم. همانطور که در کدهای زیر می بینید ما یک لیست نامرتب ( ul ) با کدهای استاندارد داریم که باید در قسمتNavigation قرار گیرد.

حالا از موارد عمومی که در بیشتر وب سایت ها استفاده می شود مانند : خانه ، درباره ما ، نمونه کارها و تماس با ما برای نامگذاری منو استفاده می کنیم . سپس اسامی که قرار است داخل لیست بازشو قرار گیرد را منویسیم. برای مثال ما آنها را گرافیک ، طراحی ها و سایر موارد استفاده می کنیم که البته شما می توانید با توجه به میل خود و نیازتان هر نامی که دوست داشتید را انتخاب کنید.
حالا به کدها نگاه می کنیم ، من کد بخش نمونه کارها را پر رنگ کردم تا بهتر دیده شود و شما دقت کنید مکان تگ بسته لیست نمونه کارها را /ul درست وارد کرده و پس از کد لیست سومین آیتم لیست بازشو قرار دهید.
حالا ما یک تگ <ul> در داخل تگ <li> نمونه کارها ساخته ایم و آیتم هایی که می خواهیم جز زیرمجموعه آن باشد در آنقرار می دهیم. و با کلیک بر روی نمونه کارها این سه گزینه ای که ساخته ایم نشان داده می شود. ( مانند کدهای زیر)
01
<div id="nav">
02
<ul>
03
<li class="first"a href="#">Home</a/li>
04
<lia href="#">About Me</a/li>
05
<lia href="#">Portfolio</a>
06
<ul>
07
<lia href="#">Web</a/li>
08
<lia href="#">Print</a/li>
09
<lia href="#">Photos</a/li>
10
</ul>
11
</li>
12
<lia href="#">Contact Me</a/li>
13
</ul>
14
</div>
پس از اتمام کدهای html ، حالا نوبت css است :
کدهای CSS
ابتدا ما تغییراتی را در ویژگی id تگ div که آن را به اسم #nav تعریف کردیم انجام می دهیم . اول برای تعیین ویژگی کلی صفحه پهنا و ارتفاع صفحه و اندازه قلم را تعیین می کنیم . البته ممکن است با تغییر قلم همترازی پهنا و ار تفاع تغییر کند ولی مسئله ای پیش نمی آید. سپس خط بعدی کد زیر list-style :none قرار داده تا شکل های کنار لیست را پاک کنیم.
01
*{ margin:0px; padding: 0px; }
02
#nav {
03
font-family: arial, sans-serif;
04
position: relative;
05
width: 390px;
06
height:56px;
07
font-size:14px;
08
color:#999;
09
margin: 0 auto;
10
}
11
#nav ul {
12
list-style-type: none;
13
}
این تکه کد زیر مرحله مهم ساختن نوار منو است . اگر ما خصوصیت flot :left قرار دهیم تگ <div> ما را به حالت شناور در می آورد . و لیست ما از حالت پلکانی به صورت عمودی و کنار هم در می آید . فراموش نکنید که خصوصیت Position : relative انتخاب کرده تا لیست نمونه کار به عنوان والد معرفی شود ، زیرا منوی باز شو ما باید توسط آن حمایت و به جلو برده شود.
1
#nav ul li {
2
float: left
3
position: relative;
4
}
حالا نوبت دادن مقدار به لینک های لیست ما می باشد . که محل قرارگیری متن را مرکز قرار داده و برای آیتم های لیست یک حاشیه راست درست می کنیم .
1
#nav ul li a {
2
text-align: center;
3
border-right:1px solid #e9e9e9;
4
padding:20px;
5
display:block;
6
text-decoration:non;
7
color:#999;
8
}
این دو مرحله مهمترین مراحل در این خودآموز می باشد . که به وسیله آن می توانیم به منوی بازشو با قابلیت دلخواه برسیم .
بخش اول کد مربوط به دومین تگ < ul> ما می باشد که با مقداردهی خصوصیت display : none از قرار گرفتن المانی در تگ div جلوگیری می کنیم .
بخش دوم کد نیز برای اینکه المان کل سطر خود را اشغال کند خصوصیت display را با block مقدار دهی می کنیم.
سپس ویژگی position منوی بازشو را برای اینکه به صورت زیر هم باشد ، absolute قرار می دهیم.
1
#nav ul li ul {
2
display: none
3
}
4
#nav ul li:hover ul {
5
display: block;
6
position: absolute;
7
}
در نهایت یکسری خصوصیات به منوی بازشو مانند پهنا ، رنگ پس زمینه ، محل قرار گیری متن و مقدار حاشیه به آن اضافه کرده که شما میتوانید طبق طرح خود آنها را تغییر دهید .
01
#nav ul li:hover ul li a {
02
display:block;
03
background:#12aeef;
04
color:#ffffff;
05
width: 110px;
06
text-align: center;
07
border-bottom: 1px solid #f2f2f2;
08
border-right: none;
09
}
10
#nav ul li:hover ul li a:hover {
11
background:#6dc7ec;
12
color:#fff;
13
}
کد های کامل css
01
*{ margin:0px; padding: 0px; }
02
#nav {
03
font-family: arial, sans-serif;
04
position: relative;
05
width: 390px;
06
height:56px;
07
font-size:14px;
08
color:#999;
09
margin: 0 auto;
10
}
11
#nav ul {
12
list-style-type: none;
13
}
14
#nav ul li {
15
float: left;
16
position: relative;
17
}
18
#nav ul li a {
19
text-align: center;
20
border-right:1px solid #e9e9e9;
21
padding:20px;
22
display:block;
23
text-decoration:none;
24
color:#999;
25
}
26
#nav ul li ul {
27
display: none
28
}
29
#nav ul li:hover ul {
30
display: block;
31
position: absolute;
32
}
33
#nav ul li:hover ul li a {
34
display:block;
35
background:#12aeef;
36
color:#ffffff;
37
width: 110px;
38
text-align: center;
39
border-bottom: 1px solid #f2f2f2;
40
border-right: none;
41
}
42
#nav ul li:hover ul li a:hover {
43
background:#6dc7ec;
44
color:#fff;
45
}
پ ن : این پست توسط نویسنده میهمان سینا ی عزیز نوشته شده که با وجود سن وسال کمی که داره اما مهارت خوبی و از خودش نشان داده و امیدوارم شاهد فعالیتهای بیشتری از سینا جان در آِ تی تی باشیم.

 

[کاربر حذف شده 8031]

پاسخ : آموزش css

مقدمه

CSS یا همان Cascading Style Sheet روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود بدون استفاده از کدهای HTML. از طریق این استایل شیتها می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود جلوگیری کنیم. برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکرپت نیز استفاده کنیم و چون مشکلات جاوا اسکرپت مثلاً غیر فعال بودن جاوا اسکرپت در مرورگر را ندارد با خیالی آسوده تر می توانیم از آن استفاده کنیم.

CSS هم مانند جاوا اسکرپت این امکان را به ما می دهد که از یک فایل استایل خارجی برای تعیین خواص بخشهای مختلف صفحه های یک سایت استفاده کنیم. در این صورت می توانیم ظاهر همه صفحه ها را با ایجاد یک تغییر کوچک در فایل استایل خارجی تغییر دهیم. مثلاً فرض کنید که رنگ متن همچنین نوع فونت متن صفحه هایمان را در یک فایل استایل تعیین کرده ایم و از آن در طراحی چندین صفحه استفاده کرده ایم، حالا اگر بخواهیم رنگ متن همه این صفحات را تغییر دهیم تنها کافی است تا رنگ متن را در همان فایل استایل تغییر دهیم و نیازی به تغییر دادن صفحات نداریم.

منبع:نئو پرشیا​

 

[MajiX]

CSS

CSS یا همون Cascading Style Sheets معمولا با html یه زوج خوب و عالی محسوب میشن

حالا کار CSS چیه ؟!

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

با یه مثال راحت میشه این رو فهمید :

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

حالا به سی اس اس شما میتونید به اون سایه ( shadow ) ، حاشیه ( border ) ، شفافیت ( opacity ) و ... بدید

یکی از ویژگی های منحصر به فرد سی اس اس نزدیک بودن بیش از حد اون به زبان تعاملی انسان هاست

این نمای منوی بالایی سمادیه با استایل های سی اس اس :

این هم بدون سی اس اس :

البته این فقط یه قسمت از منوی بالایی سایته ؛ همش نیست !

پس میشه راحت فهمید که CSS واقعا تاثیر بسزایی روی جاذبه و زیبایی سایت داره !

 

[Lotfi]

پاسخ : CSS

برای طراحی وب کلاسی خوبه؟
یادگیریش چقدر زمان میبره؟

 

[whitecap]

پاسخ : CSS

برای طراحی وب کلاسی خوبه؟
یادگیریش چقدر زمان میبره؟

باید در کنارش html هم بلد باشید . برای یادگیریش هم پیشنهاد میکنم از کتاب های آقای مهندس ریاضی استفاده کنید .

 

[Anita H]

پاسخ : CSS

داوشِ خوبم همه رو توضیح داد ولی یه نکته کوچیک جا موند:
این کار ها رو بیشترش رو با HTML هم میشد انجام داد. فایده ی CSS اینه که مثلا بهش میگی اگر من قبل از هر متنی یا عکسی یا هر چیز دیگه ای فلان کلمه رو نوشتم (مثلا اسم یک class) تو هم بیا و رنگ متنو این قدر کن، اندازه شو این قدر. یعنی شما واسه یه تیکه کد، اسم میذارید و تو جاهای دیگه لازم نیست خود اون کد رو بنویسید؛ صرفا نوشتن اسمش کافیه.(البته استثنا هم داره)

+اگه بد توضیح دادم به majiiiiiid بگید واستون توضیح بده. چون با تجربه ثابت شده که من توضیح دهنده ی خوبی نیستم
++جواب majiiiiid توی ارسال پایین: من هم که نخواستم تو چهار خط توضیح بدم که

 

[MajiX]

پاسخ : CSS

داوشِ خوبم همه رو توضیح داد ولی یه نکته کوچیک جا موند:
این کار ها رو بیشترش رو با HTML هم میشد انجام داد. فایده ی CSS اینه که مثلا بهش میگی اگر من قبل از هر متنی یا عکسی یا هر چیز دیگه ای فلان کلمه رو نوشتم (مثلا اسم یک class) تو هم بیا و رنگ متنو این قدر کن، اندازه شو این قدر. یعنی شما واسه یه تیکه کد، اسم میذارید و تو جاهای دیگه لازم نیست خود اون کد رو بنویسید؛ صرفا نوشتن اسمش کافیه.(البته استثنا هم داره)

+اگه بد توضیح دادم به majiiiiiid بگید واستون توضیح بده. چون با تجربه ثابت شده که من توضیح دهنده ی خوبی نیستم

منکه کامل CSS رو توضیح ندادم
توضیحش به این راحتی ها نیست که بتونم توی 4 تا خط بگم !
ولی عمو مجید ( ) هم درست میگه !
اگه به نظر خودتون صفحه ی وبتون نیازی به css نداره و html هم هست ، میتونید این کار رو بکنید
مثلا اگه میخواید که سایز فونت رو عوض کنید میتونید این حرکت رو بزنید :

<p style="font-size:16px">متن مورد نظر</p>

 

[MajiX]

قبل از اینکه بخوایم آموزش رو شروع کنیم باید بدونیم CSS چیه ؟
خب ... حالا که فهمیدیم شروع میکنیم ...

قبلش باید یه خرده HTML هم بلد باشید ...
به مقدار خیــــــــلی کم ...

از پست بعدی شروع

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

 

[MajiX]

پاسخ : آموزش CSS

یه فایل به نام index.html ایجاد کنید
این کد رو بریزید توش :

<html>
<head>
 <link rel="stylesheet" type="text/css" href="style.css">
 <meta charset="UTF-8" />
 <title>آموزش CSS </title>
</head>
<body>
<p>HELLO</p>
</body>
</html>

مهم ترین قسمت این کد HTML که مربوط به CSS میشه خط 3وم هست :

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

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

خب ...
این خط رو ببینید :

<p>HELLO</p>

دیدید ؟!
این خط میاد HELLO رو چاپ میکنه همین !

شاید براتون سوال پیش بیاد که p چیه ؟!
p توی html یک تگ هست
این تگ یک پاراگراف رو تعریف میکنه ...
مرورگرهای پشتیبان تگ p :

فکر کنم بس باشه دیگه ... !
سوال ؟!

 

[Admin2]

پاسخ : آموزش CSS

سلام. کی css بلده؟ ما بخوایم فونت های فروم رو عوض کنیم چیکار باید بکنیم؟ فونت خوب الان چی هست و چجوری تنظیمش کنیم؟

 

[Agent 47]

پاسخ : آموزش CSS

سلام. کی css بلده؟ ما بخوایم فونت های فروم رو عوض کنیم چیکار باید بکنیم؟ فونت خوب الان چی هست و چجوری تنظیمش کنیم؟

http://www.w3schools.com/css/css3_fonts.asp
https://css-tricks.com/snippets/css/using-font-face/

 

[JB]

پاسخ : آموزش CSS

سلام. کی css بلده؟ ما بخوایم فونت های فروم رو عوض کنیم چیکار باید بکنیم؟ فونت خوب الان چی هست و چجوری تنظیمش کنیم؟

من چیز زیادی درباره‌ی اس‌ام‌اف نمی‌دونم، ولی قاعدتا باید این‌جوری باشه بری تو پوشه‌ای که فایل‌های تم مورد استفاده قرار داره، پوشه‌ای به اسم css که احتمالا اونجا قرار داره رو پیدا کنی و فایل index.css رو ویرایش کنی. اون‌جا می‌شه خصوصیات ظاهری قسمت‌های مختلف رو تغییر داد. مثلا فرض کن می‌خوای قلم پیشفرض ارسال‌ها رو تغییر بدی، بگرد دنبال قسمتی که با .post شروع می‌شه:

/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
	overflow: auto;
	line-height: 1.4em;
	padding: 0.1em 0;
}

و تغییرش بده به این:

.post, .personalmessage
{
	overflow: auto;
	line-height: 1.4em;
	padding: 0.1em 0;
	font-size: XXpx;
        font-family: "Times New Roman";
}

این‌جوری قلم پیش‌فرض ارسال‌ها و پیغام‌های خصوصی به Times New Roman با اندازه XX پیکسل تغییر می‌کنه.
مدتی قبل بحثی درباره‌ی تغییر قلم‌های پیش‌فرض ویکی‌پدیا‌ی فارسی شکل گرفته بود و ضمن اون به نکات خوبی درباره قلم‌های رایج در وب فارسی و مقایسه‌ی اون‌ها اشاره شد. ویکی‌پدیا:نظرخواهی/استفاده از قلم توکار و ویکی‌پدیا:ویکی‌پروژه قلم آزاد برای زبان فارسی/مقایسه قلم‌های موجود رو مطالعه کن.