Севастопольский государственный университет Расчетно-графическая работа № 1
по дисциплине «Информатика»
на тему «Разработка HTML-документа»
вариант-33
Выполнил:
студент 112 группы
Стуенцов В.М.
Проверил:
преподаватель кафедры
ИТиКС
Сушкова Ю.А.
г.Севастополь
2015г.
Тема: Разработка html-документа: «Градирни атомных станций»
Цель:
-
Закрепить знаний, полученных на лекциях, при проведении практических работ и самостоятельных занятий.
-
Отработать практические навыки разработки HTML документов.
-
Привить умения работать с комплексными информационными ресурсами.
Ход работы
1. Css файл.
Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями издавна включают в развитые издательские системы и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Теперь это доступно и создателям сайта, когда цвет, размеры текста и другие параметры хранятся в определенном месте и легко «прикручиваются» к любому тегу. Еще одним преимуществом стилей является то, что они предлагают намного больше возможностей для форматирования, чем обычный HTML.
CSS представляет собой мощную систему, расширяющую возможности дизайна и верстки веб-страниц.
body {
width: 960px; /*установка ширины*/
margin: 0 auto; /*внешние отступы, 0 сверху, авто по бокам*/
border: 5px double #000; /*установка границы. толщина 5пкс, типа "двойная линия", цвет черный*/
padding: 20px 20px 20px 20px; /*внутренние отступы от верхнего, правого, нижнего, левого края*/
}
p {
font-family:Verdana, sans-serif; /*тип шрифта*/
font-size:14px; /*размер шрифта*/
text-indent:30px; /*красная строка*/
text-align: justify; /*выравнивание по ширине*/
}
h2 {
font-family:Verdana, sans-serif; /*тип шрифта*/
font-size:16px; /*размер шрифта*/
font-weight: bold; /*насыщенность шрифта*/
text-indent:30px; /*красная строка*/
text-align: justify; /*выравнивание по ширине*/
}
.header, .wrapper, .footer {
background-color:#ddd; /*фоновый цвет*/
padding-top: 10px; /*внутренний отступ сверху*/
border: 3px solid #000;
padding-left: 20px; /*внутренний отступ слева*/
padding-right: 20px; /*внутренний отступ справа*/
padding-bottom: 20px; /*внутренний отступ снизу*/
}
a.logo {
display: block; /*делает элемент блочным, то есть элемент ведет себя как прямоугольный блок*/
width: 195px; /*ширина*/
height: 70px; /*высота*/
background: url(../img/logo.png) no-repeat; /*фоновый рисунок ссылки. указывается адрес и запрет на повторение*/
margin-left: 10px;
}
h1 {
text-align: center; /*выравнивание по центру*/
font-size: 50px;
font-family: Arial, sans-serif;
font-weight: normal;
}
.main-menu {
}
ul li {
font-size: 18px;
font-family: Arial, sans-serif;
margin-bottom: 5px;
}
ul li a {
color: #000;
text-decoration: none; /*убирает подчеркивание ссылке*/
}
ul li a:hover { /*hover - добавляет свойства при наведении курсора на ссылку*/
color: #E2356C;
text-decoration: underline; /*добавляет подчеркивание*/
}
ul li a:active {
color: #00E21E;
}
.wrapper,.footer {
margin-top: 20px;
}
.wrapper ul li {
font-family: Verdana, sans-serif; /*тип шрифта*/
font-size:14px; /*размер шрифта*/
text-align: justify;
}
.img1 {
display: block;
margin: 0 auto;
}
.footer a {
font-size: 20px;
font-family: Arial, sans-serif;
text-decoration: none;
color: #37388D;
}
.footer {
margin-bottom: 20px;
padding-bottom: 10px;
}
.footer a:hover, .footer a:active {
color: #000;
}
.hcard {
float: right; /*Определяет, по какой стороне будет выравниваться элемент,
при этом остальные элементы будут
обтекать его с других сторон. в данном случае с правой стороны*/
}
.leftimg {
float:left; /* Выравнивание по левому краю */
margin: 7px 17px 7px 0; /* Отступы вокруг картинки */
}
.rightimg {
float: right; /* Выравнивание по правому краю */
margin: 7px 0 7px 17px; /* Отступы вокруг картинки */
}