Файл: Каскадные таблицы стилей CSS.docx

Скачать файл
Заказать решение

ВУЗ: Новосибирский государственный технический университет

Категория: Решение задач

Дисциплина: Программирование

Добавлен: 15.02.2019

Просмотров: 594

Скачиваний: 11

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ

ВЫСШЕГО ОБРАЗОВАНИЯ

«НОВОСИБИРСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ»


Кафедра вычислительной техники









ОТЧЕТ

ПО ЛАБОРАТОРНОЙ РАБОТЕ №3

«Каскадные таблицы стилей CSS»

ПО ДИСЦИПЛИНЕ «WEB-ПРОГРАММИРОВАНИЕ»











Факультет: АВТФ Преподаватель: Новицкая Ю.В.


Группа: АВТ-412


Студенты:

Евтушенко Никита Сергеевич

Лазаревич Михаил Михайлович








Новосибирск 2017г.

Цель работы:

Изучить основы каскадных таблицы стилей CSS 3.

Задание:

1) Изменить html-документ, полученный в результате выполнения лабораторной работы №2 «Создание статического html-документа», изменив в нем с помощью каскадных таблиц стилей:

  • текст (шрифт, размер, цвет, поля, обрамление);

  • гиперссылки (цвет непосещенных и посещенных ссылок);

  • документ (фон);

  • список (маркеры или нумерацию);

  • таблицу (границы, фон).

Использовать определение стилей для тегов и классы стилей, псевдоклассы.


Использовать три способа определения каскадных таблиц стилей:

  • с помощью тега <link>;

  • с помощью тега <style>;

  • с помощью параметра style тега.

Продемонстрировать действие приоритетов при применении различных способов определения CSS;

Создать два слоя, частично перекрывающих друг на друга.

2) Создать изображение в соответствии с вариантом, используя только свойства CSS.

Порядок выполнения лабораторной работы:

  1. Запустить текстовый редактор.

  2. Изменить с помощью каскадных таблиц стилей html-документ в соответствии с заданным вариантом. Для справки о свойствах и их значениях можно использовать справочник, расположенный по адресу http://htmlbook.ru.

  3. Протестировать созданный документ в браузере.

html-разметка созданного документа:

Часть 1:

!DOCTYPE html>

<html lang="ru">


<head>

<meta charset="utf-8" />

<title>Лаб 3</title>

<link rel="stylesheet" type="text/css" href="main.css">

</head>

<body>

<ul type="circle">

<li><h1>Зима</h1></li>

<li>Весна</li>

<ol type="A" start="24">

<li><a href="https://www.yandex.com">Март</a></li>

<li>Апрель</li>

<li>Май</li>

</ol>

<li>Лето</li>

<li>Осень</li>

</ul>


<table border="1" width="25%" height="100px" cellpadding="5">

<tr>

<th rowspan="3"></th>

<th></th>

<th></th>

<th></th>

<th rowspan="3"></th>

</tr>

<tr>


<th colspan="3"></th>


</tr>

<tr>

<th></th>

<th></th>

<th></th>

</tr>

</table>

<br>


<input type="text" maxlength="25" size="40" value="Новосибирск">


<p><input name="Omsk" type="radio" value="nedzen"> Омск</p>

<p><input name="Nov" type="radio" value="dzen"> Новосибирск</p>

<p><input name="Tom" type="radio" value="pdzen" checked> Томск</p>


<input type="password" maxlength="25" size="40" value="password">


<form enctype="multipart/form-data" method="post">

<p><input id="file" type="file" name="f"></p>

<p><input type="submit" value="Отправить">

<input type="reset" value="Сбросить"></p>

</form>

</body>


main.css

body{

background-color: grey;

}


h1{

font-family: Arial;

font-size: 64px;

color: orange;

padding: 30px;

border: 5px solid black;

}


#file{

font-family: Arial;

font-size: 36px;

color: orange;

}


a{

color: white;

}


a:visited{

color: pink;

}


h1:hover{

color: purple;

}


ul{

list-style-type: disc;

}


table{

background: yellow;

border-collapse: separate;

}

Часть 2:

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8" />

<title>Это телефон</title>

<link rel="stylesheet" type="text/css" href="reset.css">

<style>

#corpus{

background-color: gray;

border-radius: 15px;

border: 2px solid;

width: 200px;

height: 400px;

}

#monitor{

background-color: white;

position: relative;

border: 2px solid;

top: 15px;

border-radius: 15px;

width: 160px;

height: 160px;

margin: 0 auto;

}


#monitor h3{

position: relative;

top: 50px;

font-size: 36px;

}


#buttons{

position: relative;

top: 20px;

width: 200px;

height: 200px;

}


.button{

border-radius: 100%;

border: 2px solid;

background-color: purple;

float: left;

width: 40px;

height: 40px;

margin: 10px;

}

</style>

</head>

<body>

<div id="corpus">

<div id="monitor">

<h3 align="center">4:29</h3>

</div>

<div id="buttons">

<div class="button"></div>

<div class="button"></div>

<div class="button"></div>

<div style="clear: both"></div>

<div class="button"></div>

<div class="button"></div>

<div class="button"></div>

<div style="clear: both"></div>

<div class="button"></div>

<div class="button"></div>

<div class="button"></div>

</div>

</div>

</body>

</html>

Скриншоты html-документа для различных браузеров:

Часть 1:




Часть 2:


Выводы по работе:

Были изучены основы CSS, а также его возможности.


Смотрите также файлы