07.11.2021

CSS - основы, примеры верстки

CSS - основы, примеры верстки

Cascading Style Sheets (CSS) - каскадные таблицы стилей. Таблицы стилей – отделение дизайна веб-страниц от ее структуры и содержания.

Код CSS – это набор инструкций для браузера, для передачи параметров где и в каком виде отображать элементы HTML-страницы (теги XHTML/HTML и их содержимое). С помощью CSS можно работать с шрифтами, цветом, фоновыми изображениями, строками, шириной, высотой, позиционированием элементов и многими другими свойствами.

Способы включения CSS в документ

Есть три варианта - в HTML теге style, в атрибуте тега, в отдельном файле. Теперь подробнее о них.

Код CSS можно писать прямо в HTML-документе используя тег <style>, например:

<style>
.example {
	color:#333;
	background-Color:#eee;
}
</style>

Такой вариант подойдет, если блоки с определенными стилями будут присутствовать только на одной странице.

Еще код можно хранить в отдельном файле с расширением .css, а подключать файл внутри элемента head c помощью элемента link (Если стилей много, это лучший вариант. Все остальное - скорее в качестве исключения, необходимости), например:

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

Так же инструкции css можно писать прямо в теге с помощью атрибута style, например:

<p style="color:red;">Красный текст</p>

Такой вариант является крайне неудобным, если у нас есть много страниц с блоком, имеющим подобное оформление, более того на каждой странице их может быть несколько, в таких случаях стили лучше вынести отдельно, присвоив блокам идентификаторы, либо классы (об этом немного ниже).

Синтаксис CSS

Перед тем, как разбирать синтаксис, остановимся на важном понятии - селекторах. Селектор – это элемент дескрипторов, задаваемый вначале при определении стилей. Селектор сообщает браузеру, где нужно применить стиль. Это может быть имя тега и стили будут применены ко всем соответствующим тегам. Это могут быть классы и идентификаторы элементом (об этом ниже, но если совсем кратко, ID - уникален для всей страницы, по классам - никаких ограничений). За селектором следует описание стиля, которое заключается в фигурные скобки. В описании указываем свойство,через ":" его значение. Стили разделяются ";". Пример, в котором в качестве селектора выступает тег "p":

p {
	color:#656565;
}

Селекторы можно группировать, разделяя их запятой, при этом указанные свойства будут применены ко всем перечисленным селекторам:

h1, p, ul {
	font: 13px/15px Tahoma;
}

Используя классы можно задавать стиль нескольким элементам, которым принадлежит данный класс. Класс селектора записывается в виде ".class" ( точка, после точки следует имя класса). В следующем примере, всем тегам с классом red будет применен цвет текста - красный:

.color_red {
	color:red;
}

А в следующем примере все div с классом border будут обведены черной рамкой шириной в пиксель:

div.border {
	border:1px solid #000;
}

Также селектор можно определять с помощью атрибута id, пользуясь символом #. Id может быть применен только к одному тегу на странице (уникален). В следующем примере стиль будет применим к тегам с атрибутом id "border":

#border {
	border:1px solid red;
}

Стили тегу можно задать использую его атрибуты, например:

input[type="submit"] {
	background-color :black;
	color:#fff; 
}

CSS позволяет пpимeнить нeкoтopый cтиль, тoлькo тeм тeгaм, кoтopыe нaхoдятcя внутpи дpугих (Кoнтeкcтныe ceлeктopы). Напримep:

ul li {
	/*Укажем поля для элементов списка*/
	padding:5px 0px;
}
p span.red {
	/*Сделаем красным цвет текста у тега с определенным классом, внутри тега p*/
	color:red;
}

А еще в этом примере я показал, как сделать комментарий в CSS, /*выделено так*/

Дoчepниe, cecтpинcкиe селекторы - примененяем стили для элементов определенного уровня вложенности, или следуюших за определенными элементами.

div > a {font-size:14px;}
div + a {font:bold 14px/16px Tahoma;}

B первом пpимepe cтиль будeт пpимeнятьcя кo вceм тeгaм a, являющимcя дoчepними пo oтнoшeнию именно к тeгу div, но не к его другим дочерним элементам. Второй пpимep показывает тип cмeжнoгo ceлeктopa, дaнный cтиль будeт пpимeнeн к тeгу a, cлeдующeму нeпocpeдcтвeннo зa div.

Псевдоклассы и псевдоэлементы

Псевдоклассы добавляются к селекторам для определения их состояния при выполнении некоторых действий пользователя (:hover, :active, :focus, :visited), для обращения к определенным элементам среди подобных (например, li:nth-child(4) - четвертый элемент списка). Псевдоэлементы используются для добавления дочерних элементов, не прописанных в HTML, но способных отображаться на странице как и прочие элементы, которые есть в HTML - ::before, ::after

Блочная верстка

Блочная (css) верстка пришла на смену гораздо менее удобной табличной. Суть - содержимое сайта разбивается на блоки, блокам задаются различные стили, параметры, для чего используются каскадные таблицы стилей (css) - отдельный файл с соответствующим расширением. Можно задавать так же в теге <head>, или прописывать для каждого элемента в отдельности.. Однако вариант с использованием отдельного файла наиболее предпочтителен так как значительно уменьшает размер страницы в сравнении с другими способами.

К примеру, 4 блока - прямоугольники, два из них (2 и 3) расположены внутри первого (1), еще один блок (4) - внутри блока 2 (номер блока указан в классе):

<div class="b-1">
	<div class="b-2">
		<div class="b-4"></div>
	</div>
	<div class="b-3"></div>
</div>

Для наглядности выделил блоки: 1 - красный, 2 - синий, 3 - фиолетовый, 4 - зеленый:

пример отображения блоков

Что бы изменить расположение и внешний вид блоков, им присваиваются различные стили (свойства) - отступы, поля, границы, размеры, выравнивание и др. Для начала присвою блоку 2 стили непосредственно внутри тега:

<div class="b-1">
	<div class="b-2" style="float:left; padding-top:20px; padding-right:25px; padding-bottom:20px; padding-left:25px; margin-top:20px; margin-right:25px; margin-bottom:20px; margin-left:25px; border:1px solid; background:#D6E9C6">
		<div class="b-4"></div>
	</div>
	<div class="b-3"></div>
</div>

Здесь были заданы отступы (margin), поля (padding), выравнивание (float), границы (border), фон (background). В итоге получим примерно следующее:

В примере вынесу стили в отдельный тег, блоку 2 присвою идентификатор:

<div class="b-1">
	<div id="block" class="b-2">
		<div class="b-4"></div>
	</div>
	<div class="b-3"></div>
</div>
<style>
#block {float:left; padding-top:20px; padding-right:25px; padding-bottom:20px; padding-left:25px; margin-top:20px; margin-right:25px; margin-bottom:20px; margin-left:25px; border:1px solid; background:#D6E9C6}
</style>

Еще 4 материала, которые возможно Вам понравятся:

Комментарии ()