css初学

</pre>样式规则结构:<p></p><p><span style="white-space:pre"></span></p><pre name="code" class="css">selector{

<span style="white-space:pre">	</span>property: value;

<span style="white-space:pre">	</span>property: value;

}

selector：选择符，表示要格式化什么内容，比如head。

property：属性，表示要应用什么样式。

value：值，表示给样式设置什么样的值。

使用类格式化，比如类名为ArticleTitle.

<h1 class="ArticleTitle">HEML5 is Winning</h1>

.ArticleTitle{

<span style="white-space:pre">	</span>font-family:Garamond,serif;

<span style="white-space:pre">	</span>font-size: 40px;

}

样式表注释。

css注释以/*字符开头，以*/字符结尾。

用<div>元素：

<div>

<span style="white-space:pre">	</span><p>Here are two paragraphs of content.</p>

<span style="white-space:pre">	</span><p>In a div container.</p>

</div>

1.继承的值。在<div>元素上设置了属性后，这个元素内部的所有属性都会应用同样的字体样式（除非在具体的元素上覆盖这些规则）。

2.盒模型。一个<div>元素就是一个自然的容器。可以给它添加边框、空距和不同的背景颜色（图片），从而让它在页面中更加显眼。

3.分栏。实现分栏的一种方式就是把每一个栏的内容包装在一个<div>元素中，然后再使用css定位属性将它们放在适当的位置上。

上下文选择符：

.Content h2{

<span style="white-space:pre">	</span>color:#24486C;

<span style="white-space:pre">	</span>font-size: medium;

}

这个选择符先会查找带有Content类的元素，然后再在该元素中查找<h2>元素，找到后为它们应用不同的文本颜色和字体大小。

<div class="Content">

<span style="white-space:pre">	</span>...

<span style="white-space:pre">	</span><h2>Mayan Doomsday</h2>

<span style="white-space:pre">	</span>...

</div>

.Content .LeanIn{

<span style="white-space:pre">	</span>font-variant:small-caps;

}

这个选择符会查询类为LeadIn的元素，但它必须被包含在类为Content的元素中。

<div class="Content">

<span style="white-space:pre">	</span><p><span class="LeadIn">Right now</span>,...</p>

<span style="white-space:pre">	</span>...

</div>

ID选择符：

</pre><pre name="code" class="html">#Menu {

<span style="white-space:pre">	</span>border-width: 2px;

<span style="white-space:pre">	</span>border-style: solid;

}

<div id="Menu"> ...</div>

一个ID只能指定给页面的一个元素，ID选择符非常适合用来为那些一个页面中唯一的、不会重复的元素应用样式。如菜单，导航条。

属性选择符：

input[type="text"]{

<span style="white-space:pre">	</span>background-color:silver;

}

首先，这个选择符会取得所有<input>元素。然后，筛选出type属性为text的<input>元素，只对这些元素应用样式。

label[for="name"]{

<span style="white-space:pre">	</span>width:200px;

}

<label for="name">Name:</label>

<input id ="name" type="text"><br>