Обучение CSS Введение
«Введение в CSS» – первый урок учебника CSS. Сегодня мы с вами начинаем изучение на мой взгляд очень интересной
темы под названием « CSS
» На первом уроке
CSS мы поговорим об использовании каскадных таблиц стилей,
использование комментариев, подключении таблиц стилей и т.д.
Одним из преимуществ таблиц стилей является то, что для их подкючения и использования вам не понадобится каких-либо специфических знаний, а всю необходимую информацию вы сможете найти в рамках данного учебника.
Приоритет использования таблиц стилей.
Существует несколько способов задания таблиц стилей:
- внутри элемента HTML
- внутри элемента <head> страницы HTML
- во внешнем файле CSS
Если для некоторого элемента разметки HTML было определено более одного стиля, то ни будут последовательно каскадированны друг на друга по определенным правилам. Приоритет наложения стилей друг на друга представлен ниже:
- стили браузера по умолчанию
- внешние стили
- внутренние стили (стили, расположенные внутри элемента <head>)
- стили, присвоенные непосредственно HTML элементам
Эти правила позволяют каскадировать стили друг на друга. В представленом списке указано что стиль элимента имеет наивысший приоритет. Если возникает ситуация когда стиль элимента задаёт чёрный цвет а во внешней таблице прописан другой цвет то элимент всё равно будет чёрный т.к. стиль указаный внутри элимента будет иметь наивысший приоритет Подключение внешних табиц стилей.
Использование внешних таблиц стилей является наиболее удобным способом организации разметки страниц. Для построения связи с внешней таблицей необходимо конструкцию вида <link rel="stylesheet" type="text/css" href="style.css"> разместить внутри контейнера <head></head> , как это показанно в примере: <head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
осле этого создаем файл с названием style.css и прописываем внутри него необходимые css инструкции. Комментарии CSS.
Для создания комментариев в CSS используется следующая конструкция:
для открытия комментариев служит символ "/*" и символ "*/" – для закрытия.
/* Первый комментарий. */ p { /* Второй комментарий. */ { margin – left: 5pt; font – family: "verdana"; /* Третий комментарий. */ font – style:italic; }
Как вы и сами видите, комментарии могут быть расположенны в любом месте CSS инструкции.
В данном уроке мы начали обучение CSS. Этот урок был водным и здесь мы разобрали основные особенности использования таблиц стилей. Язык CSS не сложен в усвоении и при должном желании вы с легкостью своите его, изучив данный учебник.
Источник: |