NEW
Font size
WorksheetsЗнаешь ли ты CSS?
Total questions: 10
Worksheet time: 10mins
Какого цвета будет текст "Hello"?
<style type="text/css">
a{
padding: 5px;
border: solid black;
color:green ;
}
.hide-el{
display:none;
position: relative;
margin: 0;
}
.link-hover:hover .hide-el{
display: block;
}
</style>
...........
<body>
<h2>Mouse over the links to see them change layout.</h2>
<div class = "link-hover">
<a class="three" href="#target">Link 3</a>
<div class = "hide-el">
<ul>
<li><a>Hello</a></li>
<li><a>Salut</a></li>
</ul>
</div>
</div>
</body>
black
green
blue
red
Какого цвета будет текст "Link 3"?
<style>
a{
padding: 5px;
border: solid black;
color:green ;
}
.hide-el{
display:none;
position: relative;
margin: 0;
}
.link-hover:hover .hide-el{
display: block;
}
a.three {color:red;
border: solid black;
}
</style>
</head>
<body>
<h2>Mouse over the links to see them change layout.</h2>
<div class = "link-hover">
<a class="three" href="#target">Link 3</a>
<div class = "hide-el">
<ul>
<li><a>Hello</a></li>
<li><a>Salut</a></li>
</ul>
</div>
</div>
</body>
blue
green
red
black
Какого цвета будет фон текста "Salut"?
<html>
<head>
<style type="text/css">
a{
padding: 5px;
border: solid black;
color:green ;
background-color: pink;
}
.hide-el{
display:none;
position: relative;
margin: 0;
}
.link-hover:hover .hide-el{
display: block;
}
ul li {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Mouse over the links to see them change layout.</h2>
<div class = "link-hover">
<a class="three" href="#target">Link 3</a>
<div class = "hide-el">
<ul>
<li><a>Hello</a></li>
<li><a>Salut</a></li>
</ul>
</div>
</div>
</body>
</html>
green
red
pink
yellow
Какого цвета будет фон текста "link 2"?
<html>
<head>
<style type="text/css">
a{
padding: 5px;
border: solid black;
color:green ;
background-color: pink;
}
div a{
background-color: lightblue;
}
p a{
background-color: lightgreen;
}
p b{
background-color: yellow;
}
</style>
</head>
<body>
<h2>Mouse over the links to see them change layout.</h2>
<p>
<b>
<a class="one" href="#target">Link 1</a>
</b>
</p>
<div class="div2">
<p>
<a class="two" href="#target">Link 2</a>
</p>
</div>
</body>
</html>
pink
lightgreen
yellow
lightblue
Как изменится текст "Link 2" при наведении курсора
<html>
<head>
<style type="text/css">
a{
padding: 5px;
border: solid black;
color:green ;
background-color: pink;
}
div:hover a{
background-color: lightblue;
}
p a{
background-color: lightgreen;
}
p .two{
background-color: yellow;
}
</style>
</head>
<body>
<h2>Mouse over the links to see them change layout.</h2>
<p>
<b>
<a class="one" href="#target">Link 1</a>
</b>
</p>
<div class="div2">
<p>
<a class="two" href="#target">Link 2</a>
</p>
</div>
</body>
</html>
из pink в lightgreen
из yellow в lightblue
из lightgreen в lightblue
из pink в yellow
У какого линка при наведении курсоре текст увеличится в размере?
<html>
<head>
<style type="text/css">
a.one {color:blue;}
a.one:hover {color:red;}
a.two {color:green;text-decoration:none;}
a.two:hover {text-decoration:underline;}
.par1 a {color:black;}
.par1:hover a {color:yellow;}
a.three:hover {font-size:150%;}
a.four:link {color:darkgreen;}
a.four:hover {background:yellow;}
</style>
</head>
<body>
<p>Mouse over the links to see them change layout.</p>
<p><a class="one" href="#target">Link 1</a></p>
<p><b><a class="two" href="#target">Link 2</a></b></p>
<div id="unu">
<p class="par1"><a class="three" href="#target">Link 3</a></p>
<p><a class="four" href="#target" >Link 4</a></p>
</div>
</body>
</html>
Link 1
Link 2
Link 3
Link 4
Какая карта будет лежать сверху?
<html>
<head>
<title>
Example with cards
</title>
<style type="text/css">
.carta1
{
padding:0;
margin:0;
z-index:3;
position: absolute;
left: 100px;
top: 100px;
width:123px;
height:177px;
border: 2px solid black;
border-radius:8px;
background-image: url("valet.bmp");
}
.carta2
{
padding:0;
margin:0;
z-index:4;
position: absolute;
left: 150px;
top: 150px;
width:123px;
height:177px;
border: 2px solid black;
border-radius:8px;
background-image: url("dama.bmp");
}
.carta3
{
padding:0;
margin:0;
z-index:5;
position: absolute;
left: 200px;
top: 200px;
width:123px;
height:177px;
border: 2px solid black;
border-radius:8px;
background-image: url("koroli.bmp");
}
.carta4
{
padding:0;
margin:0;
z-index:6;
position: absolute;
left: 250px;
top: 250px;
width:123px;
height:177px;
border: 2px solid black;
border-radius:8px;
background-image: url("tuz.bmp");
}
</style>
</head>
<body>
<div class="container">
<div class="carta1"></div>
<div class="carta2"></div>
<div class="carta3"></div>
<div class="carta4"></div>
</div>
</body>
</html>
Валет
Дама
Король
Туз
Какой текст не получится прочитать до конца?
<head>
<style type="text/css">
div
{
width:200px;
height:100px;
background-color:yellow;
}
div.scroll
{
background-color:#00FFFF;
overflow:scroll;
}
div.hidden
{
background-color:#00FF00;
overflow:hidden;
}
</style>
</head>
<body>
<p>Свойство CSS overflow определяет, что будет с элементом, если его содержимое не помещается в видимые пределы элемента.</p>
<p>Пример 1</p>
<div class="scroll">A/B тестирование — это метод маркетингового исследования, он позволяет сравнить несколько вариантов и выбрать самый эффективный. Предположим, вас есть две версии одной страницы — основная (контрольная) и новая. Вы одновременно запускаете две версии на выборке пользователей, а потом измеряете, какая дала лучший результат.</div>
<p>Пример 2</p>
<div class="hidden">Обычно тестируют:структуру лендинга;
количество и расположение контента;
заголовки и подзаголовки;
тексты и описания;
изображения;
дизайн и тексты у СТА-кнопок;
формы регистрации на сайте;
всплывающие окна;
баннеры и окна с акциями, специальными предложениями.</div>
<p>Пример 3</p>
<div>Когда вы поняли, с чего будете начинать, можно формулировать гипотезу. Без нее не проводят ни одного исследования, потому что иначе непонятно, что проверять и какие показатели измерять. Гипотезу всегда формируют до начала теста.</div>
</body>
</html>
A/B тестирование — это метод ...
Обычно тестируют:структуру лендинга; ...
Когда вы поняли, с чего будете начинать ...
Какого цвета будет слово Toamna?
<html>
<head>
<style type="text/css">
body {color:darkgray;text-decoration:none;}
a.one {color:blue;}
a.one:hover {color:red;}
a.two {color:green;text-decoration:none;}
a.two:hover {text-decoration:underline;}
a.three:hover {font-size:150%;}
a.four:link {color:darkgreen;}
a.four:hover {background:yellow;}
.par1 a {color:black;}
.par1:hover a {color:yellow;}
.par1 {color:pink;}
.par1:hover {color:violet;}
#unu:hover {color:orange;}
</style>
</head>
<body>
<p>Mouse over the links to see them change.</p>
<p>Iarna <a class="one" href="#target">rece</a></p>
<p>Primavara <a class="two" href="#target">verde</a></p>
<div id="unu">Anul
<p class="par1">vara <a class="three" href="#target">calda</a></p>
<p>toamna <a class="four" href="#target" >bogata</a></p>
</div>
</body>
</html>
Yellow
Darkgray
Orange
Darkgreen
Какое слово поменяет цвет из синего в красный при наведении курсора?
<html>
<head>
<style type="text/css">
body {color:darkgray;text-decoration:none;}
a.one {color:blue;}
a.one:hover {color:red;}
a.two {color:green;text-decoration:none;}
a.two:hover {text-decoration:underline;}
a.three:hover {font-size:150%;}
a.four:link {color:darkgreen;}
a.four:hover {background:yellow;}
.par1 a {color:black;}
.par1:hover a {color:yellow;}
.par1 {color:pink;}
.par1:hover {color:violet;}
#unu:hover {color:orange;}
</style>
</head>
<body>
<p>Mouse over the links to see them change.</p>
<p>Iarna <a class="one" href="#target">rece</a></p>
<p>Primavara <a class="two" href="#target">verde</a></p>
<div id="unu">Anul
<p class="par1">vara <a class="three" href="#target">calda</a></p>
<p>toamna <a class="four" href="#target" >bogata</a></p>
</div>
</body>
</html>
rece
verde
calda
bogata
