Что такое CSS стили

Что такое CSS стили

Сообщение k0ttee »

CSS (англ. аббревиатура Cascading Style Sheets), то есть "каскадные таблицы стилей".

Что такое css стили? Если HTML отвечает за разметку страниц (описывает элементы), то CSS отвечает за стили на странице (описывает свойства элементов).

Спецификация CSS третьей версии позволяет сделать анимацию. Пользуясь случаем, похвастаюсь сделанным на досуге катушечным магнитофоном.
Код: Выделить всё
https://jsfiddle.net/utL22dqf/6/


Может показаться что CSS не важен для поисковой оптимизации, но это не так. Продуманное описание стилей позволит разместить контент до боковой колонки (выше по ходу кода). А во времена торговли ссылками именно хитрое CSS-решение позволяло хитро размещать продажные ссылки: визуально - в подвале, по ходу кода - не в конце документа.

По-умолчанию разные браузеры предусматривают немного отступов и полей для элементов, поэтому первое что сделает опытный верстальщик - сбросит значения в ноль, или задаст свои (чтобы сайт выглядел одинаково в разных браузерах).
Код: Выделить всё
/* CSS сброс */
*{
margin: 0; /* обнулить отступы */
padding: 0; /* обнулить поля */
}

Аватара пользователя
k0ttee

 
Группа: Супермодераторы
Сообщения: 6331
Рефералы: 2
Зарегистрирован: 02 май 2014
Средств на руках: 113.40
Статус: вертел
Спонсор
 
Re: Что такое CSS стили

Сообщение Aman »

Получается по-русски КТС. Какой котокоин :D Криптовалюта нового поколения. Вот насчет сброса на ноль верное замечание, в своих редких верстках так и делал, но некоторые команды в разных браузерах по разному робят.
Аватара пользователя
Aman

 
Группа: Специалист ruSEO
Сообщения: 4373
Зарегистрирован: 13 июл 2011
Откуда: Федерация
Средств на руках: 442.85
Статус: Оптимист
Спонсор
 
Re: Что такое CSS стили

Сообщение surfer »

Aman писал(а):но некоторые команды в разных браузерах по разному робят.

что ты имел ввиду под командами? )

по поводу сброса стилей, давно используются их обнуление, в сети гулает парочка, в частности css frameworkи их используют и многие верстальщики, например такие:

Код: Выделить всё
/* `XHTML, HTML4, HTML5 Reset
----------------------------------------------------------------------------------------------------*/

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
dialog,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
main,
mark,
menu,
meter,
nav,
object,
ol,
output,
p,
pre,
progress,
q,
rp,
rt,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video,
xmp {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 100%;
}

html,
body {
  height: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
/*
  Override the default (display: inline) for
  browsers that do not recognize HTML5 tags.

  IE8 (and lower) requires a shiv:
  http://ejohn.org/blog/html5-shiv
*/
  display: block;
}

b,
strong {
/*
  Makes browsers agree.
  IE + Opera = font-weight: bold.
  Gecko + WebKit = font-weight: bolder.
*/
  font-weight: bold;
}

img {
  color: transparent;
  font-size: 0;
  vertical-align: middle;
/*
  For IE.
  http://css-tricks.com/ie-fix-bicubic-scaling-for-images
*/
  -ms-interpolation-mode: bicubic;
}

ol,
ul {
  list-style: none;
}

li {
/*
  For IE6 + IE7:

  "display: list-item" keeps bullets from
  disappearing if hasLayout is triggered.
*/
  display: list-item;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td,
caption {
  font-weight: normal;
  vertical-align: top;
  text-align: left;
}

q {
  quotes: none;
}

q:before,
q:after {
  content: "";
  content: none;
}

sub,
sup,
small {
  font-size: 75%;
}

sub,
sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

svg {
/*
  For IE9. Without, occasionally draws shapes
  outside the boundaries of <svg> rectangle.
*/
  overflow: hidden;
}


очень хорошая и проверенная годами вещь.

За это сообщение автора surfer поблагодарили: 2
birds, k0ttee
Аватара пользователя
surfer

 
Группа: Специалист ruSEO
Сообщения: 743
Зарегистрирован: 26 июл 2012
Средств на руках: 13.00
Статус: wordpress
Спонсор
 
Re: Что такое CSS стили

Сообщение k0ttee »

Я использую в своих макетах (чтобы размер рамок входил в размер элементов).
Код: Выделить всё
box-sizing: border-box;

...Но это не значит, что всем это нужно.

Еще я использую <html> как фон, а <body> алигаю горизонтально по-центру. Так получается меньше блоков и у меня нет обертки, которую обычно называют <div id='wrapper'>
Но это тоже ничего не значит.

Да, на старые IE я плюю (IE не нужен).

что ты имел ввиду под командами? )

Синоним слова "инструкции".
Аватара пользователя
k0ttee

 
Группа: Супермодераторы
Сообщения: 6331
Рефералы: 2
Зарегистрирован: 02 май 2014
Средств на руках: 113.40
Статус: вертел
Спонсор
 
Re: Что такое CSS стили

Сообщение surfer »

k0ttee писал(а):...Но это не значит, что всем это нужно.

согласен, никто не запрещает создать свой файл сброса стилей
Аватара пользователя
surfer

 
Группа: Специалист ruSEO
Сообщения: 743
Зарегистрирован: 26 июл 2012
Средств на руках: 13.00
Статус: wordpress

Вернуться в Словарь SEO терминов (FAQ)

 


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 4

☞ Форум Казино. Всегда свежие бездепы в онлайн казино. Налетай!


*** заработок на сайте, выплаты еженедельно, в долларах ***
-= покупка и продажа кликов и трафика =-