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

Курсы HTML/CSS

Урок 5. Введение в CSS. Основы

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

CSS - каскадные таблицы стилей. Основы

Когда-то давно, когда еще не было CSS, все оформление делалось в html-файле посредством атрибутов и носило скудный характер. С появлением CSS оформление html-страницы стало проще и разнообразнее. Теперь роль HTML носит только создание скелета html-страницы - голый текст и картинки.

CSS - это отдельная технология.

CSS - это, прежде всего, стиль документа, а стили в CSS - это набор правил для элементов, состоящих из свойств, деклараций и их значений.

		Основные понятия CSS:
		
Декларация (declaration): color:green;
Свойство (property): background:red;

Набор свойств и деклараций для данного элемента называется правилом CSS:
	
color:green; background:red;

Разделителем в одном правиле между свойствами и декларациями в CSS является точка с запятой (;).

Свойство color задает цвет текста. Свойство background задает цвет фона.

Применить правила CSS к нужным элементам html можно тремя способами.

Inline-способ

Первый, самый простой - это inline-способ:

<!DOCTYPE html>
	<html>
		<head><title>CSS: inline-способ</title></head>
		<body>
			<p>Абзац 1.</p>
			<p style= "color:red; background:yellow;">Абзац 2.</p>
			<p>Абзац 3.</p>
		</body>
	</html>

Вот так это будет выглядеть в браузере:

Как видно из приведенного примера inline-способ - это задание стиля CSS через универсальный атрибут style непосредственно в html-документе, что является недостатком. А что, если нужно сделать красными 5-10 абзацев? У каждого из них придется прописывать атрибут style, к тому же использование inline-сособа нагружает html код, от чего и пытались уйти, создавая CSS.

Встраиваемый (embedding) способ

Вторым способом применения CSS является встраиваемый (embedding) способ. Он заключается в прописывании всех нужных правил CSS в элементе <head> посредством элемента <style>:

<!DOCTYPE html>
	<html>
		<head>
			<title>CSS: embedding-способ</title>
			<style>
				p {
					color:red;
					background:yellow;
				}
			</style>
		</head>
		<body>
			<p>Абзац 1.</p>
			<p>Абзац 2.</p>
			<p>Абзац 3.</p>
		</body>
	</html>

Результат отображения:

Элемент <p> в этом случае называется селектором тега, само правило для выбранного селектора заключается в фигурные скобки {}

Преимущество такого способа перед inline-способом заключается в том, что не нужно искать элементы по всему документу, а можно влиять на них из одного участка кода, плюс уже значительно сокращается нагромождение html-кода. Однако минусом является то, что эти правила CSS влияют только на одну конкретную страницу, а сайт может состоять из десятков, сотен страниц.

В CSS также есть комментарии, которые задаются таким способом: /* Комментарий */. Посредством комментариев, напомню, можно отключить участок кода, в том числе и в CSS.

Linking-сособ

Linking-сособ предполагает вынесение всех правил CSS в отдельный файл с расширением .css. В этом файле уже не будет никакого html-кода, только CSS правила. Прикрепляется ("прилинкуется") файл CSS к html-странице в <head> html-страницы посредством пустого элемента <link>, в котором нужно обязательно указать два атрибута: rel со значением stylesheet, которое указывает браузеру, что в этом файле лежит CSS и href, в значении которого нужно указать путь к файлу CSS:

<!DOCTYPE html>
	<html>
		<head>
			<title>CSS: Linking-способ</title>
			<link rel="stylesheet" href="/styles/style.css"  />
		</head>
		<body>
			<h1>Заголовок</h1>
			<p>Абзац 1.</p>
			<p>Абзац 2.</p>
			<p>Абзац 3.</p>
		</body>
	</html>
	
	CSS файл "style.css" в папке "styles":
	---------------------------------------------------
	
p {color:red; background:yellow;}
h1 {color:green; background:silver;}

Теперь, прописав <link> с указанием пути к нужному CSS-файлу на нужных html-страницах, мы получим единое стилевое оформление для всех страниц.

Способ Linking и является основным способом использования CSS.

Каскадирование

Каскадирование заключается в правилах разрешения конфликтов при переопределении свойств в CSS:

CSS файл "style.css" в папке "styles":
p {color:red;}
div {color:red;}
==============================================
<!DOCTYPE html>
	<html>
		<head>
			<title>Каскадирование</title>
			<link rel="stylesheet" href="/styles/style.css"  />
			<style>
				div {color:green;}
			</style>
		</head>
		<body>
			<div>Результат: текст зеленого (green) цвета.</div>
			<p>Результат: текст красного (red) цвета.</p>
			<p style="color:yellow">Результат: текст желтого
			(yellow) цвета.</p>
		</body>
	</html>

Если внимательно изучить приведенный пример, то становится понятно, что конфликты решаются легко и просто - ближайшее к элементу правило переопределит все остальные! Или так: нижнее правило переопределит верхнее. Переопределяются только те правила, которые конфликтуют, т.е. одноименные, в приведенном примере - это правило цвета текста color.

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

Некоторые элементы могут наследовать те или иные свойства. Приведем такой пример кода:

<!DOCTYPE html>
	<html>
		<head>
			<title>Наследование</title>
		</head>
		<body>
			<div style="color:green">Результат: текст зеленого (green)
			цвета.
				<div style="background:yellow">Результат: текст 
				зеленого (green) цвета на желтом (yellow) фоне.
					<div style="color:red">Результат: текст 
					красного (red) цвета на желтом (yellow) фоне.
					</div>
				</div>
			</div>
		</body>
	</html>

Обратите внимание, в примере три <div> вложены друг в друга, как бы три матрешки, вложенные одна в другую. У второго <div> цвет текста не задан, но он наследуется от первого родительского <div>. Далее, у третьего <div> задан цвет текста, но не задан цвет фона, в итоге цвет текста переопределяется, а вот цвет фона, может показаться, наследуется от второго <div>.

На самом деле, если капнуть глубже, то наследования цвета фона у третьего <div> не происходит, просто у него не задан цвет фона, а по умолчанию цвет фона прозрачный, вот мы и видим цвет желтого фона второго <div> через прозрачный фон третьего. Таким образом, следует учитывать, что одни свойства наследуются, другие - нет.

Единицы измерения в CSS

В CSS есть абсолютные и относительные единицы измерения. Абсолютные - это: cm, mm, in(2,54cm), pt(1/72in), pc(12pt). Относительные: px, %, em, ex.

Единиц измерения в CSS масса, многие из них вам вообще никогда не понадобятся, но следует иметь ввиду, что в CSS нет единиц измерения по умолчанию, всегда нужно обозначить какую-то единицу, нельзя просто написать, например width:20, нужно обязательно указать единицу измерения например, div {width:20px} - эта запись будет означать задание ширины div 20 пикселей.

Единицу измерения можно не указывать только в случае значения 0.

Цвета в CSS

Цвета в CSS можно указывать:

Поименованно: red, green, yellow, blue...
В шестнадцатеричном формате: #FF00FF, #F3C...
В формате RGB: rgb(0, 240, 125), rgb(0%, 60%, 20%)...

Комментарии

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

Введите e-mail:

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

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