css基本概念与语法

CSS

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

是什么

1. 样式表 所谓样式就是我们看到的HTML长什么样子，比如你我他都是人，人就可以称为我们的结构，但是大家头发有长短，肤色有黑白，相貌有美丑，这就是外观，也就是样式，CSS用来描述HTML长什么样子

2. 层叠 层叠指的是样式的优先级，当作用于相同元素的CSS规则产生冲突时以优先级高的为准

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

意义

把页面的结构和样式分离

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

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

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

1. 文件的可读性加强
2. 文件的结构更加灵活
3. 作者和读者可以自己决定文件的显示
4. 文件的结构简化了

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

引入方式

CSS的引入一般有三种

外部资源引入

style标签

 
 
内联style属性
 
 
123

 
 
分辨率和像素
 
 
像素即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;

 
 
 
 
 
可以缩写为一句：
 
 
  background: #F00 url(background.gif) no-repeat fixed 0 0;
 
 
 
  
 
文字缩写
 
 font-weight: bold;
 font-size: 12px;
 line-height: 1.8em;
 font-family: Arial;

 
可以缩写为一句： 但文字缩写一定要具有字号、字体样式这两个属性。行高用/分隔
 
  font:bold 12px/1.8em Arial;
 
 
 
 
 
书写风格
 
 
 
  
语法不区分大小写，但建议统一使用小写
 
  
不使用内联的style属性定义样式
 
  
id和class使用有意义的单词，分隔符建议使用- 
 
  
有可能就是用缩写
 
  
属性值是0的省略单位
 
  
块内容缩进
 
  
属性名冒号后面添加一个空格
 
 
 
 
参考
 
 
 
  
CSS 编码规范-kissy
 
  
CSS编码规范