برای کنترل نمایش یک عنصر، display مهم ترین خصوصیت ممکن است. این خصوصیت تعیین کننده ی این است که آیا یک عنصر نمایش داده شود؟ و اگر نمایش داده می شود، چطور نمایش داده شود؟ هر عنصر HTML ای بر اساس ماهیت خود دارای مقدار پیش فرضی برای خاصیت display است که برای اکثر عناصر block یا inline است. اما این ها تنها مقادیر مجاز برای display نیستند، شما می توانید از مقادیری مثل none نیز استفاده کنید.
none (به معنی «هیچکدام») عنصر ما را محو و ظاهر می کند، بدون آنکه نیاز به ساختن دوباره ی آن داشته باشیم! در واقع اگر بخواهید با جاوا اسکریپت یکی از عناصر را حذف کنید، اضافه کردن خصوصیت none به آن عنصر، یکی از روش های مقبول است چرا که بعدا می توانید با تغییر display به مقادیری غیر از none ، آن را برگردانید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPEhtml>
<html>
<head>
<style>
h1.hidden {
display:none;
}
</style>
</head>
<body>
<h1>Thisisavisible heading</h1>
<h1 class="hidden">Thisisahidden heading</h1>
<p>Notice that the h1 element with display:none;does nottake up any space.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در کد بالا مشاهده می کنید که تگ h1 دارای display: none است بنابراین دیده نمی شود. با حذف کردن این خصوصیت می توانید آن را دوباره نمایش دهید.
شما می توانید این کار را با یک دستور دیگر نیز انجام دهید: ;visibility:hidden
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPEhtml>
<html>
<head>
<style>
h1.hidden {
visibility:hidden;
}
</style>
</head>
<body>
<h1>Thisisavisible heading</h1>
<h1 class="hidden">Thisisahidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
سوال: تفاوت این دو دستور چیست؟
پاسخ: دستور display: none عنصر را طوری مخفی می کند که انگار اصلا در صفحه وجود ندارد، بنابراین هیچ فضایی را نیز اشغال نمی کند اما ;visibility:hidden تنها ظاهر عنصر را غیر قابل دیدن می کند. بنابراین آن عنصر هنوز هم فضا می گیرد. این مورد به خوبی در دو مثال بالا قابل مشاهده است.
با استفاده از کمی خلاقیت می توانیم صفحات زیبایی در دنیای وب خلق کنیم. به مثال زیر توجه کنید:
کدهای HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sign-Up/Login Form</title>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600'rel='stylesheet'type='text/css'>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet"href="css/style.css">
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active"><ahref="#signup">Sign Up</a></li>
<li class="tab"><ahref="#login">Log In</a></li>
</ul>
<div class="tab-content">
<div id="signup">
<h1>Sign Up forFree</h1>
<form action="/"method="post">
<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
SetAPassword<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<button type="submit"class="button button-block"/>Get Started</button>
</form>
</div>
<div id="login">
<h1>Welcome Back!</h1>
<form action="/"method="post">
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<pclass="forgot"><ahref="#">Forgot Password?</a></p>
<button class="button button-block"/>LogIn</button>
</form>
</div>
</div><!--tab-content-->
</div><!--/form-->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
|
کدهای CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
*,*:before,*:after{
box-sizing:border-box;
}
html{
overflow-y:scroll;
}
body{
background:#c1bdba;
font-family:'Titillium Web',sans-serif;
}
a{
text-decoration:none;
color:#1ab188;
transition:.5sease;
}
a:hover{
color:#179b77;
}
.form{
background:rgba(19,35,47,0.9);
padding:40px;
max-width:600px;
margin:40pxauto;
border-radius:4px;
box-shadow:04px10px4pxrgba(19,35,47,0.3);
}
.tab-group{
list-style:none;
padding:0;
margin:0040px0;
}
.tab-group:after{
content:"";
display:table;
clear:both;
}
.tab-grouplia{
display:block;
text-decoration:none;
padding:15px;
background:rgba(160,179,176,0.25);
color:#a0b3b0;
font-size:20px;
float:left;
width:50%;
text-align:center;
cursor:pointer;
transition:.5sease;
}
.tab-group lia:hover{
background:#179b77;
color:#ffffff;
}
.tab-group.activea{
background:#1ab188;
color:#ffffff;
}
.tab-content>div:last-child{
display:none;
}
h1{
text-align:center;
color:#ffffff;
font-weight:300;
margin:0040px;
}
label{
position:absolute;
-webkit-transform:translateY(6px);
transform:translateY(6px);
left:13px;
color:rgba(255,255,255,0.5);
transition:all0.25sease;
-webkit-backface-visibility:hidden;
pointer-events:none;
font-size:22px;
}
label.req{
margin:2px;
color:#1ab188;
}
label.active{
-webkit-transform:translateY(50px);
transform:translateY(50px);
left:2px;
font-size:14px;
}
label.active.req{
opacity:0;
}
label.highlight{
color:#ffffff;
}
input,textarea{
font-size:22px;
display:block;
width:100%;
height:100%;
padding:5px10px;
background:none;
background-image:none;
border:1pxsolid#a0b3b0;
color:#ffffff;
border-radius:0;
transition:border-color.25sease,box-shadow.25sease;
}
input:focus,textarea:focus{
outline:0;
border-color:#1ab188;
}
textarea{
border:2pxsolid#a0b3b0;
resize:vertical;
}
.field-wrap{
position:relative;
margin-bottom:40px;
}
.top-row:after{
content:"";
display:table;
clear:both;
}
.top-row>div{
float:left;
width:48%;
margin-right:4%;
}
.top-row>div:last-child{
margin:0;
}
.button{
border:0;
outline:none;
border-radius:0;
padding:15px0;
font-size:2rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:.1em;
background:#1ab188;
color:#ffffff;
transition:all0.5sease;
-webkit-appearance:none;
}
.button:hover,.button:focus{
background:#179b77;
}
.button-block{
display:block;
width:100%;
}
.forgot{
margin-top:-20px;
text-align:right;
}
|
کدهای جاوا اسکریپت:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
$('.form').find('input, textarea').on('keyup blur focus',function(e){
var$this=$(this),
label=$this.prev('label');
if(e.type==='keyup'){
if($this.val()===''){
label.removeClass('active highlight');
}else{
label.addClass('active highlight');
}
}elseif(e.type==='blur'){
if($this.val()===''){
label.removeClass('active highlight');
}else{
label.removeClass('highlight');
}
}elseif(e.type==='focus'){
if($this.val()===''){
label.removeClass('highlight');
}
elseif($this.val()!==''){
label.addClass('highlight');
}
}
});
$('.tab a').on('click',function(e){
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target=$(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
|
با ترکیب این سه دسته کد و استفاده از قابلیت display:none می توانیم یک فرم لاگین و ثبت نام به زیبایی تمام بسازیم. خروجی این سه دسته کد را در لینک زیر مشاهده کنید:
مشاهده ی نمونه فرم لاگین و ثبت نام کاربران
عناصر block
عناصری که از نوع block هستند تمام عرض صفحه یا نگه دارنده‌شان را می گیرند و به همین خاطر همیشه از خط جدید شروع می شوند. مثال:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPEhtml>
<html>
<style>
#first {
background-color:red;
}
#second {
background-color:purple;
}
</style>
<body>
<div id="first">Hello</div><div id='second'>World</div>
<p>The DIV element isablock element,andwill start onanewline.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در زیر لیستی از عناصری که از نوع Block هستند مشاهده می کنید:
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset><figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav><noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
عناصر inline
عناصر inline برخلاف عناصر block تنها فضای لازم خودشان را می گیرند و دیگر سر تا سر عرض صفحه را اشغال نمی کنند به همین خاطر در خط جدید شروع نمی شوند. مثال:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPEhtml>
<html>
<style>
#first {
background-color:red;
}
#second {
background-color:purple;
}
</style>
<body>
<span id='first'>Hello</span>
<span id='second'>World</span>
<p>The SPAN element isan inline element,andwill notstart onanewline.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در لیست زیر عناصر inline را مشاهده می کنید:
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i><img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select><small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>
تغییر خاصیت display در عناصر مختلف
همانطور که قبلا هم گفتیم هر عنصر یک مقدار خاص برای خاصیت display دارد اما ما می توانیم این مقدار را تغییر دهیم. تبدیل کردن عناصر inline به عناصر block و بالعکس از جمله روش هایی است که برای نمایش یک صفحه ی وب به صورتی خاص یا بر اساس سلیقه مان کاربردی است. یکی از مثال های کاربردی این موضوع لیست ها (li) هستند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPEhtml>
<html>
<head>
<style>
li {
display:inline;
}
</style>
</head>
<body>
<p>باتغییرچینشلیستهامیتوانیمبهسادگیمنوهایامروزیرابسازیم</p>
<ul>
<li><ahref="https://www.roxo.ir/series/html-tutorials/"target="_blank">HTML</a></li>
<li><ahref="https://www.roxo.ir/series/css-tutorials/"target="_blank">CSS</a></li>
<li><ahref="https://www.roxo.ir/series/advanced-javascript/"target="_blank">JavaScript</a></li>
</ul>
</body>
</html>
|
مشاهده ی خروجی در JSBin
با تغییر دادن تگ های li به حالت inline می توانیم منو های امروزی را بسازیم، البته منوی بالا کامل نمی باشد و نیاز به استایل دهی دارد.
نکته: تغییر دادن حالت Display عناصر تنها مشخص می کند که چگونه نمایش داده شوند و هیچ تاثیری در تعیین ماهیت آن عنصر ندارد بنابراین اگر یک عنصر inline داشته باشیم و سپس به آن خاصیت ;display: block را بدهیم، دیگر نمی تواند عناصر block دیگری را درون خود جای بدهد. در مثال زیر یک تگ span را می بینید که به دلیل داشتن خاصیت block باعث شکستن خط شده است:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPEhtml>
<html>
<head>
<style>
span {
display:block;
}
</style>
</head>
<body>
<span>Adisplay propertywithavalue of"block"results in</span><span>aline breakbetween the two elements.</span>
</body>
</html>
|
مشاهده ی خروجی در JSBin
با تگ های <a> نیز چنین کاری کرده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPEhtml>
<html>
<head>
<style>
a {
display:block;
}
</style>
</head>
<body>
<p>Display links asblock elements:</p>
<ahref="https://www.roxo.ir/series/html-tutorials/"target="_blank">HTML</a>
<ahref="https://www.roxo.ir/series/css-tutorials/"target="_blank">CSS</a>
<ahref="https://www.roxo.ir/series/advanced-javascript/"target="_blank">JavaScript</a>
</body>
</html>
|
مشاهده ی خروجی در JSBin
میبینید که دیگر عناصر <a> کنار یکدیگر نمی ایستند و حتما باید از خط جدید شروع شوند.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟