Основы CSS
Основы CSS.
Язык CSS — представляет собой набор правил. Данные правила применяются к определенному объекту веб-страницы. Это служит для задания особенностей вывода объекта на экран.
Основы CSS включают в себя правила написания селекторов. А так же вес селекторов и их отличия друг от друга.
Каждый набор правил состоит из свойств и их значений. То есть отдельный правил CSS , которые имеют вид:
свойство: значение;
Итак, итоговый формат записи правила CSS имеет вид:
селектор {
свойство: значение;
}
Возможен и строчный вариант записи:
селектор { свойство: значение;}
Оба варианта абсолютно идентичны и не будет разницы и ошибки. Но первый вариант наиболее распространен, так как более удобен для верстальщика. Внутри одного селектора может находиться любое количество свойств с их значениями. Записывать свойства и значение можно только внутри селектора.
Привязка стилей CSS к сайту
Существует несколько способов указать CSS код для сайта. Мы расскажем вам о них немного подробнее. Ведь каждый стиль имеет свои особенности и правила.
1 способ. Подключение внешнего файла CSS
Самый распространенный способ подключения CSS кода это с помощью внешнего файла с расширением .css. Подключение файла стилей осуществляется в части <head> страницы с помощью тега <link>.
Пример подключения:
<link rel= «stylesheet» type= «text/css» href= «style.css»>
При указании файла со стилем используется относительный путь. Это стоит учитывать всегда. Такой способ самый простой и удобный особенно если код содержит большое количество строк.Удобен и в плане изменения стилей, вам не придется метаться по странице ища необходимый элемент для изменения.
2 способ. Написание кода CSS в части <head> страницы
Этот способ подходит для небольших стилей оформления, на пару строк можно сказать. Запись стилей осуществляется внутри тега <style> который в свою очередь находится внутри тега <head>
Пример:
<head>
<style>
*{ color:red;}
div {width:100%;}
</style>
</head>
Таким способом удобно писать небольшие стили оформления, чтобы уменьшить количество файлов на сервере. Если вам не выгодно создавать отдельный css файл то этот способ подойдет очень хорошо.
3 способ. Код CSS с помощью атрибута style
Наверное самый редкий способ использования css. Определение и запись стиля происходит с помощью атрибута style. Этот атрибут можно указать для любого вида тегов веб страницы. Отличительной особенностью такой записи является ее значимость по сравнению с другими способами. Стиль записанный в атрибуте style будет всегда применяться в приоритете и перекрывать другие стили для элемента.
Например
<div style= «color:red; width:100%;»> Текст красного цвета ширина элемента 100% экрана </div>