-
Notifications
You must be signed in to change notification settings - Fork 0
/
CSS.html
178 lines (140 loc) · 6.97 KB
/
CSS.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
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
174
175
176
177
178
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<title>Programlama</title>
</head>
<body>
<blockquote>
<div class="row well">
<div class="col-lg-12">
<center><img src="https://i.hizliresim.com/z39yP9.jpg" /></center>
<div style="background-color:black;">
</div>
</blackquote>
</div>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 90px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
color: green;
}
.active {
background-color: #4CAF50;
}
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: #333; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
}
#myBtn:hover {
background-color: #4CAF50; /* Add a dark-grey background on hover */
}
</style>
<div >
<div class="col-lg-12" >
<ul >
<li role="presentation" ><a href="index.html"> <span class="glyphicon glyphicon-home" aria-hidden="true"></span> Anasayfa</a></li>
<li role="presentation" ><a href="HTML.html"> <span class=" aria-hidden="true"></span> HTML</a></li>
<li role="presentation"class="active"><a href="CSS.html"> <span class=" aria-hidden="true"></span> CSS</a></li>
<li role="presentation"><a href="JAVA.html"> <span class=" aria-hidden="true"></span> Java </a></li>
<li role="presentation"><a href="iletisim.html">İletişim<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span></a></li>
</ul>
</div>
</div>
<blockquote>
<div class="row">
<div class="col-lg-9">
<hr>
<div style="margin-left: center; padding-left: 170px;"
<p>
<h1 style="font-family: Time New Roman, Geneva, Tahoma, sans-serif;"><center> CSS Programlama Dili</center></h1>
<hr>
<p>
<p><b>CSS nedir?</b></p>
<br>
CSS (Cascading Style Sheets) basitçe, sayfamıza ait görselliğe dair her türlü yapıyı düzenlememizi sağlayan bir markup dilidir. Sayfaya ait öğelerin (form, buton, arkaplan vb.) renklerini, boyutlarını, konumlarını vb. özelliklerini düzenlememize imkan sağlar.
<hr>
<center> <img src="https://www.kullabs.com/uploads/CSS.jpg" width="500px" height="center"></center>
<hr>
<br><b>CSS ne işe yarar?</b>
<br>
<br>Tanımında da belirttiğimiz gibi, CSS, web sayfamızdaki öğelerin stilini/görünümünü değiştirmemizi sağlar. Butonunuza gölge mi eklemek istiyorsunuz? Biri sola diğeri sağa dayalı 2 formu aynı konumda mı göstermek istiyorunuz? Ya da sayfanızı scroll etseniz bile yukarıda sabit kalan bir header’a mı ihtiyacınız var? O halde CSS yardımınıza koşacaktır. Web sayfasının görünümüyle alakalı nice senaryoda CSS kullanmanıza gerek olacaktır.
<hr>
<br><center><img src="http://koddit.com/wp-content/uploads/2015/12/css-cover-580x350.jpg"align"center" width="500px" height="center"></center>
<hr>
<br><b>CSS kullanmanın sağlayacağı faydalar nedir?</b>
<br>
<br>■ Görünüme dair özellikleri birden fazla öğede tekrar tekrar kullanabilmemizi sağlar (Bir buton öğesine ait yazı boyutunu ve rengini CSS ile ayarladıktan sonra, aynı özellikleri bir başka öğede olan textbot içinde de kullanabiliriz)
<br>■ Farklı görünüm özelliklerini dilersek bir öğe üzerinde aynı anda uygulayabilmemize olanak tanır (Gölgelendirme için hazırladığımız bir CSS parçası ile renklendirme için hazırladığımız ayrı bir CSS parçasını aynı öğe üzerinde kullanarak iki özelliğini de birleştirebiliriz)
<br>■ Oluşturacağımız bir .css dosyası ile görsel özellikleri derli toplu tutarak, sabit bir HTML yapısınaki görselliğe ait değişiklikleri yalnızca bir dosyayı düzenleyerek sağlayabiliriz
<br>■ Farklı öğelere ait olacak özellikleri tek CSS parçasında tanımlayarak tekrar tekrar stil belirtiminden kaçınmak websitemizin boyutunu da düşürecektir
<br>■ Farklı browser türleri ve mobil ya da masaüstü uygulamadan girişin tespiti ile farklı bir görünüm sunma imkanı yakalayabiliriz (Bağlanan kullanıcının giriş yaptığı cihaz/browser’a göre farklı CSS gösterimi sağlayarak daha rahat kullanım deneyimini yakalayabiliriz)
</p>
</div>
<div class="col-lg-3">
</div>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<div class="row">
<div class="col-lg-12">
<hr>
</div>
</div>
<address>
<br><br> <a href="http://www.trakya.edu.tr" > <img src="https://i.hizliresim.com/vbrAWO.png"align="right" "width="200px" height="100px"> </a>
<strong>Trakya Üniversitesi BÖTE</strong><br> <strong>Eğitim Fakültesi</strong><br> <strong>KOSOVA Yerleşkesi</strong> <br>
<strong>Berzat Pupe <br>
</address>
</div>
</div>
</blockquote>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>