CSS 层叠式样式表

css cascading style sheets 1996 电脑586
层叠样式表 自己也是文本 {} 
工做环境 任何文本编辑器 Dreamweaver webstorm
显示环境-浏览器

优点
避免使用没必要要的HTML元素 减小代码量
缩短更新和维护的时间
作出HTML实现不了的特效

新标签
<div> <span>
div ：是用来为HTML文档内大块(block-level)的内容提供结构和背景元素
      Div的起始标签和结束标签之间的全部内容都是用来构成这个块的，中文咱们把它称做  
     “层”
      双标记 <div>内容1</div><div>内容2</div> 显示换行 后跟换行符
  
span标签：是被用来组合文档中的行内元素。span没有固定的格式表现。当对它应用样式时，它
         才会产生视觉上的变化
         <span>内容3</span> <span>内容4</span> 行级标签 同一行
理解：容器标签 div标签主要是块 早期是Table布局，如今都是Div+CSS布局 用样式表控制内  
      容的位置
  
CSS规则 .placeholder {color:#999;}

选择符(selector)：规则中用于选择文档中要应用的样式的那些元素，该元素能够是（X）HTML
                 的某个标签  （如本例中<h2>标签被选中），也能够是页面中指定的class
                 或id属性限定的标记
声明：声明包含在一对大括号"{}"内，用于告诉浏览器如何渲染页面中与选择相匹配的对象。声
     明内部由属性及其属性值组成，并用冒号隔开，以分号结束，声明的形式能够是一个或者  
    多个属性的组合
属性(property):属性是由官方CSS规范约定的，而不是自定义的，除个别浏览器私有属性之外
属性值(value)：属性值放置在属性名和冒号后面，具体内容跟随属性的类别而呈现不一样形式，  
             通常包括数值 单位以及关键字
  
CSS注释
  结构性注释 /*header
  提示性注释 /* 12345 */

样式表加载总结
1.内嵌样式-直接在页面的标签里加(不经常使用，用于局部修改或者单独增长）
 <div style="boder:1px red solid">测试信息</div>

2.内部样式表-在head部分加入 （即声明，本页面当中调用）
 <style type="text/css">div{margin:0;padding:0;border:1px red solid;}</style>
  写成类的形式来调用 
  head
<style type="text/css"> .font_rea{font-size:30px}</style>   
  body
 <div class="font_read">调用</div>

3.链入外部样式表--在head部分加入（经常使用）
  <link rel="stylesheet" type="text/css" href="my.css" media="all"/>,引入外部css
文件
  宋体12px 使用的最小字体
在CSS样式表中定义类 
html头部声明<link href="" type="text/css" rel="stylesheet">
    body中在<div class=""></div>来引用
4。导入外部样式表（不经常使用）
  -在head头部加入<style type="text/css">@import(my.css);</style>

样式表优先级
  内嵌样式>内部样式表>导入外部样式表

链入外部样式表与内部样式表之间的优先级取决于所处位置的前后，最后定义的优先级最高

link和@import区别
使用link连接的css是客户端浏览你的网页时先将外部的css文件加载到网页当中，而后再进行编
译显示，因此这种状况下显示不出来的网页跟咱们预期的效果是同样，即便一个页面link多个
css文件，网速再慢也是同样的效果
使用@import导入的CSS就不一样了，客户端在浏览网页时是先将html的结构呈现出来，再把外部
的CSS文件加载到网页当中，固然最终的效果也是跟前者同样，只是当网速较慢时会先显示没有
CSS统一布局是的html网页，这样就会给阅读者很很差的感受。这也是如今大部分网站的CSS都采
用连接方式的主要缘由。