Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 18. Наследование свойств css, блочная модель браузера.

Содержание курса

Наследование свойств css - inherit

В css есть свойства, которые наследуются элементами-потомками от элементов-родителей. Это свойство носит название inherit. Простой пример: если мы для элемента <body> зададим красный цвет текста, то все элементы внутри него также будут иметь красный цвет текста.

Рассмотрим такой пример наследования свойств:

<!DOCTYPE html>
	<html>
		<head>
			<title>Наследование свойств css</title>
			<style>
			
				#out {
					border: 5px solid green; 
					color: red; 
					font-size: 2em;
					}
					
				#in {
					padding: 15px;
					}
					
			</style>
		</head>
		<body>
			<div id="out">Текст внутри блока с id=out
			    <div id="in">Текст внутри блока с id=in</div>
			</div>
		</body>
	</html>

Как видно из примера, блок "in" наследовал размер и цвет шрифта, но не наследовал рамку, заданную для блока "out".

На официальном сайте консорциума w3.org есть таблицы с полным списком всех свойств css, где указано какие свойства наследуются, а какие - нет. Наша же задача сейчас просто понять "что это такое и с чем это едят".

Большинство свойств css не наследуются дочерними элементами. Наследуются, по большей части, только те свойства css, которые имеют отношение к тексту (цвет, размер шрифта и др.).

Свойство css inherit устанавливает принудительное наследование свойств css дочерними элементами:
#in{padding: 20px; border: inherit;} - здесь мы указали принудительное наследование рамки дочерним элементом от родительского. Теперь приведённый выше пример в браузере будет выглядеть так:

Блочная модель браузера

Структуру построения веб-страниц в браузере можно представить следующим образом:

Область просмотра в браузере зависит от разрешения экрана, дополнительных панелей в браузере, находящихся в самой области просмотра, от размера самого окна браузера и других факторов. Поэтому верстать страницы именно под размер области просмотра весьма трудоёмкая задача.

Привязка документа html осуществляется при помощи корневого элемента <html> к левой верхней точке окна браузера.

Модель областей css следующая:

Content-box - это та область, где находится содержимое элемента.
Padding-box - это область между содержимым элемента и его границей.
Border-box - это граница элемента.
Margin-box - это область внешних отступов.
Согласно спецификации W3.org ширина и высота (свойства width и height) задаётся именно для Content-box, а итоговые ширина и высота элемента складывается, исходя из суммы ширин и высот всех областей элемента. Например:

Контейнер (containing block) области - это прямоугольник, в котором содержится данная область. Многие параметры области (ширина, высота, внутренние, наружные отступы и др.) расчитываются относительно её контейнера. Для области корневого элемента (<html>) контейнер - это область просмотра (viewport).

Переполнение области контента

Мы уже рассматривали тему "переполнение контентом" в 12-ом уроке курса html 1-1, теперь рассмотрим эту тему более подробно.

Если для блочных элементов не заданы ширина и высота, то они находятся по умолчанию в значении auto. Это значит, что высота элемента будет зависеть от содержимого - сколько положите, на столько и растянется, а ширина будет равна 100% ширине родительского элемента.

Рассмотрим такой пример:

<!DOCTYPE html>
	<html>
		<head>
			<title>Переполнение области контента</title>
			<style>
			
				div{
					background: silver; 
					border: 2px solid red;
					}
				
				p {
					background: YellowGreen;
					}
					
			</style>
		</head>
		<body>
			<h1>Курсы HTML</h1>
			
			<div>Материал в разделах курсов располагается по урокам от
			простого к сложному. Дело в том, что в языках 
			веб-программирования очень и очень много всякого такого, что
			вам никогда и не пригодится, а потому я старался изложить
			материал максимально сжато и понятно, но в тоже время не
			упуская из виду самых основ, от которых вы сами решите в каком
			направлении вам развиваться дальше.</div>
			
			<p>Параграф в body</p>
		</body>
	</html>

Для <div> не задана ширина и высота, а значит его ширина будет равна ширине родителя - контейнера body. Если теперь задать <div> ширину и высоту, скажем, по 200px, то произойдёт переполнение контентом и содержимое "вывалится" вниз под элемент:

Подметим следующее: ни один из элементов на странице "не знает" о том, что у div'а произошло переполнение и контент вывалился наружу - параграф как стоял на своём месте, так и стоит. Единственный элемент, которому об этом стало известно - это элемент <html>, который при уменьшении области просмотра будет показывать полосу прокрутки даже для вывалившегося контента.

Переполнением контента в css управляет свойство overflow, которое по умолчанию находится в значении visible. Результат этого значения по умолчанию нам и виден на рисунке вида в браузере выше. Кроме visible у свойства overflow есть значения:
hidden - срыть всё не поместившееся содержимое;
auto - добавляет полосы прокрутки при необходимости;
scroll - всегда отображаются полосы прокрутки по горизонтали и вертикали;
inherit - наследует значение родительского элемента.

Создание тени в css - свойство box-shadow

Свойство box-shadow в css создаёт тень для указанного блочного элемента. В значении указывается направление тени по оси "X" (положительное значение - вправо, отрицательное - влево), второе значение - смещение тени по оси "Y" (положительное - вниз, отрицательное - вверх), третье значение - растушёвка (размазанные края), четвёртым указывается цвет тени в формате rgba, где "a" - это альфа-канал (прозрачность), указывается от 0 до 1 без ведущего ноля:

<!DOCTYPE html>
	<html>
		<head>
			<title>Создание тени у объекта</title>
			<style>
				div {background: silver;
					border: 2px solid red;
					padding: 30px;
					margin: 30px;
					border-radius: 20px 0;
					box-shadow: 10px 5px 4px rgba(0,0,0,.4);}
				p {background: YellowGreen;}
			</style>
		</head>
		<body>
			<h1>Курсы HTML</h1>
			
			<div>Материал в разделах курсов располагается по урокам от
			простого к сложному. Дело в том, что в языках 
			веб-программирования очень и очень много всякого такого, что
			вам никогда и не пригодится, а потому я старался изложить
			материал максимально сжато и понятно, но в тоже время не
			упуская из виду самых основ, от которых вы сами решите в каком
			направлении вам развиваться дальше.</div>
			
			<p>Параграф в body</p>
		</body>
	</html>

Вид в браузере:

Управление свойством display через псевдокласс :hover

Благодаря псевдоклассу :hover и свойству display можно создавать различные всплывающие подсказки, выпадающие меню, подсветку пунктов меню и др. Делается это методом изменение свойства display (и других свойств) через псевдокласс :hover. Рассмотрим простой пример:

<!DOCTYPE html>
	<html>
		<head>
			<title>Управление свойством display через псевдокласс :hover</title>
			<style>
				em {display: none;}
				span:hover em {display: inline;}
			</style>
		</head>
		<body>
			<span>span - строчный <em>элемент</em></span>
		</body>
	</html>

Элементу <em> задан display в значении none, что значит он не будет отображаться в браузере. Во втором правиле css указано, что при наведении мыши на элемент <span> у следующего за ним элемента - <em> значение display будет меняться на inline, то есть, он будет появляться.

Следует учитывать, что псевдокласс :hover не будет работать на смартфонах, т.к. указателя мыши у них нет.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля


Комментарий №1
26-03-2018 17:00:20
Вася
А что лучше будет - резиновый сайт, в смысле адаптивный, или фиксированный? с каким проблем меньше будет?