Программирование в CSS 程序

Загрузка

 

*{color:#333}

a{border-bottom:1px dashed #00d}

a,#b,#bt3{color:#00d}

a,.decNon{text-decoration:none}

a:hover{

border-color:#77f;

color:#77f

}

#adj,#menu{position:absolute}

#adj,h1,h2,#menu,.off,.scr{text-align:left}

#b,#g,#r{width:48px}

#bar{

background-image:linear-gradient(#eee,#ccc);

background-image:-webkit-linear-gradient(#eee,#ccc);

border-bottom:double #ddd;

padding:6px 0 9px

}

#bar,.btn,.flg,.off{background-color:#ddd}

#bar,#clock,#cop,.on{text-align:right}

#bar,.scr{cursor:default}

.bg0{opacity:.5}

.bg0:hover{opacity:1}

.bg0,.btn{border:1px outset #fff}

.bg0,.btn,#clock,.flg,h1,#men,#swi{display:inline-block}

.bg0,.flg{width:20px}

.bg0,.flg,#swi{height:20px}

.bg0,input,.scr,.vis{border-radius:5px}

#bg1{background:#b00}

#bg2{background:#ea0}

#bg3{background:#dd0}

#bg4,.on{background:#090}

#bg5{background:#6dd}

#bg6{background:#00d}

#bg7{background:#b0b}

body{font-family:Verdana}

body,.btn:hover{background-color:#eee}

body,.btn,input,.pat{text-align:center}

body,#cop,h1,h2{margin:0}

body,input{font-size:18px}

#box{

border-bottom:1px solid #aaa;

padding:0 0 5px

}

#box,h1,h2,.vis{color:#777}

#box,input{font-family:Tahoma}

#bt1,#r{color:#b00}

#bt2,#g{color:#090}

.btn{

border-radius:50%;

font-family:Arial;

text-indent:0

}

.btn,input[disabled]{font-weight:bold}

.btn,#men,#menu{cursor:pointer}

.btn,p{line-height:1.5}

#clock{

padding-right:15px;

text-shadow:1px 1px 1px #aaa

}

#clock,#cop{font-size:17px}

#clock,.scr{color:#fff}

.clr{border-top:1px solid #eee}

.clr,td[colspan="9"]{padding:5px 0 0}

#cop,#ds{padding:10px 15px}

.decThr{text-decoration:line-through}

div.btn{

margin:9px auto 6px;

width:75px

}

#ds{background:#fafafa}

.flg{

background-image:linear-gradient(#fff,#aaa);

background-image:-webkit-linear-gradient(#fff,#aaa);

box-shadow:0px 0px 2px #555

}

.flg,#swi,table{border-radius:10px}

#game{margin:15px auto 20px}

h1{padding-left:8px}

h1,h2{font-size:20px}

.hid{display:none}

input{

height:28px;

width:28px

}

input[disabled]{

border-style:outset;

color:#555

}

input[id$="1"],input[id$="4"]{margin-left:5px}

input[id$="6"],input[id$="9"]{margin-right:5px}

input[id^="i4"],input[id^="i7"]{margin-top:5px}

.me0,.me1:hover{color:#aaa}

.me0:hover,.me1{color:#eee}

#men{

border-right:1px solid #aaa;

padding-left:12px;

text-shadow:0 1px 1px #777;

width:30px

}

p{

margin:5px 0 0;

text-align:justify

}

.pat{padding-top:5px}

.scr{

background-color:#aaa;

background-image:linear-gradient(#eee,transparent);

background-image:-webkit-linear-gradient(#eee,transparent);

margin:0 5px 5px;

padding:6px 9px 9px;

text-shadow:-1px -1px 1px #fff, 1px 1px 1px #000;

transition:2s;

-webkit-transition:2s

}

span.btn{width:50px}

#swi{

border:1px solid #aaa;

transition:1s;

-webkit-transition:1s;

width:39px

}

#swi,td{vertical-align:middle}

table{

background-color:#ccc;

border:2px solid #777;

border-left-color:#fff;

border-top-color:#fff;

border-spacing:0;

box-shadow:1px 2px 3px #777

}

td{padding:0}

.vis{

background:#ccc;

border-bottom:double #ddd;

border-right:double #ddd;

line-height:1;

padding:5px

}

@media(max-width:360px){

input{

height:25px;

width:25px

} }

CSS (Cascading Style Sheets)

CSS — каскадные таблицы стилей, содержащие правила оформления HTML-элементов веб-документов вида селектор {свойство:значение;}. CSS-селекторы сообщают браузеру, к каким именно элементам документа следует применять объявленные правила, а свойства и значения помогают управлять оформлением этих элементов. Как и в случае с кодом JavaScript, CSS-код небольшого объёма может находиться в текущем веб-документе внутри контейнера <style type="text/css">…</style>. Но для удобочитаемости кода стили оформления резонно выносить в отдельные текстовые файлы (например, с именем style и расширением .css), подключаемые к нужным веб-документам (в начале документа в разделе заголовков после мета-тегов) с одиночного тега <link href="style.css" rel="stylesheet" type="text/css">, как показано в примере кода HTML!

Процесс создания правил оформления контента подобен форматированию текста в текстовом редакторе: для контента можно указать цвет заднего фона (background-color), установить фоновый рисунок (background-image), определить границы элементов (border), оформить шрифт текста (font), задать межстрочный интервал (line-height), добавить внешние и внутренние поля-отступы (margin; padding), выбрать способ выравнивания контента (text-align) и т.д.

Для лучшего восприятия информации следует отделять разные смысловые блоки интерфейса с помощью цвета заднего фона, больших отступов или прорисованных линий. При этом важно помнить, что на вкус и на цвет товарищей нет! Поэтому крайне сложно создать удобный интерфейс, который понравится абсолютно всем. Но можно предусмотреть наличие личного кабинета или меню для кастомизации настроек стилей оформления, позволяющих в дальнейшем анализировать предпочтения пользователей. Таким образом, можно накопить пользовательский опыт (UX), способный помочь экспериментальным путём определить оптимальные параметры для интерфейса веб-документа.

Популярные CSS-свойства

background — общее свойство для указания множественных значений заднего фона.

background-color — цвет заднего фона, например: #fff, #ffffff, rgb(100%,100%,100%), rgb(255,255,255), transparent, white.

background-image — фоновый рисунок.

border — общее свойство для указания границ элемента, например: 1px outset #ffffff.

border-color — цвет границ, например: #777777.

border-radius — радиус закругления углов границ, например: 15px, 50%.

border-style — стиль границ, например: dashed, dotted, double, groove, inset, none, outset, ridge, solid.

border-width — толщина границ, например: 1px.

box-shadow — тень вокруг границ элемента, например: 1px 1px 1px #777777, none.

color — цвет текста, например: #000000.

cursor — вид указателя мыши, например: default, help, pointer.

display — отображение элемента, например: block, inline, inline-block, none, table, table-cell, table-row.

font — общее свойство для указания множественных значений шрифта документа.

font-family — название гарнитуры шрифта, например: arial, bonzai, calibri, monospace, system…

font-size — размер шрифта, например: 1em, 12pt, 15px, 75%, larger, smaller.

font-style — курсивный стиль шрифта, например: italic, normal.

font-weight — насыщенность шрифта, например: bold, normal.

hyphens — перенос слов с помощью дефисов в текстовом контенте, выходящем за границы блока, например: auto, none, manual.

letter-spacing — межзнаковый интервал, например: 0, 1px, 2px.

line-break — обработка разрыва строк азиатских иероглифов, например: auto, loose, normal, strict.

line-height — межстрочный интервал, например: 1.5, 30px.

opacity — эффект полупрозрачности элемента, например: 0.1, .5, 1.

overflow — отображение контента, выходящего за границы блока, например: auto, hidden, scroll, visible.

position — позиционирование элемента, например: absolute, relative.

text-align — способ выравнивания контента, например: center, justify, left, right.

text-indent — отступ красной строки, например: 30px, 50px.

text-decoration — оформление текстового контента, например: line-through, none, overline, underline.

text-overflow — отображение текстового контента, выходящего за границы блока, например: "", "-", clip, ellipsis.

text-transform — видоизменение текстового контента, например: capitalize, full-size-kana (для японской каны), full-width, lowercase, none, uppercase.

text-shadow — тень текста, например: 1px 1px 1px #777777, none.

transform — преобразование элемента, например: rotate(360deg).

transition — плавный переход к стилю элемента, например: 0.5s, 1s, 2s.

transition-delay — задержка перед переходом, например: 0.2s, 1s, 5s.

vertical-align — вертикальное выравнивания контента, например: baseline, bottom, middle, top.

visibility — видимость элемента, например: hidden, visible.

white-space — обработка пробелов (с разрывами или в одну строку), например: inherit, normal, nowrap, pre, pre-line, pre-wrap.

word-wrap — разрыв слов, например: break-all, break-word, keep-all, normal.

CSS-селекторы

*{font:15px Verdana} — универсальный селектор.

a{text-decoration:none} — селектор элементов.

.anchor{border-bottom:1px dashed #0000dd} — селектор классов.

.btn:hover {background-image: linear-gradient(#ffffff,#c0c0c0)} — селектор псевдоклассов.

#grinch{background-color:#009900} — селектор идентификаторов.

td[colspan="3"]{padding:5px} — селектор атрибутов.

Дополнительные возможности CSS

/* … */ — конструкция для комментария.

:root{--emerald:#009900} — конструкция для объявления переменных в CSS.

a{color:var(--emerald)} — конструкция для использования переменных в CSS.

p{width:calc(50% - 10px)} — CSS-калькулятор для вычисления значений.

span[id^="gri"]{color:#ffffff} — выделение с помощью селектора атрибутов всех элементов, чьи идентификаторы начинаются с символов "gri".

span[id*="inc"]{opacity:.6} — выделение с помощью селектора атрибутов всех элементов, чьи идентификаторы содержат подстроку "inc".

span[id$="nch"]{width:36px} — выделение с помощью селектора атрибутов всех элементов, чьи идентификаторы заканчиваются символами "nch".

△

Навигационная карта

Ознакомиться с другими опциями IT-проекта вам поможет навигационная карта с подробным списком веб-сервисов и приложений! Если вы активно пользуетесь социальными медиа, не забудьте рассказать об этом проекте друзьям и подписаться на группы Мазаяки Проджект в ВКонтакте и Одноклассниках, чтобы быть в курсе важных обновлений! Сайонара-сайонара!

© –2024 Mazayaki Project