Министерство
образования и науки ЛНР
Луганский государственный Университет имени Владимира Даля
Стахановский инженерно-педагогический институт
Кафедра информационных систем
Лабораторная
работа № 8
по
дисциплине: «WEB»
Стаханов 2020
Лабораторная работа № 8
Тема: Основы работы со ссылками и границами.
Цель: изучить значения свойства text-decoration, псевдоклассы для применения различных состояний элементов, научиться работать с границами в CSS.
Ход работы
1.
<html>
<style>
a:link {
color: red;
text-decoration: done;
}
a:visited {
color: red;
text-decoration: done;
}
a:hover {
text-decoration: underline;
color: blue;
}
</style>
<a href="#">Ссылка</a>
</html>
<html>
<style>
a:link {
color: blue;
text-decoration: underline;
}
a:visited {
color: blue;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
</style>
<a href="#">Ссылка</a>
</html>
<html>
<style>
.www a {
color: red;
</style>
<div class="www">
<a href="#">Ссылка</a>
</div>
</html>
2.
<html>
<style>
.p1 {
text-decoration: underline;
}
.p2 {
text-decoration: line-through;
}
.p3 {
text-decoration: overline;
}
</style>
<div class="p1">
<p>Привет мир!</p>
</div>
<div class="p2">
<p>Привет мир!</p>
</div>
<div class="p3">
<p>Привет мир!</p>
</div>
</html>
3.1.
<div></div>
<style>
div {
width: 300px;
height: 400px;
border: 1px solid red;
}
</style>
3.2.
<div></div>
<style>
div {
border-width: 1px;
border-style: dashed;
border-color: blue;
width: 500px;
height: 300px;
}
</style>
3.3.
<div></div>
<style>
div {
border-width: 1px;
border-style: dashed;
border-color: green;
width: 100px;
height: 100px;
}
</style>
3.4.
<!doctype html>
<html>
<head>
<style>
#square
{
width: 400px;
height: 200px;
border-width: 3px;
border-style: solid;
border-color: blue green red black;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="square"></div>
</body>
</html>
3.5.
<!doctype html>
<html>
<head>
<style>
#square
{
width: 300px;
height: 300px;
border: 2px dotted green;
border-radius: 10px 40px 10px 40px;
}
</style>
</head>
<body>
<div id="square"></div>
</body>
</html>
3.6.
<!doctype html>
<html>
<head>
<style>
#square
{
width: 300px;
height: 300px;
border: 2px dotted green;
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 30px;
}
</style>
</head>
<body>
<div id="square"></div>
</body>
</html>
3.7.
<!doctype html>
<html>
<head>
<style>
.circle {
width: 10em;
height: 10em;
border: 2px solid red;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
3.8.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Цвет ссылок</title>
<style>
a { font-size: 17px; color: blue; text-decoration: none}
a.link1 { font-size: 17px; color: red; text-decoration: underline}
a.link2 { font-size: 17px; color: black; text-decoration: none}
</style>
<body link=#0000ff>
<p><a href=link1.html>ССЫЛКА</a>
<p><a href=link2.html class=link1>ССЫЛКА</a>
<p><a href=link3.html class=link2>ССЫЛКА</a>
</body>
</html>
Вывод: изучены значения свойства text-decoration, псевдоклассы для применения различных состояний элементов, получен опыт работы с границами в CSS.
Министерство образования и науки
Лабораторная работа № 8 Тема:
Ссылка </a> </html> <html> <style>
3.1. <div></div> <style> div { width: 300px; height: 400px; border: 1px solid red; } </style> 3.2. <div></div> <style> div { border-width: 1px; border-style: dashed; border-color:…
3.3. <div></div> <style> div { border-width: 1px; border-style: dashed; border-color: green; width: 100px; height: 100px; } </style> 3.4. <!doctype html> <html> <head> <style> #square {…
</style> </head> <body> <div id="square"></div> </body> </html> 3.5. <!doctype html> <html> <head> <style> #square { width: 300px; height: 300px; border: 2px dotted green; border-radius: 10px…
3.6. <!doctype html> <html> <head> <style> #square { width: 300px; height: 300px; border: 2px dotted green; border-top-left-radius: 10px; border-top-right-radius: 20px; border-bottom-left-radius: 40px; border-bottom-right-radius: 30px; }…
DOCTYPE HTML PUBLIC "-//W3C//DTD
© ООО «Знанио»
С вами с 2009 года.
