Блог Ловцовых

Применяем CSS

Приветствую ценителей красоты и функциональности содержимого интернет-пространства!

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

Описание стилей гипертекстового документа обычно хранится в файлах с расширением ***.css. При этом следует различать следующие варианты определения стилей:
- во внешнем файле CSS с расширением *.css, подключаемом к HTML-документу посредством конструкции
<link rel=»MYstyle» href=»**.css» type=»text/css» />
- в виде отдельных блоков внутри самого HTML-документа (преимущественно в его начале) — встроенные стили(<style type=»text/css»>…some styles…</style>).

- непосредственно внутри отдельного элемента HTML-кода — так называемое инлайн-определение стиля элемента в значении его атрибута style (<div style=»font-size:16px;color:red;»>…</div>).
Два последних способа определения стилей идеально подойдут Вам в случае разработки небольшого гипертекстового документа. Для осуществления же оформления более объемного проекта, например веб-сайта, наиболее оптимальным представляется выведение CSS в отдельный файл. Этот шаг позволит Вам существенно облегчить дальнейшую работу по добавлению и изменению стилей.

Теперь, имея представление о размещении и подключении CSS файлов, предлагаю приступить к изучению их содержимого. Описание стилей — это своеобразный набор правил, применяемых к различным элементам HTML-кода и определяющих особенности их представления с помощью интернет-браузера. Каждое такое определение состоит из селектора и соответственного блока определений. В блоке объявлений, непременно заключенном в фигурные скобки, размещается список объявлений. Каждое объявление состоит из названия свойства элемента и его значения, разделяемых знаком двоеточия «:». Разделителем между объявлениями служит точка с запятой.

Схематически вышеописанное определение стиля можно представить следующим образом:

Селектор {
свойство1: значение1;
свойство2: значение2;
свойство3: значение3;
… }

Приведу конкретный пример описания стиля, который успешно применяла сама для оформления элемента selekt (выпадающий список):

select {
width:150px;
font-family: Verdana, sans-serif;
border:1px solid #333333;
background-color:#131212;
},

где width:150px — это ширина поля селекта, font-family: Verdana, sans-serif — описание шрифта, border:1px solid #333333 — описание цвета и типа границы селекта, background-color:#131212 — задает цвет фона элемента select.

Следуя такой схеме, можно легко создать стиль для внешнего представления любого элемента HTML-документа.

Кроме авторских стилей, определяемых автором документа, существуют также стили браузера по умолчанию и пользовательские стили, содержащиеся в пользовательских настройках браузера. При этом следует учитывать то, что последний тип стилей обладает высшим приоритетом по сравнению с авторскими стилями и способен их переопределять.

автор: Ловцова Елена

Занимаясь созданием сайтов или блогов, неизбежной остаётся проблема раскрутки оных. Но несведущим в этой области лучше просто заказать продвижение сайтов в СПб и не парится по этому поводу, специалисты быстро продвинут в топ ваш ресурс. 

Кстати тоже интересно почитать

• Защищаем компьютер без антивирусных программ
• Основные типы загрузочно-файловых вирусов
• SEO или реклама
• Как увеличить число подписчиков
• Срочно ставьте плагин для увеличения посещаемости! (часть1)
• Direx
• Создаём файл «.htaccess»
• Forex для новичков
• Twitter обновил дизайн сайта и официальных приложений на iOS и Android
• Ликбез для «чайников»

No related posts.