Меню

Лёгкий css или настраиваем css профиль в Maxsite CMS

Создание сайтов4221
Лёгкий css или настраиваем css профиль в Maxsite CMS

Здравствуйте. Данная статья написана на основе файла css профиля theme-blue.css, который можно найти в шаблоне вашего сайта по адресу application/maxsite/templates/имя_шаблона/css/profiles. В админке: в разделе "шаблоны", вы увидите вкладку  CSS профили, и сможете настроить стили на ваш вкус, и для этого, я вам расскажу про стили CSS.

Для начала создадим просто html файл и css, назовём их index.html и style.css. В html пропишем следующие:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

  <title>Стили</title>

  <link rel="stylesheet" type="text/css" href="mysite.css">

  <link rel="stylesheet" type="text/css" href="http://www.htmlbook.ru/main.css">

 </head>

 <body>

  <h1>Заголовок</h1>

  <p>Текст</p>

 </body>

</html>

Тем самым, мы подключили стили: <link rel="stylesheet" type="text/css" href="mysite.css"> и создали простую, html страничку, вот что вышло:

 theme-blue.css

Далее будем прописывать стиле, в файле style.css. И  первый стилем будет background-color, который определяет цвет фона элемента.

 

1)  body {

        background-color: #00FFFF; color: white;

        }

theme-blue.css

Тем самым, мы задали голубой цвет фона - #00FFFF и белый цвет текста - color: white

2)  a {

        color: orange;

        }

Установили оранжевый цвет ссылки:

theme-blue.css

3) a:hover {

     color: yellow;

     }

theme-blue.cssПри наведение на ссылку, цвет ссылки будет меняться на желтый:

Таким же образом задаются стили и для блоков, например

div.all-wrap {

        background: #00FFFF;

        color: black;

        -webkit-box-shadow: none;

        -moz-box-shadow: none;

        box-shadow: none;

        }

Где, webkit и moz это крособраузерност, а box-shadow это добавление теней к элементу - нет.

4)  h1{

color: yellow;

}

Задали заголовку h1 желтый цвет:

theme-blue.css

Аналогично будет, если задать

h1 a {

color: red;

}

h1 a:hover {

color: red;

}

Где данный стиль, будет приниматься для ссылок, находящихся в заголовке h1:

Для этого напишем в index.html следующие строки:

<h1><a href='#'>Загаловок ссылка</a></h1>

theme-blue.css

Таким же образом, можно задать цвет и фон для div находящегося в заголовке:

h1.category {

        background: #404040;

        color: white;

        }

5)  h1{

font-size:50px;

}

Следующий стиль, это font-size, который определяет размер шрифта элемента и зададим ему 50px

theme-blue.css

Далее создадим в html файле простую таблицу:

<table border="1">

   <caption>Простая таблица</caption>

   <tr>

    <th>Html</th>

    <th>CSS</th>

   </tr>

   <tr><td>5</td><td>15</td></tr>

   <tr><td>10</td><td>25</td></tr>

</table>

theme-blue.css

И пропишем для неё следующие стили:

th{

    background: red;

    }

td{

    background: green;

    }

table {

    background: #404040;

    }

То есть, мы задали цвет, для столбцов и строк, а так же цвет таблицы

theme-blue.css

Далее, создадим маркированный список:

<ul>

    <li>Чебурашка</li>

    <li>Крокодил Гена</li>

    <li>Шапокляк</li>

</ul>

 theme-blue.css

И пропишем для списка следующие стили:

ul li {

        color:#9900CC;

        }

theme-blue.css

Аналогично можно изменить цвет при наведение, как и ссылку.

И последний пример, создадим пустой блок в index.php

<div id="primer"></div>

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

theme-blue.css

#primer

{

width:100px;

height:100px;

background: blue;

border: 5px black solid;

}

Здесь мы прописали высоту и ширину, а так же указали толщину(5px), цвет(black) и тип линии(solid) нашего блока.

В итоге у нас получилось в файле index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

  <title>Стили</title>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

  <h1>Заголовок</h1>

  <p>Текст</p>

  <a href='#'>Ссылка</a>

<h1><a href='#'>Загаловок ссылка</a></h1>

<table border="1">

   <caption>Простая таблица</caption>

   <tr>

    <th>Html</th>

    <th>CSS</th>

   </tr>

   <tr><td>5</td><td>15</td></tr>

   <tr><td>10</td><td>25</td></tr>

  </table>

<ul>

    <li>Чебурашка</li>

    <li>Крокодил Гена</li>

    <li>Шапокляк</li>

  </ul>

<div id="primer"></div>

</body>

</html>

И в файле style.css

body {

background-color: #00FFFF; color: white;

}

a {color: orange;

}

a:hover {color: yellow;

}

h1{

color: yellow;

}

h1 a {

color: red;

}

h1 a:hover {

color: red;

}

h1{

font-size:50px;

}

th{

background: red;

}

td{

background: green;

}

table {

background: #404040;

}

ul li {

color:#9900CC;

}

ul li a:hover {

background: #FF00FF;

}

#primer

{

width:100px;

height:100px;

background: blue;

border: 5px black solid;

}

Если вам понравилась статья, ставьте лайки и подписываетесь на новости!

Хэштеги:

Текущая оценка Общий бал: 0 Проголосовало Проголосовало: 0

help_share

Данная публикация была вам полезна?

Помоги автору сайта, расскажи друзьям...

Комментариев: 1
  •  Denis_Shepelev | 18 июля 2014 в 23:12:57
    img

    Всё легко и просто. Я тоже Денис сейчас изучаю CSS.

Буду благодарен за каждый оставленный вами комментарий

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

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Похожие публикации