什么是CSS

CSS（Cascading Style Sheet）层叠样式表

CSS3在CSS2的基础上增加了很多强大的新功能，目前主流浏览器都支持CSS3大部分功能。为了更好的向前兼容，不同的浏览器可能需要不同的前缀。

前缀	浏览器
-webkit	chrome和Safari
-moz	Firefox
-ms	IE
-o	opera

CSS能做什么

CSS把很多以前需要使用图片和脚本实现的效果、甚至动画效果，只需要短短几行代码就能搞定。

简化了前端开发人员的设计过程，更灵活的页面布局，更快的页面加载速度。

可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的代码，那么整个站点的所有页面都会随之发生变动。

可以支持多种设备。

目的：将表现与结构分离。

CSS语法结构

CSS语法由三部分构成：选择符、属性和值

属性是你希望设置的样式属性，每个属性有一个值，属性和值用冒号分开。

Selector{Property:Value}

例：

<style type="text/css">

    body{

        background-color:#cccccc;

    }

</style>

如何引入CSS

三种引入方式：

1.行内引用

行内引用是指将CSS样式编码直接写在HTML标签中的style属性里。

这种方式的引入CSS，不需要写选择器。

<body style="background-color:#cccccc;"> 

<h1 style="font-size:12px;color:#ff0000;">这是一个标题</h1>

2.页面引用

页面引用作为页面中的一部分，由<style></style>标签定位在<head></head>中。

<head>

    <style type="text/css">

        body {

            background-color:#cccccc;

         }

    </style>

</head>

3.外部样式表

外部样式表是CSS应用中最好的一种形式，它将CSS样式代码单独放在一个外部文件中，再由页面进行调用。

style.css:

body {

    background-color:#cccccc;

    }

index.html:

<head>

　　<link rel="stylesheet" type="text/css" href="style.css" />

</head>

CSS优先级

三种引入方式的优先级对比

优先级依次是：就近原则

行内引用>页内引用>外部引用

CSS代码注释

CSS代码注释，以/*开始，*/结束。

如：

/* 公共样式*/

body { margin:0px; padding:0px;}

/*导航样式开始*/

#nav {

      ……

    }

/*导航样式结束*/

选择符

1.通配选择符

*号表示所有的对象

所谓通配选择符，就是可以使用模糊指定的方式来对对象进行选择，指定样式。

* {

　　color:blue;

　　margin:0;

　　padding:0;

}

2.元素选择符

所谓元素选择符，指以网页已有的标签作为名称的选择符。

body {}

h1 {}

p {}

3.群组选择符

除了可以对单个标签进行样式指定外，还可以对一组标签进行相同的样式定义。

h1,h2, h3, p {
　　font-size:12px;

　　font-family:arial;

}

使用逗号对选择符进行分隔。对页面中需要使用相同样式的地方，只需写一次样式。

巴特西

8.8 CSS知识点1