学习周记2

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=“para1”:

#para1
{
    text-align: center;
    color:FireBrick;
}

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 ex1 类的 HTML 元素均为空一厘米。

.ex1{margin-left: 1cm;}

你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:

p.center {text-align:center;}

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用

<style>
   .box{
		 width: 570px;
		 height: 1000px;
	     background: url("file:///D:/workplace/test/picture/63f434a5736f9929145dc37c97d52575.gif") no-repeat;
		       }
   .ex1{
		 margin-left: 1cm;
				   }
   #para1{
		 text-align: center;
		 color:FireBrick;
				   }
</style>

多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，优先级如下：
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 “background”:

background: url("file:///D:/workplace/test/picture/63f434a5736f9929145dc37c97d52575.gif") no-repeat;

当使用简写属性时，属性值的顺序为：

background-color          背景颜色
background-image          背景图像
background-repeat         背景水平或垂直平铺
   repeat-x：平铺  repeat-y：纵铺
background-attachment     背景是否固定
background-position       背景设置定位

CSS Colors

CSS的颜色可以通过以下方法指定：

• 十六进制颜色
• RGB颜色
• RGBA颜色
• HSL色彩
• HSLA颜色
• 预定义/跨浏览器的颜色名称

padding

简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

padding:10px 5px 15px 20px;

上填充是 10px
右填充是 5px
下填充是 15px
左填充是 20px