css基本概念与语法

CSS

CSS全称是 Cascading Style Sheets，翻译过来就是层叠样式表

是什么

样式表所谓样式就是我们看到的HTML长什么样子，比如你我他都是人，人就可以称为我们的结构，但是大家头发有长短，肤色有黑白，相貌有美丑，这就是外观，也就是样式，CSS用来描述HTML长什么样子
层叠层叠指的是样式的优先级，当作用于相同元素的CSS规则产生冲突时以优先级高的为准

CSS层叠是指CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的CSS选择器所指定的属性，一般也被描述为权重高的覆盖权重低的，因此也称作层叠。每个CSS选择器都会有一个权重（行内1000，id100，class10，tag1、可以这样认为），当两个选择器同时配置同一元素的同一属性时（比如一个设置color：red，另一个color：black），就会产生冲突，而解决冲突的方案就是CSS选择器的权重，权重高的来覆盖权重低的。

意义

把页面的结构和样式分离

以前的页面HTML和CSS是没有区分的，都是HTML，这样的后果是有甚多标签并没有任何语义，只是表示特殊的样式，同时标签为了样式的规定的属性层出不穷，这就是内容和表现的杂糅

在新式的页面中HTML只表示结构和内容，样式部分交给CSS控制，做到了内容和表现分离，方便维护

网页的读者和作者都可以使用CSS来决定文件的颜色、字体、排版等显示特性。CSS最主要的目的是将文件的内容与显示分隔开来。这有许多好处：

文件的可读性加强

文件的结构更加灵活

作者和读者可以自己决定文件的显示

文件的结构简化了

另外，在HTML中：一个整个网站或其中一部分网页的显示信息被集中在一个地方，要改变它们很方便不同的读者可以有不同的样式，比如有的读者需要字体比较大 HTML文件本身的范围变小了，它的结构简单了，它不需要包含显示的信息 CSS还可以控制其他参数，例如声音（假如浏览器有阅读功能的话）或给视障者用的感受装置

引入方式

CSS的引入一般有三种

外部资源引入

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

style标签

<style type="text/css">

div{ color: red; font-size:12px; } </style>

内联style属性

<div style="color:red; font-size:12px;">123</div>

分辨率和像素

像素即px，是屏幕中最小的点。像素不是物理长度，在不同分辨率的设备上物理长度不同

    分辨率 = 屏幕X轴上像素值 * Y轴上的像素值

屏幕如果是1024×768，也就是说水平方向上有1024个像素点，垂直方向上有768个像素点

在同一台设备上，保证可视画面尺寸不变的情况下，像素点的大小，会随着分辨率的调整而改变。分辨率降低，像素点就变大，图片质量越低。分辨率降高，像素点就变小，图片也越清晰

单位

px：像素
pt：物理单位，1/72英寸，几乎没人用了
em：即％，是相对单位，最初是指字母M的宽度，故名em，按照默认的字体大小16px，1em = 16px，0.5em = 8px

Html 字体大小单位 px em pt

继承特性

CSS的一个主要特征就是继承，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中

首先，有些属性是不能继承的。这没有任何原因，只是因为它就是这么设置的。举个例子来说：border属性，大家都知道，border属性是用来设置元素的边框的，它就没有继承性。多数边框类属性，比如象Padding（补白），Margin（边界），背景和边框的属性都是不能继承的

CSS样式表继承详解

CSS语法

CSS由多组规则组成，每个规则由“选择器”（selector）、“属性”（property）和“值”（value）组成：

选择器（Selector）:多个选择器可以半角逗号（,）隔开。
属性（property）:CSS1、CSS2、CSS3规定了许多的属性，目的在控制选择器的样式。
值（value）:指属性接受的设置值，多个关键字时大都以空格隔开。

属性和值之间用半角冒号：隔开，属性和值合称为“特性”。多个特性间用；隔开，前后用{}括起来

对于重复属性设置，优先级高的覆盖优先级低的，相同的优先级后面的覆盖前面的

前缀

有些新式的CSS样式并不是所有的浏览器都支持，一些浏览器率先支持了，或者不是所有的浏览器支持情况都一样，我们需要前缀写法

* Firefox: -moz-
* Safari/Chrome: -webkit-
* Opera: -o-
* IE: -ms-

书写顺序要注意，先写私有的CSS3属性，再写标准的CSS3属性，这样以后不需要前缀了，能保证我们使用标准的

    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);

当一个属性成为标准，并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候。

注释语句

/*

color: red;
font-size: 12px;

*/

缩写

使用CSS缩写可以减少CSS文件的大小，并使其更为易读[5]，例如：

颜色缩写：16进制的色彩值，如果每两位的值相同，可以进行缩写，例如：

＃000000可以缩写为#000，#336699可以缩写为#369;
盒尺寸缩写：Property: Value1 Value2 Value3 Value4；四个值依次表示Top，Right，Bottom，Left

边框缩写

边框的属性如下：

  border-width: 1px;
  border-style: solid;
  border-color: #000;

可以缩写为一句：

  border: 1px solid #000;

背景缩写

background-color: #F00;
background-image: url(background.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;