Что указывает точка перед переменной в html? - PullRequest
Новая
       3

Что указывает точка перед переменной в html?

5 голосов
/ 29 декабря 2010

Я новичок в области HTML и веб-кодирования в целом. Что обозначают точки перед переменными в следующем коде? 

<style>
<!-- Modify these styles -->
.page_title       {font-weight:bold}
.page_text        {color:#000000}
</style>
... JS code

Спасибо

Ответы [ 4 ]

14 голосов
/ 29 декабря 2010

это не переменные. Это селекторы CSS, и они представляют узел HTML с этим классом для каждого примера 

<div class="page_title">Page Title</div>

Вы используете селекторы CSS для стилизации этих элементов в HTML

Так как они предложили. =)

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

взгляните на этот пример 

<div>
    <ul id="first_set">
       <li class="item"> Item 1 </li>
       <li class="item"> Item 2 </li>
    </ul>
    <ul id="second_Set">
       <li class="item"> Item 1 </li>
       <li class="item"> Item 2 </li>
    </ul>
</div>

Ok. у нас есть div с двумя неупорядоченными списками, каждый список как два элемента списка, теперь CSS: 

div { background-color: #f00; } 
#first_set { font-weight: bold; }
#second_set { font-weight: lighter; }
.item { color: #FF00DA }

селектор div выберет все <div> на странице HTML, # означает идентификатор, поэтому #first_set он выберет объект с этим идентификатором, в этом случае он выберет 

<ul id="first_set">

точечный символ выбирает классы, поэтому селектор .item выберет все объекты с классом элементов, в этом случае он выберет все 

<li class="item">

Это просто основы, вы можете смешать эти селекторы, чтобы быть более конкретными для каждого примера: 

#first_set .item { text-decoration: underline; }

и он будет выбирать только те объекты с элементом класса, которые находятся внутри # first_set.

Стоит отметить, что в общем случае идентификатор (выбранный с помощью #myID) должен использоваться ОДИН РАЗ на странице HTML, а класс может использоваться для нескольких элементов. Кроме того, элемент может иметь более одного класса; просто разделите их пробелами. (например, <li class="item special-item">) - Platinum Azure

0 голосов
/ 29 декабря 2010

Раздел, о котором вы говорите, это CSS, встроенный в HTML. Ни CSS, ни HTML не имеют переменных, вы смотрите на селекторы .

Префикс точки указывает, что это селектор класса и будет соответствовать элементу HTML, который является членом данного класса.

Чтобы сделать элемент членом класса, имя класса добавляется в разделенный пробелами список, указанный как значение атрибута класса .

Таким образом .page_title будет сопоставлять элемент с: 

class="foo page_title bar baz"

Однако, в общем, все, что вы даете названию класса, такому как "page_title", может совпадать с основным заголовком, поэтому HTML должен выглядеть примерно так: 

<h1>Main heading goes here</h1>

И CSS: 

h1 { … }

Между прочим, <!-- Modify these styles -->, это ошибка в HTML (и HTML-совместимом XHTML). Комментарий CSS ограничен /* и */.

0 голосов
/ 29 декабря 2010

обычно класс, к которому относится что-то, например 

.treeListContainer input

treelistcontainer - это класс, а input - это элемент управления в классе, поэтому стиль влияет только на элементы управления в этом классе

0 голосов
/ 29 декабря 2010

То есть пометить группировку стилей как класс в CSS. Пожалуйста, пройдите учебник @ w3schools, это действительно хороший стартер.

http://www.w3schools.com/css/default.asp

...