黑马程序员_CSS入门小结

-------Windows Phone 7手机开发、.Net培训、期待与您交流！ ------- 

| CSS 中文叫做层叠样式表，将网页中的样式分离出来，完全由CSS来控制。可以增强样式的复用性以及可扩展性。现在网页编程基本都是div+css。

格式：选择器{属性名：属性值；属性名：属性值…}

CSS主要有元素内联、页面嵌入和外部引用三种使用方式：

1.       元素内联，直接在元素的style属性中写入样式

例如：<input type=”text” style=”background-color:Red”>

使用于样式没有可复用性的场合。

2.       页面嵌入：

在head中加入

<style type=”text/css”>

   Input{ background-color:Red ;}

</style>

3.       外部引用：

将CSS内容写入css后缀的文件

Input{ background-color:Red ;}

然后在页面中引用，在head中加入

<link type=”text/css” rel=”Stylesheet” href=”1.css”>

适合于多个页面共享css。

技巧：为了提高相同的样式的复用性以及可扩展性，可以将多个标签样式进行单独定义，并封装成css文件：p.css，div.css……

在一个css文件中使用css的import将多个标签样式文件导入。

然后在html页面上，使用link标签导入这个总的css文件即可。

示例：1.css文件中

@import url(“p.css”);

@import url(“div.css”);

Html页面中

<link rel=”stylesheet” href=”1.css”/> 

选择器

就是样式要作用的标签容器。当样式分离后，html作用在于用标签封装数据，让后台将css加载到指定标签上。

选择器的基本分类

1.标签选择器对于指定的标签采用统一的样式。

         例如：Input{ background-color:Red ;}

2.class选择器：用”.”开头的形式定义一个样式。用到它时设定元素的class属性为样式的名称，还可以同时设定多个class，名称间加空格。可以对不同标签进行相同样式设定。

         例如：.warning{ background-color:Red ;}

                  <input type=”text” class=”warning”>

Class选择器也可以针对不同的标签。实现同样的样式名对于不同的标签有不同的样式，只要在样式名前加标签名即可。

         例如：input.warning{ background-color:Red ;}

                  Label.warning{font-size:14;}

3.ID选择器：就是每一个标签中的ID属性。但是要保证ID唯一性。用”#”来标识。ID不仅可以被CSS使用，还可以被javascript所使用。

选择器优先级：ID>class>标签

扩展选择器：

1.关联选择器：对标签中的标签进行样式定义。

         例如：p strong{ background-color:Red ;}

2.组合选择器：对多个选择器进行相同样式定义。将多个选择器通过”,”隔开的形式定义。

         例如：h1,h2,input{ background-color:Red ;}

3.伪元素选择器：为标签的不同状态设定不同的样式。

例如：A:link:{text-decoration:none}

A:visited: {text-decoration:none}

A:hover: {text-decoration:none}

A:active: {text-decoration:underline}

CSS滤镜：就是通过一些代码丰富了样式（简单了解）

Div和span的不同：

Div:行级区域，将内容放到一个矩形区块中，会影响布局

Span:块级区域，只是把一段内容定义成一个整体进行操作，不影响布局显示