belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

CSS >>>

1.2. Синтаксис CSS

Каскадные таблицы стилей представляют собой набор правил, которыми описывается внешний вид html-элементов. Каждое из таких правил сообщает браузеру, к каким элементам он должен применить правило и каким образом он должен изменить внешний вид этих элементов. Например, если правило сообщает браузеру, что он должен отобразить текст абзацев красным цветом и полужирным начертанием, то на экране мы увидим соответствующее изменение (см. пример 1.1).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">	
		<title>Синтаксис CSS</title>
		
		<!-- Для записи правила CSS воспользуемся элементом 'style' -->
		<style>
			/*-- Правило указывает браузеру, что он должен использовать для */
			/* всех абзацев шрифт красного цвета полужирного начертания */
			
			p{color: red; font-weight: bold;}
		</style>
	</head>
	<body>
		<p>
			Мой текст имеет красный цвет и полужирное начертание.
		</p>
				
		<p>
			Текст всех абзацев, а не только твой!
		</p>
		
		<div>
			Ко мне это правило не относится, ведь я же не абзац.
		</div>
	</body>
</html>

Пример 1.1. Код страницы, содержащей правило CSS

Для размещения правила CSS мы использовали служебный элемент 'style'. При составлении правил используется следующий синтаксис: сперва записывают селектор, который указывает браузеру, на какие элементы будет распространяться данное правило (в нашем случае – это абзацы); затем в фигурных скобках располагают блок объявлений (стиль), состоящий из одного или нескольких объявлений применяемых css-свойств, каждое из которых представляет собой пару 'свойство: значение;', где имя свойства отделяется от значения двоеточием ':', а каждая пара отделяется друг от друга точкой с запятой ';'. Разрешается применять один и тот же стиль сразу для нескольких селекторов, в этом случае селекторы перечисляются через запятую.

Также, как и в HTML, браузеры игнорируют большинство пробельных символов в css-коде: символы табуляции, пробелы, разрывы строк, а также подряд идущие их комбинации. Это, опять же, дает нам возможность использовать их по своему усмотрению с целью придания коду удобочитаемого вида. В дальнейшем мы будем записывать код вертикально, применяя пробелы и разрывы строк, как это показано в примере 1.2.

/* Селекторы перечисляем через запятую */
	/* и для читабельности кода отделяем пробелами. */
	
	em, span, p{
	color: red;			 /* Каждое объявление свойства */
	font-weight: bold;	 /* делаем на новой строке. */
	text-align: center;
	padding-right: 10px;	 /* Имя css-свойства отделяем от  */
	overflow: hidden;	 	/* его значения еще и пробелом. */
	font-style: italic;
	}
		
		/* Не ленитесь писать комментарии! */

Пример 1.2. Форматирование кода CSS

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

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

Словарь новых английских слов

property ['prɔpəti] – свойство.
import [ˈɪmpɔːt] – импорт, импортировать.
selector [si'lektə] – искатель, отборщик.
visited [ˈvɪzɪtɪd] – посещенный.
active ['æktiv] – активный, действующий.
target [ˈtɑːɡɪt] – цель, мишень.
enabled [ɪˈneɪbl̩d] – разрешенный.
disabled [dɪsˈeɪbld] – заблокированный.
checked [tʃɛkt] – выбранный, проверенный.
empty [ˈɛm(p)ti] – пустой.
root [ruːt] – корень, основание.
odd [ɒd] – нечетный, непарный.
even [ˈiːvn] – четный.
child [tʃʌɪld] – дочерний элемент.
first [fəːst] – первый.
last [lɑːst] – последний.
only [ˈəʊnli] – только, единственный.
type [taɪp] – тип.
not [nɒt] – не, ни.
letter [ˈletər] – буква, литера.
line [laɪn] – линия, строка.
before [bɪˈfɔː] – впереди, перед.
after [ˈɑːftə] – потом, после, позади.
content [kənˈtɛnt] – содержимое.
hover [ˈhɒvə] – нависать.
strong [strɔːŋ] – сильный, крепкий.
important [ɪmˈpɔːt(ə)nt] – важный.
centimeter ['senti,mi:tə] – сантиметр.
inch [int∫] – дюйм (2,54 см).
point [pɔint] – пункт, точка.
pica [ˈpʌɪkə] – шрифт 'пика'.
percent [pəˈsent] – процент.
font [fɒnt] – комплект шрифта.
view [vjuː] – вид, смотреть.
hue [hjuː] – цвет, оттенок, тон.
saturation [satʃəˈreɪʃ(ə)n] – насыщенность.
lightness [ˈlʌɪtnəs] – освещенность, светлота.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх