前端学习之CSS-1

前端学习之CSS-1

什么是 CSS?

 - CSS 指层叠样式表 (Cascading Style Sheets) - 样式定义如何显示 HTML 元素 - 样式通常存储在样式表中 - 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 - 外部样式表可以极大提高工作效率 - 外部样式表通常存储在 CSS 文件中 - 多个样式定义可层叠为一

CSS 实例

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
- 选择器通常是您需要改变样式的 HTML 元素。
- 每条声明由一个属性和一个值组成。
- 属性（property）是您希望设置的样式属性（styleattribute）。
- 每个属性有一个值。属性和值被冒号分开。

CSS 注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 “/” 开始, 以 “/” 结束, 实例如下: /*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}

CSS Id 和 Class

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

<style>#para1 { text-align:center; color:red; }  </style> <p id="para1">Hello World!</p>

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

.center{  text-align:center;}</style><h1 class="center">标题居中</h1><p class="center">段落居中。</p>  你也可以指定特定的HTML元素使用class。 在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:<style> p.center {    text-align:center; } </style> <h1 class="center">This heading will not be affected</h1><p class="center">This paragraph will be center-aligned.</p>

CSS 创建

如何插入样式表 插入样式表的方法有三种:
- 外部样式表
- 内部样式表
- 内联样式
层叠次序 当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？ 一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 标签内部）
- 内联样式（在 HTML 元素内部）
因此，内联样式（在HTML元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

CSS 背景

CSS2 中有5个主要的背景(background)属性，它们是：
- background-color: 指定填充背景的颜色。
- background-image: 引用图片作为背景。
- background-position: 指定元素背景图片的位置。
- background-repeat: 决定是否重复背景图片。
- background-attachment: 决定背景图是否随页面滚动 背景颜色 background-color 属性定义了元素的背景颜色. 页面的背景颜色使用在body的选择器中:

<style> body { background-color:#b0c4de; } </style>

你好世界！这是来自 W3CSchool菜鸟教程的实例。

背景图像 background-image 属性描述了元素的背景图像. 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体. 页面背景图片设置实例:

<style> body { background-image:url('paper.gif');
background-color:#cccccc; } </style> <h1>Hello World!</h1>

背景图像 - 水平或垂直平铺 默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。 一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:

body { background-image:url('gradient2.png');
background-repeat:repeat-x; } </style> <h1>Hello World!</h1>

背景- 简写属性 当使用简写属性时，属性值的顺序为：:

background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position

以上属性无需全部使用，你可以按照页面的实际需要使用.