Вторник, 25 Декабря 2012 15:31

Что такое CSS

Written by 
Оцени эту запись
(2 Голоса)

Решила пройтись по основам и объединить все важное в одной статье. Речь пойдет о CSS. Если вы читаете эту статью, то наверняка на каком-то уровне вы уже знакомы с этим понятием. Но, возможно, вы все таки сможете найти здесь полезную информацию.

В данной статье я рассмотрю такие стороны CSS:

 

  • определение CSS
  • подключение CSS к HTML файлу
  • селекторы и их виды
  • CSS свойства
  • кроссбраузерность
  • reset.css
  • CSS3 и его возможности
  • вендорные префиксы

 

 

 

Ранее я уже писала подобную подробную статью о HTML, а теперь пройдусь и по CSS.

 

Определение

 

 

Что такое CSS

CSS - это каскадные таблицы стилей (Cascading Style Sheets), сводка правил для оформления элементов веб-страницы. В CSS файле можно задать цвет текста, фон, расположение элементов на странице. Сами элементы заданы в HTML файле (теги), к которому подключается CSS файл. А в CSS файле этим элементам  прописываются стили при помощи селекторов.

 

Подключение CSS к HTML файлу

 

CSS стили для элемента HTML страницы могут быть описаны в отдельном файле, в теге <style> или внутри атрибута style элемента.

 

Для подключения CSS файла к HTML документу, нужно в теге <head> документа прописать строку(подробнее в статье):

 

<link rel="stylesheet" href="/путь_к_файлу/styles.css" type="text/css">

 

Также можно использовать тег <style>, внутри которого можно прописать стили:

 

<style>

div {

background: violet;

}

</style>

 

Данный тег можно добавлять в <head> или в <body> элемента(лучше в <head>).

 

Третий вариант -- это использование атрибута style для элемента:

 

<div style="color: blue"></div>

 

 

Селекторы и их виды

 

Селектор - это часть CSS. При помощи селекторов можно выбрать нужный HTML элемент, чтобы применить к нему нужные стили.

 

селектор, селектор {

свойство: значение;

свойство: значение;
}
 
 
Виды селекторов:
 
 
 
При обработке CSS файла, браузер выбирает нужные элементы из документа по селекторам, причем выбирает справа налево в записи селектора. Потому разные селекторы имеют разную эффективность. Для правильного выбора селекторов рекомендую ознакомиться со статьей  Эффективность CSS селекторов
 
 
 

CSS свойства

 
CSS свойства служат для задания стилизации элементов. При помощи CSS свойств и их различных значений можно менять внешний вид элементов и их наполнения, расположение элементов и много другое. К основный свойства CSS относятся color, background, font-family, margin, padding, border (Верстка сайта. Урок 6. Основные свойства CSS). Также очень полезными будут свойства text-align, heighttext-indent, overflow, word-spacing, position, float, vertical-align, line-height, и другое.
 
 

Кроссбраузерность

 
Кроссбраузерность - это одинаковое отображение страницы сайта в разных браузерах. Это понятие больше относится к CSS, чем к HTML. В плане HTML речь идет о использовании новых тегов (HTML5), которых нет в старых браузерах. А вот в плане CSS, это глобальная задача. У каждого браузера подготовлены свои собственные стили для элементов и может отличаться их отображение. Задача верстальщика - сделать стили такими, чтобы внешний вид сайта был универсальным. Рекомендую ознакомиться со статьей Браузеры, под которые нужно делать верстку
 
 

Reset.css

 

Reset.css - это специальный файл для сброса стилей. Он служит для обнуления стандартных стилей элементов, которые применяются в браузерах. Не важно, будет у вас сброс стилей в отдельном файле или же частью вашего CSS файла, так или иначе вы должны его использовать. Без сброса стилей вы не сможете сделать кроссбраузерную верстку. Подробнее в статье Сброс стилей с помощью reset.css, также пригодится сброс стилей для HTML5 элементов.

 

CSS3 и его возможности

 

CSS3 - это новая версия CSS, которая предоставляет множество очень интересных и полезных возможностей - анимация, трансформация, скругления и тени. Но, кроме этого, в CSS3 предусмотрена совершенно другая реализация отображения блочных и строчных элементов, расположение дочерних элементов. При внедрении CSS3 свойств в свою верстку, следует помнить, что новые решения не являются кроссбраузерными. В данном случае нужно будет жертвовать старыми версиями браузеров и использовать вендорные префиксы. Но если вы все таки можете себе это позволить, то приглашаю вас в мир CSS3:

 

CSS свойства для отображения блочных и строчных элементов в WebKit браузерах

Новые функции в CSS

Background Gradient CSS

Background Gradient CSS. Часть 2

Поворот элемента при наведении на CSS3

Рисуем котика на HTML, CSS

WebKit фильтры - grayscale, sepia, saturate, hue-rotate, invert, brightness, contrast, blur

Свойство transform

WebKit анимация. Описание свойств и примеры

WebKit CSS Transition

Свойство box-direction

Элементы загрузки или preload при помощи CSS3 для WebKit

Рисуем круг CSS3

 

 

Вендорные префиксы

 

Вендорные префиксы - это приставки к CSS свойствам, которые добавляют производители браузеров для нестандартных стилей. Свойство с определенной приставкой видно только подходящему браузеру, а остальные его игнорируют. Вендорные префиксы бывают такие:

 

 

  • -o- (Opera)
  • -moz- (Firefox)
  • -ms- (IE)
  • -webkit- (Chrome, Safari)

 

 

Additional Info

Добавить комментарий


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов