JOE个人网站

JOE个人网站，不仅仅是一个网站，更像是一个展现自我的平台，致力于让朋友们都可以
有所感触，有所收获。

CSS基本语法

2017-12-19 10:55:09 
1、CSS：Cascading Style Sheets的英文缩写（层叠样式表）,用来美化网站页面，W3C的CSS主页：http://www.w3.org/Style/CSS/

2、CSS定义分别由：选择符、属性、属性取值组成；
  格式：selector{property:value}

3、CSS中的单位
  em:
  px:
  %:
  其他：pt,pc,cm,mm,in

4、CSS选择符
  HTML选择符 - HTML标签，用来改变一个指定标签的样式，任何HTML元素都可以是一个CSS的选择符；
  语法：HTML标签名｛属性：值｝
  如: p {color:red;}
  类选择符 - 类选择符名称的定义方式是 “.”符号，英文“dot”，后加类名称 classname；
  语法：标记名.类名｛属性：值｝或.类名｛属性：值｝
  如： .boss {color:yellow;}
  ID选择符 - ID选择符名称的定义方式是，#符号，英文“pound”，后加ID名称idname；
    - ID属性的特殊之处在于，一个文档中只能有一个元素使用一个ID（id名字唯一）；
  语法：ID名称｛属性：值｝
  如： #id {color:yellow;}
  关联选择符 - 也称包含选择符，可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义
  语法：选择符1 选择符2 ... ... ｛属性：值｝
  如：table tr {color:red;}
  组合选择符 - 也叫选择符组，可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义；
  语法：选择符1，选择符2，...｛属性：值｝
  如：h1,h2,h3 {color:blue;}
  伪类选择符 - 指对同一个HTML元素不同状态折一种定义方式。例如对于<a>标签的正常状态、访问状态、选中状态、光标移到超链接文本上的状态，就可以用伪元素选择器来定义；
  语法：标签：伪元素｛属性：值｝
   如：
    a:hover {color:yellow;text-decoration:underline;} //鼠标经过；
    a:link {text-decoration:none;} //正常链接状态
    a:visited {color:blue;} //访问过的状态
    a:active {color:red}  //点击时的状态

5、CSS的引用方法
  -- 内联样式表 : 就是把CSS样式直接作用在HTML标签中；
    特点：内联的样式比其他方法更加灵活，但需要和展示的内容混淆在一起，内联样式会失去样式表的优点；
    如：<p style="line-height:50px;color:red;">aaa</p>
  -- 嵌入一个样式表 : 使用style标签直接把CSS文件中的内容加载到HTML文档内部的<head>标签里；
    特点：适合用于一个HTML文档具有独一无二的样式；
    如：
      <style type="text/css">
        * {margin:0;padding:0}
        #id {color:red;width:100px;}
      </style>
  -- 引用外部样式表 : CSS外部引用使用了外部的CSS文件；
    HTML方式 - <link rel="stylesheet" type="text/css" href="./ab.css" />
    CSS方式 - @import

6、CSS执行优先级别
  调用上：就近原则
  使用上：越特殊越优先
  选择符：id>class>html标签