Как сделать стиль в ксс
Создание CSS стилей.
Эта статья написана в ответ на многочисленные вопросы о создании CSS стилей для сайта.
Встроенный в программу KompoZer редактор каскадных таблиц стилей CSS предоставляет пользователю широкие возможности по созданию и редактированию таблицы CSS.
Программа позволяет создавать и редактировать как внутреннюю, так и внешнюю, расположенную в отдельном файле, таблицу стилей. Этот способ создания таблицы CSS мы рассматривали в главе «Создание таблицы стилей CSS программой KompoZer».
В любом графическом редакторе (я пользуюсь бесплатным графическим редактором GIMP) нарисуем макет будущего шаблона сайта. Это нам поможет в понимании и создании таблицы стилей CSS.
Далее открываем редактор Композер. Создаём новый документ под именем «Макет на CSS».
Заходим в меню редактора «Код» и прописываем показанный на картинке код.
В окне редактора это будет выглядеть так:
Заходим в меню «Инструменты»/»Редактор CSS» и создаём новую таблицу стилей.
Задаём имя таблицы «maket».
Жмём «Экспортировать таблицу стилей и переключится на неё».
Теперь будем создавать правила стилей.
Заходим в «Редактор CSS». Выбираем «Создать новый» и в выпадающем списке выбираем первый селектор «body». Нажимаем «Создать правило стиля».
Выбираем вновь созданный селектор «#body» и с помощью выпадающих меню прописываем правила стиля для этого селектора. В моём случае это:
ширина блока 1000рх
рамка в 1рх вокруг блока
размер шрифта 14рх
Подобным образом составляем правила для всех селекторов.
В итоге мы получим файл таблицы CSS стилей:
/* Generated by KompoZer */
#body <
border-style: solid;
border-width: 1px;
margin: 0px auto;
font-size: 14px;
width: 1000px;
>
Создаём шапку сайта:
#head <
height: 100px;
background-image: url(qqq3.jpg);
background-repeat: no-repeat;
>
#logo <
background-image: url(qqq.gif);
background-repeat: no-repeat;
width: 468px;
height: 60px;
display: block;
float: none;
position: relative;
top: 40px;
left: 10px;
background-position: left bottom;
>
Для создания полноценного CSS шаблона сайта пропишем стили отображения меню:
#meny <
border-style: solid;
border-width: 1px;
text-decoration: none;
text-align: center;
height: 20px;
font-size: 18px;
background-color: #ffffcc;
width: 998px;
float: none;
display: block;
position: relative;
top: 0px;
>
#meny ul <
border-width: 1px;
font-size: 16px;
color: #003300;
height: 18px;
width: 998px;
text-align: center;
text-decoration: none;
font-style: normal;
display: inline;
font-weight: normal;
>
#meny li <
border-width: 1px 2px 1px 1px;
display: inline;
border-right-style: double;
>
#meny ul a <
margin: 0px 10px;
text-decoration: none;
color: black;
>
#meny ul a:hover <
text-decoration: underline;
color: #990000;
>
#meny ul a.current <
padding: 0 15px;
background: transparent url(images/menu_2_h.jpg) repeat-x scroll left center;
font-weight: bold;
float: none;
line-height: 15px;
color: #003300;
font-size: 16px;
>
Создаём левую колонку:
#left <
border-right: 2px solid white;
margin: 0px auto;
background-color: #ffcc66;
float: left;
position: relative;
padding-right: 10px;
width: 200px;
padding-left: 8px;
min-height: 400px;
>
Создаём правый блок:
#right <
float: right;
position: relative;
min-height: 400px;
width: 778px;
>
#content <
min-height: 400px;
position: relative;
float: left;
width: 543px;
padding-right: 5px;
padding-left: 10px;
background-color: #f0f0f0;
>
#sidebar <
border-left: 2px solid white;
min-height: 400px;
position: relative;
float: right;
background-color: #ffcc66;
margin-right: 0px;
margin-left: 0px;
padding-right: 8px;
width: 200px;
padding-left: 10px;
>
#footer <
border-style: solid;
border-width: 1px;
background-color: #999900;
float: none;
width: 998px;
text-align: center;
height: 30px;
position: relative;
clear: both;
font-size: 12px;
>
Исходные файлы html разметки страницы и CSS таблицы стилей можно скачать по этой ссылке:
Как создать файл стилей CSS?
Первый практический шаг, который необходимо сделать при работе со стилям CSS, это научиться создавать файл, в котором эти стили будут храниться. Давайте посмотрим, что для этого нужно сделать.
Первым делом нужно разобраться, что вообще собой представляет этот файл. Нужно понимать, что файл стилей CSS – это обычный текстовый файл, точно такой же, какой вы можете создать в любом текстовом редакторе «Блокнот», «Microsoft Word» и.т.д.
Единственное, что отличает файл стилей от других текстовых документов – это его расширение, которое имеет вид *.css.
Таким образом, можно сделать вывод, что создать файл стилей CSS мы можем просто изменив расширение текстового файла.
Для тех, кто любит видео:
Способ 1. Создание файла CSS меняя расширение текстового файла.
В главном меню программы выбираем «Файл-Сохранить как».
И сохраняем текстовый файл с расширением *.txt.
Теперь нужно поменять расширение этого файла с *.txt на *.css.
Если у Вас не отображается расширение файлов, вот заметка:
После того, как вы выполните инструкции из этой заметки, рядом с названием файла будет отображаться его расширение.
Теперь для создания файла CSS нужно просто переименовать файл, изменив его расширение на css.
После данной операции вы получите файл стилей css.
Способ 2. Создание файла стилей с помощью редакторов кода (на примере Dreamweaver).
Многие специализированные программы для редактирвания кода, например Dreamweaver, имеют специальные функции для создания файлов стилей CSS.
Давайте посмотрим, как это можно сделать в редакторе Dreamweaver.
После открытия программы появляется главное меню, в котором можно выбрать создание файла CSS.
После того, как файл будет создан, его можно будет сохранить через главное меню «Файл-сохранить как…».
Аналогичный процесс создания файлов CSS есть и в других редакторов кода.
На сегодня все. Подготовьте все необходимые программы, о которых сегодня говорилось и создайте файл стилей style.css. Завтра мы начнем наполнять его содержимым.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Или зарегистрируйтесь через социальные сети:
2.1. Основы CSS
CSS (Cascading Style Sheets) — язык таблиц стилей, который позволяет прикреплять стиль (например, шрифты и цвет) к структурированным документам (например, документам HTML и приложениям XML).
Обычно CSS-стили используются для создания и изменения стиля элементов веб-страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но также могут быть применены к любому виду XML-документа, в том числе XML, SVG и XUL.
Отделяя стиль представления документов от содержимого документов, CSS упрощает создание веб-страниц и обслуживание сайтов.
CSS поддерживает таблицы стилей для конкретных носителей, поэтому авторы могут адаптировать представление своих документов к визуальным браузерам, слуховым устройствам, принтерам, брайлевским устройствам, карманным устройствам и т.д.
Каскадные таблицы стилей описывают правила форматирования элементов с помощью свойств и допустимых значений этих свойств. Для каждого элемента можно использовать ограниченный набор свойств, остальные свойства не будут оказывать на него никакого влияния.
Объявление стиля состоит из двух частей: селектора и объявления. В HTML имена элементов нечувствительны к регистру, поэтому «h1» работает так же, как и «H1». Объявление состоит из двух частей: имя свойства (например, color ) и значение свойства ( grey ). Селектор сообщает браузеру, какой именно элемент форматировать, а в блоке объявления (код в фигурных скобках) перечисляются форматирующие команды — свойства и их значения.
Рис. 1. Структура объявления
Хотя приведенный пример пытается влиять только на пару свойств, необходимых для рендеринга HTML-документа, он сам по себе квалифицируется как таблица стилей. В сочетании с другими таблицами стилей (одна фундаментальная особенность CSS заключается в том, что таблицы стилей объединяются), правило будет определять окончательное представление документа.
Виды каскадных таблиц стилей и их специфика
1. Виды таблиц стилей
1.1. Внешняя таблица стилей
1.2. Внутренние стили
1.3. Встроенные стили
Когда мы пишем встроенные стили, мы пишем CSS-код в HTML-файл, непосредственно внутри тега элемента с помощью атрибута style :
Такие стили действуют только на тот элемент, для которого они заданы.
1.4. Правило @import
Правило @import позволяет загружать внешние таблицы стилей. Чтобы директива @import работала, она должна располагаться в таблице стилей (внешней или внутренней) перед всеми остальными правилами:
Правило @import также используется для подключения веб-шрифтов:
2. Виды селекторов
Селекторы представляют структуру веб-страницы. С их помощью создаются правила для форматирования элементов веб-страницы. Селекторами могут быть элементы, их классы и идентификаторы, а также псевдоклассы и псевдоэлементы.
2.1. Универсальный селектор
Соответствует любому HTML-элементу. Например, *
2.2. Селектор элемента
2.3. Селектор класса
Селекторы класса позволяют задавать стили для одного и более элементов с одинаковым именем класса, размещенных в разных местах страницы или на разных страницах сайта. Например, для создания заголовка с классом headline необходимо добавить атрибут class со значением headline в открывающий тег
и задать стиль для указанного класса. Стили, созданные с помощью класса, можно применять к другим элементам, не обязательно данного типа.
Если элемент имеет несколько атрибутов класса, их значения объединяются с пробелами.
2.4. Селектор идентификатора
Селектор идентификатора позволяет форматировать один конкретный элемент. Значение id должно быть уникальным, на одной странице может встречаться только один раз и должно содержать хотя бы один символ. Значение не должно содержать пробелов.
Уникальный идентификатор элемента может использоваться для различных целей, в частности, как способ ссылки на конкретные части документа с использованием идентификаторов фрагментов, как способ нацеливания на элемент при создании сценариев и как способ стилизации конкретного элемента из CSS.
2.5. Селектор потомка
Если нужно отформатировать потомки определенного элемента, этому элементу нужно задать стилевой класс:
2.6. Дочерний селектор
Дочерний элемент является прямым потомком содержащего его элемента. У одного элемента может быть несколько дочерних элементов, а родительский элемент у каждого элемента может быть только один. Дочерний селектор позволяет применить стили только если дочерний элемент идёт сразу за родительским элементом и между ними нет других элементов, то есть дочерний элемент больше ни во что не вложен.
2.7. Сестринский селектор
Сестринские отношения возникают между элементами, имеющими общего родителя. Селекторы сестринских элементов позволяют выбрать элементы из группы элементов одного уровня:
p — выберет все абзацы, являющиеся сестринскими по отношению к любому заголовку h1 и идущие сразу после него.
2.8. Селектор атрибута
Селекторы атрибутов выбирают элементы на основе имени атрибута или значения атрибута:
=»значение»] — элементы частично содержащие данное значение, например, если для элемента задано несколько классов через пробел, p[class
2.9. Селектор псевдокласса
Псевдоклассы — это классы, фактически не прикрепленные к HTML-тегам. Они позволяют применить CSS-правила к элементам при совершении события или подчиняющимся определенному правилу.
Псевдоклассы характеризуют элементы со следующими свойствами:
2.10. Селектор структурных псевдоклассов
Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром, указанным в круглых скобках:
2.11. Селектор структурных псевдоклассов типа
Указывают на конкретный тип дочернего тега:
2.12. Селектор псевдоэлемента
Псевдоэлементы используются для добавления содержимого, которое генерируется с помощью свойства content :
3. Комбинация селекторов
Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:
4. Группировка селекторов
Один и тот же стиль можно одновременно применить к нескольким элементам. Для этого необходимо в левой части объявления перечислить через запятую нужные селекторы:
5. Наследование и каскад
Наследование и каскад — два фундаментальных понятия в CSS, которые тесно связаны между собой.
Наследование заключается в том, что элементы наследуют свойства от своего родителя (элемента, их содержащего).
Каскад проявляется в том, как разные виды таблиц стилей применяются к документу, и как конфликтующие правила переопределяют друг друга.
5.1. Наследование
Принудительное наследование
С помощью ключевого слова inherit можно принудить элемент наследовать любое значение свойства родительского элемента. Это работает даже для тех свойств, которые не наследуются по умолчанию.
Как задаются и работают CSS-стили
Стили могут наследоваться от родительского элемента (наследуемые свойства или с помощью значения inherit ).
Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в таблице выше.
К одному элементу могут применяться стили из разных источников. Проверить, какие стили применяются, можно в режиме разработчика браузера. Для этого над элементом нужно щёлкнуть правой кнопкой мыши и выбрать пункт «Посмотреть код» (или что-то аналогичное). В правом столбце будут перечислены все свойства, которые заданы для этого элемента или наследуются от родительского элемента, а также файлы стилей, в которых они указаны, и порядковый номер строки кода.
Рис. 2. Режим разработчика в браузере Google Chrome
При определении стиля можно использовать любую комбинацию селекторов — селектор элемента, псевдокласса элемента, класса или идентификатора элемента.
5.2. Каскад
Специфичность
Порядок подключённых таблиц
Вы можете создать несколько внешних таблиц стилей и подключить их к одной веб-странице. Если в разных таблицах будут встречаться разные значения свойств одного элемента, то в результате к элементу применится правило, находящееся в таблице стилей, идущей в списке ниже.
Css стили для сайта: как их правильно подключать и писать
Дата публикации: 2016-03-04
От автора: здравствуйте, уважаемые читатели портала webformyself. В сайтостроении огромное значение имеет оформление веб-ресурса. Именно за это отвечает язык css (каскадные таблицы стилей), о котором мы сегодня и поговорим. А точнее, о его подключении и использовании. Рассмотрим некоторые css стили для сайта, которые используются при оформлении веб-страниц.
Подключение css
Сегодня едва ли вы где-то найдете веб-страницу, которая была бы создана чисто за счет возможностей html. В самом деле, внешний вид подобных сайтов был бы просто ужасным, поэтому, когда готова разметка нужных элементов, их тут же нужно оформлять, а это делается с помощью css в отдельном файле.
Нужно сказать, что вообще существуют также возможности включения стилей в html-файл. Например, их можно определить с помощью атрибута style или такого же тега. Это называют встроенными стилями. Такой подход сегодня не приветствуется и нарушает современные стандарты разработки.
А как же сделать правильно, спросите вы? Для этого нужно создать новый файл с расширением css, а затем подключить его к html. Это делается очень просто с помощью тега link, который и отвечает за подключение внешних файлов. Делается это так:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Тег является одинарным, как вы уже поняли. Немного подробнее расскажу о его атрибутах:
rel = «stylesheet» – вообще атрибут rel записывается для того, чтобы определить роль файла на странице. В нашем случае роль – это таблица стилей, что и указывается.
type = «text/css» – так называемый MIME-тип, который обычно указывается всем подключаемым файлам, чтобы браузер правильно их интерпретировал. В современных веб-обозревателях можно не писать этот атрибут.
href = «style.css» – стандартный атрибут, указывающий адрес нашего внешнего файла. В данном случае он записан исходя из того, что файл имеет название style, расширение css и находится в той же папке, что и html-документ.
Как видите, в подключении css-файлов у вас будет меняться только атрибут href, все остальное менять не нужно. К странице можно подключать сколько угодно таблиц стилей, но оптимальным считается не более 2-4, потому что слишком много запросов к серверу это тоже не очень хорошо.
Где взять готовые css стили для сайта?
Ну ладно, с подключением, я надеюсь, все более менее понятно. Но ведь вы создаете пустой файл, и чтобы от его добавления был виден эффект, нужно либо самому написать правила, либо взять их откуда-то.
В сети, например, очень много бесплатных html-шаблонов. Есть скачать любой из них, то внутри обязательно будет и готовая таблица стилей с нужными правилами для оформления сайта. Но корректно работать она будет только для своего же html-документа. Дело в том, что эти два языка связываются с помощью так называемых селекторов.
Селектор – это особенность языка css, присущая только ему. Зачем они нужны? Ну вот представьте такой код: