Qidiruv

CSSda oddiygina pticha va belgilangan narsani chiqarish
<!DOCTYPE html>
<html>
<head>
<style>
input:checked {
height: 100px;
width: 100px;
}
</style>
</head>
<body>

<form action="">
<input type="radio" checked="checked" value="male" name="gender"> Male<br>
<input type="radio" value="female" name="gender"> Female<br>
<input type="checkbox" checked="checked" value="Bike"> I have a bike<br>
<input type="checkbox" value="Car"> I have a car
</form>

</body>
</html>

2. CSSda yozmoqchi bo'lgan sahifaga rang berish
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text]:enabled {
background: #ffff00;
}

input[type=text]:disabled {
background: #dddddd;
}
</style>
</head>
<body>

<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" disabled="disabled" value="Disneyland">
</form>

</body>
</html>

3. FAqat bosh hariflarni rangli va katta qilish
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
font-size: 200%;
color: #8A2BE2;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>

<p><b>Note:</b> For this selector to work in IE 5.5-8, you must specify the old, single-colon CSS2 syntax (:first-letter instead of ::first-letter).</p>

</body>
</html>
4. Tanlangan blokning tangi o'zgaradi
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
background-color: yellow;
}
</style>
</head>
<body>

<p>Click inside the text fields to see a yellow background:</p>

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

<p><b>Note:</b> For :focus to work in IE8, a DOCTYPE must be declared.</p>

</body>
</html>
5. ENG ZO'RI samam bunda yozmoqchi bo'gan joyda sichqonchani olib borsangiz text yoziladigan joy kayyaradi (hajmini belgilashingiz memkun)
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 50px;
-webkit-transition: width .99s ease-in-out;
transition: width .99s ease-in-out;
}
input[type=text]:focus {
width: 150px;
}
</style>
</head>
<body>
<h1>The width Property</h1>

<p>Set the width of the input field to 100 pixels. However, when the input field gets focus, make it 250 pixels wide:</p>

boshgandagi holati: <input type="text" name="search">

Bosmasdan avvaldi holati: <input type="text" name="search">

</body>
</html>
8.7666666666667 daqiqadan so`ng qo`shdi...
6. Buna qo'ygan linki har hil tusda tovlanadi yani o'zini rangi qilil bo'lsa sichqoncha borganda ko'k boladi va sizchinchani linkga bosganizga yashil bo'lib qoi'yib yuborganingizda pushti bo'ladi
<html>
<head>
<style>
/* unvisited link */
a:link {
color: green;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */
a:hover {
color: red;
}

/* selected link */
a:active {
color: yellow;
}
</style>
</head>
<body>

<p>Mouse over and click the link: <a href="https://uzmasters.ru">uzmasters</a></p>

</body>
</html>
7. Bunda linkni ustiga sichqoncha borganda hammadida har hil ko'tish kasb etadi
<html>
<head>
<style>
/* unvisited link */
a:link {
color: green;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */
a:hover {
color: red;
}

/* selected link */
a:active {
color: yellow;
}
</style>
</head>
<body>

<p>Mouse over and click the link: <a href="https://uzfor.uz">w3schools.com</a></p>

</body>
</html>
8. JUDA KERAKLI bunda sichqoncha textni ustiga borganda text tepasida menyucha ochiladi (tushuntish maydoniga o'xshagan)
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: yellow;
padding: 20px;
display: none;
}

span:hover + div {
display: block;
}
</style>
</head>
<body>

<span>Hover over me!</span>
<div>I will show on hover</div>

</body>
</html>
8. Bu ham kerakli bunda sichqonchani menyuga olib borsangiz avtomatik siz korsatgan menyuchalar chiqadi

<!DOCTYPE html>
<html>
<head>
<style>
div {background-color: green;}
div a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 15px;
display:inline-block;
}
ul {
display: inline;
margin: 0;
padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
position: absolute;
width: 200px;
display: none;
}
ul li ul li {
background: #555;
display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}
</style>
</head>
<body>

<div>
<a href="#">Useless Link</a>
<ul>
<li>
<a href="#">Dropdown Link</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
</ul>
</div>

</body>
</html>
HAMMASINI O'ZINGIZ SINAB KO'RISH SHUNDA TUSHUNASIZLAR

3.7833333333333 daqiqadan so`ng qo`shdi...
men tayyor kodlarni tashladim
div {
background-color: yellow;
padding: 20px;
display: none;
}

span:hover + div {
display: block;
}
qilib tashlasam ko'pchlik tushunmaydi ertaga yana bir talayini tashlayman (e'tiborilarga qarab)