css基础

1. css介绍
   层叠样式表（css），由w3c定义和维护的标准。
   用于美化网页。做到结构（html）和样式（css）分离

2. 基本语法
   选择器 ｛
   属性： 属性值；
   ｝
   在css里的属性，都是用小写
   在js里的属性，一般都是驼峰

3. 引用方式
   行内样式

   内部样式

   外部样式

   // 先创建一个css文件，再用link标签引入文件
   // link:css + tab  快捷键
   

   引入外部样式

   // 先创建一个css文件./custom.css，再在style标签中用import导入这个样式文件。
   @import custom.css
   @import url;
   @import url list-of-media-queries;
   @import url supports( supports-query );
   @import url supports( supports-query ) list-of-media-queries;
   @import 'custom.css';
   @import url("chrome://communicator/skin/");
   @import url("fineprint.css") print;
   @import url("bluish.css") speech;
   @import "common.css" screen;
   @import url('landscape.css') screen and (orientation:landscape);

   在html中引入外部的CSS有2种方式，link标签和@import，两者之间的区别：
   1、从属关系区别
   @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
   2、加载顺序区别
   加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
   3、兼容性区别
   @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
   4、DOM可控性区别
   可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

4. css选择器分类：
   1） *：匹配html中所有元素,性能较差，开发时不建议使用

   * {
   color: red;
   }

   2）标签选择器：用来匹配标签span\div\hr\p...

   span {
   display:block;
   }

   3) 类选择器，用来选择class标签

   // style
   .wrapper {
   color:red;
   }
   // html
   <div class="wrapper">
   only you
   </div>
   </div>

   4) id选择器：用来选择id命名的标签，id在一个页面里是唯一的。

   // style
   #name {
   color: red;
   }
   // html
   <div id="name">
   only one name
   </div>
   </div>

   5) 派生选择器：根据上下文作出选择的标签
   span li 所有后代元素
   ...

6） 伪类选择器
7） 伪元素选择器

5. 选择器分组：
   ,为平级分组，h1,h2,h3
6. 选择器集成：
   子元素可继承父元素的样式，也可以改写覆盖自己本身。反之不可以。
   .group1.subli 同级元素
   .group1>.subli 直接子元素
   .group1 .subli group1下的所有subli
   。。。
7. 样式优先级
   外部样式<内部昂视<内联样式
   !important 10000
   内联样式 1000
   ID选择器 100
   类、伪类 10
   标签选择器 1
8. css字体
   1）font-size:字号
   ｛number+px｝
   {number + %} 基于父对象中字体的尺寸大小
   2) font-family：字体
   name:字体名称，按优先顺序排列，以逗号隔开。如果字体名称包括空格，则应使用引号括起。

   p {
   font-family: Courier,"Courier New",monospace
   }

   3) font-style：样式
   normal：默认值
   italic:斜体
   oblique：倾斜字体
   4) font-weight：加粗
   normal：默认值
   bold：粗体
   bolder： 比bold更粗
   lighter：比normal细
   ｛100-900｝：400等于normal，700等于bold
   5) line-height：行高
   normal：默认值
   ｛number+px｝：指定行高为长度像素
   ｛number｝：指定行高为字体大小的倍数
   6) color：文字的颜色
   name：颜色名称指定color red
   rgb：指定颜色名为rgb值 rgb（100，200，50，0.5）
   颜色16进制： 指定颜色为16进制 #234567
   7) text-decoration：文字的修饰
   normal：默认值
   underline：下划线
   line-through:管穿线
   overline：上划线

   p {
   text-decoration: underline
   }

   8) text-align：文字的对齐方式
   left:默认值，左对齐
   center: 居中对齐
   right：右对齐
   9) vertical-align:
   middle
   切记 vertical-align 只对 table-cell 以及 inline-element 起作用，vertical-align 的值是相对于其父元素的，父元素必须是行内元素。
   对于一行文字来讲，该属性的值是相对于行高（line-height）的。
   对于 table-cell，该属性的值是相对于表格的行高的。
   vertical-align 对于块级元素不起作用，例如我们无法用它去垂直居中一个div中的p元素，因此这个方法通常不是垂直居中的最优选择。
   9) text-transform: 文本字体的大小写
   none：默认值
   capitalize：每个单词首字母大写
   uppercase：转成大写
   lowercase:转成小写
   10） text-indent：文本字体的首行缩进
   {number + px}
   {number + em}
   Tip：
   font可以使用复合属性
   font:font-style font-variant font-weight font-size/line-height font-family;
   注意：1）属性值的位置顺序不可变
   2）除了font-size和font-family之外，其他任何一个属性值都可以省略。